Add Bulk action for linking Multiple Files to Datasets (#14960)

### What problem does this PR solve?

Feature: #14961 


### Type of change

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

web/src/components/bulk-operate-bar.tsx

@@ -50,7 +50,7 @@ export function BulkOperateBar({
 
         <Separator orientation={'vertical'} className="h-[1em]"></Separator>
 
-        <ul className="flex gap-2">
+        <ul className="flex gap-3">
           {list.map((x) => {
             const isDeleteItem = x.id === 'delete';
 

web/src/pages/files/files-table.tsx

@@ -43,7 +43,10 @@ import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router';
 import { ActionCell } from './action-cell';
-import { useHandleConnectToKnowledge, useRenameCurrentFile } from './hooks';
+import {
+  UseHandleConnectToKnowledgeReturnType,
+  useRenameCurrentFile,
+} from './hooks';
 import { KnowledgeCell } from './knowledge-cell';
 import { LinkToDatasetDialog } from './link-to-dataset-dialog';
 import { UseMoveDocumentShowType } from './use-move-file';
@@ -57,7 +60,9 @@ type FilesTableProps = Pick<
   'files' | 'loading' | 'pagination' | 'setPagination' | 'total'
 > &
   Pick<UseRowSelectionType, 'rowSelection' | 'setRowSelection'> &
-  UseMoveDocumentShowType;
+  UseMoveDocumentShowType & {
+    connectKnowledgeModal: UseHandleConnectToKnowledgeReturnType;
+  };
 
 export function FilesTable({
   files,
@@ -68,6 +73,7 @@ export function FilesTable({
   rowSelection,
   setRowSelection,
   showMoveFileModal,
+  connectKnowledgeModal,
 }: FilesTableProps) {
   const [sorting, setSorting] = React.useState<SortingState>([]);
   const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
@@ -87,7 +93,7 @@ export function FilesTable({
     initialConnectedIds,
     onConnectToKnowledgeOk,
     connectToKnowledgeLoading,
-  } = useHandleConnectToKnowledge();
+  } = connectKnowledgeModal;
   const {
     fileRenameVisible,
     showFileRenameModal,

web/src/pages/files/hooks.ts

@@ -82,6 +82,7 @@ export const useHandleConnectToKnowledge = () => {
   const { connectFileToKnowledge: connectToKnowledge, loading } =
     useConnectToKnowledge();
   const [record, setRecord] = useState<IFile>({} as IFile);
+  const [documentIds, setDocumentIds] = useState<string[]>([]);
 
   const initialValue = useMemo(() => {
     return Array.isArray(record?.kbs_info)
@@ -92,7 +93,7 @@ export const useHandleConnectToKnowledge = () => {
   const onConnectToKnowledgeOk = useCallback(
     async (knowledgeIds: string[]) => {
       const ret = await connectToKnowledge({
-        fileIds: [record.id],
+        fileIds: documentIds,
         kbIds: knowledgeIds,
       });
 
@@ -101,12 +102,19 @@ export const useHandleConnectToKnowledge = () => {
       }
       return ret;
     },
-    [connectToKnowledge, hideConnectToKnowledgeModal, record.id],
+    [connectToKnowledge, hideConnectToKnowledgeModal, documentIds],
   );
 
   const handleShowConnectToKnowledgeModal = useCallback(
-    (record: IFile) => {
-      setRecord(record);
+    (documents: IFile | string[]) => {
+      if (Array.isArray(documents)) {
+        setDocumentIds(documents);
+        setRecord({} as IFile);
+      } else {
+        setRecord(documents);
+        setDocumentIds([documents.id]);
+      }
+
       showConnectToKnowledgeModal();
     },
     [showConnectToKnowledgeModal],

web/src/pages/files/index.tsx

@@ -16,6 +16,10 @@ import { useTranslation } from 'react-i18next';
 import { CreateFolderDialog } from './create-folder-dialog';
 import { FileBreadcrumb } from './file-breadcrumb';
 import { FilesTable } from './files-table';
+import {
+  useHandleConnectToKnowledge,
+  UseHandleConnectToKnowledgeReturnType,
+} from './hooks';
 import { MoveDialog } from './move-dialog';
 import { useBulkOperateFile } from './use-bulk-operate-file';
 import { useHandleCreateFolder } from './use-create-folder';
@@ -67,11 +71,16 @@ export default function Files() {
     moveFileLoading,
   } = useHandleMoveFile({ clearRowSelection });
 
+  const connectKnowledgeModal: UseHandleConnectToKnowledgeReturnType =
+    useHandleConnectToKnowledge();
+
   const { list } = useBulkOperateFile({
     files,
     rowSelection,
     showMoveFileModal,
     setRowSelection,
+    showConnectToKnowledgeModal:
+      connectKnowledgeModal.showConnectToKnowledgeModal,
   });
 
   const breadcrumbItems = useSelectBreadcrumbItems();
@@ -130,6 +139,7 @@ export default function Files() {
           rowSelection={rowSelection}
           setRowSelection={setRowSelection}
           showMoveFileModal={showMoveFileModal}
+          connectKnowledgeModal={connectKnowledgeModal}
         />
       </div>
 

web/src/pages/files/use-bulk-operate-file.tsx

@@ -1,8 +1,9 @@
 import { useSelectedIds } from '@/hooks/logic-hooks/use-row-selection';
 import { IFile } from '@/interfaces/database/file-manager';
 import { OnChangeFn, RowSelectionState } from '@tanstack/react-table';
-import { FolderInput, Trash2 } from 'lucide-react';
+import { FolderInput, Link2, Trash2 } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
+import { UseHandleConnectToKnowledgeReturnType } from './hooks';
 import { useHandleDeleteFile } from './use-delete-file';
 import { UseMoveDocumentShowType } from './use-move-file';
 
@@ -11,11 +12,14 @@ export function useBulkOperateFile({
   rowSelection,
   showMoveFileModal,
   setRowSelection,
+  showConnectToKnowledgeModal,
 }: {
   files: IFile[];
   rowSelection: RowSelectionState;
   setRowSelection: OnChangeFn<RowSelectionState>;
-} & UseMoveDocumentShowType) {
+} & UseMoveDocumentShowType & {
+    showConnectToKnowledgeModal: UseHandleConnectToKnowledgeReturnType['showConnectToKnowledgeModal'];
+  }) {
   const { t } = useTranslation();
 
   const { selectedIds } = useSelectedIds(rowSelection, files);
@@ -31,6 +35,14 @@ export function useBulkOperateFile({
         showMoveFileModal(selectedIds, true);
       },
     },
+    {
+      id: 'link',
+      label: t('fileManager.addToKnowledge'),
+      icon: <Link2 />,
+      onClick: async () => {
+        showConnectToKnowledgeModal(selectedIds);
+      },
+    },
     {
       id: 'delete',
       label: t('common.delete'),