fix: details rename (#7232)

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

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

@@ -26,10 +26,6 @@ const DirDetails = ({ direntDetail }) => {
 };
 
 DirDetails.propTypes = {
-  repoID: PropTypes.string,
-  repoInfo: PropTypes.object,
-  dirent: PropTypes.object,
-  path: PropTypes.string,
   direntDetail: PropTypes.object,
 };
 

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

@@ -65,7 +65,7 @@ class DirentDetails extends React.Component {
   UNSAFE_componentWillReceiveProps(nextProps) {
     const { dirent, path, repoID, currentRepoInfo, repoTags, fileTags } = this.props;
     if (!ObjectUtils.isSameObject(currentRepoInfo, nextProps.currentRepoInfo) ||
-        !ObjectUtils.isSameObject(dirent, nextProps.dirent) ||
+        !ObjectUtils.isSameObject(dirent, nextProps.dirent, ['name']) ||
         JSON.stringify(repoTags || []) !== JSON.stringify(nextProps.repoTags || []) ||
         JSON.stringify(fileTags || []) !== JSON.stringify(nextProps.fileTags || []) ||
         path !== nextProps.path ||
@@ -74,6 +74,8 @@ class DirentDetails extends React.Component {
       this.setState({ dirent: null }, () => {
         this.loadDetail(nextProps.repoID, nextProps.dirent, nextProps.path);
       });
+    } else if (nextProps.dirent && ObjectUtils.isSameObject(dirent, nextProps.dirent, ['name'])) {
+      this.setState({ dirent: nextProps.dirent });
     }
   }
 

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

@@ -12,6 +12,7 @@ import { getCellValueByColumn, getOptionName, getColumnOptionNamesByIds, getColu
 } from '../utils/cell';
 import tagsAPI from '../../tag/api';
 import { getColumnByKey, getColumnOptions, getColumnOriginName } from '../utils/column';
+import ObjectUtils from '../utils/object-utils';
 
 const MetadataDetailsContext = React.createContext(null);
 
@@ -26,6 +27,7 @@ export const MetadataDetailsProvider = ({ repoID, repoInfo, path, dirent, dirent
   const canModifyDetails = useMemo(() => repoInfo.is_admin, [repoInfo]);
 
   const allColumnsRef = useRef([]);
+  const direntRef = useRef(null);
 
   const columns = useMemo(() => {
     const orderAndHiddenColumns = detailsSettings?.columns || [];
@@ -142,13 +144,18 @@ export const MetadataDetailsProvider = ({ repoID, repoInfo, path, dirent, dirent
   }, [columns, saveColumns]);
 
   useEffect(() => {
-    setLoading(true);
     if (!dirent || !direntDetail || !enableMetadata || SYSTEM_FOLDERS.find(folderPath => path.startsWith(folderPath))) {
+      setLoading(true);
+      direntRef.current = null;
       setRecord(null);
       setOriginColumns([]);
       setLoading(false);
       return;
     }
+    if (ObjectUtils.isSameObject(direntRef.current, dirent, ['name'])) return;
+
+    setLoading(true);
+    direntRef.current = dirent;
 
     const dirName = Utils.getDirName(path);
     const fileName = Utils.getFileName(path);

frontend/src/metadata/utils/object-utils.js

@@ -12,31 +12,31 @@ class ObjectUtils {
     return ['Object', 'Array'].includes(this.getDataType(data));
   }
 
-  static isObjectChanged(source, comparison) {
+  static isObjectChanged(source, comparison, notIncludeKeys = []) {
     if (!this.iterable(source)) {
       throw new Error(`source should be a Object or Array , but got ${this.getDataType(source)}`);
     }
     if (this.getDataType(source) !== this.getDataType(comparison)) {
       return true;
     }
-    const sourceKeys = Object.keys(source);
-    const comparisonKeys = Object.keys({ ...source, ...comparison });
+    const sourceKeys = Object.keys(source).filter(key => !notIncludeKeys.includes(key));
+    const comparisonKeys = Object.keys({ ...source, ...comparison }).filter(key => !notIncludeKeys.includes(key));
     if (sourceKeys.length !== comparisonKeys.length) {
       return true;
     }
     return comparisonKeys.some(key => {
       if (this.iterable(source[key])) {
-        return this.isObjectChanged(source[key], comparison[key]);
+        return this.isObjectChanged(source[key], comparison[key], notIncludeKeys);
       } else {
         return source[key] !== comparison[key];
       }
     });
   }
 
-  static isSameObject(source, comparison) {
+  static isSameObject(source, comparison, notIncludeKeys = []) {
     if (!source && !comparison) return true;
     if (!source || !comparison) return false;
-    return !this.isObjectChanged(source, comparison);
+    return !this.isObjectChanged(source, comparison, notIncludeKeys);
   }
 
   static isEmpty = (target) => {

frontend/src/metadata/views/kanban/boards/index.js

@@ -200,6 +200,7 @@ const Boards = ({ modifyRecord, deleteRecords, modifyColumnData, onCloseSettings
     const path = getParentDirFromRecord(record);
     const isDir = checkIsDir(record);
     updateCurrentDirent({
+      id: recordId,
       type: isDir ? 'dir' : 'file',
       mtime: '',
       name,
@@ -244,8 +245,14 @@ const Boards = ({ modifyRecord, deleteRecords, modifyColumnData, onCloseSettings
   }, [deleteRecords, updateCurrentDirent]);
 
   const onRename = useCallback((rowId, updates, oldRowData, originalUpdates, originalOldRowData, { success_callback }) => {
-    modifyRecord(rowId, updates, oldRowData, originalUpdates, originalOldRowData, { success_callback });
-  }, [modifyRecord]);
+    modifyRecord(rowId, updates, oldRowData, originalUpdates, originalOldRowData, {
+      success_callback: (operation) => {
+        success_callback && success_callback(operation);
+        const record = getRowById(metadata, rowId);
+        handelUpdateCurrentDirent(record);
+      }
+    });
+  }, [metadata, modifyRecord, handelUpdateCurrentDirent]);
 
   useEffect(() => {
     if (!isDirentDetailShow) {

frontend/src/models/dirent.js

@@ -59,6 +59,19 @@ class Dirent {
     return this.type !== 'file';
   }
 
+  toJson() {
+    return {
+      id: this.id,
+      name: this.name,
+      mtime: this.mtime,
+      type: this.type,
+      size: this.size,
+      modifier_name: this.modifier_name,
+      modifier_email: this.modifier_email,
+      modifier_contact_email: this.modifier_contact_email,
+    };
+  }
+
 }
 
 export default Dirent;

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

@@ -2202,6 +2202,11 @@ class LibContentView extends React.Component {
       }
     }
 
+    let currentDirent = this.state.currentDirent;
+    if (currentDirent instanceof Dirent) {
+      currentDirent = currentDirent.toJson();
+    }
+
     return (
       <MetadataStatusProvider repoID={repoID} currentRepoInfo={currentRepoInfo} hideMetadataView={this.hideMetadataView}>
         <TagsProvider repoID={repoID} currentPath={path} repoInfo={currentRepoInfo} selectTagsView={this.onTreeNodeClick}>
@@ -2382,8 +2387,8 @@ class LibContentView extends React.Component {
                       <Detail
                         path={this.state.path}
                         repoID={this.props.repoID}
-                        currentRepoInfo={this.state.currentRepoInfo}
-                        dirent={this.state.currentDirent}
+                        currentRepoInfo={{ ...this.state.currentRepoInfo }}
+                        dirent={currentDirent}
                         repoTags={this.state.repoTags}
                         fileTags={this.state.isViewFile ? this.state.fileTags : []}
                         onFileTagChanged={this.onFileTagChanged}