fix: metadata status toggle (#6530)

* fix: metadata status toggle

* feat: optimize code

---------

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

frontend/src/components/cur-dir-path/dir-tool.js

@@ -23,7 +23,7 @@ const propTypes = {
   sortBy: PropTypes.string,
   sortOrder: PropTypes.string,
   sortItems: PropTypes.func,
-  metadataViewId: PropTypes.string,
+  viewId: PropTypes.string,
 };
 
 class DirTool extends React.Component {
@@ -100,7 +100,7 @@ class DirTool extends React.Component {
   render() {
     const menuItems = this.getMenu();
     const { isDropdownMenuOpen } = this.state;
-    const { repoID, currentMode, currentPath, sortBy, sortOrder, metadataViewId } = this.props;
+    const { repoID, currentMode, currentPath, sortBy, sortOrder, viewId } = this.props;
     const propertiesText = TextTranslation.PROPERTIES.value;
     const isFileExtended = currentPath.startsWith('/' + PRIVATE_FILE_TYPE.FILE_EXTENDED_PROPERTIES + '/');
 
@@ -114,7 +114,7 @@ class DirTool extends React.Component {
     if (isFileExtended) {
       return (
         <div className="d-flex">
-          <MetadataViewToolBar metadataViewId={metadataViewId} />
+          <MetadataViewToolBar viewId={viewId} />
         </div>
       );
     }

frontend/src/components/cur-dir-path/index.js

@@ -38,7 +38,7 @@ const propTypes = {
   filePermission: PropTypes.string,
   repoTags: PropTypes.array.isRequired,
   onFileTagChanged: PropTypes.func.isRequired,
-  metadataViewId: PropTypes.string,
+  viewId: PropTypes.string,
   onItemMove: PropTypes.func.isRequired,
 };
 
@@ -101,7 +101,7 @@ class CurDirPath extends React.Component {
           sortBy={this.props.sortBy}
           sortOrder={this.props.sortOrder}
           sortItems={this.props.sortItems}
-          metadataViewId={this.props.metadataViewId}
+          viewId={this.props.viewId}
         />}
         {!isDesktop && this.props.direntList.length > 0 &&
         <span className="sf3-font sf3-font-sort action-icon" onClick={this.toggleSortOptionsDialog}></span>}

frontend/src/components/dir-view-mode/dir-column-file.js

@@ -13,7 +13,7 @@ const propTypes = {
   isFileLoadedErr: PropTypes.bool.isRequired,
   filePermission: PropTypes.string,
   content: PropTypes.string,
-  metadataViewId: PropTypes.string,
+  viewId: PropTypes.string,
   lastModified: PropTypes.string,
   latestContributor: PropTypes.string,
   onLinkClick: PropTypes.func.isRequired,
@@ -53,9 +53,9 @@ class DirColumnFile extends React.Component {
     }
 
     if (this.props.content === '__sf-metadata') {
-      const { repoID, currentRepoInfo, metadataViewId } = this.props;
+      const { repoID, currentRepoInfo, viewId } = this.props;
 
-      return (<SeafileMetadata mediaUrl={mediaUrl} repoID={repoID} repoInfo={currentRepoInfo} viewID={metadataViewId} />);
+      return (<SeafileMetadata mediaUrl={mediaUrl} repoID={repoID} repoInfo={currentRepoInfo} viewID={viewId} />);
     }
 
     return (

frontend/src/components/dir-view-mode/dir-column-nav.js

@@ -312,12 +312,7 @@ class DirColumnNav extends React.Component {
                 getMenuContainerSize={getMenuContainerSize}
               />
             </TreeSection>
-            <DirViews
-              repoID={repoID}
-              currentPath={currentPath}
-              userPerm={userPerm}
-              onNodeClick={this.onNodeClick}
-            />
+            <DirViews repoID={repoID} currentPath={currentPath} userPerm={userPerm} />
             <DirOthers
               repoID={repoID}
               userPerm={userPerm}

frontend/src/components/dir-view-mode/dir-column-view.js

@@ -37,7 +37,7 @@ const propTypes = {
   hash: PropTypes.string,
   filePermission: PropTypes.string,
   content: PropTypes.string,
-  metadataViewId: PropTypes.string,
+  viewId: PropTypes.string,
   lastModified: PropTypes.string,
   latestContributor: PropTypes.string,
   onLinkClick: PropTypes.func.isRequired,
@@ -194,7 +194,7 @@ class DirColumnView extends React.Component {
               isFileLoadedErr={this.props.isFileLoadedErr}
               filePermission={this.props.filePermission}
               content={this.props.content}
-              metadataViewId={this.props.metadataViewId}
+              viewId={this.props.viewId}
               currentRepoInfo={this.props.currentRepoInfo}
               lastModified={this.props.lastModified}
               latestContributor={this.props.latestContributor}

frontend/src/components/dir-view-mode/dir-views.js

@@ -2,16 +2,16 @@ import React, { useCallback, useMemo, useState } from 'react';
 import PropTypes from 'prop-types';
 import { gettext } from '../../utils/constants';
 import TreeSection from '../tree-section';
-import { MetadataStatusManagementDialog, MetadataTreeView, useMetadataStatus } from '../../metadata';
+import { MetadataStatusManagementDialog, MetadataTreeView, useMetadata } from '../../metadata';
 
-const DirViews = ({ userPerm, repoID, currentPath, onNodeClick }) => {
+const DirViews = ({ userPerm, repoID, currentPath }) => {
   const enableMetadataManagement = useMemo(() => {
     return window.app.pageOptions.enableMetadataManagement;
   // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [window.app.pageOptions.enableMetadataManagement]);
 
   const [showMetadataStatusManagementDialog, setShowMetadataStatusManagementDialog] = useState(false);
-  const { enableExtendedProperties, updateEnableExtendedProperties } = useMetadataStatus();
+  const { enableMetadata, updateEnableMetadata, navigation } = useMetadata();
   const moreOperations = useMemo(() => {
     if (!enableMetadataManagement) return [];
     if (userPerm !== 'rw' && userPerm !== 'admin') return [];
@@ -32,8 +32,8 @@ const DirViews = ({ userPerm, repoID, currentPath, onNodeClick }) => {
   }, []);
 
   const toggleMetadataStatus = useCallback((value) => {
-    updateEnableExtendedProperties(value);
-  }, [updateEnableExtendedProperties]);
+    updateEnableMetadata(value);
+  }, [updateEnableMetadata]);
 
   return (
     <>
@@ -43,11 +43,13 @@ const DirViews = ({ userPerm, repoID, currentPath, onNodeClick }) => {
         moreOperations={moreOperations}
         moreOperationClick={moreOperationClick}
       >
-        {enableExtendedProperties && (<MetadataTreeView userPerm={userPerm} repoID={repoID} currentPath={currentPath} onNodeClick={onNodeClick} />)}
+        {enableMetadata && Array.isArray(navigation) && navigation.length > 0 && (
+          <MetadataTreeView userPerm={userPerm} currentPath={currentPath} />
+        )}
       </TreeSection>
       {showMetadataStatusManagementDialog && (
         <MetadataStatusManagementDialog
-          value={enableExtendedProperties}
+          value={enableMetadata}
           repoID={repoID}
           toggle={closeMetadataManagementDialog}
           submit={toggleMetadataStatus}

frontend/src/components/dirent-detail/dirent-details/dir-details.js

@@ -4,16 +4,16 @@ import { getDirentPath } from './utils';
 import DetailItem from '../detail-item';
 import { CellType } from '../../../metadata/metadata-view/_basic';
 import { gettext } from '../../../utils/constants';
-import { MetadataDetails, useMetadataStatus } from '../../../metadata';
+import { MetadataDetails, useMetadata } from '../../../metadata';
 
 const DirDetails = ({ repoID, repoInfo, dirent, path, direntDetail, ...params }) => {
   const direntPath = useMemo(() => getDirentPath(dirent, path), [dirent, path]);
-  const { enableExtendedProperties } = useMetadataStatus();
+  const { enableMetadata } = useMetadata();
 
   return (
     <>
       <DetailItem field={{ type: CellType.MTIME, name: gettext('Last modified time') }} value={direntDetail.mtime} />
-      {window.app.pageOptions.enableMetadataManagement && enableExtendedProperties && (
+      {window.app.pageOptions.enableMetadataManagement && enableMetadata && (
         <MetadataDetails repoID={repoID} filePath={direntPath} direntType="dir" { ...params } />
       )}
     </>

frontend/src/components/dirent-detail/dirent-details/file-details.js

@@ -8,12 +8,12 @@ import { gettext } from '../../../utils/constants';
 import EditFileTagPopover from '../../popover/edit-filetag-popover';
 import FileTagList from '../../file-tag-list';
 import { Utils } from '../../../utils/utils';
-import { MetadataDetails, useMetadataStatus } from '../../../metadata';
+import { MetadataDetails, useMetadata } from '../../../metadata';
 import ObjectUtils from '../../../metadata/metadata-view/utils/object-utils';
 
 const FileDetails = React.memo(({ repoID, repoInfo, dirent, path, direntDetail, onFileTagChanged, repoTags, fileTagList, ...params }) => {
   const [isEditFileTagShow, setEditFileTagShow] = useState(false);
-  const { enableExtendedProperties } = useMetadataStatus();
+  const { enableMetadata } = useMetadata();
 
   const direntPath = useMemo(() => getDirentPath(dirent, path), [dirent, path]);
   const tagListTitleID = useMemo(() => `detail-list-view-tags-${uuidV4()}`, []);
@@ -36,7 +36,7 @@ const FileDetails = React.memo(({ repoID, repoInfo, dirent, path, direntDetail,
         avatar_url: direntDetail.last_modifier_avatar,
       }]} />
       <DetailItem field={{ type: CellType.MTIME, name: gettext('Last modified time') }} value={direntDetail.last_modified} />
-      {!window.app.pageOptions.enableMetadataManagement && enableExtendedProperties && (
+      {!window.app.pageOptions.enableMetadataManagement && enableMetadata && (
         <DetailItem field={{ type: CellType.SINGLE_SELECT, name: gettext('Tags') }} valueId={tagListTitleID} valueClick={onEditFileTagToggle} >
           {Array.isArray(fileTagList) && fileTagList.length > 0 ? (
             <FileTagList fileTagList={fileTagList} />