Feat: Filter document by running status and file type. #3221 (#7340)

### What problem does this PR solve?
Feat: Filter document by running status and file type. #3221

### Type of change


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

web/src/pages/datasets/index.tsx

@@ -4,14 +4,14 @@ import { Button } from '@/components/ui/button';
 import { useFetchNextKnowledgeListByPage } from '@/hooks/use-knowledge-request';
 import { pick } from 'lodash';
 import { Plus } from 'lucide-react';
-import { PropsWithChildren, useCallback } from 'react';
+import { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { DatasetCard } from './dataset-card';
 import { DatasetCreatingDialog } from './dataset-creating-dialog';
-import { DatasetsFilterPopover } from './datasets-filter-popover';
 import { DatasetsPagination } from './datasets-pagination';
 import { useSaveKnowledge } from './hooks';
 import { useRenameDataset } from './use-rename-dataset';
+import { useSelectOwners } from './use-select-owners';
 
 export default function Datasets() {
   const { t } = useTranslation();
@@ -30,10 +30,12 @@ export default function Datasets() {
     setPagination,
     handleInputChange,
     searchString,
-    setOwnerIds,
-    ownerIds,
+    filterValue,
+    handleFilterSubmit,
   } = useFetchNextKnowledgeListByPage();
 
+  const owners = useSelectOwners();
+
   const {
     datasetRenameLoading,
     initialDatasetName,
@@ -54,14 +56,11 @@ export default function Datasets() {
     <section className="p-8 text-foreground">
       <ListFilterBar
         title="Datasets"
-        count={ownerIds.length}
-        FilterPopover={({ children }: PropsWithChildren) => (
-          <DatasetsFilterPopover setOwnerIds={setOwnerIds} ownerIds={ownerIds}>
-            {children}
-          </DatasetsFilterPopover>
-        )}
         searchString={searchString}
         onSearchChange={handleInputChange}
+        value={filterValue}
+        filters={owners}
+        onChange={handleFilterSubmit}
       >
         <Button variant={'tertiary'} size={'sm'} onClick={showModal}>
           <Plus className="mr-2 h-4 w-4" />

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

@@ -1,28 +1,18 @@
+import { FilterCollection } from '@/components/list-filter-bar/interface';
 import { useFetchKnowledgeList } from '@/hooks/knowledge-hooks';
+import { groupListByType } from '@/utils/dataset-util';
 import { useMemo } from 'react';
 
-export type OwnerFilterType = {
-  id: string;
-  label: string;
-  count: number;
-};
-
 export function useSelectOwners() {
   const { list } = useFetchKnowledgeList();
 
   const owners = useMemo(() => {
-    const ownerList: OwnerFilterType[] = [];
-    list.forEach((x) => {
-      const item = ownerList.find((y) => y.id === x.tenant_id);
-      if (!item) {
-        ownerList.push({ id: x.tenant_id, label: x.nickname, count: 1 });
-      } else {
-        item.count += 1;
-      }
-    });
-
-    return ownerList;
+    return groupListByType(list, 'tenant_id', 'nickname');
   }, [list]);
 
-  return owners;
+  const filters: FilterCollection[] = [
+    { field: 'owner', list: owners, label: 'Owner' },
+  ];
+
+  return filters;
 }