edit & delete

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

@@ -1,6 +1,7 @@
 'use client'
-import React from 'react'
+import React, { useCallback } from 'react'
 import type { FC } from 'react'
+import { useBoolean } from 'ahooks'
 import { useTranslation } from 'react-i18next'
 import { useAppContext } from '@/context/app-context'
 import {
@@ -10,24 +11,74 @@ import type { ToolWithProvider } from '../../../workflow/types'
 import Icon from '@/app/components/plugins/card/base/card-icon'
 import ActionButton from '@/app/components/base/action-button'
 import Button from '@/app/components/base/button'
-// import Toast from '@/app/components/base/toast'
+import Confirm from '@/app/components/base/confirm'
 import Indicator from '@/app/components/header/indicator'
+import MCPModal from '../modal'
+import OperationDropdown from './operation-dropdown'
+import { useDeleteMCP, useUpdateMCP } from '@/service/use-tools'
 import cn from '@/utils/classnames'
 
 type Props = {
   detail?: ToolWithProvider
-  onUpdate: () => void
+  onUpdate: (isDelete?: boolean) => void
   onHide: () => void
 }
 
 const MCPDetailContent: FC<Props> = ({
   detail,
-  // onUpdate,
+  onUpdate,
   onHide,
 }) => {
   const { t } = useTranslation()
   const { isCurrentWorkspaceManager } = useAppContext()
 
+  const { mutate: updateMCP } = useUpdateMCP({
+    onSuccess: onUpdate,
+  })
+  const { mutate: deleteMCP } = useDeleteMCP({
+    onSuccess: onUpdate,
+  })
+
+  const [isShowUpdateModal, {
+      setTrue: showUpdateModal,
+      setFalse: hideUpdateModal,
+    }] = useBoolean(false)
+
+  const [isShowDeleteConfirm, {
+    setTrue: showDeleteConfirm,
+    setFalse: hideDeleteConfirm,
+  }] = useBoolean(false)
+
+  const [deleting, {
+    setTrue: showDeleting,
+    setFalse: hideDeleting,
+  }] = useBoolean(false)
+
+  const handleUpdate = useCallback(async (data: any) => {
+    if (!detail)
+      return
+    const res = await updateMCP({
+      ...data,
+      provider_id: detail.id,
+    })
+    if ((res as any)?.result === 'success') {
+      hideUpdateModal()
+      onUpdate()
+    }
+  }, [detail, updateMCP, hideUpdateModal, onUpdate])
+
+  const handleDelete = useCallback(async () => {
+    if (!detail)
+      return
+    showDeleting()
+    const res = await deleteMCP(detail.id)
+    hideDeleting()
+    if ((res as any)?.result === 'success') {
+      hideDeleteConfirm()
+      onUpdate(true)
+    }
+  }, [detail, showDeleting, hideDeleting, hideDeleteConfirm, onUpdate])
+
   if (!detail)
     return null
 
@@ -45,13 +96,10 @@ const MCPDetailContent: FC<Props> = ({
             <div className='system-xs-regular mt-0.5 truncate text-text-tertiary' title={detail.server_url}>{detail.server_url}</div>
           </div>
           <div className='flex gap-1'>
-            {/* <OperationDropdown
-              source={detail.source}
-              onInfo={showPluginInfo}
-              onCheckVersion={handleUpdate}
+            <OperationDropdown
+              onEdit={showUpdateModal}
               onRemove={showDeleteConfirm}
-              detailUrl={detailUrl}
-            /> */}
+            />
             <ActionButton onClick={onHide}>
               <RiCloseLine className='h-4 w-4' />
             </ActionButton>
@@ -69,7 +117,7 @@ const MCPDetailContent: FC<Props> = ({
               {t('tools.auth.authorized')}
             </Button>
           )}
-          {detail.is_team_authorization && (
+          {!detail.is_team_authorization && (
             <Button
               variant='primary'
               className='w-full'
@@ -82,6 +130,29 @@ const MCPDetailContent: FC<Props> = ({
       <div className='grow overflow-y-auto'>
         TOOL list
       </div>
+      {isShowUpdateModal && (
+        <MCPModal
+          data={detail}
+          show={isShowUpdateModal}
+          onConfirm={handleUpdate}
+          onHide={hideUpdateModal}
+        />
+      )}
+      {isShowDeleteConfirm && (
+        <Confirm
+          isShow
+          title={t('tools.mcp.delete')}
+          content={
+            <div>
+              {t('tools.mcp.deleteConfirmTitle', { mcp: detail.name })}
+            </div>
+          }
+          onCancel={hideDeleteConfirm}
+          onConfirm={handleDelete}
+          isLoading={deleting}
+          isDisabled={deleting}
+        />
+      )}
     </>
   )
 }

web/app/components/tools/mcp/detail/operation-dropdown.tsx

@@ -0,0 +1,88 @@
+'use client'
+import type { FC } from 'react'
+import React, { useCallback, useRef, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import {
+  RiDeleteBinLine,
+  RiEditLine,
+  RiMoreFill,
+} from '@remixicon/react'
+import ActionButton from '@/app/components/base/action-button'
+import {
+  PortalToFollowElem,
+  PortalToFollowElemContent,
+  PortalToFollowElemTrigger,
+} from '@/app/components/base/portal-to-follow-elem'
+import cn from '@/utils/classnames'
+
+type Props = {
+  inCard?: boolean
+  onOpenChange?: (open: boolean) => void
+  onEdit: () => void
+  onRemove: () => void
+}
+
+const OperationDropdown: FC<Props> = ({
+  inCard,
+  onOpenChange,
+  onEdit,
+  onRemove,
+}) => {
+  const { t } = useTranslation()
+  const [open, doSetOpen] = useState(false)
+  const openRef = useRef(open)
+  const setOpen = useCallback((v: boolean) => {
+    doSetOpen(v)
+    openRef.current = v
+    onOpenChange?.(v)
+  }, [doSetOpen])
+
+  const handleTrigger = useCallback(() => {
+    setOpen(!openRef.current)
+  }, [setOpen])
+
+  return (
+    <PortalToFollowElem
+      open={open}
+      onOpenChange={setOpen}
+      placement='bottom-end'
+      offset={{
+        mainAxis: !inCard ? -12 : 0,
+        crossAxis: !inCard ? 36 : 0,
+      }}
+    >
+      <PortalToFollowElemTrigger onClick={handleTrigger}>
+        <div>
+          <ActionButton size={inCard ? 'l' : 'm'} className={cn(open && 'bg-state-base-hover')}>
+            <RiMoreFill className={cn('h-4 w-4', inCard && 'h-5 w-5')} />
+          </ActionButton>
+        </div>
+      </PortalToFollowElemTrigger>
+      <PortalToFollowElemContent className='z-50'>
+        <div className='w-[160px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-1 shadow-lg backdrop-blur-sm'>
+          <div
+            className='flex cursor-pointer items-center rounded-lg px-3 py-1.5 hover:bg-state-base-hover'
+            onClick={() => {
+              onEdit()
+              handleTrigger()
+            }}
+          >
+            <RiEditLine className='h-4 w-4 text-text-tertiary' />
+            <div className='system-md-regular ml-2 text-text-secondary'>{t('tools.mcp.operation.edit')}</div>
+          </div>
+          <div
+            className='group flex cursor-pointer items-center rounded-lg px-3 py-1.5 hover:bg-state-destructive-hover'
+            onClick={() => {
+              onRemove()
+              handleTrigger()
+            }}
+          >
+            <RiDeleteBinLine className='h-4 w-4 text-text-tertiary group-hover:text-text-destructive-secondary' />
+            <div className='system-md-regular ml-2 text-text-secondary group-hover:text-text-destructive'>{t('tools.mcp.operation.remove')}</div>
+          </div>
+        </div>
+      </PortalToFollowElemContent>
+    </PortalToFollowElem>
+  )
+}
+export default React.memo(OperationDropdown)

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

@@ -60,6 +60,7 @@ const MCPList = ({
             data={provider}
             currentProvider={currentProvider}
             handleSelect={setCurrentProvider}
+            onUpdate={() => invalidateMCPList()}
           />
         ))}
         {!list.length && renderDefaultCard()}

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

@@ -109,7 +109,7 @@ const MCPModal = ({
           </div>
         </div>
         <div className='flex flex-row-reverse pt-5'>
-          <Button disabled={!name || !url} className='ml-2' variant='primary' onClick={submit}>{t('tools.mcp.modal.confirm')}</Button>
+          <Button disabled={!name || !url} className='ml-2' variant='primary' onClick={submit}>{data ? t('tools.mcp.modal.save') : t('tools.mcp.modal.confirm')}</Button>
           <Button onClick={onHide}>{t('tools.mcp.modal.cancel')}</Button>
         </div>
       </Modal>

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

@@ -1,43 +1,90 @@
 'use client'
-// import { useMemo, useState } from 'react'
+import { useCallback, useState } from 'react'
+import { useBoolean } from 'ahooks'
 import { useTranslation } from 'react-i18next'
-// import { useContext } from 'use-context-selector'
-// import I18n from '@/context/i18n'
-// import { getLanguage } from '@/i18n/language'
-// import { useAppContext } from '@/context/app-context'
+import { useAppContext } from '@/context/app-context'
 import { RiHammerFill } from '@remixicon/react'
 import Indicator from '@/app/components/header/indicator'
 import Icon from '@/app/components/plugins/card/base/card-icon'
 import { useFormatTimeFromNow } from './hooks'
 import type { ToolWithProvider } from '../../workflow/types'
+import Confirm from '@/app/components/base/confirm'
+import MCPModal from './modal'
+import OperationDropdown from './detail/operation-dropdown'
+import { useDeleteMCP, useUpdateMCP } from '@/service/use-tools'
 import cn from '@/utils/classnames'
 
 type Props = {
   currentProvider?: ToolWithProvider
   data: ToolWithProvider
   handleSelect: (provider: ToolWithProvider) => void
+  onUpdate: () => void
 }
 
 const MCPCard = ({
   currentProvider,
   data,
+  onUpdate,
   handleSelect,
 }: Props) => {
   const { t } = useTranslation()
   const { formatTimeFromNow } = useFormatTimeFromNow()
-  // const { locale } = useContext(I18n)
-  // const language = getLanguage(locale)
-  //   const { isCurrentWorkspaceManager } = useAppContext()
+  const { isCurrentWorkspaceManager } = useAppContext()
+
+  const { mutate: updateMCP } = useUpdateMCP({
+    onSuccess: onUpdate,
+  })
+  const { mutate: deleteMCP } = useDeleteMCP({
+    onSuccess: onUpdate,
+  })
+
+  const [isOperationShow, setIsOperationShow] = useState(false)
+
+  const [isShowUpdateModal, {
+    setTrue: showUpdateModal,
+    setFalse: hideUpdateModal,
+  }] = useBoolean(false)
+
+  const [isShowDeleteConfirm, {
+    setTrue: showDeleteConfirm,
+    setFalse: hideDeleteConfirm,
+  }] = useBoolean(false)
+
+  const [deleting, {
+    setTrue: showDeleting,
+    setFalse: hideDeleting,
+  }] = useBoolean(false)
+
+  const handleUpdate = useCallback(async (form: any) => {
+    const res = await updateMCP({
+      ...form,
+      provider_id: data.id,
+    })
+    if ((res as any)?.result === 'success') {
+      hideUpdateModal()
+      onUpdate()
+    }
+  }, [data, updateMCP, hideUpdateModal, onUpdate])
+
+  const handleDelete = useCallback(async () => {
+    showDeleting()
+    const res = await deleteMCP(data.id)
+    hideDeleting()
+    if ((res as any)?.result === 'success') {
+      hideDeleteConfirm()
+      onUpdate()
+    }
+  }, [data, showDeleting, hideDeleting, hideDeleteConfirm, onUpdate])
 
   return (
     <div
       onClick={() => handleSelect(data)}
       className={cn(
-        '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',
+        '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',
       )}
     >
-      <div className='group flex grow items-center gap-3 rounded-t-xl p-4'>
+      <div className='flex grow items-center gap-3 rounded-t-xl p-4'>
         <div className='shrink-0 overflow-hidden rounded-xl border border-components-panel-border-subtle'>
           <Icon src={data.icon} />
         </div>
@@ -68,6 +115,39 @@ const MCPCard = ({
           </div>
         )}
       </div>
+      {isCurrentWorkspaceManager && (
+        <div className={cn('absolute right-2.5 top-2.5 hidden group-hover:block', isOperationShow && 'block')} onClick={e => e.stopPropagation()}>
+          <OperationDropdown
+            inCard
+            onOpenChange={setIsOperationShow}
+            onEdit={showUpdateModal}
+            onRemove={showDeleteConfirm}
+          />
+        </div>
+      )}
+      {isShowUpdateModal && (
+        <MCPModal
+          data={data}
+          show={isShowUpdateModal}
+          onConfirm={handleUpdate}
+          onHide={hideUpdateModal}
+        />
+      )}
+      {isShowDeleteConfirm && (
+        <Confirm
+          isShow
+          title={t('tools.mcp.delete')}
+          content={
+            <div>
+              {t('tools.mcp.deleteConfirmTitle', { mcp: data.name })}
+            </div>
+          }
+          onCancel={hideDeleteConfirm}
+          onConfirm={handleDelete}
+          isLoading={deleting}
+          isDisabled={deleting}
+        />
+      )}
     </div>
   )
 }

web/i18n/en-US/tools.ts

@@ -169,8 +169,15 @@ const translation = {
       serverUrl: 'Server URL',
       serverUrlPlaceholder: 'URL to server endpiont',
       cancel: 'Cancel',
+      save: 'Save',
       confirm: 'Add & Authorize',
     },
+    delete: 'Remove MCP Server',
+    deleteConfirmTitle: 'Would you like to remove {{mcp}}?',
+    operation: {
+      edit: 'Edit',
+      remove: 'Remove',
+    },
   },
 }
 

web/i18n/zh-Hans/tools.ts

@@ -169,8 +169,15 @@ const translation = {
       serverUrl: '服务端点 URL',
       serverUrlPlaceholder: '服务端点的 URL',
       cancel: '取消',
+      save: '保存',
       confirm: '添加并授权',
     },
+    delete: '删除 MCP 服务',
+    deleteConfirmTitle: '你想要删除 {{mcp}} 吗？',
+    operation: {
+      edit: '修改',
+      remove: '删除',
+    },
   },
 }
 

web/service/use-tools.ts

@@ -1,4 +1,4 @@
-import { get, post } from './base'
+import { del, get, post, put } from './base'
 import type {
   Collection,
   Tool,
@@ -93,13 +93,54 @@ export const useCreateMCP = ({
       icon: string
       icon_background?: string | null
     }) => {
-      console.log('payload', payload)
-      return Promise.resolve(payload)
-      // return post('/console/api/workspaces/current/tool-provider/mcp', {
-      //   body: {
-      //     ...payload,
-      //   },
-      // })
+      return post('workspaces/current/tool-provider/mcp', {
+        body: {
+          ...payload,
+        },
+      })
+    },
+    onSuccess,
+  })
+}
+
+export const useUpdateMCP = ({
+  onSuccess,
+}: {
+  onSuccess?: () => void
+}) => {
+  return useMutation({
+    mutationKey: [NAME_SPACE, 'update-mcp'],
+    mutationFn: (payload: {
+      name: string
+      server_url: string
+      icon_type: AppIconType
+      icon: string
+      icon_background?: string | null
+      provider_id: string
+    }) => {
+      return put('workspaces/current/tool-provider/mcp', {
+        body: {
+          ...payload,
+        },
+      })
+    },
+    onSuccess,
+  })
+}
+
+export const useDeleteMCP = ({
+  onSuccess,
+}: {
+  onSuccess?: () => void
+}) => {
+  return useMutation({
+    mutationKey: [NAME_SPACE, 'delete-mcp'],
+    mutationFn: (id: string) => {
+      return del('/console/api/workspaces/current/tool-provider/mcp', {
+        body: {
+          provider_id: id,
+        },
+      })
     },
     onSuccess,
   })