From 5781f45840a5dc2bc7d8a50da7fdda0db09a2517 Mon Sep 17 00:00:00 2001
From: JzoNg <jzongcode@gmail.com>
Date: Mon, 23 Jun 2025 13:42:59 +0800
Subject: [PATCH] add confirm of tool list update

---
 .../components/tools/mcp/detail/content.tsx    | 18 ++++++++++++++++--
 1 file changed, 16 insertions(+), 2 deletions(-)

diff --git a/web/app/components/tools/mcp/detail/content.tsx b/web/app/components/tools/mcp/detail/content.tsx
index 366b4d8b85..7d6525c104 100644
--- a/web/app/components/tools/mcp/detail/content.tsx
+++ b/web/app/components/tools/mcp/detail/content.tsx
@@ -54,13 +54,19 @@ const MCPDetailContent: FC<Props> = ({
   const { mutateAsync: authorizeMcp, isPending: isAuthorizing } = useAuthorizeMCP()
   const toolList = data?.tools || []
 
+  const [isShowUpdateConfirm, {
+    setTrue: showUpdateConfirm,
+    setFalse: hideUpdateConfirm,
+  }] = useBoolean(false)
+
   const handleUpdateTools = useCallback(async () => {
+    hideUpdateConfirm()
     if (!detail)
       return
     await updateTools(detail.id)
     invalidateMCPTools(detail.id)
     onUpdate()
-  }, [detail, invalidateMCPTools, onUpdate, updateTools])
+  }, [detail, hideUpdateConfirm, invalidateMCPTools, onUpdate, updateTools])
 
   const { mutate: updateMCP } = useUpdateMCP({
     onSuccess: onUpdate,
@@ -231,7 +237,7 @@ const MCPDetailContent: FC<Props> = ({
                 {toolList.length === 1 && <div className='system-sm-semibold-uppercase text-text-secondary'>{t('tools.mcp.onlyTool')}</div>}
               </div>
               <div>
-                <Button size='small' onClick={handleUpdateTools}>
+                <Button size='small' onClick={showUpdateConfirm}>
                   <RiLoopLeftLine className='mr-1 h-3.5 w-3.5' />
                   {t('tools.mcp.update')}
                 </Button>
@@ -279,6 +285,14 @@ const MCPDetailContent: FC<Props> = ({
           isDisabled={deleting}
         />
       )}
+      {isShowUpdateConfirm && (
+        <Confirm
+          isShow
+          title={t('tools.mcp.update')}
+          onCancel={hideUpdateConfirm}
+          onConfirm={handleUpdateTools}
+        />
+      )}
     </>
   )
 }