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/hooks/use-mcp-request.ts

@@ -11,8 +11,15 @@ import {
   ITestMcpRequestBody,
 } from '@/interfaces/request/mcp';
 import i18n from '@/locales/config';
-import mcpServerService from '@/services/mcp-server-service';
+import mcpServerService, {
+  listMcpServers,
+} from '@/services/mcp-server-service';
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { useDebounce } from 'ahooks';
+import {
+  useGetPaginationWithRouter,
+  useHandleSearchChange,
+} from './logic-hooks';
 
 export const enum McpApiAction {
   ListMcpServer = 'listMcpServer',
@@ -29,17 +36,38 @@ export const enum McpApiAction {
 }
 
 export const useListMcpServer = () => {
+  const { searchString, handleInputChange } = useHandleSearchChange();
+  const { pagination, setPagination } = useGetPaginationWithRouter();
+  const debouncedSearchString = useDebounce(searchString, { wait: 500 });
+
   const { data, isFetching: loading } = useQuery<IMcpServerListResponse>({
-    queryKey: [McpApiAction.ListMcpServer],
+    queryKey: [
+      McpApiAction.ListMcpServer,
+      {
+        debouncedSearchString,
+        ...pagination,
+      },
+    ],
     initialData: { total: 0, mcp_servers: [] },
     gcTime: 0,
     queryFn: async () => {
-      const { data } = await mcpServerService.list({});
+      const { data } = await listMcpServers({
+        keywords: debouncedSearchString,
+        page_size: pagination.pageSize,
+        page: pagination.current,
+      });
       return data?.data;
     },
   });
 
-  return { data, loading };
+  return {
+    data,
+    loading,
+    handleInputChange,
+    setPagination,
+    searchString,
+    pagination: { ...pagination, total: data?.total },
+  };
 };
 
 export const useGetMcpServer = (id: string) => {
@@ -191,12 +219,12 @@ export const useTestMcpServer = () => {
     data,
     isPending: loading,
     mutateAsync,
-  } = useMutation<IMCPTool[], Error, ITestMcpRequestBody>({
+  } = useMutation<ResponseType<IMCPTool[]>, Error, ITestMcpRequestBody>({
     mutationKey: [McpApiAction.TestMcpServer],
     mutationFn: async (params) => {
       const { data } = await mcpServerService.test(params);
 
-      return data?.data || [];
+      return data;
     },
   });
 

web/src/locales/en.ts

@@ -1307,6 +1307,8 @@ This delimiter is used to split the input text into several text pieces echo of
       export: 'Export',
       import: 'Import',
       addMcp: 'Add MCP',
+      url: 'URL',
+      serverType: 'Server Type',
     },
   },
 };

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)
+    defaultValues: DefaultValues,
-      ? { name: '', server_type: ServerType.SSE, url: '' }
-      : pick(data, ['name', 'server_type', 'url']),
   });
 
   const handleTest: MouseEventHandler<HTMLButtonElement> = useCallback((e) => {
@@ -74,35 +83,42 @@ export function EditMcpDialog({
 
   const handleOk = async (values: z.infer<typeof FormSchema>) => {
     if (isTriggeredBySaving) {
-      onOk?.({
+      onOk?.(values);
-        ...values,
-        variables: {
-          ...(values?.variables || {}),
-          tools: transferToolToObject(tools),
-        },
-      });
     } 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>
           }
         >

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

@@ -15,6 +15,7 @@ import { Input } from '@/components/ui/input';
 import { RAGFlowSelect } from '@/components/ui/select';
 import { IModalProps } from '@/interfaces/common';
 import { buildOptions } from '@/utils/form';
+import { Dispatch, SetStateAction } from 'react';
 import { useTranslation } from 'react-i18next';
 
 export const FormId = 'EditMcpForm';
@@ -38,6 +39,7 @@ export function useBuildFormSchema() {
       .trim(),
     url: z
       .string()
+      .url()
       .min(1, {
         message: t('common.namePlaceholder'),
       })
@@ -48,7 +50,7 @@ export function useBuildFormSchema() {
         message: t('common.namePlaceholder'),
       })
       .trim(),
-    variables: z.object({}).optional(),
+    // variables: z.object({}).optional(),
   });
 
   return FormSchema;
@@ -57,7 +59,11 @@ export function useBuildFormSchema() {
 export function EditMcpForm({
   form,
   onOk,
-}: IModalProps<any> & { form: UseFormReturn<any> }) {
+  setFieldChanged,
+}: IModalProps<any> & {
+  form: UseFormReturn<any>;
+  setFieldChanged: Dispatch<SetStateAction<boolean>>;
+}) {
   const { t } = useTranslation();
   const FormSchema = useBuildFormSchema();
 
@@ -94,12 +100,16 @@ export function EditMcpForm({
           name="url"
           render={({ field }) => (
             <FormItem>
-              <FormLabel>{t('common.url')}</FormLabel>
+              <FormLabel>{t('mcp.url')}</FormLabel>
               <FormControl>
                 <Input
                   placeholder={t('common.namePlaceholder')}
                   {...field}
                   autoComplete="off"
+                  onChange={(e) => {
+                    field.onChange(e.target.value.trim());
+                    setFieldChanged(true);
+                  }}
                 />
               </FormControl>
               <FormMessage />
@@ -111,12 +121,16 @@ export function EditMcpForm({
           name="server_type"
           render={({ field }) => (
             <FormItem>
-              <FormLabel>{t('common.serverType')}</FormLabel>
+              <FormLabel>{t('mcp.serverType')}</FormLabel>
               <FormControl>
                 <RAGFlowSelect
                   {...field}
                   autoComplete="off"
                   options={ServerTypeOptions}
+                  onChange={(value) => {
+                    field.onChange(value);
+                    setFieldChanged(true);
+                  }}
                 />
               </FormControl>
               <FormMessage />

web/src/pages/profile-setting/mcp/index.tsx

@@ -1,8 +1,11 @@
 import { BulkOperateBar } from '@/components/bulk-operate-bar';
 import { Button } from '@/components/ui/button';
 import { SearchInput } from '@/components/ui/input';
+import { RAGFlowPagination } from '@/components/ui/ragflow-pagination';
 import { useListMcpServer } from '@/hooks/use-mcp-request';
+import { pick } from 'lodash';
 import { Import, Plus } from 'lucide-react';
+import { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { EditMcpDialog } from './edit-mcp-dialog';
 import { ImportMcpDialog } from './import-mcp-dialog';
@@ -12,14 +15,22 @@ import { useEditMcp } from './use-edit-mcp';
 import { useImportMcp } from './use-import-mcp';
 
 export default function McpServer() {
-  const { data } = useListMcpServer();
+  const { data, setPagination, searchString, handleInputChange, pagination } =
-  const { editVisible, showEditModal, hideEditModal, handleOk, id } =
+    useListMcpServer();
+  const { editVisible, showEditModal, hideEditModal, handleOk, id, loading } =
     useEditMcp();
   const { list, selectedList, handleSelectChange } = useBulkOperateMCP();
   const { t } = useTranslation();
   const { importVisible, showImportModal, hideImportModal, onImportOk } =
     useImportMcp();
 
+  const handlePageChange = useCallback(
+    (page: number, pageSize?: number) => {
+      setPagination({ page, pageSize });
+    },
+    [setPagination],
+  );
+
   return (
     <section className="p-4">
       <div className="text-text-title text-2xl">MCP Servers</div>
@@ -28,7 +39,11 @@ export default function McpServer() {
           Customize the list of MCP servers
         </div>
         <div className="flex gap-5">
-          <SearchInput className="w-40"></SearchInput>
+          <SearchInput
+            className="w-40"
+            value={searchString}
+            onChange={handleInputChange}
+          ></SearchInput>
           <Button variant={'secondary'} onClick={showImportModal}>
             <Import /> {t('mcp.import')}
           </Button>
@@ -37,6 +52,7 @@ export default function McpServer() {
           </Button>
         </div>
       </section>
+
       {selectedList.length > 0 && (
         <BulkOperateBar
           list={list}
@@ -55,11 +71,19 @@ export default function McpServer() {
           ></McpCard>
         ))}
       </section>
+      <div className="mt-8 px-8">
+        <RAGFlowPagination
+          {...pick(pagination, 'current', 'pageSize')}
+          total={pagination.total || 0}
+          onChange={handlePageChange}
+        ></RAGFlowPagination>
+      </div>
       {editVisible && (
         <EditMcpDialog
           hideModal={hideEditModal}
           onOk={handleOk}
           id={id}
+          loading={loading}
         ></EditMcpDialog>
       )}
       {importVisible && (

web/src/pages/profile-setting/mcp/use-edit-mcp.ts

@@ -14,7 +14,7 @@ export const useEditMcp = () => {
   const { createMcpServer, loading } = useCreateMcpServer();
   const [id, setId] = useState('');
 
-  const { updateMcpServer } = useUpdateMcpServer();
+  const { updateMcpServer, loading: updateLoading } = useUpdateMcpServer();
 
   const handleShowModal = useCallback(
     (id: string) => () => {
@@ -28,7 +28,7 @@ export const useEditMcp = () => {
     async (values: any) => {
       let code;
       if (id) {
-        code = await updateMcpServer(values);
+        code = await updateMcpServer({ ...values, mcp_id: id });
       } else {
         code = await createMcpServer(values);
       }
@@ -43,7 +43,7 @@ export const useEditMcp = () => {
     editVisible,
     hideEditModal,
     showEditModal: handleShowModal,
-    loading,
+    loading: loading || updateLoading,
     createMcpServer,
     handleOk,
     id,

web/src/services/mcp-server-service.ts

@@ -1,3 +1,4 @@
+import { IPaginationRequestBody } from '@/interfaces/request/base';
 import api from '@/utils/api';
 import registerServer from '@/utils/register-server';
 import request from '@/utils/request';
@@ -66,3 +67,6 @@ const methods = {
 const mcpServerService = registerServer<keyof typeof methods>(methods, request);
 
 export default mcpServerService;
+
+export const listMcpServers = (params?: IPaginationRequestBody, body?: any) =>
+  request.post(api.listMcpServer, { data: body || {}, params });