Merge branch 'feat/mcp-frontend' into deploy/dev

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({
+  const { mutateAsync: updateMCP } = useUpdateMCP({})
-    onSuccess: onUpdate,
+  const { mutateAsync: deleteMCP } = useDeleteMCP({})
-  })
-  const { mutate: deleteMCP } = useDeleteMCP({
-    onSuccess: onUpdate,
-  })
 
   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
   }, [])

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}
         />
       )}

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}
+          isTriggerAuthorize={isTriggerAuthorize}
-          onFirstCreate={() => setIsCreation(false)}
+          onFirstCreate={() => setIsTriggerAuthorize(false)}
         />
       )}
     </>

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'>

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({
+  const { mutateAsync: updateMCP } = useUpdateMCP({})
-    onSuccess: onUpdate,
+  const { mutateAsync: deleteMCP } = useDeleteMCP({})
-  })
-  const { mutate: deleteMCP } = useDeleteMCP({
-    onSuccess: onUpdate,
-  })
 
   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