Combine view mode (#2959)

frontend/src/components/tree-view/tree-node-view.js

@@ -4,6 +4,7 @@ import TreeNodeMenu from './tree-node-menu';
 import { permission } from '../../utils/constants';
 
 const propTypes = {
+  repoPermission: PropTypes.bool,
   node: PropTypes.object.isRequired,
   currentPath: PropTypes.string.isRequired,
   paddingLeft: PropTypes.number.isRequired,
@@ -111,6 +112,7 @@ class TreeNodeView extends React.Component {
               key={item.path}
               node={item}
               paddingLeft={paddingLeft}
+              repoPermission={this.props.repoPermission}
               currentPath={this.props.currentPath}
               isNodeMenuShow={this.props.isNodeMenuShow}
               isItemFreezed={this.props.isItemFreezed}
@@ -150,7 +152,7 @@ class TreeNodeView extends React.Component {
           </div>
           {isNodeMenuShow && (
             <div className="right-icon">
-              {(permission && this.state.isShowOperationMenu) && (
+              {((this.props.repoPermission || permission) && this.state.isShowOperationMenu) && (
                 <TreeNodeMenu 
                   node={this.props.node}
                   onMenuItemClick={this.onMenuItemClick}

frontend/src/components/tree-view/tree-node.js

@@ -10,17 +10,17 @@ class TreeNode {
     this.parentNode = parentNode || null;
   }
 
-  clone() {
+  clone(parentNode) {
     let treeNode = new TreeNode({
       path: this.path,
       object: this.object.clone(),
       isLoaded: this.isLoaded,
       isPreload: this.isPreload,
       isExpanded: this.isExpanded,
-      parentNode: this.parentNode,
+      parentNode: parentNode || null,
     });
     treeNode.children = this.children.map(child => {
-      let newChild = child.clone();
+      let newChild = child.clone(treeNode);
       return newChild;
     });
 
@@ -77,9 +77,24 @@ class TreeNode {
   rename(newName) {
     this.object.name = newName;
     this.path = this.generatePath(this.parentNode); 
+    if (this.isExpanded) {
+      this.updateChildrenPath(this);
+    }
     // this.isLoaded = false;
   }
 
+  updateChildrenPath(node) {
+    let children = node.children;
+    children.forEach(child => {
+      child.path = child.generatePath(child.parentNode);
+      if (child.isExpanded) {
+        child.updateChildrenPath(child);
+      } else {
+        child.isLoaded = false;
+      }
+    });
+  }
+
   updateObjectProperties(keys, newValues) {
     if (Array.isArray(keys) && Array.isArray(newValues)) {
       keys.forEach((key, index) => {

frontend/src/components/tree-view/tree-view.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import TreeNodeView from './tree-node-view';
 
 const propTypes = {
+  repoPermission: PropTypes.bool,
   isNodeMenuShow: PropTypes.bool.isRequired,
   treeData: PropTypes.object.isRequired,
   currentPath: PropTypes.string.isRequired,
@@ -39,6 +40,7 @@ class TreeView extends React.Component {
     return (
       <div className="tree-view tree">
         <TreeNodeView 
+          repoPermission={this.props.repoPermission}
           node={this.props.treeData.root}
           currentPath={this.props.currentPath}
           paddingLeft={PADDING_LEFT}