Feat: Adjust the operation cell of the table on the file management page and dataset page #3221. (#7526)

### What problem does this PR solve?

Feat: Adjust the operation cell of the table on the file management page
and dataset page #3221.
### Type of change


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

web/src/pages/files/action-cell.tsx

@@ -1,13 +1,6 @@
 import { ConfirmDeleteDialog } from '@/components/confirm-delete-dialog';
 import NewDocumentLink from '@/components/new-document-link';
 import { Button } from '@/components/ui/button';
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from '@/components/ui/dropdown-menu';
 import { useDownloadFile } from '@/hooks/file-manager-hooks';
 import { IFile } from '@/interfaces/database/file-manager';
 import {
@@ -15,9 +8,15 @@ import {
   isSupportedPreviewDocumentType,
 } from '@/utils/document-util';
 import { CellContext } from '@tanstack/react-table';
-import { EllipsisVertical, Eye, Link2, Trash2 } from 'lucide-react';
+import {
+  ArrowDownToLine,
+  Eye,
+  FolderInput,
+  FolderPen,
+  Link2,
+  Trash2,
+} from 'lucide-react';
 import { useCallback } from 'react';
-import { useTranslation } from 'react-i18next';
 import {
   UseHandleConnectToKnowledgeReturnType,
   UseRenameCurrentFileReturnType,
@@ -36,7 +35,6 @@ export function ActionCell({
   showFileRenameModal,
   showMoveFileModal,
 }: IProps) {
-  const { t } = useTranslation();
   const record = row.original;
   const documentId = record.id;
   const { downloadFile } = useDownloadFile();
@@ -63,33 +61,43 @@ export function ActionCell({
   }, [record, showMoveFileModal]);
 
   return (
-    <section className="flex gap-4 items-center">
+    <section className="flex gap-4 items-center text-text-sub-title-invert">
       <Button
         variant="ghost"
-        size={'icon'}
+        size={'sm'}
         onClick={handleShowConnectToKnowledgeModal}
       >
         <Link2 />
       </Button>
-      <ConfirmDeleteDialog>
-        <Button variant="ghost" size={'icon'}>
-          <Trash2 className="text-text-delete-red" />
+      <Button variant="ghost" size={'sm'} onClick={handleShowMoveFileModal}>
+        <FolderInput />
+      </Button>
+
+      <Button variant="ghost" size={'sm'} onClick={handleShowFileRenameModal}>
+        <FolderPen />
+      </Button>
+
+      {isFolder || (
+        <Button variant={'ghost'} size={'sm'} onClick={onDownloadDocument}>
+          <ArrowDownToLine />
         </Button>
-      </ConfirmDeleteDialog>
+      )}
+
       {isSupportedPreviewDocumentType(extension) && (
         <NewDocumentLink
           documentId={documentId}
           documentName={record.name}
-          color="black"
+          className="text-text-sub-title-invert"
         >
-          <Button variant={'ghost'} size={'icon'}>
+          <Button variant={'ghost'} size={'sm'}>
             <Eye />
           </Button>
         </NewDocumentLink>
       )}
-      <DropdownMenu>
+
+      {/* <DropdownMenu>
         <DropdownMenuTrigger asChild>
-          <Button variant="ghost" size={'icon'}>
+          <Button variant="ghost" size={'sm'}>
             <EllipsisVertical />
           </Button>
         </DropdownMenuTrigger>
@@ -108,7 +116,12 @@ export function ActionCell({
             </DropdownMenuItem>
           )}
         </DropdownMenuContent>
-      </DropdownMenu>
+      </DropdownMenu> */}
+      <ConfirmDeleteDialog>
+        <Button variant="ghost" size={'sm'}>
+          <Trash2 />
+        </Button>
+      </ConfirmDeleteDialog>
     </section>
   );
 }

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

@@ -304,12 +304,7 @@ export function FilesTable({
         </TableBody>
       </Table>
 
-      <div className="flex items-center justify-end space-x-2 py-4">
-        <div className="flex-1 text-sm text-muted-foreground">
-          {table.getFilteredSelectedRowModel().rows.length} of {total} row(s)
-          selected.
-        </div>
-
+      <div className="flex items-center justify-end py-4">
         <div className="space-x-2">
           <RAGFlowPagination
             {...pick(pagination, 'current', 'pageSize')}

web/src/pages/files/index.tsx

@@ -20,6 +20,7 @@ import { MoveDialog } from './move-dialog';
 import { useBulkOperateFile } from './use-bulk-operate-file';
 import { useHandleCreateFolder } from './use-create-folder';
 import { useHandleMoveFile } from './use-move-file';
+import { useSelectBreadcrumbItems } from './use-navigate-to-folder';
 import { useHandleUploadFile } from './use-upload-file';
 
 export default function Files() {
@@ -55,6 +56,7 @@ export default function Files() {
     setRowSelection,
     rowSelectionIsEmpty,
     clearRowSelection,
+    selectedCount,
   } = useRowSelection();
 
   const {
@@ -72,9 +74,11 @@ export default function Files() {
     setRowSelection,
   });
 
+  const breadcrumbItems = useSelectBreadcrumbItems();
+
   const leftPanel = (
     <div>
-      <FileBreadcrumb></FileBreadcrumb>
+      {breadcrumbItems.length > 0 ? <FileBreadcrumb></FileBreadcrumb> : 'File'}
     </div>
   );
 
@@ -85,6 +89,7 @@ export default function Files() {
         searchString={searchString}
         onSearchChange={handleInputChange}
         showFilter={false}
+        icon={'file'}
       >
         <DropdownMenu>
           <DropdownMenuTrigger asChild>
@@ -104,7 +109,9 @@ export default function Files() {
           </DropdownMenuContent>
         </DropdownMenu>
       </ListFilterBar>
-      {!rowSelectionIsEmpty && <BulkOperateBar list={list}></BulkOperateBar>}
+      {!rowSelectionIsEmpty && (
+        <BulkOperateBar list={list} count={selectedCount}></BulkOperateBar>
+      )}
       <FilesTable
         files={files}
         total={total}

web/src/pages/files/knowledge-cell.tsx

@@ -7,12 +7,13 @@ import {
   HoverCardTrigger,
 } from '@/components/ui/hover-card';
 import { IFile } from '@/interfaces/database/file-manager';
+import { Ellipsis } from 'lucide-react';
 import { useCallback } from 'react';
 
 export function KnowledgeCell({ value }: { value: IFile['kbs_info'] }) {
   const renderBadges = useCallback((list: IFile['kbs_info'] = []) => {
     return list.map((x) => (
-      <Badge key={x.kb_id} className="" variant={'tertiary'}>
+      <Badge key={x.kb_id} variant={'secondary'}>
         {x.kb_name}
       </Badge>
     ));
@@ -25,8 +26,8 @@ export function KnowledgeCell({ value }: { value: IFile['kbs_info'] }) {
       {value.length > 2 && (
         <HoverCard>
           <HoverCardTrigger>
-            <Button variant={'icon'} size={'auto'}>
-              +{value.length - 2}
+            <Button variant={'ghost'} size={'sm'}>
+              <Ellipsis />
             </Button>
           </HoverCardTrigger>
           <HoverCardContent className="flex gap-2 flex-wrap">