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/dataset/dataset/dataset-table.tsx

@@ -35,14 +35,16 @@ import { useDatasetTableColumns } from './use-dataset-table-columns';
 import { useRenameDocument } from './use-rename-document';
 import { useSaveMeta } from './use-save-meta';
 
-export function DatasetTable() {
-  const {
-    // searchString,
-    documents,
-    pagination,
-    // handleInputChange,
-    setPagination,
-  } = useFetchDocumentList();
+export type DatasetTableProps = Pick<
+  ReturnType<typeof useFetchDocumentList>,
+  'documents' | 'setPagination' | 'pagination'
+>;
+
+export function DatasetTable({
+  documents,
+  pagination,
+  setPagination,
+}: DatasetTableProps) {
   const [sorting, setSorting] = React.useState<SortingState>([]);
   const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
     [],

web/src/pages/dataset/dataset/index.tsx

@@ -2,9 +2,11 @@ import { BulkOperateBar } from '@/components/bulk-operate-bar';
 import { FileUploadDialog } from '@/components/file-upload-dialog';
 import ListFilterBar from '@/components/list-filter-bar';
 import { Button } from '@/components/ui/button';
+import { useFetchDocumentList } from '@/hooks/use-document-request';
 import { Upload } from 'lucide-react';
 import { DatasetTable } from './dataset-table';
 import { useBulkOperateDataset } from './use-bulk-operate-dataset';
+import { useSelectDatasetFilters } from './use-select-filters';
 import { useHandleUploadDocument } from './use-upload-document';
 
 export default function Dataset() {
@@ -16,10 +18,27 @@ export default function Dataset() {
     documentUploadLoading,
   } = useHandleUploadDocument();
   const { list } = useBulkOperateDataset();
+  const {
+    searchString,
+    documents,
+    pagination,
+    handleInputChange,
+    setPagination,
+    filterValue,
+    handleFilterSubmit,
+  } = useFetchDocumentList();
+  const { filters } = useSelectDatasetFilters();
 
   return (
     <section className="p-8">
-      <ListFilterBar title="Dataset">
+      <ListFilterBar
+        title="Dataset"
+        onSearchChange={handleInputChange}
+        searchString={searchString}
+        value={filterValue}
+        onChange={handleFilterSubmit}
+        filters={filters}
+      >
         <Button
           variant={'tertiary'}
           size={'sm'}
@@ -30,7 +49,11 @@ export default function Dataset() {
         </Button>
       </ListFilterBar>
       <BulkOperateBar list={list}></BulkOperateBar>
-      <DatasetTable></DatasetTable>
+      <DatasetTable
+        documents={documents}
+        pagination={pagination}
+        setPagination={setPagination}
+      ></DatasetTable>
       {documentUploadVisible && (
         <FileUploadDialog
           hideModal={hideDocumentUploadModal}

web/src/pages/dataset/dataset/use-select-filters.ts

@@ -0,0 +1,31 @@
+import { useFetchAllDocumentList } from '@/hooks/use-document-request';
+import { groupListByType } from '@/utils/dataset-util';
+import { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+export function useSelectDatasetFilters() {
+  const {
+    data: { docs: documents },
+  } = useFetchAllDocumentList();
+  const { t } = useTranslation();
+
+  const fileTypes = useMemo(() => {
+    return groupListByType(documents, 'type', 'type');
+  }, [documents]);
+
+  const fileStatus = useMemo(() => {
+    return groupListByType(documents, 'run', 'run').map((x) => ({
+      ...x,
+      label: t(`knowledgeDetails.runningStatus${x.label}`),
+    }));
+  }, [documents, t]);
+
+  const filters = useMemo(() => {
+    return [
+      { field: 'type', label: 'File Type', list: fileTypes },
+      { field: 'run', label: 'Status', list: fileStatus },
+    ];
+  }, [fileStatus, fileTypes]);
+
+  return { fileTypes, fileStatus, filters };
+}