record the status of detail to local storage (#7194)

* record the status of detail to local storage

* face recognition view support show detail

* feat: optimize code

* fix: bug

---------

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

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

@@ -10,7 +10,6 @@ import ViewModes from '../../components/view-modes';
 import SortMenu from '../../components/sort-menu';
 import MetadataViewToolBar from '../../metadata/components/view-toolbar';
 import { PRIVATE_FILE_TYPE } from '../../constants';
-import { DIRENT_DETAIL_MODE } from '../dir-view-mode/constants';
 
 const propTypes = {
   repoID: PropTypes.string.isRequired,
@@ -25,7 +24,7 @@ const propTypes = {
   sortOrder: PropTypes.string,
   sortItems: PropTypes.func,
   viewId: PropTypes.string,
-  onCloseDetail: PropTypes.func,
+  onToggleDetail: PropTypes.func,
 };
 
 class DirTool extends React.Component {
@@ -92,14 +91,10 @@ class DirTool extends React.Component {
     this.props.sortItems(sortBy, sortOrder);
   };
 
-  showDirentDetail = () => {
-    this.props.switchViewMode(DIRENT_DETAIL_MODE);
-  };
-
   render() {
     const menuItems = this.getMenu();
     const { isDropdownMenuOpen } = this.state;
-    const { repoID, currentMode, currentPath, sortBy, sortOrder, viewId, isCustomPermission } = this.props;
+    const { repoID, currentMode, currentPath, sortBy, sortOrder, viewId, isCustomPermission, onToggleDetail } = this.props;
     const propertiesText = TextTranslation.PROPERTIES.value;
     const isFileExtended = currentPath.startsWith('/' + PRIVATE_FILE_TYPE.FILE_EXTENDED_PROPERTIES + '/');
     const isTagView = currentPath.startsWith('/' + PRIVATE_FILE_TYPE.TAGS_PROPERTIES + '/');
@@ -110,8 +105,7 @@ class DirTool extends React.Component {
           <MetadataViewToolBar
             viewId={viewId}
             isCustomPermission={isCustomPermission}
-            showDetail={this.showDirentDetail}
+            onToggleDetail={onToggleDetail}
-            closeDetail={this.props.onCloseDetail}
           />
         </div>
       );
@@ -130,7 +124,7 @@ class DirTool extends React.Component {
           <ViewModes currentViewMode={currentMode} switchViewMode={this.props.switchViewMode} />
           <SortMenu sortBy={sortBy} sortOrder={sortOrder} onSelectSortOption={this.onSelectSortOption} />
           {(!isCustomPermission) &&
-            <div className="cur-view-path-btn" onClick={this.showDirentDetail}>
+            <div className="cur-view-path-btn" onClick={onToggleDetail}>
               <span className="sf3-font sf3-font-info" aria-label={propertiesText} title={propertiesText}></span>
             </div>
           }

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

@@ -1,5 +1,4 @@
 export const LIST_MODE = 'list';
 export const GRID_MODE = 'grid';
-export const DIRENT_DETAIL_MODE = 'detail';
 export const METADATA_MODE = 'metadata';
 export const TAGS_MODE = 'tags';

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

@@ -83,7 +83,6 @@ const propTypes = {
   onItemsScroll: PropTypes.func.isRequired,
   eventBus: PropTypes.object,
   updateCurrentDirent: PropTypes.func.isRequired,
-  closeDirentDetail: PropTypes.func.isRequired,
 };
 
 class DirColumnView extends React.Component {
@@ -211,7 +210,6 @@ class DirColumnView extends React.Component {
               copyFileCallback={this.props.copyFileCallback}
               addFolder={this.props.onAddFolder}
               updateCurrentDirent={this.props.updateCurrentDirent}
-              closeDirentDetail={this.props.closeDirentDetail}
               showDirentDetail={this.props.showDirentDetail}
             />
           )}
@@ -224,7 +222,6 @@ class DirColumnView extends React.Component {
               deleteFilesCallback={this.props.deleteFilesCallback}
               renameFileCallback={this.props.renameFileCallback}
               updateCurrentDirent={this.props.updateCurrentDirent}
-              closeDirentDetail={this.props.closeDirentDetail}
             />
           )}
           {currentMode === LIST_MODE &&

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

@@ -6,9 +6,10 @@ import ViewDetails from '../../metadata/components/view-details';
 import ObjectUtils from '../../metadata/utils/object-utils';
 import { MetadataContext } from '../../metadata';
 import { PRIVATE_FILE_TYPE } from '../../constants';
+import { METADATA_MODE, TAGS_MODE } from '../dir-view-mode/constants';
 
-const Detail = React.memo(({ repoID, path, dirent, currentRepoInfo, repoTags, fileTags, onClose, onFileTagChanged }) => {
+const Detail = React.memo(({ repoID, path, currentMode, dirent, currentRepoInfo, repoTags, fileTags, onClose, onFileTagChanged }) => {
-  const isView = useMemo(() => path.startsWith('/' + PRIVATE_FILE_TYPE.FILE_EXTENDED_PROPERTIES), [path]);
+  const isView = useMemo(() => currentMode === METADATA_MODE || path.startsWith('/' + PRIVATE_FILE_TYPE.FILE_EXTENDED_PROPERTIES), [currentMode, path]);
 
   useEffect(() => {
     if (isView) return;
@@ -25,6 +26,8 @@ const Detail = React.memo(({ repoID, path, dirent, currentRepoInfo, repoTags, fi
     };
   }, [repoID, currentRepoInfo, isView]);
 
+  if (currentMode === TAGS_MODE) return null;
+
   if (isView) {
     const viewId = path.split('/').pop();
     if (!dirent) return (<ViewDetails viewId={viewId} onClose={onClose} />);
@@ -60,6 +63,7 @@ const Detail = React.memo(({ repoID, path, dirent, currentRepoInfo, repoTags, fi
 Detail.propTypes = {
   repoID: PropTypes.string,
   path: PropTypes.string,
+  currentMode: PropTypes.string,
   dirent: PropTypes.object,
   currentRepoInfo: PropTypes.object,
   repoTags: PropTypes.array,

frontend/src/components/toolbar/selected-dirents-toolbar.js

@@ -35,7 +35,6 @@ const propTypes = {
   unSelectDirent: PropTypes.func.isRequired,
   updateDirent: PropTypes.func.isRequired,
   currentMode: PropTypes.string.isRequired,
-  switchViewMode: PropTypes.func.isRequired,
   direntList: PropTypes.array.isRequired,
   onItemRename: PropTypes.func.isRequired,
   showDirentDetail: PropTypes.func.isRequired,

frontend/src/constants/index.js

@@ -43,3 +43,5 @@ export const SYSTEM_FOLDERS = [
   '/_Internal',
   '/images'
 ];
+
+export const DIRENT_DETAIL_SHOW_KEY = 'sf_dirent_detail_show';

frontend/src/metadata/components/view-details/index.js

@@ -4,7 +4,7 @@ import { gettext, mediaUrl } from '../../../utils/constants';
 import { Detail, Header, Body } from '../../../components/dirent-detail/detail';
 import EmptyTip from '../../../components/empty-tip';
 import { useMetadata } from '../../hooks';
-import { VIEW_TYPE } from '../../constants';
+import { VIEW_TYPE, VIEW_TYPES_SUPPORT_SHOW_DETAIL } from '../../constants';
 
 import './index.css';
 
@@ -13,7 +13,7 @@ const ViewDetails = ({ viewId, onClose }) => {
 
   const view = useMemo(() => idViewMap[viewId], [viewId, idViewMap]);
   const icon = useMemo(() => {
-    const type = view.type;
+    const type = view?.type;
     if (type === VIEW_TYPE.GALLERY) return `${mediaUrl}favicons/gallery.png`;
     if (type === VIEW_TYPE.TABLE) return `${mediaUrl}favicons/table.png`;
     if (type === VIEW_TYPE.FACE_RECOGNITION) return `${mediaUrl}favicons/face-recognition-view.png`;
@@ -21,6 +21,8 @@ const ViewDetails = ({ viewId, onClose }) => {
     return `${mediaUrl}img/file/256/file.png`;
   }, [view]);
 
+  if (!view || !VIEW_TYPES_SUPPORT_SHOW_DETAIL.includes(view.type)) return null;
+
   return (
     <Detail className="sf-metadata-view-detail">
       <Header title={view.name} icon={icon} iconSize={28} onClose={onClose} />

frontend/src/metadata/components/view-toolbar/face-recognition/index.js

@@ -4,7 +4,7 @@ import { GalleryGroupBySetter, GallerySliderSetter, SortSetter } from '../../dat
 import { gettext } from '../../../../utils/constants';
 import { EVENT_BUS_TYPE, FACE_RECOGNITION_VIEW_ID, VIEW_TYPE } from '../../../constants';
 
-const FaceRecognitionViewToolbar = ({ readOnly, isCustomPermission, showDetail }) => {
+const FaceRecognitionViewToolbar = ({ readOnly, isCustomPermission, onToggleDetail }) => {
   const [isShow, setShow] = useState(false);
   const [view, setView] = useState({});
 
@@ -35,11 +35,11 @@ const FaceRecognitionViewToolbar = ({ readOnly, isCustomPermission, showDetail }
   // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  if (!isShow) return null;
-
   return (
     <>
       <div className="sf-metadata-tool-left-operations">
+        {isShow && (
+          <>
             <GalleryGroupBySetter view={{ _id: FACE_RECOGNITION_VIEW_ID }} />
             <GallerySliderSetter view={{ _id: FACE_RECOGNITION_VIEW_ID }} />
             <SortSetter
@@ -52,8 +52,10 @@ const FaceRecognitionViewToolbar = ({ readOnly, isCustomPermission, showDetail }
               columns={viewColumns}
               modifySorts={modifySorts}
             />
+          </>
+        )}
         {!isCustomPermission && (
-          <div className="cur-view-path-btn ml-2" onClick={showDetail}>
+          <div className="cur-view-path-btn ml-2" onClick={onToggleDetail}>
             <span className="sf3-font sf3-font-info" aria-label={gettext('Properties')} title={gettext('Properties')}></span>
           </div>
         )}
@@ -66,7 +68,7 @@ const FaceRecognitionViewToolbar = ({ readOnly, isCustomPermission, showDetail }
 FaceRecognitionViewToolbar.propTypes = {
   isCustomPermission: PropTypes.bool,
   readOnly: PropTypes.bool,
-  showDetail: PropTypes.func,
+  onToggleDetail: PropTypes.func,
 };
 
 export default FaceRecognitionViewToolbar;

frontend/src/metadata/components/view-toolbar/gallery-view-toolbar/index.js

@@ -6,7 +6,7 @@ import { gettext } from '../../../../utils/constants';
 
 const GalleryViewToolbar = ({
   readOnly, isCustomPermission, view, collaborators,
-  modifyFilters, modifySorts, showDetail,
+  modifyFilters, modifySorts, onToggleDetail,
 }) => {
   const viewType = useMemo(() => view.type, [view]);
   const viewColumns = useMemo(() => {
@@ -48,7 +48,7 @@ const GalleryViewToolbar = ({
           modifySorts={modifySorts}
         />
         {!isCustomPermission && (
-          <div className="cur-view-path-btn ml-2" onClick={showDetail}>
+          <div className="cur-view-path-btn ml-2" onClick={onToggleDetail}>
             <span className="sf3-font sf3-font-info" aria-label={gettext('Properties')} title={gettext('Properties')}></span>
           </div>
         )}
@@ -65,7 +65,7 @@ GalleryViewToolbar.propTypes = {
   collaborators: PropTypes.array,
   modifyFilters: PropTypes.func,
   modifySorts: PropTypes.func,
-  showDetail: PropTypes.func,
+  onToggleDetail: PropTypes.func,
 };
 
 export default GalleryViewToolbar;

frontend/src/metadata/components/view-toolbar/index.js

@@ -9,7 +9,7 @@ import MapViewToolBar from './map-view-toolbar';
 
 import './index.css';
 
-const ViewToolBar = ({ viewId, isCustomPermission, showDetail, closeDetail }) => {
+const ViewToolBar = ({ viewId, isCustomPermission, onToggleDetail }) => {
   const [view, setView] = useState(null);
   const [collaborators, setCollaborators] = useState([]);
 
@@ -89,14 +89,14 @@ const ViewToolBar = ({ viewId, isCustomPermission, showDetail, closeDetail }) =>
           collaborators={collaborators}
           modifyFilters={modifyFilters}
           modifySorts={modifySorts}
-          showDetail={showDetail}
+          onToggleDetail={onToggleDetail}
         />
       )}
       {viewType === VIEW_TYPE.FACE_RECOGNITION && (
         <FaceRecognitionViewToolbar
           isCustomPermission={isCustomPermission}
           view={view}
-          showDetail={showDetail}
+          onToggleDetail={onToggleDetail}
         />
       )}
       {viewType === VIEW_TYPE.KANBAN && (
@@ -107,8 +107,7 @@ const ViewToolBar = ({ viewId, isCustomPermission, showDetail, closeDetail }) =>
           collaborators={collaborators}
           modifyFilters={modifyFilters}
           modifySorts={modifySorts}
-          showDetail={showDetail}
+          onToggleDetail={onToggleDetail}
-          closeDetail={closeDetail}
         />
       )}
       {viewType === VIEW_TYPE.MAP && (
@@ -126,8 +125,7 @@ const ViewToolBar = ({ viewId, isCustomPermission, showDetail, closeDetail }) =>
 ViewToolBar.propTypes = {
   viewId: PropTypes.string,
   isCustomPermission: PropTypes.bool,
-  showDetail: PropTypes.func,
+  onToggleDetail: PropTypes.func,
-  closeDetail: PropTypes.func,
 };
 
 export default ViewToolBar;

frontend/src/metadata/components/view-toolbar/kanban-view-toolbar/index.js

@@ -12,8 +12,7 @@ const KanbanViewToolBar = ({
   collaborators,
   modifyFilters,
   modifySorts,
-  showDetail,
+  onToggleDetail,
-  closeDetail,
 }) => {
   const viewType = useMemo(() => view.type, [view]);
   const viewColumns = useMemo(() => {
@@ -26,14 +25,14 @@ const KanbanViewToolBar = ({
   }, [viewColumns]);
 
   const onToggleKanbanSetting = () => {
-    closeDetail();
+    onToggleDetail();
     window.sfMetadataContext.eventBus.dispatch(EVENT_BUS_TYPE.TOGGLE_KANBAN_SETTINGS);
   };
 
   const toggleDetails = useCallback(() => {
     window.sfMetadataContext.eventBus.dispatch(EVENT_BUS_TYPE.CLOSE_KANBAN_SETTINGS);
-    showDetail();
+    onToggleDetail();
-  }, [showDetail]);
+  }, [onToggleDetail]);
 
   return (
     <>
@@ -88,7 +87,8 @@ KanbanViewToolBar.propTypes = {
   view: PropTypes.object,
   collaborators: PropTypes.array,
   modifyFilters: PropTypes.func,
-  modifySorts: PropTypes.func
+  modifySorts: PropTypes.func,
+  onToggleDetail: PropTypes.func,
 };
 
 export default KanbanViewToolBar;

frontend/src/metadata/constants/view.js

@@ -123,3 +123,5 @@ export const VIEW_DEFAULT_SETTINGS = {
     [KANBAN_SETTINGS_KEYS.COLUMNS]: [],
   }
 };
+
+export const VIEW_TYPES_SUPPORT_SHOW_DETAIL = [VIEW_TYPE.GALLERY, VIEW_TYPE.KANBAN, VIEW_TYPE.FACE_RECOGNITION];

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

@@ -340,7 +340,6 @@ export const MetadataViewProvider = ({
         store: storeRef.current,
         isDirentDetailShow: params.isDirentDetailShow,
         updateCurrentDirent: params.updateCurrentDirent,
-        closeDirentDetail: params.closeDirentDetail,
         showDirentDetail: params.showDirentDetail,
         deleteFilesCallback: deleteFilesCallback,
         renameFileCallback: renameFileCallback,

frontend/src/metadata/views/face-recognition/index.js

@@ -9,7 +9,7 @@ const FaceRecognition = () => {
   const [showPeopleFaces, setShowPeopleFaces] = useState(false);
   const peopleRef = useRef(null);
 
-  const { metadata, store } = useMetadataView();
+  const { metadata, store, updateCurrentDirent } = useMetadataView();
 
   const peoples = useMemo(() => {
     if (!Array.isArray(metadata.rows) || metadata.rows.length === 0) return [];
@@ -21,7 +21,6 @@ const FaceRecognition = () => {
   }, [store]);
 
   const onRemovePeoplePhotos = useCallback((peopleId, peoplePhotos, { success_callback }) => {
-    //
     store.removePeoplePhotos(peopleId, peoplePhotos, { success_callback });
   }, [store]);
 
@@ -33,7 +32,8 @@ const FaceRecognition = () => {
   const closePeople = useCallback(() => {
     peopleRef.current = null;
     setShowPeopleFaces(false);
-  }, []);
+    updateCurrentDirent();
+  }, [updateCurrentDirent]);
 
   const onRename = useCallback((id, newName, oldName) => {
     store.renamePeopleName(id, newName, oldName);

frontend/src/metadata/views/face-recognition/peoples/index.js

@@ -17,7 +17,7 @@ const Peoples = ({ peoples, onOpenPeople, onRename }) => {
 
   const containerRef = useRef(null);
 
-  const { metadata, store, closeDirentDetail } = useMetadataView();
+  const { metadata, store } = useMetadataView();
 
   const loadMore = useCallback(async () => {
     if (isLoadingMore) return;
@@ -63,12 +63,6 @@ const Peoples = ({ peoples, onOpenPeople, onRename }) => {
     return () => {};
   }, []);
 
-  useEffect(() => {
-    closeDirentDetail();
-    return () => {};
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
   if (!Array.isArray(peoples) || peoples.length === 0) return (<EmptyTip text={gettext('Identifying portraits...')} />);
 
   return (

frontend/src/metadata/views/face-recognition/person-photos/index.js

@@ -158,7 +158,7 @@ const PeoplePhotos = ({ view, people, onClose, onDeletePeoplePhotos, onRemovePeo
   useEffect(() => {
     window.sfMetadataContext.eventBus.dispatch(EVENT_BUS_TYPE.TOGGLE_VIEW_TOOLBAR, true);
     return () => {
-      window.sfMetadataContext.eventBus.dispatch(EVENT_BUS_TYPE.TOGGLE_VIEW_TOOLBAR, false);
+      window?.sfMetadataContext?.eventBus?.dispatch(EVENT_BUS_TYPE.TOGGLE_VIEW_TOOLBAR, false);
     };
   // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);

frontend/src/pages/lib-content-view/lib-content-view.js

@@ -21,17 +21,16 @@ import FileUploader from '../../components/file-uploader/file-uploader';
 import CopyMoveDirentProgressDialog from '../../components/dialog/copy-move-dirent-progress-dialog';
 import DeleteFolderDialog from '../../components/dialog/delete-folder-dialog';
 import { EVENT_BUS_TYPE } from '../../components/common/event-bus-type';
-import { PRIVATE_FILE_TYPE } from '../../constants';
+import { PRIVATE_FILE_TYPE, DIRENT_DETAIL_SHOW_KEY } from '../../constants';
 import { MetadataStatusProvider } from '../../hooks';
 import { MetadataProvider, CollaboratorsProvider } from '../../metadata/hooks';
 import { TagsProvider } from '../../tag/hooks';
-import { LIST_MODE, METADATA_MODE, DIRENT_DETAIL_MODE, TAGS_MODE } from '../../components/dir-view-mode/constants';
+import { LIST_MODE, METADATA_MODE, TAGS_MODE } from '../../components/dir-view-mode/constants';
 import CurDirPath from '../../components/cur-dir-path';
 import DirTool from '../../components/cur-dir-path/dir-tool';
 import Detail from '../../components/dirent-detail';
 import DirColumnView from '../../components/dir-view-mode/dir-column-view';
 import SelectedDirentsToolbar from '../../components/toolbar/selected-dirents-toolbar';
-import { VIEW_TYPE } from '../../metadata/constants';
 
 import '../../css/lib-content-view.css';
 
@@ -53,8 +52,12 @@ class LibContentView extends React.Component {
     let isTreePanelShown = true;
     const storedTreePanelState = localStorage.getItem('sf_dir_view_tree_panel_open');
     if (storedTreePanelState != undefined) {
-      isTreePanelShown = storedTreePanelState == 'true';
+      isTreePanelShown = storedTreePanelState === 'true';
     }
+
+    const storedDirentDetailShowState = localStorage.getItem(DIRENT_DETAIL_SHOW_KEY);
+    const isDirentDetailShow = storedDirentDetailShowState === 'true';
+
     this.state = {
       currentMode: cookie.load('seafile_view_mode') || LIST_MODE,
       isTreePanelShown: isTreePanelShown, // display the 'dirent tree' side panel
@@ -88,7 +91,7 @@ class LibContentView extends React.Component {
       isAllDirentSelected: false,
       dirID: '', // for update dir list
       errorMsg: '',
-      isDirentDetailShow: false,
+      isDirentDetailShow,
       itemsShowLength: 100,
       isSessionExpired: false,
       isCopyMoveProgressDialogShow: false,
@@ -133,15 +136,22 @@ class LibContentView extends React.Component {
   };
 
   showDirentDetail = () => {
-    this.setState({ isDirentDetailShow: true });
+    this.setState({ isDirentDetailShow: true }, () => {
+      localStorage.setItem(DIRENT_DETAIL_SHOW_KEY, true);
+    });
   };
 
   toggleDirentDetail = () => {
-    this.setState({ isDirentDetailShow: !this.state.isDirentDetailShow });
+    const newState = !this.state.isDirentDetailShow;
+    this.setState({ isDirentDetailShow: newState }, () => {
+      localStorage.setItem(DIRENT_DETAIL_SHOW_KEY, newState);
+    });
   };
 
   closeDirentDetail = () => {
-    this.setState({ isDirentDetailShow: false });
+    this.setState({ isDirentDetailShow: false }, () => {
+      localStorage.setItem(DIRENT_DETAIL_SHOW_KEY, false);
+    });
   };
 
   componentDidMount() {
@@ -501,14 +511,13 @@ class LibContentView extends React.Component {
     window.history.pushState({ url: url, path: filePath }, filePath, url);
   };
 
-  showFileMetadata = (filePath, viewId, viewType) => {
+  showFileMetadata = (filePath, viewId) => {
     const repoID = this.props.repoID;
     const repoInfo = this.state.currentRepoInfo;
     this.setState({
       currentMode: METADATA_MODE,
       path: filePath,
       viewId: viewId,
-      isDirentDetailShow: viewType === VIEW_TYPE.GALLERY ? this.state.isDirentDetailShow : false,
     });
     const url = `${siteRoot}library/${repoID}/${encodeURIComponent(repoInfo.repo_name)}/?view=${encodeURIComponent(viewId)}`;
     window.history.pushState({ url: url, path: '' }, '', url);
@@ -532,7 +541,6 @@ class LibContentView extends React.Component {
       currentMode: TAGS_MODE,
       path: filePath,
       tagId: tagId,
-      isDirentDetailShow: false
     });
     const url = `${siteRoot}library/${repoID}/${encodeURIComponent(repoInfo.repo_name)}/?tag=${encodeURIComponent(tagId)}`;
     window.history.pushState({ url: url, path: '' }, '', url);
@@ -988,10 +996,7 @@ class LibContentView extends React.Component {
     if (mode === this.state.currentMode) {
       return;
     }
-    if (mode === DIRENT_DETAIL_MODE) {
+
-      this.toggleDirentDetail();
-      return;
-    }
     cookie.save('seafile_view_mode', mode);
     let path = this.state.path;
     if (this.state.isTreePanelShown && this.state.isViewFile) {
@@ -1869,7 +1874,7 @@ class LibContentView extends React.Component {
     } else {
       if (Utils.isFileMetadata(node?.object?.type)) {
         if (node.path !== this.state.path) {
-          this.showFileMetadata(node.path, node.view_id || '0000', node.view_type || VIEW_TYPE.TABLE);
+          this.showFileMetadata(node.path, node.view_id || '0000');
         }
       } else if (Utils.isTags(node?.object?.type)) {
         if (node.path !== this.state.path) {
@@ -2001,6 +2006,7 @@ class LibContentView extends React.Component {
       isDirentSelected: false,
       isAllDirentSelected: false,
       currentMode: nextModel,
+      currentDirent: null,
     });
   };
 
@@ -2248,7 +2254,6 @@ class LibContentView extends React.Component {
                           isGroupOwnedRepo={this.state.isGroupOwnedRepo}
                           showDirentDetail={this.showDirentDetail}
                           currentMode={this.state.currentMode}
-                          switchViewMode={this.switchViewMode}
                           onItemConvert={this.onConvertItem}
                           onAddFolder={this.onAddFolder}
                         />
@@ -2304,7 +2309,7 @@ class LibContentView extends React.Component {
                           sortItems={this.sortItems}
                           viewId={this.state.viewId}
                           viewType={this.props.viewType}
-                          onCloseDetail={this.closeDirentDetail}
+                          onToggleDetail={this.toggleDirentDetail}
                         />
                       </div>
                     }
@@ -2378,12 +2383,11 @@ class LibContentView extends React.Component {
                         onItemsScroll={this.onItemsScroll}
                         eventBus={this.props.eventBus}
                         updateCurrentDirent={this.updateCurrentDirent}
-                        closeDirentDetail={this.closeDirentDetail}
                       />
                       :
                       <div className="message err-tip">{gettext('Folder does not exist.')}</div>
                     }
-                    {this.state.isDirentDetailShow && (
+                    {!isCustomPermission && this.state.isDirentDetailShow && (
                       <Detail
                         path={this.state.path}
                         repoID={this.props.repoID}
@@ -2393,6 +2397,7 @@ class LibContentView extends React.Component {
                         fileTags={this.state.isViewFile ? this.state.fileTags : []}
                         onFileTagChanged={this.onFileTagChanged}
                         onClose={this.closeDirentDetail}
+                        currentMode={this.state.currentMode}
                       />
                     )}
                   </div>

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

@@ -49,7 +49,6 @@ export const TagViewProvider = ({ repoID, tagID, children, ...params }) => {
       deleteFilesCallback: params.deleteFilesCallback,
       renameFileCallback: params.renameFileCallback,
       updateCurrentDirent: params.updateCurrentDirent,
-      closeDirentDetail: params.closeDirentDetail,
     }}>
       {children}
     </TagViewContext.Provider>

frontend/src/tag/hooks/tags.js

@@ -248,7 +248,6 @@ export const TagsProvider = ({ repoID, currentPath, selectTagsView, children, ..
       deleteFilesCallback: params.deleteFilesCallback,
       renameFileCallback: params.renameFileCallback,
       updateCurrentDirent: params.updateCurrentDirent,
-      closeDirentDetail: params.closeDirentDetail,
       addTag,
       addTags,
       modifyTags,