Feat: Filter the agent list by owner and category #9869 (#10344)

### What problem does this PR solve?

Feat: Filter the agent list by owner and category #9869
### Type of change


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

web/src/pages/agent/constant.tsx

@@ -924,8 +924,3 @@ export enum AgentExceptionMethod {
   Comment = 'comment',
   Goto = 'goto',
 }
-
-export enum AgentCategory {
-  AgentCanvas = 'agent_canvas',
-  DataflowCanvas = 'dataflow_canvas',
-}

web/src/pages/agents/agent-card.tsx

@@ -2,10 +2,10 @@ import { HomeCard } from '@/components/home-card';
 import { MoreButton } from '@/components/more-button';
 import { SharedBadge } from '@/components/shared-badge';
 import { Button } from '@/components/ui/button';
+import { AgentCategory } from '@/constants/agent';
 import { useNavigatePage } from '@/hooks/logic-hooks/navigate-hooks';
 import { IFlow } from '@/interfaces/database/agent';
-import { DatabaseZap } from 'lucide-react';
-import { AgentCategory } from '../agent/constant';
+import { Route } from 'lucide-react';
 import { AgentDropdown } from './agent-dropdown';
 import { useRenameAgent } from './use-rename-agent';
 
@@ -33,7 +33,7 @@ export function AgentCard({ data, showAgentRenameModal }: DatasetCardProps) {
       icon={
         data.canvas_category === AgentCategory.DataflowCanvas && (
           <Button variant={'ghost'} size={'sm'}>
-            <DatabaseZap />
+            <Route />
           </Button>
         )
       }

web/src/pages/agents/hooks/use-create-agent.ts

@@ -1,7 +1,7 @@
+import { AgentCategory } from '@/constants/agent';
 import { useSetModalState } from '@/hooks/common-hooks';
 import { EmptyDsl, useSetAgent } from '@/hooks/use-agent-request';
 import { DSL } from '@/interfaces/database/agent';
-import { AgentCategory } from '@/pages/agent/constant';
 import {
   BeginId,
   Operator,

web/src/pages/agents/hooks/use-selelct-filters.ts

@@ -0,0 +1,23 @@
+import { FilterCollection } from '@/components/list-filter-bar/interface';
+import { useFetchAgentList } from '@/hooks/use-agent-request';
+import { buildOwnersFilter, groupListByType } from '@/utils/list-filter-util';
+import { useMemo } from 'react';
+
+export function useSelectFilters() {
+  const { data } = useFetchAgentList({});
+
+  const canvasCategory = useMemo(() => {
+    return groupListByType(data.canvas, 'canvas_category', 'canvas_category');
+  }, [data.canvas]);
+
+  const filters: FilterCollection[] = [
+    buildOwnersFilter(data.canvas),
+    {
+      field: 'canvasCategory',
+      list: canvasCategory,
+      label: 'Canvas category',
+    },
+  ];
+
+  return filters;
+}

web/src/pages/agents/index.tsx

@@ -17,13 +17,21 @@ import { useCallback } from 'react';
 import { AgentCard } from './agent-card';
 import { CreateAgentDialog } from './create-agent-dialog';
 import { useCreateAgentOrPipeline } from './hooks/use-create-agent';
+import { useSelectFilters } from './hooks/use-selelct-filters';
 import { UploadAgentDialog } from './upload-agent-dialog';
 import { useHandleImportJsonFile } from './use-import-json';
 import { useRenameAgent } from './use-rename-agent';
 
 export default function Agents() {
-  const { data, pagination, setPagination, searchString, handleInputChange } =
-    useFetchAgentListByPage();
+  const {
+    data,
+    pagination,
+    setPagination,
+    searchString,
+    handleInputChange,
+    filterValue,
+    handleFilterSubmit,
+  } = useFetchAgentListByPage();
   const { navigateToAgentTemplates } = useNavigatePage();
 
   const {
@@ -50,6 +58,8 @@ export default function Agents() {
     hideFileUploadModal,
   } = useHandleImportJsonFile();
 
+  const filters = useSelectFilters();
+
   const handlePageChange = useCallback(
     (page: number, pageSize?: number) => {
       setPagination({ page, pageSize });
@@ -65,6 +75,9 @@ export default function Agents() {
           searchString={searchString}
           onSearchChange={handleInputChange}
           icon="agent"
+          filters={filters}
+          onChange={handleFilterSubmit}
+          value={filterValue}
         >
           <DropdownMenu>
             <DropdownMenuTrigger>

web/src/pages/datasets/use-select-owners.ts

@@ -1,18 +1,11 @@
 import { FilterCollection } from '@/components/list-filter-bar/interface';
-import { useFetchKnowledgeList } from '@/hooks/knowledge-hooks';
-import { groupListByType } from '@/utils/dataset-util';
-import { useMemo } from 'react';
+import { useFetchKnowledgeList } from '@/hooks/use-knowledge-request';
+import { buildOwnersFilter } from '@/utils/list-filter-util';
 
 export function useSelectOwners() {
   const { list } = useFetchKnowledgeList();
 
-  const owners = useMemo(() => {
-    return groupListByType(list, 'tenant_id', 'nickname');
-  }, [list]);
-
-  const filters: FilterCollection[] = [
-    { field: 'owner', list: owners, label: 'Owner' },
-  ];
+  const filters: FilterCollection[] = [buildOwnersFilter(list)];
 
   return filters;
 }