Merge remote-tracking branch 'origin/main' into feat/trigger-saas

web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/card-view.tsx

@@ -1,6 +1,6 @@
 'use client'
 import type { FC } from 'react'
-import React, { useMemo } from 'react'
+import React, { useCallback, useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useContext } from 'use-context-selector'
 import AppCard from '@/app/components/app/overview/app-card'
@@ -24,6 +24,7 @@ import { useStore as useAppStore } from '@/app/components/app/store'
 import { useAppWorkflow } from '@/service/use-workflow'
 import type { BlockEnum } from '@/app/components/workflow/types'
 import { isTriggerNode } from '@/app/components/workflow/types'
+import { useDocLink } from '@/context/i18n'
 
 export type ICardViewProps = {
   appId: string
@@ -33,6 +34,7 @@ export type ICardViewProps = {
 
 const CardView: FC<ICardViewProps> = ({ appId, isInPanel, className }) => {
   const { t } = useTranslation()
+  const docLink = useDocLink()
   const { notify } = useContext(ToastContext)
   const appDetail = useAppStore(state => state.appDetail)
   const setAppDetail = useAppStore(state => state.setAppDetail)
@@ -53,6 +55,35 @@ const CardView: FC<ICardViewProps> = ({ appId, isInPanel, className }) => {
     })
   }, [isWorkflowApp, currentWorkflow])
   const shouldRenderAppCards = !isWorkflowApp || hasTriggerNode === false
+  const disableAppCards = !shouldRenderAppCards
+
+  const triggerDocUrl = docLink('/guides/workflow/node/start')
+  const buildTriggerModeMessage = useCallback((featureName: string) => (
+    <div className='flex flex-col gap-1'>
+      <div className='text-xs text-text-secondary'>
+        {t('appOverview.overview.disableTooltip.triggerMode', { feature: featureName })}
+      </div>
+      <div
+        className='cursor-pointer text-xs font-medium text-text-accent hover:underline'
+        onClick={(event) => {
+          event.stopPropagation()
+          window.open(triggerDocUrl, '_blank')
+        }}
+      >
+        {t('appOverview.overview.appInfo.enableTooltip.learnMore')}
+      </div>
+    </div>
+  ), [t, triggerDocUrl])
+
+  const disableWebAppTooltip = disableAppCards
+    ? buildTriggerModeMessage(t('appOverview.overview.appInfo.title'))
+    : null
+  const disableApiTooltip = disableAppCards
+    ? buildTriggerModeMessage(t('appOverview.overview.apiInfo.title'))
+    : null
+  const disableMcpTooltip = disableAppCards
+    ? buildTriggerModeMessage(t('tools.mcp.server.title'))
+    : null
 
   const updateAppDetail = async () => {
     try {
@@ -124,39 +155,48 @@ const CardView: FC<ICardViewProps> = ({ appId, isInPanel, className }) => {
   if (!appDetail)
     return <Loading />
 
-  return (
-    <div className={className || 'mb-6 grid w-full grid-cols-1 gap-6 xl:grid-cols-2'}>
-      {
-        shouldRenderAppCards && (
-          <>
-            <AppCard
-              appInfo={appDetail}
-              cardType="webapp"
-              isInPanel={isInPanel}
-              onChangeStatus={onChangeSiteStatus}
-              onGenerateCode={onGenerateCode}
-              onSaveSiteConfig={onSaveSiteConfig}
-            />
-            <AppCard
-              cardType="api"
-              appInfo={appDetail}
-              isInPanel={isInPanel}
-              onChangeStatus={onChangeApiStatus}
-            />
-            {showMCPCard && (
-              <MCPServiceCard
-                appInfo={appDetail}
-              />
-            )}
-          </>
-        )
-      }
-      {showTriggerCard && (
-        <TriggerCard
+  const appCards = (
+    <>
+      <AppCard
+        appInfo={appDetail}
+        cardType="webapp"
+        isInPanel={isInPanel}
+        triggerModeDisabled={disableAppCards}
+        triggerModeMessage={disableWebAppTooltip}
+        onChangeStatus={onChangeSiteStatus}
+        onGenerateCode={onGenerateCode}
+        onSaveSiteConfig={onSaveSiteConfig}
+      />
+      <AppCard
+        cardType="api"
+        appInfo={appDetail}
+        isInPanel={isInPanel}
+        triggerModeDisabled={disableAppCards}
+        triggerModeMessage={disableApiTooltip}
+        onChangeStatus={onChangeApiStatus}
+      />
+      {showMCPCard && (
+        <MCPServiceCard
           appInfo={appDetail}
-          onToggleResult={handleCallbackResult}
+          triggerModeDisabled={disableAppCards}
+          triggerModeMessage={disableMcpTooltip}
         />
       )}
+    </>
+  )
+
+  const triggerCardNode = showTriggerCard ? (
+    <TriggerCard
+      appInfo={appDetail}
+      onToggleResult={handleCallbackResult}
+    />
+  ) : null
+
+  return (
+    <div className={className || 'mb-6 grid w-full grid-cols-1 gap-6 xl:grid-cols-2'}>
+      {disableAppCards && triggerCardNode}
+      {appCards}
+      {!disableAppCards && triggerCardNode}
     </div>
   )
 }

web/app/components/app/overview/app-card.tsx

@@ -51,6 +51,8 @@ export type IAppCardProps = {
   isInPanel?: boolean
   cardType?: 'api' | 'webapp'
   customBgColor?: string
+  triggerModeDisabled?: boolean // true when Trigger Node mode needs UI locked to avoid conflicting actions
+  triggerModeMessage?: React.ReactNode // contextual copy explaining why the card is disabled in trigger mode
   onChangeStatus: (val: boolean) => Promise<void>
   onSaveSiteConfig?: (params: ConfigParams) => Promise<void>
   onGenerateCode?: () => Promise<void>
@@ -61,6 +63,8 @@ function AppCard({
   isInPanel,
   cardType = 'webapp',
   customBgColor,
+  triggerModeDisabled = false,
+  triggerModeMessage = '',
   onChangeStatus,
   onSaveSiteConfig,
   onGenerateCode,
@@ -111,7 +115,7 @@ function AppCard({
   const hasStartNode = currentWorkflow?.graph?.nodes?.some(node => node.data.type === BlockEnum.Start)
   const missingStartNode = isWorkflowApp && !hasStartNode
   const hasInsufficientPermissions = isApp ? !isCurrentWorkspaceEditor : !isCurrentWorkspaceManager
-  const toggleDisabled = hasInsufficientPermissions || appUnpublished || missingStartNode
+  const toggleDisabled = hasInsufficientPermissions || appUnpublished || missingStartNode || triggerModeDisabled
   const runningStatus = (appUnpublished || missingStartNode) ? false : (isApp ? appInfo.enable_site : appInfo.enable_api)
   const isMinimalState = appUnpublished || missingStartNode
   const { app_base_url, access_token } = appInfo.site ?? {}
@@ -189,7 +193,20 @@ function AppCard({
       className={
         `${isInPanel ? 'border-l-[0.5px] border-t' : 'border-[0.5px] shadow-xs'} w-full max-w-full rounded-xl border-effects-highlight ${className ?? ''} ${isMinimalState ? 'h-12' : ''}`}
     >
-      <div className={`${customBgColor ?? 'bg-background-default'} rounded-xl`}>
+      <div className={`${customBgColor ?? 'bg-background-default'} relative rounded-xl ${triggerModeDisabled ? 'opacity-60' : ''}`}>
+        {triggerModeDisabled && (
+          triggerModeMessage
+            ? (
+              <Tooltip
+                popupContent={triggerModeMessage}
+                popupClassName="max-w-64 rounded-xl bg-components-panel-bg px-3 py-2 text-xs text-text-secondary shadow-lg"
+                position="right"
+              >
+                <div className='absolute inset-0 z-10 cursor-not-allowed rounded-xl' aria-hidden="true"></div>
+              </Tooltip>
+            )
+            : <div className='absolute inset-0 z-10 cursor-not-allowed rounded-xl' aria-hidden="true"></div>
+        )}
         <div className={`flex w-full flex-col items-start justify-center gap-3 self-stretch p-3 ${isMinimalState ? 'border-0' : 'border-b-[0.5px] border-divider-subtle'}`}>
           <div className='flex w-full items-center gap-3 self-stretch'>
             <AppBasic
@@ -214,18 +231,23 @@ function AppCard({
             </div>
             <Tooltip
               popupContent={
-                toggleDisabled && (appUnpublished || missingStartNode) ? (
-                  <>
-                    <div className="mb-1 text-xs font-normal text-text-secondary">
-                      {t('appOverview.overview.appInfo.enableTooltip.description')}
-                    </div>
-                    <div
-                      className="cursor-pointer text-xs font-normal text-text-accent hover:underline"
-                      onClick={() => window.open(docLink('/guides/workflow/node/user-input'), '_blank')}
-                    >
-                      {t('appOverview.overview.appInfo.enableTooltip.learnMore')}
-                    </div>
-                  </>
+                toggleDisabled ? (
+                  triggerModeDisabled && triggerModeMessage
+                    ? triggerModeMessage
+                    : (appUnpublished || missingStartNode) ? (
+                      <>
+                        <div className="mb-1 text-xs font-normal text-text-secondary">
+                          {t('appOverview.overview.appInfo.enableTooltip.description')}
+                        </div>
+                        <div
+                          className="cursor-pointer text-xs font-normal text-text-accent hover:underline"
+                          onClick={() => window.open(docLink('/guides/workflow/node/user-input'), '_blank')}
+                        >
+                          {t('appOverview.overview.appInfo.enableTooltip.learnMore')}
+                        </div>
+                      </>
+                    )
+                      : ''
                 ) : ''
               }
               position="right"
@@ -329,9 +351,11 @@ function AppCard({
             {!isApp && <SecretKeyButton appId={appInfo.id} />}
             {OPERATIONS_MAP[cardType].map((op) => {
               const disabled
-                = op.opName === t('appOverview.overview.appInfo.settings.entry')
-                  ? false
-                  : !runningStatus
+                = triggerModeDisabled
+                  ? true
+                  : op.opName === t('appOverview.overview.appInfo.settings.entry')
+                    ? false
+                    : !runningStatus
               return (
                 <Button
                   className="mr-1 min-w-[88px]"

web/app/components/tools/mcp/mcp-service-card.tsx

@@ -30,10 +30,14 @@ import { useDocLink } from '@/context/i18n'
 
 export type IAppCardProps = {
   appInfo: AppDetailResponse & Partial<AppSSO>
+  triggerModeDisabled?: boolean // align with Trigger Node vs User Input exclusivity
+  triggerModeMessage?: React.ReactNode // display-only message explaining the trigger restriction
 }
 
 function MCPServiceCard({
   appInfo,
+  triggerModeDisabled = false,
+  triggerModeMessage = '',
 }: IAppCardProps) {
   const { t } = useTranslation()
   const docLink = useDocLink()
@@ -79,7 +83,7 @@ function MCPServiceCard({
   const hasStartNode = currentWorkflow?.graph?.nodes?.some(node => node.data.type === BlockEnum.Start)
   const missingStartNode = isWorkflowApp && !hasStartNode
   const hasInsufficientPermissions = !isCurrentWorkspaceEditor
-  const toggleDisabled = hasInsufficientPermissions || appUnpublished || missingStartNode
+  const toggleDisabled = hasInsufficientPermissions || appUnpublished || missingStartNode || triggerModeDisabled
   const isMinimalState = appUnpublished || missingStartNode
 
   const [activated, setActivated] = useState(serverActivated)
@@ -144,7 +148,18 @@ function MCPServiceCard({
   return (
     <>
       <div className={cn('w-full max-w-full rounded-xl border-l-[0.5px] border-t border-effects-highlight', isMinimalState && 'h-12')}>
-        <div className='rounded-xl bg-background-default'>
+        <div className={cn('relative rounded-xl bg-background-default', triggerModeDisabled && 'opacity-60')}>
+          {triggerModeDisabled && (
+            triggerModeMessage ? (
+              <Tooltip
+                popupContent={triggerModeMessage}
+                popupClassName="max-w-64 rounded-xl bg-components-panel-bg px-3 py-2 text-xs text-text-secondary shadow-lg"
+                position="right"
+              >
+                <div className='absolute inset-0 z-10 cursor-not-allowed rounded-xl' aria-hidden="true"></div>
+              </Tooltip>
+            ) : <div className='absolute inset-0 z-10 cursor-not-allowed rounded-xl' aria-hidden="true"></div>
+          )}
           <div className={cn('flex w-full flex-col items-start justify-center gap-3 self-stretch p-3', isMinimalState ? 'border-0' : 'border-b-[0.5px] border-divider-subtle')}>
             <div className='flex w-full items-center gap-3 self-stretch'>
               <div className='flex grow items-center'>
@@ -182,7 +197,7 @@ function MCPServiceCard({
                           {t('appOverview.overview.appInfo.enableTooltip.learnMore')}
                         </div>
                       </>
-                    ) : ''
+                    ) : triggerModeMessage || ''
                   ) : ''
                 }
                 position="right"

web/i18n/en-US/app-overview.ts

@@ -138,6 +138,9 @@ const translation = {
       running: 'In Service',
       disable: 'Disabled',
     },
+    disableTooltip: {
+      triggerMode: 'The {{feature}} feature is not supported in Trigger Node mode.',
+    },
   },
   analysis: {
     title: 'Analysis',

web/i18n/ja-JP/app-overview.ts

@@ -138,6 +138,9 @@ const translation = {
       running: '稼働中',
       disable: '無効',
     },
+    disableTooltip: {
+      triggerMode: 'トリガーノードモードでは{{feature}}機能を使用できません。',
+    },
   },
   analysis: {
     title: '分析',

web/i18n/zh-Hans/app-overview.ts

@@ -138,6 +138,9 @@ const translation = {
       running: '运行中',
       disable: '已停用',
     },
+    disableTooltip: {
+      triggerMode: '触发节点模式下不支持{{feature}}功能。',
+    },
   },
   analysis: {
     title: '分析',