repair wiki bug (#2344)

* repair wiki bug

* optimized code

* optimized code

frontend/src/components/constance.js

@@ -13,3 +13,4 @@ export const slug = window.wiki.config.slug;
 export const repoID = window.wiki.config.repoId;
 export const serviceUrl = window.wiki.config.serviceUrl;
 export const initialFilePath = window.wiki.config.initial_file_path;
+export const permission = window.wiki.config.permission

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

@@ -59,7 +59,6 @@ class Rename extends React.Component {
 
   render() {
     let type = this.props.currentNode.type;
-    let preName = this.props.currentNode.name;
     return (
       <Modal isOpen={true} toggle={this.toggle}>
         <ModalHeader toggle={this.toggle}>{type === 'file' ? gettext("Rename File") : gettext("Rename Folder") }</ModalHeader>

frontend/src/components/menu-component/node-menu.js

@@ -1,101 +1,24 @@
 import React from 'react'
-import Delete from './menu-dialog/delete-dialog';
-import CreateFlieFolder from './menu-dialog/create-fileforder-dialog';
-import Rename from './menu-dialog/rename-dialog';
 
 const gettext = window.gettext;
 
 class NodeMenu extends React.Component {
   
-  constructor(props) {
-    super(props);
-    this.state = {
-      showDelete: false,
-      showAddFileFolder: false,
-      showRename: false,
-      isFile: false
-    };
-  }
-
-  toggleDelete = () => {
-    this.setState({showDelete: !this.state.showDelete});
-    this.props.onHideContextMenu();
-  }
-
   toggleAddFileFolder = (ev, flag) => {
-    if(flag){
+    this.props.toggleAddFileFolder(flag);
-      this.setState({
-        showAddFileFolder: !this.state.showAddFileFolder,
-        isFile: true
-      });
-    } else {
-      this.setState({
-        showAddFileFolder: !this.state.showAddFileFolder,
-        isFile: false
-      })
-    }
-    this.props.onHideContextMenu();
   }
   
   toggleRename = () => {
-    this.setState({showRename: !this.state.showRename});
+    this.props.toggleRename();
-    this.props.onHideContextMenu();
   }
   
-  onDelete = () => {
+  toggleDelete = () => {
-    this.setState({showDelete: !this.state.showDelete});
+    this.props.toggleDelete();
-    this.props.onDeleteNode();
-  }
-
-  deleteCancel = () => {
-    this.setState({showDelete: !this.state.showDelete});
-  }
-
-  onAddFile = (filePath) => {
-    this.setState({
-      showAddFileFolder: !this.state.showAddFileFolder,
-      isFile: false
-    });
-    this.props.onAddFileNode(filePath);
-  }
-
-  addFileCancel = () => {
-    this.setState({
-      showAddFileFolder: !this.state.showAddFileFolder,
-      isFile: false
-    });
-  }
-
-  onAddFolder = (dirPath) => {
-    this.setState({
-      showAddFileFolder: !this.state.showAddFileFolder,
-      isFile: false
-    });
-    this.props.onAddFolderNode(dirPath);
-  }
-
-  addFolderCancel = () => {
-    this.setState({
-      showAddFileFolder: !this.state.showAddFileFolder,
-      isFile: false
-    });
-  }
-
-  onRename = (newName) => {
-    this.setState({showRename: !this.state.showRename});
-    this.props.onRenameNode(newName);
-  }
-
-  renameCancel = () => {
-    this.setState({showRename: !this.state.showRename});
   }
 
   renderNodeMenu() {
-    let style = null;
     let position = this.props.menuPosition;
-    if (this.props.isShowMenu) {
+    let style = {position: "fixed",left: position.left, top: position.top, display: 'block'};
-      style = {position: "fixed",left: position.left, top: position.top, display: 'block'};
-    }
 
     if (this.props.currentNode.type === "dir") {
 
@@ -134,30 +57,6 @@ class NodeMenu extends React.Component {
     return (
       <div className="node-menu-module">
         {this.renderNodeMenu()}
-        {this.state.showDelete &&
-        <Delete 
-          currentNode={this.props.currentNode}
-          handleSubmit={this.onDelete}
-          toggleCancel={this.deleteCancel}
-        />
-        }
-        {this.state.showAddFileFolder && 
-        <CreateFlieFolder 
-          isFile={this.state.isFile}
-          currentNode={this.props.currentNode}
-          onAddFolder={this.onAddFolder}
-          addFolderCancel={this.addFolderCancel}
-          onAddFile={this.onAddFile}
-          addFileCancel={this.addFileCancel}
-        />
-        }
-        {this.state.showRename &&
-        <Rename 
-          currentNode={this.props.currentNode}
-          onRename={this.onRename} 
-          toggleCancel={this.renameCancel} 
-        />
-        }
       </div>
     )
   }

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

@@ -1,5 +1,6 @@
 import React from 'react';
-import MenuControl from '../menu-component/node-menu-control'
+import MenuControl from '../menu-component/node-menu-control';
+import { permission } from '../constance';
 
 function sortByType(a, b) {
   if (a.type == "dir" && b.type != "dir") {
@@ -110,7 +111,6 @@ class TreeNodeView extends React.Component {
                 paddingLeft={this.props.paddingLeft}
                 treeView={this.props.treeView}
                 isNodeItemFrezee={this.props.isNodeItemFrezee}
-                permission={this.props.permission}
                 currentFilePath={this.props.currentFilePath}
                 onDirCollapse={this.props.onDirCollapse}
               />
@@ -124,7 +124,7 @@ class TreeNodeView extends React.Component {
   }
 
   renderMenuController() {
-    if (this.props.permission === "rw") {
+    if (permission === "True") {
       let isShow = (this.props.node.path === this.props.currentFilePath);
       return (
         <div className="right-icon">

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

@@ -1,5 +1,6 @@
 import Node from './node';
 import moment from 'moment';
+import { bytesToSize } from '../utils';
 
 class Tree {
   
@@ -172,7 +173,7 @@ class Tree {
     var node = new Node({
       name: model.name,
       type: model.type,
-      size: model.size,
+      size: bytesToSize(model.size),
       last_update_time: moment.unix(model.last_update_time).fromNow(),
       isExpanded: false
     });
@@ -200,7 +201,7 @@ class Tree {
       let node = new Node({
         name: nodeObj.name,
         type: nodeObj.type,
-        size: nodeObj.size,
+        size: bytesToSize(nodeObj.size),
         last_update_time: moment.unix(nodeObj.last_update_time).fromNow(),
         isExpanded: false
       });
@@ -226,7 +227,7 @@ class Tree {
     var node = new Node({
       name: node.name,
       type: node.type,
-      size: node.size,
+      size: bytesToSize(node.size),
       last_update_time: moment.unix(node.last_update_time).fromNow(),
       isExpanded: false
     });

frontend/src/pages/wiki/side-panel.js

@@ -3,6 +3,9 @@ import TreeView from '../../components/tree-view/tree-view';
 import { siteRoot, logoPath, mediaUrl, siteTitle, logoWidth, logoHeight } from '../../components/constance';
 import NodeMenu from '../../components/menu-component/node-menu';
 import MenuControl from '../../components/menu-component/node-menu-control';
+import Delete from '../../components/menu-component/menu-dialog/delete-dialog';
+import Rename from '../../components/menu-component/menu-dialog/rename-dialog';
+import CreateFlieFolder from '../../components/menu-component/menu-dialog/create-fileforder-dialog';
 
 const gettext = window.gettext;
 
@@ -19,7 +22,11 @@ class SidePanel extends Component {
         top: 0
       },
       isLoadFailed: false,
-      isMenuIconShow: false
+      isMenuIconShow: false,
+      showDelete: false,
+      showAddFileFolder: false,
+      showRename: false,
+      isFile: false
     }
     this.searchedPath = null;
   }
@@ -71,26 +78,52 @@ class SidePanel extends Component {
   }
 
   onHideContextMenu = () => {
+    if (!this.state.isShowMenu) {
+      return;
+    }
     this.setState({
       isShowMenu: false,
       isNodeItemFrezee: false
     })
   }
 
+  toggleAddFileFolder = (flag) => {
+    let isFile = flag === true ? true : false;
+    this.setState({
+      showAddFileFolder: !this.state.showAddFileFolder,
+      isFile: isFile
+    });
+    this.onHideContextMenu();
+  }
+  
+  toggleRename = () => {
+    this.setState({showRename: !this.state.showRename});
+    this.onHideContextMenu();
+  }
+  
+  toggleDelete = () => {
+    this.setState({showDelete: !this.state.showDelete});
+    this.onHideContextMenu();
+  }
+
   onAddFolderNode = (dirPath) => {
+    this.setState({showAddFileFolder: !this.state.showAddFileFolder});
     this.props.onAddFolderNode(dirPath);
   }
   
   onAddFileNode = (filePath) => {
+    this.setState({showAddFileFolder: !this.state.showAddFileFolder});
     this.props.onAddFileNode(filePath);
   }
   
   onRenameNode = (newName) => {
+    this.setState({showRename: !this.state.showRename})
     let node = this.state.currentNode;
     this.props.onRenameNode(node, newName)
   }
   
   onDeleteNode = () => {
+    this.setState({showDelete: !this.state.showDelete})
     let node = this.state.currentNode;
     this.props.onDeleteNode(node);
   }
@@ -109,6 +142,22 @@ class SidePanel extends Component {
     document.removeEventListener('click', this.onHideContextMenu);
   }
 
+  addFolderCancel = () => {
+    this.setState({showAddFileFolder: !this.state.showAddFileFolder});
+  }
+
+  addFileCancel = () => {
+    this.setState({showAddFileFolder: !this.state.showAddFileFolder});
+  }
+
+  deleteCancel = () => {
+    this.setState({showDelete: !this.state.showDelete})
+  }
+
+  renameCancel = () => {
+    this.setState({showRename: !this.state.showRename})
+  }
+
   render() {
     return (
       <div className={`wiki-side-panel ${this.props.closeSideBar ? "": "left-zero"}`}>
@@ -135,7 +184,6 @@ class SidePanel extends Component {
           <div className="wiki-pages-container">
             {this.props.treeData && 
             <TreeView
-              permission={this.props.permission}
               currentFilePath={this.props.currentFilePath}
               treeData={this.props.treeData}
               currentNode={this.state.currentNode}
@@ -145,16 +193,39 @@ class SidePanel extends Component {
               onDirCollapse={this.props.onDirCollapse}
             />
             }
+            {this.state.isShowMenu && 
             <NodeMenu 
-              isShowMenu={this.state.isShowMenu}
               menuPosition={this.state.menuPosition}
               currentNode={this.state.currentNode}
-              onHideContextMenu={this.onHideContextMenu}
+              toggleAddFileFolder={this.toggleAddFileFolder}
-              onDeleteNode={this.onDeleteNode}
+              toggleRename={this.toggleRename}
-              onAddFileNode={this.onAddFileNode}
+              toggleDelete={this.toggleDelete}
-              onAddFolderNode={this.onAddFolderNode}
-              onRenameNode={this.onRenameNode}
             />
+            }
+            {this.state.showDelete &&
+            <Delete 
+              currentNode={this.state.currentNode}
+              handleSubmit={this.onDeleteNode}
+              toggleCancel={this.deleteCancel}
+            />
+            }
+            {this.state.showAddFileFolder && 
+            <CreateFlieFolder 
+              isFile={this.state.isFile}
+              currentNode={this.state.currentNode}
+              onAddFolder={this.onAddFolderNode}
+              addFolderCancel={this.addFolderCancel}
+              onAddFile={this.onAddFileNode}
+              addFileCancel={this.addFileCancel}
+            />
+            }
+            {this.state.showRename &&
+            <Rename 
+              currentNode={this.state.currentNode}
+              onRename={this.onRenameNode} 
+              toggleCancel={this.renameCancel} 
+            />
+            }
           </div>
         </div>
       </div>

frontend/src/wiki.js

@@ -45,10 +45,12 @@ class Wiki extends Component {
       treeData.parseListToTree(files);
 
       let node = treeData.getNodeByPath(filePath);
+      treeData.setNodeToActivated(node);
       if (node.isDir()) {
         this.exitViewFileState(treeData, node);
         this.setState({isFileLoading: false});
       } else {
+        treeData.setNodeToActivated(node);
         editorUtilities.getWikiFileContent(slug, filePath).then(res => {
           this.setState({
             tree_data: treeData,
@@ -72,7 +74,7 @@ class Wiki extends Component {
     })
   }
 
-  initMainPanelData(filePath) {
+  initMainPanelData(filePath){
     this.setState({isFileLoading: true});
     editorUtilities.getWikiFileContent(slug, filePath)
       .then(res => {
@@ -114,9 +116,7 @@ class Wiki extends Component {
       let tree = this.state.tree_data.clone();
       let node = tree.getNodeByPath(path);
       tree.setNodeToActivated(node);
-
+      this.enterViewFileState(tree, node, node.path);
-      let path = node.path; //node is file
-      this.enterViewFileState(tree, node, path);
     }
   }
 
@@ -234,14 +234,16 @@ class Wiki extends Component {
     let filePath = node.path;
     if (node.isMarkdown()) {
       editorUtilities.renameFile(filePath, newName).then(res => {
-        let date = new Date().getTime()/1000;
+        let cloneNode = node.clone();
+
         tree.updateNodeParam(node, "name", newName);
         node.name = newName;
+        let date = new Date().getTime()/1000;
         tree.updateNodeParam(node, "last_update_time", moment.unix(date).fromNow());
-
         node.last_update_time = moment.unix(date).fromNow();
+
         if (this.state.isViewFileState) {
-          if (this.isModifyCurrentFile(node)) {
+          if (this.isModifyCurrentFile(cloneNode)) {
             tree.setNodeToActivated(node);
             this.setState({
               tree_data: tree,
@@ -252,23 +254,28 @@ class Wiki extends Component {
             this.setState({tree_data: tree});
           }
         } else {
-          this.setState({tree_data: tree});
+          let parentNode = tree.findNodeParentFromTree(node);
+          this.setState({
+            tree_data: tree,
+            changedNode: parentNode
+          });
         }
       })
     } else if (node.isDir()) {
       editorUtilities.renameDir(filePath, newName).then(res => {
 
-        let currentFilePath = this.state.filePath;// the sequence is must right
+        let currentFilePath = this.state.filePath;
         let currentFileNode = tree.getNodeByPath(currentFilePath);
-        let isPathEqual = (node.path === currentFilePath);
+        let nodePath = node.path;
-        let date = new Date().getTime()/1000;
+
         tree.updateNodeParam(node, "name", newName);
-        node.name = newName;  // just synchronization node data && tree data;
+        node.name = newName;
+        let date = new Date().getTime()/1000;
         tree.updateNodeParam(node, "last_update_time", moment.unix(date).fromNow());
         node.last_update_time = moment.unix(date).fromNow();
 
         if (this.state.isViewFileState) {
-          if (this.isModifyContainsCurrentFile(node)) {
+          if (currentFilePath.indexOf(nodePath) > -1) {
             tree.setNodeToActivated(currentFileNode);
             this.setState({
               tree_data: tree,
@@ -279,7 +286,10 @@ class Wiki extends Component {
             this.setState({tree_data: tree});
           }
         } else {
-          if (isPathEqual || node.path.indexOf(currentFilePath) > -1) {
+          if (nodePath === currentFilePath) { // old node
+            tree.setNodeToActivated(node);
+            this.exitViewFileState(tree, node);
+          } else if (node.path.indexOf(currentFilePath) > -1) { // new node
             tree.setNodeToActivated(currentFileNode);
             this.exitViewFileState(tree, currentFileNode);
           } else {
@@ -429,7 +439,6 @@ class Wiki extends Component {
           closeSideBar={this.state.closeSideBar}
           onCloseSide ={this.onCloseSide}
           treeData={this.state.tree_data}
-          permission={this.state.permission}
           currentFilePath={this.state.filePath}
           changedNode={this.state.changedNode}
           onAddFolderNode={this.onAddFolderNode}

seahub/templates/wiki/wiki.html

@@ -11,7 +11,8 @@
             slug: "{{ wiki.slug }}",
             repoId: "{{ wiki.repo_id }}",
             serviceUrl: "{{ service_url}}",
-            initial_file_path: "{{ file_path }}"
+            initial_file_path: "{{ file_path }}",
+            permission: "{{ user_can_write }}"
         }
     };
 </script>