From 1f100ac03845ccd2f822bb8a327d967796f9dbd6 Mon Sep 17 00:00:00 2001
From: JzoNg <jzongcode@gmail.com>
Date: Mon, 26 May 2025 17:26:28 +0800
Subject: [PATCH] add disable state

---
 web/app/components/tools/mcp/mcp-service-card.tsx | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/web/app/components/tools/mcp/mcp-service-card.tsx b/web/app/components/tools/mcp/mcp-service-card.tsx
index c036a769f0..508cccfea9 100644
--- a/web/app/components/tools/mcp/mcp-service-card.tsx
+++ b/web/app/components/tools/mcp/mcp-service-card.tsx
@@ -39,7 +39,7 @@ function MCPServiceCard({
 
   const { data: currentWorkflow } = useAppWorkflow(appInfo.id)
 
-  const toggleDisabled = !isCurrentWorkspaceEditor
+  const toggleDisabled = !isCurrentWorkspaceEditor || !currentWorkflow?.graph
   const runningStatus = appInfo.enable_site // TODO
   const { app_base_url, access_token } = appInfo.site ?? {}
   const appMode = (appInfo.mode !== 'completion' && appInfo.mode !== 'workflow') ? 'chat' : appInfo.mode
@@ -59,9 +59,11 @@ function MCPServiceCard({
 
   const [showMCPServerModal, setShowMCPServerModal] = useState(false)
 
-  if (!currentWorkflow || !currentWorkflow.graph)
+  if (!currentWorkflow)
     return null
 
+  // TODO: show disabled state if workflow not published
+
   return (
     <>
       <div className={cn('w-full max-w-full rounded-xl border-l-[0.5px] border-t border-effects-highlight')}>
@@ -133,7 +135,7 @@ function MCPServiceCard({
             </div>
           </div>
           <div className='flex items-center gap-1 self-stretch p-3'>
-            <Button size='small' variant='ghost'>{t('tools.mcp.server.addDescription')}</Button>
+            <Button disabled={toggleDisabled} size='small' variant='ghost'>{t('tools.mcp.server.addDescription')}</Button>
           </div>
         </div>
       </div>