fix: metadata load tip (#7103)

Co-authored-by: 杨国璇 <ygx@Hello-word.local>

frontend/src/hooks/metadata-status.js

@@ -16,6 +16,7 @@ export const MetadataStatusProvider = ({ repoID, currentRepoInfo, hideMetadataVi
   const [isLoading, setLoading] = useState(true);
   const [enableMetadata, setEnableMetadata] = useState(false);
   const [enableTags, setEnableTags] = useState(false);
+  const [isBeingBuilt, setIsBeingBuilt] = useState(false);
 
   const cancelMetadataURL = useCallback(() => {
     // If attribute extension is turned off, unmark the URL
@@ -57,6 +58,7 @@ export const MetadataStatusProvider = ({ repoID, currentRepoInfo, hideMetadataVi
       cancelMetadataURL();
       setEnableTags(false);
     }
+    setIsBeingBuilt(newValue);
     setEnableMetadata(newValue);
   }, [enableMetadata, cancelMetadataURL]);
 
@@ -74,7 +76,9 @@ export const MetadataStatusProvider = ({ repoID, currentRepoInfo, hideMetadataVi
       value={{
         enableMetadataManagement,
         enableMetadata,
+        isBeingBuilt,
         updateEnableMetadata,
+        setIsBeingBuilt,
         enableTags,
         updateEnableTags,
       }}

frontend/src/metadata/hooks/metadata-view.js

@@ -21,7 +21,7 @@ export const MetadataViewProvider = ({
   const [errorMessage, setErrorMessage] = useState(null);
   const storeRef = useRef(null);
   const { collaborators } = useCollaborators();
-  const { isEmptyRepo, showFirstView, setShowFirstView } = useMetadata();
+  const { isBeingBuilt, setIsBeingBuilt } = useMetadata();
 
   const tableChanged = useCallback(() => {
     setMetadata(storeRef.current.data);
@@ -85,9 +85,9 @@ export const MetadataViewProvider = ({
     storeRef.current = new Store({ context: window.sfMetadataContext, repoId: repoID, viewId: viewID, collaborators });
     window.sfMetadataStore = storeRef.current;
     storeRef.current.initStartIndex();
-    storeRef.current.load(PER_LOAD_NUMBER, isEmptyRepo).then(() => {
+    storeRef.current.load(PER_LOAD_NUMBER, isBeingBuilt).then(() => {
       setMetadata(storeRef.current.data);
-      setShowFirstView(false);
+      setIsBeingBuilt(false);
       setLoading(false);
     }).catch(error => {
       const errorMsg = Utils.getErrorMsg(error);
@@ -132,7 +132,7 @@ export const MetadataViewProvider = ({
     <MetadataViewContext.Provider
       value={{
         isLoading,
-        showFirstView,
+        isBeingBuilt,
         errorMessage,
         metadata,
         store: storeRef.current,

frontend/src/metadata/hooks/metadata.js

@@ -1,4 +1,4 @@
-import React, { useCallback, useContext, useEffect, useRef, useState, useMemo } from 'react';
+import React, { useCallback, useContext, useEffect, useRef, useState } from 'react';
 import metadataAPI from '../api';
 import { Utils } from '../../utils/utils';
 import toaster from '../../components/toast';
@@ -14,7 +14,6 @@ const MetadataContext = React.createContext(null);
 export const MetadataProvider = ({ repoID, currentPath, repoInfo, hideMetadataView, selectMetadataView, children }) => {
   const [isLoading, setLoading] = useState(true);
   const [enableFaceRecognition, setEnableFaceRecognition] = useState(false);
-  const [showFirstView, setShowFirstView] = useState(false);
   const [navigation, setNavigation] = useState([]);
   const [staticView, setStaticView] = useState([]);
   const [, setCount] = useState(0);
@@ -22,9 +21,7 @@ export const MetadataProvider = ({ repoID, currentPath, repoInfo, hideMetadataVi
   const viewsMap = useRef({});
   const originalTitleRef = useRef(document.title);
 
-  const isEmptyRepo = useMemo(() => repoInfo.file_count === 0, [repoInfo]);
-
-  const { enableMetadata } = useMetadataStatus();
+  const { enableMetadata, isBeingBuilt, setIsBeingBuilt } = useMetadataStatus();
 
   const updateEnableFaceRecognition = useCallback((newValue) => {
     if (newValue === enableFaceRecognition) return;
@@ -181,6 +178,14 @@ export const MetadataProvider = ({ repoID, currentPath, repoInfo, hideMetadataVi
 
   useEffect(() => {
     if (isLoading) return;
+    if (isBeingBuilt) {
+      const firstViewObject = navigation.find(item => item.type === 'view');
+      const firstView = firstViewObject ? viewsMap.current[firstViewObject._id] : '';
+      if (firstView) {
+        selectView(firstView);
+      }
+      return;
+    }
     const { origin, pathname, search } = window.location;
     const urlParams = new URLSearchParams(search);
     if (!urlParams.has('view')) return;
@@ -201,7 +206,7 @@ export const MetadataProvider = ({ repoID, currentPath, repoInfo, hideMetadataVi
       selectView(firstView);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isLoading]);
+  }, [isLoading, isBeingBuilt]);
 
   useEffect(() => {
     if (!currentPath.includes('/' + PRIVATE_FILE_TYPE.FILE_EXTENDED_PROPERTIES + '/')) return;
@@ -218,11 +223,10 @@ export const MetadataProvider = ({ repoID, currentPath, repoInfo, hideMetadataVi
 
   return (
     <MetadataContext.Provider value={{
-      isEmptyRepo,
       enableFaceRecognition,
       updateEnableFaceRecognition,
-      showFirstView,
-      setShowFirstView,
+      isBeingBuilt,
+      setIsBeingBuilt,
       navigation,
       staticView,
       viewsMap: viewsMap.current,

frontend/src/metadata/store/index.js

@@ -63,16 +63,16 @@ class Store {
     DataProcessor.run(this.data, { collaborators: this.collaborators });
   }
 
-  async load(limit = PER_LOAD_NUMBER, isEmptyRepo = false) {
+  async load(limit = PER_LOAD_NUMBER, isBeingBuilt = false) {
     const viewRes = await this.context.getView(this.viewId);
     const view = viewRes?.data?.view || {};
-    const retries = isEmptyRepo ? 0 : DEFAULT_RETRY_TIMES;
+    const retries = isBeingBuilt ? DEFAULT_RETRY_TIMES : 0;
     await this.loadMetadata(view, limit, retries);
   }
 
   async reload(limit = PER_LOAD_NUMBER) {
     this.startIndex = 0;
-    await this.loadMetadata(this.data.view, limit);
+    await this.loadMetadata(this.data.view, limit, 0);
   }
 
   async loadMore(limit) {

frontend/src/metadata/views/view.js

@@ -10,7 +10,7 @@ import { VIEW_TYPE } from '../constants';
 import { gettext } from '../../utils/constants';
 
 const View = () => {
-  const { isLoading, showFirstView, metadata, errorMessage } = useMetadataView();
+  const { isLoading, isBeingBuilt, metadata, errorMessage } = useMetadataView();
 
   const renderView = useCallback((metadata) => {
     if (!metadata) return null;
@@ -37,12 +37,15 @@ const View = () => {
   }, []);
 
   if (isLoading) {
-    return showFirstView ? (
-      <div className="sf-metadata-loading-wrapper">
-        <Loading />
-        <span className="sf-metadata-loading-tip">{gettext('Extended properties are being built.')}</span>
-      </div>
-    ) : <CenteredLoading />;
+    if (isBeingBuilt) {
+      return (
+        <div className="sf-metadata-loading-wrapper">
+          <Loading />
+          <span className="sf-metadata-loading-tip">{gettext('Extended properties are being built.')}</span>
+        </div>
+      );
+    }
+    return (<CenteredLoading />);
   }
 
   return (

frontend/src/tag/views/tag-files/index.js

@@ -51,6 +51,10 @@ const TagFiles = () => {
     }
   }, [selectedFiles]);
 
+  const reSelectFiles = useCallback((fileId) => {
+    setSelectedFiles([fileId]);
+  }, []);
+
   const openImagePreview = useCallback((record) => {
     currentImageRef.current = record;
     setImagePreviewerVisible(true);
@@ -116,6 +120,7 @@ const TagFiles = () => {
                   isSelected={selectedFiles && selectedFiles.includes(fileId)}
                   file={file}
                   onSelectFile={onSelectFile}
+                  reSelectFiles={reSelectFiles}
                   openImagePreview={openImagePreview}
                 />);
             })}

frontend/src/tag/views/tag-files/tag-file/index.js

@@ -15,7 +15,7 @@ import './index.css';
 
 dayjs.extend(relativeTime);
 
-const TagFile = ({ isSelected, repoID, file, onSelectFile, openImagePreview }) => {
+const TagFile = ({ isSelected, repoID, file, onSelectFile, reSelectFiles, openImagePreview }) => {
   const [highlight, setHighlight] = useState(false);
   const [isIconLoadError, setIconLoadError] = useState(false);
 
@@ -76,12 +76,19 @@ const TagFile = ({ isSelected, repoID, file, onSelectFile, openImagePreview }) =
     });
   }, [repoID, file, openImagePreview]);
 
+  const handelClick = useCallback((event) => {
+    if (event.target.tagName == 'TD') {
+      reSelectFiles(fileId);
+    }
+  }, [fileId, reSelectFiles]);
+
   return (
     <tr
       className={classnames({
         'tr-highlight': highlight,
         'tr-active': isSelected
       })}
+      onClick={handelClick}
       onMouseEnter={onMouseEnter}
       onMouseLeave={onMouseLeave}
     >
@@ -101,8 +108,8 @@ const TagFile = ({ isSelected, repoID, file, onSelectFile, openImagePreview }) =
           <img src={displayIcon} onError={onIconLoadError} className="thumbnail cursor-pointer" alt="" />
         </div>
       </td>
-      <td className="name" onClick={handelClickFileName}>
-        <a href={path}>{name}</a>
+      <td className="name">
+        <a href={path} onClick={handelClickFileName}>{name}</a>
       </td>
       <td className="tag-list-title">
         <FileTagsFormatter value={tags} />
@@ -121,6 +128,7 @@ TagFile.propTypes = {
   file: PropTypes.object,
   onSelectFile: PropTypes.func,
   openImagePreview: PropTypes.func,
+  reSelectFiles: PropTypes.func,
 };
 
 export default TagFile;