[dir view] updated 'top operation list' for current active dirent (#4046)

* [dir view] updated 'top operation list' for current active dirent

* added `getDirentOperationList` to utils.js
* improved code

* [dir view] added operations for current active dirent; bugfix &
improvement

* [utils] rewrote 'get dirent operation list' & bugfix

frontend/src/components/toolbar/multiple-dir-operation-toolbar.js

@@ -1,7 +1,7 @@
 import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { Button, ButtonGroup } from 'reactstrap';
-import { gettext, siteRoot, canGenerateShareLink, isPro, fileAuditEnabled } from '../../utils/constants';
+import { gettext, siteRoot, canGenerateShareLink, isPro, fileAuditEnabled, name } from '../../utils/constants';
 import { Utils } from '../../utils/utils';
 import { seafileAPI } from '../../utils/seafile-api';
 import URLDecorator from '../../utils/url-decorator';
@@ -12,6 +12,9 @@ import ShareDialog from '../dialog/share-dialog';
 import RelatedFileDialogs from '../dialog/related-file-dialogs';
 import EditFileTagDialog from '../dialog/edit-filetag-dialog';
 import ZipDownloadDialog from '../dialog/zip-download-dialog';
+import Rename from '../dialog/rename-dirent';
+import LibSubFolderPermissionDialog from '../dialog/lib-sub-folder-permission-dialog';
+
 import ModalPortal from '../modal-portal';
 import ItemDropdownMenu from '../dropdown-menu/item-dropdown-menu';
 import toaster from '../toast';
@@ -51,6 +54,8 @@ class MultipleDirOperationToolbar extends React.Component {
       multiFileTagList: [],
       showRelatedFileDialog: false,
       viewMode: 'list_related_file',     
+      isRenameDialogOpen: false,
+      isPermissionDialogOpen: false
     };
   }
 
@@ -87,57 +92,63 @@ class MultipleDirOperationToolbar extends React.Component {
     });
   }
 
+  checkDuplicatedName = (newName) => {
+    return Utils.checkDuplicatedNameInList(this.props.direntList, newName);
+  }
+
+  onItemRename = (newName) => {
+    const dirent = this.props.selectedDirentList[0];
+    this.props.onItemRename(dirent, newName);
+  }
+
+  onPermissionItem = () => {
+    this.setState({
+      showLibContentViewDialogs: !this.state.showLibContentViewDialogs,
+      isPermissionDialogOpen: !this.state.isPermissionDialogOpen
+    });
+  }
+
+  onCommentItem = () => {
+    this.props.showDirentDetail('comments');
+  }
+
   getDirentMenuList = (dirent) => {
-    let menuList = [];
-    let currentRepoInfo = this.props.currentRepoInfo;
-    let showShareBtn = Utils.isHasPermissionToShare(currentRepoInfo, dirent.permission, dirent);
-
-    const { SHARE, TAGS, RELATED_FILES, HISTORY, ACCESS_LOG, OPEN_VIA_CLIENT, LOCK, UNLOCK } = TextTranslation;
-
-    if (dirent.type === 'dir') {
-      if (showShareBtn) {
-        menuList = [SHARE];
-      }
-      return menuList;
-    } 
-
-    if (dirent.type === 'file') {
-      let shareBtn = showShareBtn ? [SHARE] : [];
-
-      menuList = [...shareBtn, TAGS, RELATED_FILES, 'Divider', HISTORY, ACCESS_LOG, 'Divider', OPEN_VIA_CLIENT];
-      if (!Utils.isMarkdownFile(dirent.name)) {
-        menuList = menuList.filter(menu => {
-          return menu !== RELATED_FILES;
-        });
-      }
-      if (!isPro || !fileAuditEnabled) {
-        menuList = menuList.filter(menu => {
-          return menu !== ACCESS_LOG;
-        });
-      }
-      if (isPro) {
-        if (dirent.is_locked) {
-          if (dirent.locked_by_me || (dirent.lock_owner === 'OnlineOffice' && currentRepoInfo.permission === 'rw')) {
-            menuList.splice(1, 0, UNLOCK);
-          }
-        } else {
-          menuList.splice(1, 0, LOCK);
-        }
-      }
-      return menuList;
+    const isRepoOwner = this.props.isRepoOwner;
+    const currentRepoInfo = this.props.currentRepoInfo;
+    const isContextmenu = true;
+    let opList = Utils.getDirentOperationList(isRepoOwner, currentRepoInfo, dirent, isContextmenu);
+    const list = ['Move', 'Copy', 'Delete', 'Download'];
+    if (dirent.type == 'dir') {
+      opList = opList.filter((item, index) => {
+        return list.indexOf(item.key) == -1 && item != 'Divider';
+      });
+    } else {
+      opList = opList.filter((item, index) => {
+        return list.indexOf(item.key) == -1;
+      });
     }
+    return opList;
   }
 
   onMenuItemClick = (operation) => {
     const dirents = this.props.selectedDirentList;
     const dirent = dirents[0];
-    switch(operation) {
+    switch (operation) {
       case 'Share':
         this.setState({
           showLibContentViewDialogs: true,
           showShareDialog: true,
         });
         break;
+      case 'Rename':
+        this.setState({
+          showLibContentViewDialogs: true,
+          isRenameDialogOpen: true
+        });
+        break;
+      case 'Permission':
+        this.onPermissionItem();
+        break;
       case 'Tags':
         this.listFileTags(dirent);
         break;
@@ -147,6 +158,9 @@ class MultipleDirOperationToolbar extends React.Component {
       case 'Unlock':
         this.unlockFile(dirent);
         break;
+      case 'Comment':
+        this.onCommentItem();
+        break;
       case 'Related Files':
         this.openRelatedFilesDialog(dirent);
         break;
@@ -170,6 +184,7 @@ class MultipleDirOperationToolbar extends React.Component {
       if (res.data.is_locked) {
         this.props.updateDirent(dirent, 'is_locked', true);
         this.props.updateDirent(dirent, 'locked_by_me', true);
+        this.props.updateDirent(dirent, 'lock_owner_name', name);
         this.props.unSelectDirent();
       }
     }).catch(error => {
@@ -184,6 +199,7 @@ class MultipleDirOperationToolbar extends React.Component {
       if (!res.data.is_locked) {
         this.props.updateDirent(dirent, 'is_locked', false);
         this.props.updateDirent(dirent, 'locked_by_me', false);
+        this.props.updateDirent(dirent, 'lock_owner_name', '');
         this.props.unSelectDirent();
       }
     }).catch(error => {
@@ -200,7 +216,6 @@ class MultipleDirOperationToolbar extends React.Component {
       filePath: filePath
     });
     location.href = url;
-    this.props.unSelectDirent();
   }
 
   onHistory = (dirent) => {
@@ -250,6 +265,8 @@ class MultipleDirOperationToolbar extends React.Component {
       showShareDialog: false,
       showEditFileTagDialog: false,
       showRelatedFileDialog: false,
+      isRenameDialogOpen: false,
+      isPermissionDialogOpen: false,
     });
   }
 
@@ -304,7 +321,9 @@ class MultipleDirOperationToolbar extends React.Component {
   render() {
 
     const { repoID, userPerm } = this.props;
-    let direntPath = this.getDirentPath(this.props.selectedDirentList[0]);
+    const dirent = this.props.selectedDirentList[0];
+
+    let direntPath = this.getDirentPath(dirent);
 
     if (userPerm !== 'rw' && userPerm !== 'admin') {
       return '';
@@ -366,18 +385,39 @@ class MultipleDirOperationToolbar extends React.Component {
             {this.state.showShareDialog &&
               <ModalPortal>
                 <ShareDialog
-                  itemType={this.props.selectedDirentList[0].type}
-                  itemName={this.props.selectedDirentList[0].name}
+                  itemType={dirent.type}
+                  itemName={dirent.name}
                   itemPath={direntPath}
-                  userPerm={this.props.selectedDirentList[0].permission}
+                  userPerm={dirent.permission}
                   repoID={repoID}
                   repoEncrypted={false}
                   enableDirPrivateShare={this.props.enableDirPrivateShare}
-                  isGroupOwnedRepo={this.state.isGroupOwnedRepo}
+                  isGroupOwnedRepo={this.props.isGroupOwnedRepo}
                   toggleDialog={this.toggleCancel}
                 />
               </ModalPortal>
             }
+            {this.state.isRenameDialogOpen &&
+              <ModalPortal>
+                <Rename
+                  dirent={dirent}
+                  onRename={this.onItemRename}
+                  checkDuplicatedName={this.checkDuplicatedName}
+                  toggleCancel={this.toggleCancel}
+                />
+              </ModalPortal>
+            }
+            {this.state.isPermissionDialogOpen &&
+              <ModalPortal>
+                <LibSubFolderPermissionDialog
+                  toggleDialog={this.toggleCancel}
+                  repoID={repoID}
+                  folderPath={direntPath}
+                  folderName={dirent.name}
+                  isDepartmentRepo={this.props.isGroupOwnedRepo}
+                />
+              </ModalPortal>
+            }
             {this.state.showEditFileTagDialog &&
               <ModalPortal>
                 <EditFileTagDialog