From 19b50aaa81fca4b767557a041c692784b7d3aac7 Mon Sep 17 00:00:00 2001
From: Joel <iamjoel007@gmail.com>
Date: Tue, 1 Jul 2025 15:04:29 +0800
Subject: [PATCH] feat: on edited reload auth

---
 .../components/tools/mcp/detail/content.tsx    | 17 +++++++----------
 .../tools/mcp/detail/provider-detail.tsx       |  6 +++---
 web/app/components/tools/mcp/index.tsx         | 16 +++++++++++-----
 web/app/components/tools/mcp/modal.tsx         |  6 ++++--
 web/app/components/tools/mcp/provider-card.tsx | 18 ++++++++----------
 5 files changed, 33 insertions(+), 30 deletions(-)

diff --git a/web/app/components/tools/mcp/detail/content.tsx b/web/app/components/tools/mcp/detail/content.tsx
index 347ea14248..3f927b990d 100644
--- a/web/app/components/tools/mcp/detail/content.tsx
+++ b/web/app/components/tools/mcp/detail/content.tsx
@@ -36,7 +36,7 @@ type Props = {
   detail: ToolWithProvider
   onUpdate: (isDelete?: boolean) => void
   onHide: () => void
-  isCreation: boolean
+  isTriggerAuthorize: boolean
   onFirstCreate: () => void
 }
 
@@ -44,7 +44,7 @@ const MCPDetailContent: FC<Props> = ({
   detail,
   onUpdate,
   onHide,
-  isCreation,
+  isTriggerAuthorize,
   onFirstCreate,
 }) => {
   const { t } = useTranslation()
@@ -70,12 +70,8 @@ const MCPDetailContent: FC<Props> = ({
     onUpdate()
   }, [detail, hideUpdateConfirm, invalidateMCPTools, onUpdate, updateTools])
 
-  const { mutate: updateMCP } = useUpdateMCP({
-    onSuccess: onUpdate,
-  })
-  const { mutate: deleteMCP } = useDeleteMCP({
-    onSuccess: onUpdate,
-  })
+  const { mutateAsync: updateMCP } = useUpdateMCP({})
+  const { mutateAsync: deleteMCP } = useDeleteMCP({})
 
   const [isShowUpdateModal, {
     setTrue: showUpdateModal,
@@ -126,8 +122,9 @@ const MCPDetailContent: FC<Props> = ({
     if ((res as any)?.result === 'success') {
       hideUpdateModal()
       onUpdate()
+      handleAuthorize()
     }
-  }, [detail, updateMCP, hideUpdateModal, onUpdate])
+  }, [detail, updateMCP, hideUpdateModal, onUpdate, handleAuthorize])
 
   const handleDelete = useCallback(async () => {
     if (!detail)
@@ -142,7 +139,7 @@ const MCPDetailContent: FC<Props> = ({
   }, [detail, showDeleting, deleteMCP, hideDeleting, hideDeleteConfirm, onUpdate])
 
   useEffect(() => {
-    if (isCreation)
+    if (isTriggerAuthorize)
       handleAuthorize()
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
diff --git a/web/app/components/tools/mcp/detail/provider-detail.tsx b/web/app/components/tools/mcp/detail/provider-detail.tsx
index 1ac4223fa4..56f26f8582 100644
--- a/web/app/components/tools/mcp/detail/provider-detail.tsx
+++ b/web/app/components/tools/mcp/detail/provider-detail.tsx
@@ -10,7 +10,7 @@ type Props = {
   detail?: ToolWithProvider
   onUpdate: () => void
   onHide: () => void
-  isCreation: boolean
+  isTriggerAuthorize: boolean
   onFirstCreate: () => void
 }
 
@@ -18,7 +18,7 @@ const MCPDetailPanel: FC<Props> = ({
   detail,
   onUpdate,
   onHide,
-  isCreation,
+  isTriggerAuthorize,
   onFirstCreate,
 }) => {
   const handleUpdate = (isDelete = false) => {
@@ -45,7 +45,7 @@ const MCPDetailPanel: FC<Props> = ({
           detail={detail}
           onHide={onHide}
           onUpdate={handleUpdate}
-          isCreation={isCreation}
+          isTriggerAuthorize={isTriggerAuthorize}
           onFirstCreate={onFirstCreate}
         />
       )}
diff --git a/web/app/components/tools/mcp/index.tsx b/web/app/components/tools/mcp/index.tsx
index 76735c0753..5a1e5cf3bf 100644
--- a/web/app/components/tools/mcp/index.tsx
+++ b/web/app/components/tools/mcp/index.tsx
@@ -35,7 +35,7 @@ const MCPList = ({
   searchText,
 }: Props) => {
   const { data: list = [] as ToolWithProvider[], refetch } = useAllToolProviders()
-  const [isCreation, setIsCreation] = useState<boolean>(false)
+  const [isTriggerAuthorize, setIsTriggerAuthorize] = useState<boolean>(false)
 
   const filteredList = useMemo(() => {
     return list.filter((collection) => {
@@ -54,9 +54,14 @@ const MCPList = ({
   const handleCreate = async (provider: ToolWithProvider) => {
     await refetch() // update list
     setCurrentProviderID(provider.id)
-    setIsCreation(true)
+    setIsTriggerAuthorize(true)
   }
 
+  const handleUpdate = async (providerID: string) => {
+    await refetch() // update list
+    setCurrentProviderID(providerID)
+    setIsTriggerAuthorize(true)
+  }
   return (
     <>
       <div
@@ -72,7 +77,8 @@ const MCPList = ({
             data={provider}
             currentProvider={currentProvider as ToolWithProvider}
             handleSelect={setCurrentProviderID}
-            onUpdate={refetch}
+            onUpdate={handleUpdate}
+            onDeleted={refetch}
           />
         ))}
         {!list.length && renderDefaultCard()}
@@ -82,8 +88,8 @@ const MCPList = ({
           detail={currentProvider as ToolWithProvider}
           onHide={() => setCurrentProviderID(undefined)}
           onUpdate={refetch}
-          isCreation={isCreation}
-          onFirstCreate={() => setIsCreation(false)}
+          isTriggerAuthorize={isTriggerAuthorize}
+          onFirstCreate={() => setIsTriggerAuthorize(false)}
         />
       )}
     </>
diff --git a/web/app/components/tools/mcp/modal.tsx b/web/app/components/tools/mcp/modal.tsx
index efe63ec722..7dd81c1f8e 100644
--- a/web/app/components/tools/mcp/modal.tsx
+++ b/web/app/components/tools/mcp/modal.tsx
@@ -55,6 +55,7 @@ const MCPModal = ({
   onHide,
 }: DuplicateAppModalProps) => {
   const { t } = useTranslation()
+  const isCreate = !data
 
   const originalServerUrl = data?.server_url
   const originalServerID = data?.server_identifier
@@ -119,7 +120,8 @@ const MCPModal = ({
       icon_background: appIcon.type === 'emoji' ? appIcon.background : undefined,
       server_identifier: serverIdentifier.trim(),
     })
-    onHide()
+    if(isCreate)
+      onHide()
   }
 
   return (
@@ -132,7 +134,7 @@ const MCPModal = ({
         <div className='absolute right-5 top-5 z-10 cursor-pointer p-1.5' onClick={onHide}>
           <RiCloseLine className='h-5 w-5 text-text-tertiary' />
         </div>
-        <div className='title-2xl-semi-bold relative pb-3 text-xl text-text-primary'>{data ? t('tools.mcp.modal.editTitle') : t('tools.mcp.modal.title')}</div>
+        <div className='title-2xl-semi-bold relative pb-3 text-xl text-text-primary'>{!isCreate ? t('tools.mcp.modal.editTitle') : t('tools.mcp.modal.title')}</div>
         <div className='space-y-5 py-3'>
           <div>
             <div className='mb-1 flex h-6 items-center'>
diff --git a/web/app/components/tools/mcp/provider-card.tsx b/web/app/components/tools/mcp/provider-card.tsx
index 39ce439ec4..677e25c533 100644
--- a/web/app/components/tools/mcp/provider-card.tsx
+++ b/web/app/components/tools/mcp/provider-card.tsx
@@ -18,7 +18,8 @@ type Props = {
   currentProvider?: ToolWithProvider
   data: ToolWithProvider
   handleSelect: (providerID: string) => void
-  onUpdate: () => void
+  onUpdate: (providerID: string) => void
+  onDeleted: () => void
 }
 
 const MCPCard = ({
@@ -26,17 +27,14 @@ const MCPCard = ({
   data,
   onUpdate,
   handleSelect,
+  onDeleted,
 }: Props) => {
   const { t } = useTranslation()
   const { formatTimeFromNow } = useFormatTimeFromNow()
   const { isCurrentWorkspaceManager } = useAppContext()
 
-  const { mutate: updateMCP } = useUpdateMCP({
-    onSuccess: onUpdate,
-  })
-  const { mutate: deleteMCP } = useDeleteMCP({
-    onSuccess: onUpdate,
-  })
+  const { mutateAsync: updateMCP } = useUpdateMCP({})
+  const { mutateAsync: deleteMCP } = useDeleteMCP({})
 
   const [isOperationShow, setIsOperationShow] = useState(false)
 
@@ -62,7 +60,7 @@ const MCPCard = ({
     })
     if ((res as any)?.result === 'success') {
       hideUpdateModal()
-      onUpdate()
+      onUpdate(data.id)
     }
   }, [data, updateMCP, hideUpdateModal, onUpdate])
 
@@ -72,9 +70,9 @@ const MCPCard = ({
     hideDeleting()
     if ((res as any)?.result === 'success') {
       hideDeleteConfirm()
-      onUpdate()
+      onDeleted()
     }
-  }, [showDeleting, deleteMCP, data.id, hideDeleting, hideDeleteConfirm, onUpdate])
+  }, [showDeleting, deleteMCP, data.id, hideDeleting, hideDeleteConfirm, onDeleted])
 
   return (
     <div