optimize view tree render (#7713)

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

frontend/src/metadata/hooks/metadata.js

@@ -129,7 +129,7 @@ export const MetadataProvider = ({ repoID, currentPath, repoInfo, selectMetadata
     setCollapsedFolders(updatedCollapsedFoldersIds);
   }, [getCollapsedFolders, setCollapsedFolders]);
 
-  const addFolder = useCallback((name, successCallback, failCallback) => {
+  const addFolder = useCallback(({ name, successCallback, failCallback }) => {
     metadataAPI.addFolder(repoID, name).then(res => {
       let newNavigation = [...navigation];
       const folder = new Folder(res.data.folder);

frontend/src/metadata/metadata-tree-view/index.js

@@ -69,10 +69,6 @@ const MetadataTreeView = ({ userPerm, currentPath }) => {
     setShowInput(true);
   }, [generateNewViewDefaultName]);
 
-  const closeNewView = useCallback(() => {
-    setShowInput(false);
-  }, []);
-
   const closeNewFolder = useCallback(() => {
     setShowInput(false);
   }, []);
@@ -89,7 +85,7 @@ const MetadataTreeView = ({ userPerm, currentPath }) => {
   }, [getFolders]);
 
   const handleAddView = useCallback((name, type) => {
-    addView({ name, type });
+    addView({ name, type, successCallback: () => setShowInput(false) });
   }, [addView]);
 
   const handleDuplicateView = useCallback((viewId) => {
@@ -163,7 +159,7 @@ const MetadataTreeView = ({ userPerm, currentPath }) => {
             return renderView(view, index);
           })}
           {showInput && (newView ?
-            <NewView newView={newView} leftIndent={TREE_NODE_LEFT_INDENT * 2} closeNewView={closeNewView} addView={handleAddView} /> :
+            <NewView newView={newView} leftIndent={TREE_NODE_LEFT_INDENT * 2} addView={handleAddView} /> :
             <NewFolder closeNewFolder={closeNewFolder} />
           )}
         </div>

frontend/src/metadata/metadata-tree-view/new-folder.js

@@ -25,8 +25,7 @@ const NewFolder = ({ closeNewFolder }) => {
       inputRef.current && inputRef.current.focus();
       return;
     }
-    addFolder(message);
-    closeNewFolder();
+    addFolder({ name: message, successCallback: closeNewFolder });
   }, [addFolder, getFoldersNames, closeNewFolder]);
 
   return (

frontend/src/metadata/metadata-tree-view/new-view.js

@@ -7,7 +7,7 @@ import { useMetadata } from '../hooks';
 import { validateName } from '../utils/validate';
 import { VIEW_TYPE, VIEW_TYPE_ICON } from '../constants';
 
-const NewView = ({ newView, leftIndent, closeNewView, addView }) => {
+const NewView = ({ newView, leftIndent, addView }) => {
   const { type: newViewType } = newView;
   const { idViewMap } = useMetadata();
   const editorRef = useRef(null);
@@ -22,8 +22,7 @@ const NewView = ({ newView, leftIndent, closeNewView, addView }) => {
       return;
     }
     addView(message, newViewType);
-    closeNewView();
-  }, [newViewType, idViewMap, addView, closeNewView]);
+  }, [newViewType, idViewMap, addView]);
 
   return (
     <div className="tree-node">
@@ -48,7 +47,6 @@ const NewView = ({ newView, leftIndent, closeNewView, addView }) => {
 NewView.propTypes = {
   newView: PropTypes.object,
   leftIndent: PropTypes.number,
-  closeNewView: PropTypes.func,
 };
 
 export default NewView;