Feat: Edit MCP server #3221 (#8784)

### What problem does this PR solve?

Feat: Edit MCP server #3221

### Type of change


- [x] New Feature (non-breaking change which adds functionality)

web/src/pages/profile-setting/mcp/edit-mcp-dialog.tsx

@@ -7,15 +7,22 @@ import {
   DialogHeader,
   DialogTitle,
 } from '@/components/ui/dialog';
-import { useTestMcpServer } from '@/hooks/use-mcp-request';
+import { useGetMcpServer, useTestMcpServer } from '@/hooks/use-mcp-request';
 import { IModalProps } from '@/interfaces/common';
 import { IMCPTool, IMCPToolObject } from '@/interfaces/database/mcp';
-import { omit } from 'lodash';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { isEmpty, omit, pick } from 'lodash';
 import { RefreshCw } from 'lucide-react';
-import { MouseEventHandler, useCallback, useState } from 'react';
+import { MouseEventHandler, useCallback, useMemo, useState } from 'react';
+import { useForm } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { z } from 'zod';
-import { EditMcpForm, FormId, useBuildFormSchema } from './edit-mcp-form';
+import {
+  EditMcpForm,
+  FormId,
+  ServerType,
+  useBuildFormSchema,
+} from './edit-mcp-form';
 import { McpToolCard } from './tool-card';
 
 function transferToolToObject(tools: IMCPTool[] = []) {
@@ -25,11 +32,37 @@ function transferToolToObject(tools: IMCPTool[] = []) {
   }, {});
 }
 
-export function EditMcpDialog({ hideModal, loading, onOk }: IModalProps<any>) {
+function transferToolToArray(tools: IMCPToolObject) {
+  return Object.entries(tools).reduce<IMCPTool[]>((pre, [name, tool]) => {
+    pre.push({ ...tool, name });
+    return pre;
+  }, []);
+}
+
+export function EditMcpDialog({
+  hideModal,
+  loading,
+  onOk,
+  id,
+}: IModalProps<any> & { id: string }) {
   const { t } = useTranslation();
-  const { testMcpServer, data: tools } = useTestMcpServer();
+  const {
+    testMcpServer,
+    data: tools,
+    loading: testLoading,
+  } = useTestMcpServer();
   const [isTriggeredBySaving, setIsTriggeredBySaving] = useState(false);
   const FormSchema = useBuildFormSchema();
+  const [collapseOpen, setCollapseOpen] = useState(true);
+  const { data } = useGetMcpServer(id);
+
+  const form = useForm<z.infer<typeof FormSchema>>({
+    resolver: zodResolver(FormSchema),
+    values: isEmpty(data)
+      ? { name: '', server_type: ServerType.SSE, url: '' }
+      : pick(data, ['name', 'server_type', 'url']),
+  });
+  console.log('🚀 ~ form:', form.formState.dirtyFields);
 
   const handleTest: MouseEventHandler<HTMLButtonElement> = useCallback((e) => {
     e.stopPropagation();
@@ -54,15 +87,25 @@ export function EditMcpDialog({ hideModal, loading, onOk }: IModalProps<any>) {
     }
   };
 
+  const nextTools = useMemo(() => {
+    return tools || transferToolToArray(data.variables?.tools || {});
+  }, [data.variables?.tools, tools]);
+
+  const dirtyFields = form.formState.dirtyFields;
+  const fieldChanged = 'server_type' in dirtyFields || 'url' in dirtyFields;
+  const disabled = !!!tools?.length || testLoading || fieldChanged;
+
   return (
     <Dialog open onOpenChange={hideModal}>
       <DialogContent>
         <DialogHeader>
           <DialogTitle>Edit profile</DialogTitle>
         </DialogHeader>
-        <EditMcpForm onOk={handleOk}></EditMcpForm>
+        <EditMcpForm onOk={handleOk} form={form}></EditMcpForm>
         <Collapse
           title={<div>{tools?.length || 0} tools available</div>}
+          open={collapseOpen}
+          onOpenChange={setCollapseOpen}
           rightContent={
             <Button
               variant={'ghost'}
@@ -74,8 +117,8 @@ export function EditMcpDialog({ hideModal, loading, onOk }: IModalProps<any>) {
             </Button>
           }
         >
-          <div className="space-y-2.5">
-            {tools?.map((x) => (
+          <div className="space-y-2.5 overflow-auto max-h-80">
+            {nextTools?.map((x) => (
               <McpToolCard key={x.name} data={x}></McpToolCard>
             ))}
           </div>
@@ -86,7 +129,7 @@ export function EditMcpDialog({ hideModal, loading, onOk }: IModalProps<any>) {
             form={FormId}
             loading={loading}
             onClick={handleSave}
-            disabled={!!!tools?.length}
+            disabled={disabled}
           >
             {t('common.save')}
           </ButtonLoading>