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)
2025-12-08 20:42:30 +08:00 · 2025-07-14 11:46:52 +08:00
parent 504e453ae5
commit dc068bbd1e
7 changed files with 136 additions and 44 deletions
--- a/web/src/pages/profile-setting/mcp/edit-mcp-dialog.tsx
+++ b/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>
          }
        >
--- a/web/src/pages/profile-setting/mcp/edit-mcp-form.tsx
+++ b/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 />
--- a/web/src/pages/profile-setting/mcp/index.tsx
+++ b/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 { editVisible, showEditModal, hideEditModal, handleOk, id } =
+  const { data, setPagination, searchString, handleInputChange, pagination } =
+    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 && (
--- a/web/src/pages/profile-setting/mcp/use-edit-mcp.ts
+++ b/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,