auto authorizing after created

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

@@ -12,9 +12,10 @@ import I18n from '@/context/i18n'
 import { getLanguage } from '@/i18n/language'
 import { useAppContext } from '@/context/app-context'
 import { useCreateMCP } from '@/service/use-tools'
+import type { ToolWithProvider } from '@/app/components/workflow/types'
 
 type Props = {
-  handleCreate: () => void
+  handleCreate: (provider: ToolWithProvider) => void
 }
 
 const NewMCPCard = ({ handleCreate }: Props) => {
@@ -23,9 +24,12 @@ const NewMCPCard = ({ handleCreate }: Props) => {
   const language = getLanguage(locale)
   const { isCurrentWorkspaceManager } = useAppContext()
 
-  const { mutate: createMCP } = useCreateMCP({
-    onSuccess: handleCreate,
-  })
+  const { mutateAsync: createMCP } = useCreateMCP()
+
+  const create = async (info: any) => {
+    const provider = await createMCP(info)
+    handleCreate(provider)
+  }
 
   const linkUrl = useMemo(() => {
     // TODO help link
@@ -60,7 +64,7 @@ const NewMCPCard = ({ handleCreate }: Props) => {
       {showModal && (
         <MCPModal
           show={showModal}
-          onConfirm={createMCP}
+          onConfirm={create}
           onHide={() => setShowModal(false)}
         />
       )}

web/app/components/tools/mcp/detail/content.tsx

@@ -45,14 +45,14 @@ const MCPDetailContent: FC<Props> = ({
 
   const { data, isPending: isGettingTools } = useMCPTools(detail.is_team_authorization ? detail.id : '')
   const invalidateMCPTools = useInvalidateMCPTools()
-  const { mutateAsync: updateTools, isPending: isUpdating } = useUpdateMCPTools(detail.id)
+  const { mutateAsync: updateTools, isPending: isUpdating } = useUpdateMCPTools()
   const { mutateAsync: authorizeMcp, isPending: isAuthorizing } = useAuthorizeMCP()
   const toolList = data?.tools || []
 
   const handleUpdateTools = useCallback(async () => {
     if (!detail)
       return
-    await updateTools()
+    await updateTools(detail.id)
     invalidateMCPTools(detail.id)
   }, [detail, updateTools])
 

web/app/components/tools/mcp/index.tsx

@@ -3,7 +3,7 @@ import { useMemo, useState } from 'react'
 import NewMCPCard from './create-card'
 import MCPCard from './provider-card'
 import MCPDetailPanel from './detail/provider-detail'
-import { useAllMCPTools, useInvalidateAllMCPTools } from '@/service/use-tools'
+import { useAllMCPTools, useAuthorizeMCP, useInvalidateAllMCPTools, useInvalidateMCPTools, useUpdateMCPTools } from '@/service/use-tools'
 import type { ToolWithProvider } from '@/app/components/workflow/types'
 import cn from '@/utils/classnames'
 
@@ -34,6 +34,9 @@ const MCPList = ({
 }: Props) => {
   const { data: list = [] } = useAllMCPTools()
   const invalidateMCPList = useInvalidateAllMCPTools()
+  const { mutateAsync: authorizeMcp } = useAuthorizeMCP()
+  const { mutateAsync: updateTools } = useUpdateMCPTools()
+  const invalidateMCPTools = useInvalidateMCPTools()
 
   const filteredList = useMemo(() => {
     return list.filter((collection) => {
@@ -43,7 +46,22 @@ const MCPList = ({
     })
   }, [list, searchText])
 
-  const [currentProvider, setCurrentProvider] = useState<ToolWithProvider>()
+  const [currentProviderID, setCurrentProviderID] = useState<string>()
+
+  const currentProvider = useMemo(() => {
+    return list.find(provider => provider.id === currentProviderID)
+  }, [list, currentProviderID])
+
+  const handleCreate = async (provider: ToolWithProvider) => {
+    invalidateMCPList()
+    setCurrentProviderID(provider.id)
+    await authorizeMcp({
+      provider_id: provider.id,
+      server_url: provider.server_url!,
+    })
+    await updateTools(provider.id)
+    invalidateMCPTools(provider.id)
+  }
 
   return (
     <>
@@ -53,13 +71,13 @@ const MCPList = ({
           !list.length && 'h-[calc(100vh_-_136px)] overflow-hidden',
         )}
       >
-        <NewMCPCard handleCreate={invalidateMCPList} />
+        <NewMCPCard handleCreate={handleCreate} />
         {filteredList.map(provider => (
           <MCPCard
             key={provider.id}
             data={provider}
             currentProvider={currentProvider}
-            handleSelect={setCurrentProvider}
+            handleSelect={setCurrentProviderID}
             onUpdate={() => invalidateMCPList()}
           />
         ))}
@@ -68,7 +86,7 @@ const MCPList = ({
       {currentProvider && (
         <MCPDetailPanel
           detail={currentProvider}
-          onHide={() => setCurrentProvider(undefined)}
+          onHide={() => setCurrentProviderID(undefined)}
           onUpdate={() => invalidateMCPList()}
         />
       )}

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

@@ -17,7 +17,7 @@ import cn from '@/utils/classnames'
 type Props = {
   currentProvider?: ToolWithProvider
   data: ToolWithProvider
-  handleSelect: (provider: ToolWithProvider) => void
+  handleSelect: (providerID: string) => void
   onUpdate: () => void
 }
 
@@ -78,7 +78,7 @@ const MCPCard = ({
 
   return (
     <div
-      onClick={() => handleSelect(data)}
+      onClick={() => handleSelect(data.id)}
       className={cn(
         'group relative flex cursor-pointer flex-col rounded-xl border-[1.5px] border-transparent bg-components-card-bg shadow-xs hover:bg-components-card-bg-alt hover:shadow-md',
         currentProvider?.id === data.id && 'border-components-option-card-option-selected-border bg-components-card-bg-alt',
@@ -107,7 +107,7 @@ const MCPCard = ({
       </div>
       <div className='flex items-center gap-1 rounded-b-xl pb-2.5 pl-4 pr-2.5 pt-1.5'>
         <div className='system-xs-regular grow truncate text-text-tertiary' title={data.server_url}>{data.server_url}</div>
-        {data.is_team_authorization && <Indicator color='green' className='shrink-0' />}
+        {data.is_team_authorization && data.tools.length > 0 && <Indicator color='green' className='shrink-0' />}
         {(!data.is_team_authorization || !data.tools.length) && (
           <div className='system-xs-medium flex shrink-0 items-center gap-1 rounded-md border border-util-colors-red-red-500 bg-components-badge-bg-red-soft px-1.5 py-0.5 text-util-colors-red-red-500'>
             {t('tools.mcp.noConfigured')}

web/service/use-tools.ts

@@ -75,11 +75,7 @@ export const useInvalidateAllMCPTools = () => {
   return useInvalid(useAllMCPToolsKey)
 }
 
-export const useCreateMCP = ({
-  onSuccess,
-}: {
-  onSuccess?: () => void
-}) => {
+export const useCreateMCP = () => {
   return useMutation({
     mutationKey: [NAME_SPACE, 'create-mcp'],
     mutationFn: (payload: {
@@ -89,13 +85,12 @@ export const useCreateMCP = ({
       icon: string
       icon_background?: string | null
     }) => {
-      return post('workspaces/current/tool-provider/mcp', {
+      return post<ToolWithProvider>('workspaces/current/tool-provider/mcp', {
         body: {
           ...payload,
         },
       })
     },
-    onSuccess,
   })
 }
 
@@ -170,9 +165,9 @@ export const useInvalidateMCPTools = () => {
   }
 }
 
-export const useUpdateMCPTools = (providerID: string) => {
+export const useUpdateMCPTools = () => {
   return useMutation({
-    mutationFn: () => get<{ tools: Tool[] }>(`/workspaces/current/tool-provider/mcp/update/${providerID}`),
+    mutationFn: (providerID: string) => get<{ tools: Tool[] }>(`/workspaces/current/tool-provider/mcp/update/${providerID}`),
   })
 }