feat: optimize code

frontend/src/components/dialog/image-dialog/index.css

@@ -69,8 +69,8 @@
   padding: 0 16px 8px;
 }
 
-.lightbox-side-panel .file-details-collapse {
-  margin-bottom: 20px;
+.lightbox-side-panel .file-details-collapse+.dirent-detail-people {
+  margin-top: 20px;
 }
 
 .lightbox-side-panel .sf-metadata-ui.collaborator-item,

frontend/src/components/dialog/lib-settings.js

@@ -46,8 +46,8 @@ const LibSettingsDialog = ({ repoID, currentRepoInfo, toggleDialog, tab }) => {
 
   const { encrypted, is_admin } = currentRepoInfo;
   const { enableMetadataManagement } = window.app.pageOptions;
-  const { enableFaceRecognition, updateEnableFaceRecognition } = useMetadata();
-  const { enableMetadata, updateEnableMetadata, enableTags, tagsLang, updateEnableTags, enableOCR, updateEnableOCR } = useMetadataStatus();
+  const { updateEnableFaceRecognition } = useMetadata();
+  const { enableMetadata, updateEnableMetadata, enableTags, tagsLang, updateEnableTags, enableOCR, updateEnableOCR, enableFaceRecognition } = useMetadataStatus();
   const enableHistorySetting = is_admin; // repo owner, admin of the department which the repo belongs to, and ...
   const enableAutoDelSetting = is_admin && enableRepoAutoDel;
   const enableExtendedPropertiesSetting = !encrypted && is_admin && enableMetadataManagement;

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

@@ -0,0 +1,61 @@
+import React, { useCallback, useMemo, useState } from 'react';
+import PropTypes from 'prop-types';
+import { v4 as uuidV4 } from 'uuid';
+import classnames from 'classnames';
+import { getDirentPath } from '../utils';
+import { gettext } from '../../../../utils/constants';
+import EditFileTagPopover from '../../../popover/edit-filetag-popover';
+import FileTagList from '../../../file-tag-list';
+
+const FileTag = ({ repoID, dirent, path, repoTags, fileTagList, onFileTagChanged }) => {
+  const [isEditFileTagShow, setEditFileTagShow] = useState(false);
+  const direntPath = useMemo(() => getDirentPath(dirent, path), [dirent, path]);
+  const tagListTitleID = useMemo(() => `detail-list-view-tags-${uuidV4()}`, []);
+
+  const onEditFileTagToggle = useCallback(() => {
+    setEditFileTagShow(!isEditFileTagShow);
+  }, [isEditFileTagShow]);
+
+  const fileTagChanged = useCallback(() => {
+    onFileTagChanged(dirent, direntPath);
+  }, [dirent, direntPath, onFileTagChanged]);
+
+  return (
+    <>
+      <div
+        className={classnames('sf-metadata-property-detail-tags', { 'tags-empty': !Array.isArray(fileTagList) || fileTagList.length === 0 })}
+        id={tagListTitleID}
+        onClick={onEditFileTagToggle}
+      >
+        {Array.isArray(fileTagList) && fileTagList.length > 0 ? (
+          <FileTagList fileTagList={fileTagList} />
+        ) : (
+          <span className="empty-tip-text">{gettext('Empty')}</span>
+        )}
+      </div>
+      {isEditFileTagShow &&
+        <EditFileTagPopover
+          repoID={repoID}
+          repoTags={repoTags}
+          filePath={direntPath}
+          fileTagList={fileTagList}
+          toggleCancel={onEditFileTagToggle}
+          onFileTagChanged={fileTagChanged}
+          target={tagListTitleID}
+        />
+      }
+    </>
+  );
+};
+
+FileTag.propTypes = {
+  repoID: PropTypes.string,
+  dirent: PropTypes.object,
+  path: PropTypes.string,
+  direntDetail: PropTypes.object,
+  repoTags: PropTypes.array,
+  fileTagList: PropTypes.array,
+  onFileTagChanged: PropTypes.func,
+};
+
+export default FileTag;

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

@@ -1,21 +1,17 @@
-import React, { useCallback, useMemo, useState } from 'react';
+import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
-import { v4 as uuidV4 } from 'uuid';
 import { Formatter } from '@seafile/sf-metadata-ui-component';
-import classnames from 'classnames';
-import { getDirentPath } from '../utils';
 import DetailItem from '../../detail-item';
 import { CellType, PRIVATE_COLUMN_KEY } from '../../../../metadata/constants';
 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, useMetadata, useMetadataDetails } from '../../../../metadata';
+import { MetadataDetails, useMetadataDetails } from '../../../../metadata';
 import ObjectUtils from '../../../../metadata/utils/object-utils';
 import { getCellValueByColumn, getDateDisplayString, decimalToExposureTime } from '../../../../metadata/utils/cell';
 import Collapse from './collapse';
 import { useMetadataStatus } from '../../../../hooks';
 import People from '../../people';
+import FileTag from './file-tag';
 
 import './index.css';
 
@@ -58,27 +54,15 @@ const getImageInfoValue = (key, value) => {
   }
 };
 
-const FileDetails = React.memo(({ repoID, dirent, path, direntDetail, onFileTagChanged, repoTags, fileTagList }) => {
-  const [isEditFileTagShow, setEditFileTagShow] = useState(false);
-  const { enableMetadataManagement, enableMetadata } = useMetadataStatus();
-  const { enableFaceRecognition } = useMetadata();
+const FileDetails = React.memo(({ repoID, dirent, path, direntDetail, isShowRepoTags = true, repoTags, fileTagList, onFileTagChanged }) => {
+  const { enableFaceRecognition, enableMetadata } = useMetadataStatus();
   const { record } = useMetadataDetails();
 
-  const direntPath = useMemo(() => getDirentPath(dirent, path), [dirent, path]);
-  const tagListTitleID = useMemo(() => `detail-list-view-tags-${uuidV4()}`, []);
   const sizeField = useMemo(() => ({ type: 'size', name: gettext('Size') }), []);
   const lastModifierField = useMemo(() => ({ type: CellType.LAST_MODIFIER, name: gettext('Last modifier') }), []);
   const lastModifiedTimeField = useMemo(() => ({ type: CellType.MTIME, name: gettext('Last modified time') }), []);
   const tagsField = useMemo(() => ({ type: CellType.SINGLE_SELECT, name: gettext('Tags') }), []);
 
-  const onEditFileTagToggle = useCallback(() => {
-    setEditFileTagShow(!isEditFileTagShow);
-  }, [isEditFileTagShow]);
-
-  const fileTagChanged = useCallback(() => {
-    onFileTagChanged(dirent, direntPath);
-  }, [dirent, direntPath, onFileTagChanged]);
-
   const dom = (
     <>
       <DetailItem field={sizeField} className="sf-metadata-property-detail-formatter">
@@ -99,22 +83,12 @@ const FileDetails = React.memo(({ repoID, dirent, path, direntDetail, onFileTagC
       <DetailItem field={lastModifiedTimeField} className="sf-metadata-property-detail-formatter">
         <Formatter field={lastModifiedTimeField} value={direntDetail.last_modified}/>
       </DetailItem>
-      {window.app.pageOptions.enableFileTags && !enableMetadata && (
+      {isShowRepoTags && window.app.pageOptions.enableFileTags && !enableMetadata && (
         <DetailItem field={tagsField} className="sf-metadata-property-detail-formatter">
-          <div
-            className={classnames('sf-metadata-property-detail-tags', { 'tags-empty': !Array.isArray(fileTagList) || fileTagList.length === 0 })}
-            id={tagListTitleID}
-            onClick={onEditFileTagToggle}
-          >
-            {Array.isArray(fileTagList) && fileTagList.length > 0 ? (
-              <FileTagList fileTagList={fileTagList} />
-            ) : (
-              <span className="empty-tip-text">{gettext('Empty')}</span>
-            )}
-          </div>
+          <FileTag repoID={repoID} dirent={dirent} path={path} repoTags={repoTags} fileTagList={fileTagList} onFileTagChanged={onFileTagChanged} />
         </DetailItem>
       )}
-      {enableMetadataManagement && enableMetadata && (
+      {enableMetadata && (
         <MetadataDetails />
       )}
     </>
@@ -142,32 +116,22 @@ const FileDetails = React.memo(({ repoID, dirent, path, direntDetail, onFileTagC
             })}
           </Collapse>
         )}
-        {Utils.imageCheck(dirent.name) && enableMetadataManagement && enableMetadata && enableFaceRecognition && (
-          <People repoID={repoID} record={record} />
-        )}
       </>
     );
   }
 
   return (
     <>
       {component}
-      {isEditFileTagShow &&
-        <EditFileTagPopover
-          repoID={repoID}
-          repoTags={repoTags}
-          filePath={direntPath}
-          fileTagList={fileTagList}
-          toggleCancel={onEditFileTagToggle}
-          onFileTagChanged={fileTagChanged}
-          target={tagListTitleID}
-        />
-      }
+      {enableFaceRecognition && Utils.imageCheck(dirent.name) && (
+        <People repoID={repoID} record={record} />
+      )}
     </>
   );
 }, (props, nextProps) => {
-  const { repoID, repoInfo, dirent, path, direntDetail, repoTags, fileTagList } = props;
+  const { repoID, repoInfo, dirent, path, direntDetail, isShowRepoTags, repoTags, fileTagList } = props;
   const isChanged = (
+    isShowRepoTags !== nextProps.isShowRepoTags ||
     repoID !== nextProps.repoID ||
     path !== nextProps.path ||
     !ObjectUtils.isSameObject(repoInfo, nextProps.repoInfo) ||
@@ -180,6 +144,7 @@ const FileDetails = React.memo(({ repoID, dirent, path, direntDetail, onFileTagC
 });
 
 FileDetails.propTypes = {
+  isShowRepoTags: PropTypes.bool,
   repoID: PropTypes.string,
   repoInfo: PropTypes.object,
   dirent: PropTypes.object,

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

@@ -5,10 +5,10 @@ import { seafileAPI } from '../../../utils/seafile-api';
 import { Utils } from '../../../utils/utils';
 import toaster from '../../toast';
 import { Header, Body } from '../detail';
-import FileDetails from './file-details';
 import { MetadataContext } from '../../../metadata';
 import { MetadataDetailsProvider } from '../../../metadata/hooks';
 import { AI, Settings } from '../../../metadata/components/metadata-details';
+import FileDetails from '../dirent-details/file-details';
 
 import './index.css';
 
@@ -82,7 +82,7 @@ const EmbeddedFileDetails = ({ repoID, repoInfo, dirent, path, onClose, width =
         <Body>
           {dirent && direntDetail && (
             <div className="detail-content">
-              <FileDetails repoID={repoID} dirent={dirent} direntDetail={direntDetail} />
+              <FileDetails repoID={repoID} isShowRepoTags={false} dirent={dirent} direntDetail={direntDetail} />
             </div>
           )}
         </Body>