From 5bebec6aeec3b3cc5866065e98c196c09ea6d74b Mon Sep 17 00:00:00 2001
From: Michael An <2331806369@qq.com>
Date: Thu, 12 Sep 2024 14:03:29 +0800
Subject: [PATCH] improve/add-empty-tip-when-no-file (#6760)

---
 .../src/components/dialog/trash-dialog.js     | 10 ++++-
 .../dirent-grid-view/dirent-grid-view.js      | 42 ++++++++++++-------
 .../dirent-list-view/dirent-list-view.js      |  6 +++
 .../dirent-list-view/dirent-none-view.js      |  6 +--
 frontend/src/components/empty-tip.js          |  4 +-
 .../view/gallery/{main.js => gallery-main.js} | 13 ++++--
 .../components/view/gallery/index.js          | 10 +++--
 .../view/table/table-main/records/index.js    | 13 ++++--
 .../table-main/records/record-footer/index.js |  2 +-
 9 files changed, 73 insertions(+), 33 deletions(-)
 rename frontend/src/metadata/metadata-view/components/view/gallery/{main.js => gallery-main.js} (86%)

diff --git a/frontend/src/components/dialog/trash-dialog.js b/frontend/src/components/dialog/trash-dialog.js
index 63f67eb6de..4f366d2940 100644
--- a/frontend/src/components/dialog/trash-dialog.js
+++ b/frontend/src/components/dialog/trash-dialog.js
@@ -11,6 +11,8 @@ import ModalPortal from '../../components/modal-portal';
 import toaster from '../../components/toast';
 import CleanTrash from '../../components/dialog/clean-trash';
 import Paginator from '../paginator';
+import Loading from '../../components/loading';
+import EmptyTip from '../../components/empty-tip';
 
 import '../../css/toolbar.css';
 import '../../css/search.css';
@@ -141,7 +143,7 @@ class TrashDialog extends React.Component {
 
   render() {
     const { showTrashDialog, toggleTrashDialog } = this.props;
-    const { isCleanTrashDialogOpen, showFolder } = this.state;
+    const { isCleanTrashDialogOpen, showFolder, isLoading, items } = this.state;
     const isRepoAdmin = this.props.currentRepoInfo.owner_email === username || this.props.currentRepoInfo.is_admin;
     const repoFolderName = this.props.currentRepoInfo.repo_name;
     const oldTrashUrl = siteRoot + 'repo/' + this.props.repoID + '/trash/';
@@ -164,6 +166,11 @@ class TrashDialog extends React.Component {
           <div dangerouslySetInnerHTML={{ __html: title }}></div>
         </ModalHeader>
         <ModalBody>
+          {isLoading && <Loading />}
+          {!isLoading && items.length === 0 &&
+            <EmptyTip text={gettext('No file')} className="m-0" />
+          }
+          {!isLoading && items.length > 0 &&
           <Content
             data={this.state}
             repoID={this.props.repoID}
@@ -175,6 +182,7 @@ class TrashDialog extends React.Component {
             getListByPage={this.getItems2}
             resetPerPage={this.resetPerPage}
           />
+          }
           {isCleanTrashDialogOpen &&
           <ModalPortal>
             <CleanTrash
diff --git a/frontend/src/components/dirent-grid-view/dirent-grid-view.js b/frontend/src/components/dirent-grid-view/dirent-grid-view.js
index f1f84e536f..f24d071d92 100644
--- a/frontend/src/components/dirent-grid-view/dirent-grid-view.js
+++ b/frontend/src/components/dirent-grid-view/dirent-grid-view.js
@@ -1,6 +1,6 @@
 import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
-import { siteRoot, username, enableSeadoc, thumbnailDefaultSize, thumbnailSizeForOriginal } from '../../utils/constants';
+import { siteRoot, username, enableSeadoc, thumbnailDefaultSize, thumbnailSizeForOriginal, gettext } from '../../utils/constants';
 import { Utils } from '../../utils/utils';
 import { seafileAPI } from '../../utils/seafile-api';
 import URLDecorator from '../../utils/url-decorator';
@@ -24,6 +24,7 @@ import toaster from '../toast';
 import imageAPI from '../../utils/image-api';
 import FileAccessLog from '../dialog/file-access-log';
 import { EVENT_BUS_TYPE } from '../common/event-bus-type';
+import EmptyTip from '../empty-tip';
 
 import '../../css/grid-view.css';
 
@@ -826,16 +827,16 @@ class DirentGridView extends React.Component {
 
     return (
       <Fragment>
-        <ul
-          className="grid-view"
-          onClick={this.gridContainerClick}
-          onContextMenu={this.onGridContainerContextMenu}
-          onMouseDown={this.onGridContainerMouseDown}
-          onMouseMove={this.onSelectMouseMove}
-          ref={this.containerRef}
-        >
-          {
-            direntList.length !== 0 && direntList.map((dirent, index) => {
+        {direntList.length > 0 ?
+          <ul
+            className="grid-view"
+            onClick={this.gridContainerClick}
+            onContextMenu={this.onGridContainerContextMenu}
+            onMouseDown={this.onGridContainerMouseDown}
+            onMouseMove={this.onSelectMouseMove}
+            ref={this.containerRef}
+          >
+            {direntList.map((dirent, index) => {
               return (
                 <DirentGridItem
                   key={index}
@@ -854,10 +855,21 @@ class DirentGridView extends React.Component {
                   selectedDirentList={selectedDirentList}
                 />
               );
-            })
-          }
-          {this.renderSelectionBox()}
-        </ul>
+            })}
+            {this.renderSelectionBox()}
+          </ul>
+          :
+          <ul
+            className="grid-view"
+            onClick={this.gridContainerClick}
+            onContextMenu={this.onGridContainerContextMenu}
+            onMouseDown={this.onGridContainerMouseDown}
+            onMouseMove={this.onSelectMouseMove}
+            ref={this.containerRef}
+          >
+            <EmptyTip text={gettext('No file')} className='w-100' />
+          </ul>
+        }
         <ContextMenu
           id={GRID_ITEM_CONTEXTMENU_ID}
           onMenuItemClick={this.onMenuItemClick}
diff --git a/frontend/src/components/dirent-list-view/dirent-list-view.js b/frontend/src/components/dirent-list-view/dirent-list-view.js
index cbfc1433f1..f46e3777ae 100644
--- a/frontend/src/components/dirent-list-view/dirent-list-view.js
+++ b/frontend/src/components/dirent-list-view/dirent-list-view.js
@@ -18,6 +18,7 @@ import ContextMenu from '../context-menu/context-menu';
 import { hideMenu, showMenu } from '../context-menu/actions';
 import DirentsDraggedPreview from '../draggable/dirents-dragged-preview';
 import { EVENT_BUS_TYPE } from '../common/event-bus-type';
+import EmptyTip from '../empty-tip';
 
 const propTypes = {
   path: PropTypes.string.isRequired,
@@ -651,6 +652,7 @@ class DirentListView extends React.Component {
         onDragLeave={this.onTableDragLeave}
         onDrop={this.tableDrop}
       >
+        {direntList.length > 0 &&
         <table className={`table-hover ${isDesktop ? '' : 'table-thead-hidden'}`}>
           {isDesktop ? (
             <thead onMouseDown={this.onThreadMouseDown} onContextMenu={this.onThreadContextMenu}>
@@ -729,6 +731,10 @@ class DirentListView extends React.Component {
             })}
           </tbody>
         </table>
+        }
+        {direntList.length === 0 &&
+          <EmptyTip text={gettext('No file')}/>
+        }
         <Fragment>
           <ContextMenu
             id={'dirent-container-menu'}
diff --git a/frontend/src/components/dirent-list-view/dirent-none-view.js b/frontend/src/components/dirent-list-view/dirent-none-view.js
index 00869b032d..9c7a501500 100644
--- a/frontend/src/components/dirent-list-view/dirent-none-view.js
+++ b/frontend/src/components/dirent-list-view/dirent-none-view.js
@@ -14,7 +14,7 @@ const propTypes = {
   onAddFile: PropTypes.func.isRequired
 };
 
-class DirentNodeView extends React.Component {
+class DirentNoneView extends React.Component {
 
   constructor(props) {
     super(props);
@@ -88,6 +88,6 @@ class DirentNodeView extends React.Component {
   }
 }
 
-DirentNodeView.propTypes = propTypes;
+DirentNoneView.propTypes = propTypes;
 
-export default DirentNodeView;
+export default DirentNoneView;
diff --git a/frontend/src/components/empty-tip.js b/frontend/src/components/empty-tip.js
index 8a460e2629..02b1da9fc6 100644
--- a/frontend/src/components/empty-tip.js
+++ b/frontend/src/components/empty-tip.js
@@ -3,9 +3,9 @@ import PropTypes from 'prop-types';
 import { mediaUrl } from '../utils/constants';
 import '../css/empty-tip.css';
 
-function EmptyTip({ className, title, text, children }) {
+function EmptyTip({ className = '', title, text, children }) {
   return (
-    <div className='empty-tip'>
+    <div className={`empty-tip ${className}`}>
       <img src={`${mediaUrl}img/no-items-tip.png`} alt="" width="100" height="100" className="no-items-img-tip" />
       {title && <span className="empty-tip-title">{title}</span>}
       {text && <span className="empty-tip-text">{text}</span>}
diff --git a/frontend/src/metadata/metadata-view/components/view/gallery/main.js b/frontend/src/metadata/metadata-view/components/view/gallery/gallery-main.js
similarity index 86%
rename from frontend/src/metadata/metadata-view/components/view/gallery/main.js
rename to frontend/src/metadata/metadata-view/components/view/gallery/gallery-main.js
index 43a80c6c6e..235ad4662d 100644
--- a/frontend/src/metadata/metadata-view/components/view/gallery/main.js
+++ b/frontend/src/metadata/metadata-view/components/view/gallery/gallery-main.js
@@ -1,7 +1,9 @@
 import React, { useCallback, useMemo } from 'react';
 import PropTypes from 'prop-types';
+import EmptyTip from '../../../../../components/empty-tip';
+import { gettext } from '../../../utils';
 
-const Main = ({ groups, overScan, columns, size, gap }) => {
+const GalleryMain = ({ groups, overScan, columns, size, gap }) => {
   const imageHeight = useMemo(() => size + gap, [size, gap]);
 
   const renderDisplayGroup = useCallback((group) => {
@@ -47,17 +49,20 @@ const Main = ({ groups, overScan, columns, size, gap }) => {
     );
   }, [overScan, columns, size, imageHeight]);
 
-  if (!Array.isArray(groups) || groups.length === 0) return null;
+  if (!Array.isArray(groups) || groups.length === 0) {
+    return <EmptyTip text={gettext('No record')}/>;
+  }
+
   return groups.map((group, index) => {
     return renderDisplayGroup(group, index);
   });
 };
 
-Main.propTypes = {
+GalleryMain.propTypes = {
   groups: PropTypes.array,
   overScan: PropTypes.object,
   columns: PropTypes.number,
   size: PropTypes.number,
 };
 
-export default Main;
+export default GalleryMain;
diff --git a/frontend/src/metadata/metadata-view/components/view/gallery/index.js b/frontend/src/metadata/metadata-view/components/view/gallery/index.js
index e3910f9096..95cc5a564e 100644
--- a/frontend/src/metadata/metadata-view/components/view/gallery/index.js
+++ b/frontend/src/metadata/metadata-view/components/view/gallery/index.js
@@ -5,7 +5,7 @@ import { Utils } from '../../../../../utils/utils';
 import { getDateDisplayString, PRIVATE_COLUMN_KEY } from '../../../_basic';
 import { siteRoot, thumbnailSizeForGrid } from '../../../../../utils/constants';
 import { EVENT_BUS_TYPE, PER_LOAD_NUMBER } from '../../../constants';
-import Main from './main';
+import GalleryMain from './gallery-main';
 import toaster from '../../../../../components/toast';
 
 import './index.css';
@@ -167,8 +167,12 @@ const Gallery = () => {
       <div className="sf-metadata-gallery-container" ref={containerRef} onScroll={handleScroll} >
         {!isFirstLoading && (
           <>
-            <Main groups={groups} size={imageSize} columns={columns} overScan={overScan} gap={IMAGE_GAP} />
-            {isLoadingMore && (<div className="sf-metadata-gallery-loading-more"><CenteredLoading /></div>)}
+            <GalleryMain groups={groups} size={imageSize} columns={columns} overScan={overScan} gap={IMAGE_GAP} />
+            {isLoadingMore &&
+              <div className="sf-metadata-gallery-loading-more">
+                <CenteredLoading />
+              </div>
+            }
           </>
         )}
       </div>
diff --git a/frontend/src/metadata/metadata-view/components/view/table/table-main/records/index.js b/frontend/src/metadata/metadata-view/components/view/table/table-main/records/index.js
index 50127ec38b..58cff79afb 100644
--- a/frontend/src/metadata/metadata-view/components/view/table/table-main/records/index.js
+++ b/frontend/src/metadata/metadata-view/components/view/table/table-main/records/index.js
@@ -1,4 +1,4 @@
-import React, { Component, Fragment } from 'react';
+import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import RecordsHeader from './records-header';
 import Body from './body';
@@ -9,8 +9,9 @@ import { recalculate } from '../../../../../utils/column-utils';
 import { SEQUENCE_COLUMN_WIDTH, CANVAS_RIGHT_INTERVAL, GROUP_ROW_TYPE, EVENT_BUS_TYPE } from '../../../../../constants';
 import {
   isWindowsBrowser, isWebkitBrowser, isMobile, getEventClassName,
-  addClassName, removeClassName,
+  addClassName, removeClassName, gettext,
 } from '../../../../../utils';
+import EmptyTip from '../../../../../../../components/empty-tip';
 import RecordMetrics from '../../../../../utils/record-metrics';
 import { isShiftKeyDown } from '../../../../../utils/keyboard-utils';
 import { getVisibleBoundaries } from '../../../../../utils/viewport';
@@ -665,8 +666,12 @@ class Records extends Component {
     const hasSelectedRecord = this.hasSelectedRecord();
     const isSelectedAll = RecordMetrics.isSelectedAll(recordIds, recordMetrics);
 
+    if (recordsCount === 0) {
+      return (<EmptyTip text={gettext('No record')} />);
+    }
+
     return (
-      <Fragment>
+      <>
         <div
           className={`sf-metadata-result-container ${this.isWindows ? 'windows-browser' : ''}`}
           ref={this.setResultContainerRef}
@@ -721,7 +726,7 @@ class Records extends Component {
           getRecordsSummaries={() => {}}
           loadAll={this.props.loadAll}
         />
-      </Fragment>
+      </>
     );
   }
 }
diff --git a/frontend/src/metadata/metadata-view/components/view/table/table-main/records/record-footer/index.js b/frontend/src/metadata/metadata-view/components/view/table/table-main/records/record-footer/index.js
index 2725472cc3..856e9e4c44 100644
--- a/frontend/src/metadata/metadata-view/components/view/table/table-main/records/record-footer/index.js
+++ b/frontend/src/metadata/metadata-view/components/view/table/table-main/records/record-footer/index.js
@@ -118,7 +118,7 @@ class RecordsFooter extends React.Component {
       return gettext('xxx cells selected').replace('xxx', selectedCellsCount);
     }
 
-    let recordsCountText = gettext('No record');
+    let recordsCountText;
     if (recordsCount > 1) {
       recordsCountText = gettext('xxx records').replace('xxx', recordsCount);
     } else if (recordsCount === 1) {