feat: add file icon to table of FileManager #345 (#543)

### What problem does this PR solve?

feat: add file icon to table of FileManager #345
fix: modify datasetDescription

### Type of change

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

web/src/pages/file-manager/index.tsx

@@ -1,11 +1,12 @@
 import { useSelectFileList } from '@/hooks/fileManagerHooks';
 import { IFile } from '@/interfaces/database/file-manager';
 import { formatDate } from '@/utils/date';
-import { Button, Table } from 'antd';
+import { Button, Flex, Table } from 'antd';
 import { ColumnsType } from 'antd/es/table';
 import ActionCell from './action-cell';
 import FileToolbar from './file-toolbar';
 import {
+  useGetFilesPagination,
   useGetRowSelection,
   useHandleConnectToKnowledge,
   useHandleCreateFolder,
@@ -16,6 +17,8 @@ import {
 } from './hooks';
 
 import RenameModal from '@/components/rename-modal';
+import SvgIcon from '@/components/svg-icon';
+import { getExtension } from '@/utils/documentUtils';
 import ConnectToKnowledgeModal from './connect-to-knowledge-modal';
 import FileUploadModal from './file-upload-modal';
 import FolderCreateModal from './folder-create-modal';
@@ -23,7 +26,7 @@ import styles from './index.less';
 
 const FileManager = () => {
   const fileList = useSelectFileList();
-  const rowSelection = useGetRowSelection();
+  const { rowSelection, setSelectedRowKeys } = useGetRowSelection();
   const loading = useSelectFileListLoading();
   const navigateToOtherFolder = useNavigateToOtherFolder();
   const {
@@ -41,14 +44,21 @@ const FileManager = () => {
     folderCreateLoading,
     onFolderCreateOk,
   } = useHandleCreateFolder();
-  const { fileUploadVisible, hideFileUploadModal, showFileUploadModal } =
-    useHandleUploadFile();
+  const {
+    fileUploadVisible,
+    hideFileUploadModal,
+    showFileUploadModal,
+    fileUploadLoading,
+    onFileUploadOk,
+  } = useHandleUploadFile();
   const {
     connectToKnowledgeVisible,
     hideConnectToKnowledgeModal,
     showConnectToKnowledgeModal,
     onConnectToKnowledgeOk,
+    initialValue,
   } = useHandleConnectToKnowledge();
+  const { pagination } = useGetFilesPagination();
 
   const columns: ColumnsType<IFile> = [
     {
@@ -56,15 +66,24 @@ const FileManager = () => {
       dataIndex: 'name',
       key: 'name',
       render(value, record) {
-        return record.type === 'folder' ? (
-          <Button
-            type={'link'}
-            onClick={() => navigateToOtherFolder(record.id)}
-          >
-            {value}
-          </Button>
-        ) : (
-          value
+        return (
+          <Flex gap={10} align="center">
+            <SvgIcon
+              name={`file-icon/${record.type === 'folder' ? 'folder' : getExtension(value)}`}
+              width={24}
+            ></SvgIcon>
+            {record.type === 'folder' ? (
+              <Button
+                type={'link'}
+                className={styles.linkButton}
+                onClick={() => navigateToOtherFolder(record.id)}
+              >
+                {value}
+              </Button>
+            ) : (
+              value
+            )}
+          </Flex>
         );
       },
     },
@@ -77,11 +96,10 @@ const FileManager = () => {
       },
     },
     {
-      title: 'kbs_info',
+      title: 'Knowledge Base',
       dataIndex: 'kbs_info',
       key: 'kbs_info',
       render(value) {
-        console.info(value);
         return Array.isArray(value)
           ? value?.map((x) => x.kb_name).join(',')
           : '';
@@ -104,6 +122,7 @@ const FileManager = () => {
           }}
           showRenameModal={showFileRenameModal}
           showConnectToKnowledgeModal={showConnectToKnowledgeModal}
+          setSelectedRowKeys={setSelectedRowKeys}
         ></ActionCell>
       ),
     },
@@ -115,6 +134,7 @@ const FileManager = () => {
         selectedRowKeys={rowSelection.selectedRowKeys as string[]}
         showFolderCreateModal={showFolderCreateModal}
         showFileUploadModal={showFileUploadModal}
+        setSelectedRowKeys={setSelectedRowKeys}
       ></FileToolbar>
       <Table
         dataSource={fileList}
@@ -122,6 +142,7 @@ const FileManager = () => {
         rowKey={'id'}
         rowSelection={rowSelection}
         loading={loading}
+        pagination={pagination}
       />
       <RenameModal
         visible={fileRenameVisible}
@@ -139,8 +160,11 @@ const FileManager = () => {
       <FileUploadModal
         visible={fileUploadVisible}
         hideModal={hideFileUploadModal}
+        loading={fileUploadLoading}
+        onOk={onFileUploadOk}
       ></FileUploadModal>
       <ConnectToKnowledgeModal
+        initialValue={initialValue}
         visible={connectToKnowledgeVisible}
         hideModal={hideConnectToKnowledgeModal}
         onOk={onConnectToKnowledgeOk}