Wiki bug repair (#2492)

frontend/src/components/dirent-list-view/dirent-list-item.js

@@ -22,6 +22,8 @@ const propTypes = {
   onDirentItemCopy: PropTypes.func.isRequired,
   onItemDetails: PropTypes.func.isRequired,
   updateViewList: PropTypes.func.isRequired,
+  currentRepo: PropTypes.object,
+  isRepoOwner: PropTypes.bool,
 };
 
 class DirentListItem extends React.Component {
@@ -184,12 +186,12 @@ class DirentListItem extends React.Component {
   }
 
   onRenameMenuItemClick = () => {
+    this.props.onRenameMenuItemClick(this.props.dirent);
     this.setState({
       isOperationShow: false,
       isItemMenuShow: false,
       isRenameing: true,
     });
-    this.props.onRenameMenuItemClick(this.props.dirent);
   }
 
   onRenameConfirm = (newName) => {
@@ -349,6 +351,8 @@ class DirentListItem extends React.Component {
                   dirent={this.props.dirent}
                   menuPosition={this.state.menuPosition}
                   onMenuItemClick={this.onItemMenuItemClick}
+                  currentRepo={this.props.currentRepo}
+                  isRepoOwner={this.props.isRepoOwner}
                 />
               }
             </div>

frontend/src/components/dirent-list-view/dirent-list-view.js

@@ -20,6 +20,8 @@ const propTypes = {
   onItemDetails: PropTypes.func.isRequired,
   updateViewList: PropTypes.func.isRequired,
   isDirentListLoading: PropTypes.bool.isRequired,
+  isRepoOwner: PropTypes.bool,
+  currentRepo: PropTypes.object,
 };
 
 class DirentListView extends React.Component {
@@ -159,6 +161,8 @@ class DirentListView extends React.Component {
                     key={index}
                     dirent={dirent}
                     filePath={this.props.filePath}
+                    currentRepo={this.props.currentRepo}
+                    isRepoOwner={this.props.isRepoOwner}
                     onItemClick={this.props.onItemClick}
                     onRenameMenuItemClick={this.onRenameMenuItemClick}
                     onItemDelete={this.props.onItemDelete}

frontend/src/components/dirent-list-view/dirent-menu-item.js

@@ -16,13 +16,14 @@ class DirentMenuItem extends React.Component {
   }
 
   render() {
-    let operationName = gettext(this.props.item);
+    let operation = this.props.item;
+    let operationMessage = gettext(operation);
     return (
       <Fragment>
         {
-          operationName !== 'Divider' ?
-            <li className="dropdown-item operation-menu-item" data-type={operationName} onClick={this.onClick}>
-              <span className="user-select-none" data-type={operationName} title={operationName} aria-label={operationName}>{operationName}</span>
+          operation !== 'Divider' ?
+            <li className="dropdown-item operation-menu-item" data-type={operation} onClick={this.onClick}>
+              <span className="user-select-none" data-type={operation} title={operationMessage} aria-label={operationMessage}>{operationMessage}</span>
             </li> :
             <li className="dropdown-divider"></li>
         }

frontend/src/components/dirent-list-view/dirent-menu.js

@@ -1,14 +1,14 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { seafileAPI } from '../../utils/seafile-api';
-import { repoID, isPro, enableFileComment, fileAuditEnabled, folderPermEnabled} from '../../utils/constants';
-import Repo from '../../models/repo';
+import { isPro, enableFileComment, fileAuditEnabled, folderPermEnabled} from '../../utils/constants';
 import DirentMenuItem from './dirent-menu-item';
 
 const propTypes = {
   dirent: PropTypes.object.isRequired,
   menuPosition: PropTypes.object.isRequired, 
   onMenuItemClick: PropTypes.func.isRequired,
+  currentRepo: PropTypes.object.isRequired,
+  isRepoOwner: PropTypes.bool.isRequired,
 };
 
 class DirentMenu extends React.Component {
@@ -16,32 +16,25 @@ class DirentMenu extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
-      repo: null,
       menuList: [],
     };
-    this.is_repo_owner = false;
   }
 
   componentDidMount() {
-    seafileAPI.getRepoInfo(repoID).then(res => {
-      let repo = new Repo(res.data);
-      seafileAPI.getAccountInfo().then(res => {
-        let user_email = res.data.email;
-        this.is_repo_owner = repo.owner_email === user_email;
-        let menuList = this.calculateMenuList(repo);
-        this.setState({
-          repo: repo,
-          menuList: menuList
-        });
-      });
+    let repo = this.props.currentRepo;
+    let menuList = this.calculateMenuList(repo);
+    this.setState({
+      menuList: menuList
     });
+
   }
 
   calculateMenuList(repoInfo) {
     let dirent = this.props.dirent;
+    let isRepoOwner = this.props.isRepoOwner;
     let type = dirent.type;
     let permission = dirent.permission;
-    let can_set_folder_perm = folderPermEnabled  && ((this.is_repo_owner && repoInfo.has_been_shared_out) || repoInfo.is_admin);
+    let can_set_folder_perm = folderPermEnabled  && ((isRepoOwner && repoInfo.has_been_shared_out) || repoInfo.is_admin);
     if (type === 'dir' && permission === 'rw') {
       let menuList = [];
       if (can_set_folder_perm) {

frontend/src/components/file-chooser/file-chooser.js

@@ -18,6 +18,7 @@ class FileChooser extends React.Component {
     super(props);
     this.state = {
       hasRequest: false,
+      isCurrentRepoShow: true,
       isOtherRepoShow: false,
       repoList: [],
       currentRepo: null,
@@ -62,6 +63,10 @@ class FileChooser extends React.Component {
     }
   }
 
+  onCurrentRepoToggle = () => [
+    this.setState({isCurrentRepoShow: !this.state.isCurrentRepoShow})
+  ]
+
   onDirentItemClick = (repo, filePath) => {
     this.props.onDirentItemClick(repo, filePath);
     this.setState({
@@ -83,11 +88,11 @@ class FileChooser extends React.Component {
       <div className="file-chooser-container">
         <div className="list-view">
           <div className="list-view-header">
-            <span className="item-toggle fa fa-caret-down"></span>
+            <span className={`item-toggle fa ${this.state.isCurrentRepoShow ? 'fa-caret-down' : 'fa-caret-right'}`} onClick={this.onCurrentRepoToggle}></span>
             <span className="library">{gettext('Current Library')}</span>
           </div>
           {
-            this.state.currentRepo &&
+            this.state.isCurrentRepoShow && this.state.currentRepo &&
             <RepoListView 
               initToShowChildren={true}
               repo={this.state.currentRepo}

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

@@ -78,6 +78,10 @@ class Node {
     }
   }
 
+  isFile() {
+    return this.type === 'file';
+  }
+
   isDir() {
     return this.type == 'dir';
   }

frontend/src/css/dirent-detail.css

@@ -27,11 +27,15 @@
 }
 
 .detail-header .detail-title img{
-    width: 1.5rem;
-    height: 1.5rem;
+  width: 1.5rem;
+  height: 1.5rem;
 }
 
 .detail-header .detail-title .name {
+  display: inline-block;
+  margin-left: 0.25rem;
+  line-height: 1.5rem;
+  vertical-align: middle;
   font-size: 1rem;
   color: #322;
 }

frontend/src/pages/repo-wiki-mode/main-panel.js

@@ -2,6 +2,7 @@ import React, { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { gettext, repoID, serviceUrl, slug, siteRoot } from '../../utils/constants';
 import { seafileAPI } from '../../utils/seafile-api';
+import Repo from '../../models/repo';
 import Dirent from '../../models/dirent';
 import CommonToolbar from '../../components/toolbar/common-toolbar';
 import PathToolbar from '../../components/toolbar/path-toolbar';
@@ -50,10 +51,23 @@ class MainPanel extends Component {
       currentDirent: null,
       currentFilePath: '',
       isDirentListLoading: true,
+      currentRepo: null,
+      isRepoOwner: false,
     };
   }
 
   componentDidMount() {
+    seafileAPI.getRepoInfo(repoID).then(res => {
+      let repo = new Repo(res.data);
+      seafileAPI.getAccountInfo().then(res => {
+        let user_email = res.data.email;
+        let isRepoOwner = repo.owner_email === user_email;
+        this.setState({
+          currentRepo: repo,
+          isRepoOwner: isRepoOwner,
+        });
+      });
+    });
     document.addEventListener('click', this.hideOperationMenu);
   }
 
@@ -296,6 +310,8 @@ class MainPanel extends Component {
                   onItemDetails={this.onItemDetails}
                   updateViewList={this.updateViewList}
                   isDirentListLoading={this.state.isDirentListLoading}
+                  currentRepo={this.state.currentRepo}
+                  isRepoOwner={this.state.isRepoOwner}
                 />
               }
             </div>

frontend/src/repo-wiki-mode.js

@@ -329,7 +329,7 @@ class Wiki extends Component {
   onRenameNode = (node, newName) => {
     let tree = this.state.tree_data.clone();
     let filePath = node.path;
-    if (node.isMarkdown()) {
+    if (node.isFile()) {
       editorUtilities.renameFile(filePath, newName).then(res => {
         let cloneNode = node.clone();
 

media/css/seahub_react.css

@@ -933,7 +933,8 @@ a.op-icon:focus {
     vertical-align: middle;
 }
 .operation-group-item i:hover {
-    text-decoration: underline;
+    padding-bottom: 0.125rem;
+    border-bottom: 0.125rem solid #f89a68;
 }
 .operation-group-item .sf-dropdown-toggle {
     font-size: 0.85rem;