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;
     },
   });