Fix/record not found (#7606)

* fix path

* fix record not found after rename node

* fix path update

* fix rename dialog display

---------

Co-authored-by: zhouwenxuan <aries@Mac.local>

frontend/src/components/dialog/rename-dialog.js

@@ -66,6 +66,7 @@ class Rename extends React.Component {
 
   handleKeyDown = (e) => {
     if (e.key === 'Enter') {
+      e.preventDefault();
       this.handleSubmit();
     }
   };

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

@@ -4,14 +4,12 @@ import { siteRoot, thumbnailSizeForGrid } from '../../../utils/constants';
 import { seafileAPI } from '../../../utils/seafile-api';
 import { Utils } from '../../../utils/utils';
 import toaster from '../../toast';
-import Dirent from '../../../models/dirent';
 import { Detail, Header, Body } from '../detail';
 import DirDetails from './dir-details';
 import FileDetails from './file-details';
 import ObjectUtils from '../../../utils/object';
 import { MetadataDetailsProvider } from '../../../metadata/hooks';
 import { Settings, AI } from '../../../metadata/components/metadata-details';
-import { getDirentPath } from './utils';
 
 import './index.css';
 
@@ -21,40 +19,12 @@ class DirentDetails extends React.Component {
     super(props);
     this.state = {
       direntDetail: '',
-      dirent: null,
     };
   }
 
   updateDetail = (repoID, dirent, direntPath) => {
-    if (!dirent) {
-      this.setState({ dirent: null, direntDetail: '' });
-      return;
-    }
     seafileAPI[dirent.type === 'file' ? 'getFileInfo' : 'getDirInfo'](repoID, direntPath).then(res => {
-      this.setState(({
+      this.setState({ direntDetail: res.data });
-        direntDetail: res.data,
-        dirent,
-      }));
-    }).catch(error => {
-      const errMessage = Utils.getErrorMsg(error);
-      toaster.danger(errMessage);
-    });
-  };
-
-  loadDetail = (repoID, dirent, path) => {
-    if (dirent) {
-      const direntPath = Utils.joinPath(path, dirent.name);
-      this.updateDetail(repoID, dirent, direntPath);
-      return;
-    }
-    const dirPath = Utils.getDirName(path);
-    seafileAPI.listDir(repoID, dirPath).then(res => {
-      const direntList = res.data.dirent_list;
-      let folderDirent = direntList.find(item => item.parent_dir + item.name === path) || null;
-      if (folderDirent) {
-        folderDirent = new Dirent(folderDirent);
-      }
-      this.updateDetail(repoID, folderDirent, path);
     }).catch(error => {
       const errMessage = Utils.getErrorMsg(error);
       toaster.danger(errMessage);
@@ -62,7 +32,8 @@ class DirentDetails extends React.Component {
   };
 
   componentDidMount() {
-    this.loadDetail(this.props.repoID, this.props.dirent, this.props.path);
+    const fullPath = Utils.joinPath(this.props.path, this.props.dirent.name);
+    this.updateDetail(this.props.repoID, this.props.dirent, fullPath);
   }
 
   UNSAFE_componentWillReceiveProps(nextProps) {
@@ -71,19 +42,16 @@ class DirentDetails extends React.Component {
         !ObjectUtils.isSameObject(dirent, nextProps.dirent, ['name']) ||
         JSON.stringify(repoTags || []) !== JSON.stringify(nextProps.repoTags || []) ||
         JSON.stringify(fileTags || []) !== JSON.stringify(nextProps.fileTags || []) ||
-        path !== nextProps.path ||
+        (path !== nextProps.path && !ObjectUtils.isSameObject(dirent, nextProps.dirent, ['name'])) ||
         repoID !== nextProps.repoID
     ) {
-      this.setState({ dirent: null }, () => {
+      const fullPath = Utils.joinPath(nextProps.path, nextProps.dirent.name);
-        this.loadDetail(nextProps.repoID, nextProps.dirent, nextProps.path);
+      this.updateDetail(nextProps.repoID, nextProps.dirent, fullPath);
-      });
-    } else if (nextProps.dirent && ObjectUtils.isSameObject(dirent, nextProps.dirent, ['name'])) {
-      this.setState({ dirent: nextProps.dirent });
     }
   }
 
   renderImage = () => {
-    const { dirent } = this.state;
+    const { dirent } = this.props;
     if (!dirent) return null;
     const isImg = Utils.imageCheck(dirent.name);
     if (!isImg) return null;
@@ -102,9 +70,8 @@ class DirentDetails extends React.Component {
   };
 
   render() {
-    const { dirent, direntDetail } = this.state;
+    const { direntDetail } = this.state;
-    const { repoID, fileTags } = this.props;
+    const { repoID, fileTags, path, dirent } = this.props;
-
     if (!dirent || !direntDetail) {
       return (
         <Detail>
@@ -116,16 +83,11 @@ class DirentDetails extends React.Component {
       );
     }
 
-    let path = this.props.path;
-    if (dirent?.type !== 'file') {
-      path = this.props.dirent ? Utils.joinPath(path, dirent.name) : path;
-    }
-
     return (
       <MetadataDetailsProvider
         repoID={repoID}
         repoInfo={this.props.currentRepoInfo}
-        path={getDirentPath(dirent, path)}
+        path={path}
         dirent={dirent}
         direntDetail={direntDetail}
         direntType={dirent?.type !== 'file' ? 'dir' : 'file'}
@@ -163,7 +125,7 @@ class DirentDetails extends React.Component {
 
 DirentDetails.propTypes = {
   repoID: PropTypes.string.isRequired,
-  dirent: PropTypes.object,
+  dirent: PropTypes.object.isRequired,
   path: PropTypes.string.isRequired,
   currentRepoInfo: PropTypes.object.isRequired,
   onClose: PropTypes.func.isRequired,

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

@@ -43,6 +43,8 @@ const Detail = React.memo(({ repoID, path, currentMode, dirent, currentRepoInfo,
     return (<LibDetail currentRepoInfo={currentRepoInfo} onClose={onClose} />);
   }
 
+  if (!dirent) return null;
+
   return (
     <DirentDetail
       repoID={repoID}

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

@@ -169,9 +169,8 @@ export const MetadataDetailsProvider = ({ repoID, repoInfo, path, dirent, dirent
     setLoading(true);
     direntRef.current = dirent;
 
-    const dirName = Utils.getDirName(path);
+    const fileName = dirent.name;
-    const fileName = Utils.getFileName(path);
+    let parentDir = path;
-    let parentDir = direntType === 'file' ? dirName : dirName.slice(0, dirName.length - fileName.length - 1);
 
     if (!parentDir.startsWith('/')) {
       parentDir = '/' + parentDir;

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

@@ -279,10 +279,7 @@ class LibContentView extends React.Component {
     });
   }
 
-  componentDidUpdate(prevProps, prevState) {
+  componentDidUpdate() {
-    if (prevState.path !== this.state.path) {
-      this.setState({ currentDirent: null });
-    }
     this.lastModifyTime = new Date();
     this.props.eventBus.dispatch(EVENT_BUS_TYPE.CURRENT_LIBRARY_CHANGED, {
       repoID: this.props.repoID,
@@ -563,6 +560,7 @@ class LibContentView extends React.Component {
     this.setState({
       isDirentListLoading: true,
       direntList: [],
+      path,
     });
     seafileAPI.listDir(repoID, path, { 'with_thumbnail': true }).then(res => {
       const { dirent_list, user_perm: userPerm, dir_id: dirID } = res.data;
@@ -1083,13 +1081,11 @@ class LibContentView extends React.Component {
   };
 
   onMainNavBarClick = (nodePath) => {
-    // just for dir
-    this.resetSelected(nodePath);
     if (this.state.isTreePanelShown) {
       let tree = this.state.treeData.clone();
       let node = tree.getNodeByPath(nodePath);
       tree.expandNode(node);
-      this.setState({ treeData: tree, currentNode: node });
+      this.setState({ treeData: tree, currentNode: nodePath !== '/' ? node : null });
     }
 
     this.showDir(nodePath);
@@ -1853,6 +1849,7 @@ class LibContentView extends React.Component {
       this.setState({
         isTreeDataLoading: false,
         treeData: tree,
+        currentNode: tree.getNodeByPath(path),
         userPerm: user_perm,
       });
     }).catch(() => {
@@ -1869,6 +1866,7 @@ class LibContentView extends React.Component {
     }
 
     if (node.object.isDir()) {
+      this.setState({ currentNode: node, path: node.path });
       let isLoaded = node.isLoaded;
       if (!node.isLoaded) {
         let tree = this.state.treeData.clone();
@@ -1907,10 +1905,12 @@ class LibContentView extends React.Component {
       this.showDir(node.path);
     } else {
       if (Utils.isFileMetadata(node?.object?.type)) {
+        this.setState({ currentNode: null });
         if (node.path !== this.state.path) {
           this.showFileMetadata(node.path, node.view_id || '0000');
         }
       } else if (Utils.isTags(node?.object?.type)) {
+        this.setState({ currentNode: null });
         if (node.path !== this.state.path) {
           this.showTagsView(node.path, node.tag_id);
         }
@@ -1956,7 +1956,9 @@ class LibContentView extends React.Component {
 
   renameTreeNode = (path, newName) => {
     let tree = treeHelper.renameNodeByPath(this.state.treeData, path, newName);
-    this.setState({ treeData: tree });
+    const newPath = Utils.joinPath(Utils.getDirName(path), newName);
+    const currentNode = path === this.state.currentNode?.path ? tree.getNodeByPath(newPath) : this.state.currentNode;
+    this.setState({ treeData: tree, currentNode });
   };
 
   deleteTreeNode = (path) => {
@@ -2192,7 +2194,7 @@ class LibContentView extends React.Component {
   render() {
     const { repoID } = this.props;
     let { currentRepoInfo, userPerm, isCopyMoveProgressDialogShow, isDeleteFolderDialogOpen, errorMsg,
-      path, usedRepoTags, isDirentSelected, currentMode } = this.state;
+      path, usedRepoTags, isDirentSelected, currentMode, currentNode } = this.state;
 
     if (this.state.libNeedDecrypt) {
       return (
@@ -2258,6 +2260,11 @@ class LibContentView extends React.Component {
       currentDirent = currentDirent.toJson();
     }
 
+    let detailPath = this.state.path;
+    if (!currentDirent && currentMode !== METADATA_MODE && currentMode !== TAGS_MODE) {
+      detailPath = Utils.getDirName(this.state.path);
+    }
+    const detailDirent = currentDirent || currentNode?.object || null;
     return (
       <MetadataStatusProvider repoID={repoID} repoInfo={currentRepoInfo} hideMetadataView={this.hideMetadataView}>
         <TagsProvider repoID={repoID} currentPath={path} repoInfo={currentRepoInfo} selectTagsView={this.onTreeNodeClick} >
@@ -2443,10 +2450,10 @@ class LibContentView extends React.Component {
                     }
                     {!isCustomPermission && this.state.isDirentDetailShow && (
                       <Detail
-                        path={this.state.path}
+                        path={detailPath}
                         repoID={this.props.repoID}
                         currentRepoInfo={{ ...this.state.currentRepoInfo }}
-                        dirent={currentDirent}
+                        dirent={detailDirent}
                         repoTags={this.state.repoTags}
                         fileTags={this.state.isViewFile ? this.state.fileTags : []}
                         onFileTagChanged={this.onFileTagChanged}