Feat: Filter MCP server list by text. #3221 (#8820)

### What problem does this PR solve?

Feat: Filter MCP server list by text. #3221
### Type of change

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

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

@@ -10,10 +10,17 @@ import {
 import { useGetMcpServer, useTestMcpServer } from '@/hooks/use-mcp-request';
 import { IModalProps } from '@/interfaces/common';
 import { IMCPTool, IMCPToolObject } from '@/interfaces/database/mcp';
+import { cn } from '@/lib/utils';
 import { zodResolver } from '@hookform/resolvers/zod';
-import { isEmpty, omit, pick } from 'lodash';
+import { isEmpty, pick } from 'lodash';
 import { RefreshCw } from 'lucide-react';
-import { MouseEventHandler, useCallback, useMemo, useState } from 'react';
+import {
+  MouseEventHandler,
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react';
 import { useForm } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { z } from 'zod';
@@ -25,13 +32,6 @@ import {
 } from './edit-mcp-form';
 import { McpToolCard } from './tool-card';
 
-function transferToolToObject(tools: IMCPTool[] = []) {
-  return tools.reduce<IMCPToolObject>((pre, tool) => {
-    pre[tool.name] = omit(tool, 'name');
-    return pre;
-  }, {});
-}
-
 function transferToolToArray(tools: IMCPToolObject) {
   return Object.entries(tools).reduce<IMCPTool[]>((pre, [name, tool]) => {
     pre.push({ ...tool, name });
@@ -39,6 +39,12 @@ function transferToolToArray(tools: IMCPToolObject) {
   }, []);
 }
 
+const DefaultValues = {
+  name: '',
+  server_type: ServerType.SSE,
+  url: '',
+};
+
 export function EditMcpDialog({
   hideModal,
   loading,
@@ -48,19 +54,22 @@ export function EditMcpDialog({
   const { t } = useTranslation();
   const {
     testMcpServer,
-    data: tools,
+    data: testData,
     loading: testLoading,
   } = useTestMcpServer();
   const [isTriggeredBySaving, setIsTriggeredBySaving] = useState(false);
   const FormSchema = useBuildFormSchema();
   const [collapseOpen, setCollapseOpen] = useState(true);
   const { data } = useGetMcpServer(id);
+  const [fieldChanged, setFieldChanged] = useState(false);
+
+  const tools = useMemo(() => {
+    return testData?.data || [];
+  }, [testData?.data]);
 
   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']),
+    defaultValues: DefaultValues,
   });
 
   const handleTest: MouseEventHandler<HTMLButtonElement> = useCallback((e) => {
@@ -74,35 +83,42 @@ export function EditMcpDialog({
 
   const handleOk = async (values: z.infer<typeof FormSchema>) => {
     if (isTriggeredBySaving) {
-      onOk?.({
-        ...values,
-        variables: {
-          ...(values?.variables || {}),
-          tools: transferToolToObject(tools),
-        },
-      });
+      onOk?.(values);
     } else {
-      testMcpServer(values);
+      const ret = await testMcpServer(values);
+      if (ret.code === 0) {
+        setFieldChanged(false);
+      }
     }
   };
 
+  useEffect(() => {
+    if (!isEmpty(data)) {
+      form.reset(pick(data, ['name', 'server_type', 'url']));
+    }
+  }, [data, form]);
+
   const nextTools = useMemo(() => {
-    return tools || transferToolToArray(data.variables?.tools || {});
+    return isEmpty(tools)
+      ? transferToolToArray(data.variables?.tools || {})
+      : 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>
+          <DialogTitle>{t('common.edit')}</DialogTitle>
         </DialogHeader>
-        <EditMcpForm onOk={handleOk} form={form}></EditMcpForm>
+        <EditMcpForm
+          onOk={handleOk}
+          form={form}
+          setFieldChanged={setFieldChanged}
+        ></EditMcpForm>
         <Collapse
-          title={<div>{tools?.length || 0} tools available</div>}
+          title={<div>{nextTools?.length || 0} tools available</div>}
           open={collapseOpen}
           onOpenChange={setCollapseOpen}
           rightContent={
@@ -112,7 +128,11 @@ export function EditMcpDialog({
               type="submit"
               onClick={handleTest}
             >
-              <RefreshCw className="text-background-checked" />
+              <RefreshCw
+                className={cn('text-background-checked', {
+                  'animate-spin': testLoading,
+                })}
+              />
             </Button>
           }
         >