Add progress for move (#4455)

* add move dsprogress ialog

* optimize code

* add copy logic

* update ui

* optimize code

frontend/package-lock.json

@@ -4787,7 +4787,8 @@
           "version": "2.1.1",
           "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
           "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=",
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "aproba": {
           "version": "1.2.0",
@@ -4811,13 +4812,15 @@
           "version": "1.0.0",
           "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz",
           "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=",
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "brace-expansion": {
           "version": "1.1.11",
           "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
           "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
           "dev": true,
+          "optional": true,
           "requires": {
             "balanced-match": "^1.0.0",
             "concat-map": "0.0.1"
@@ -4834,19 +4837,22 @@
           "version": "1.1.0",
           "resolved": "https://registry.npmjs.org/code-point-at/-/code-point-at-1.1.0.tgz",
           "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=",
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "concat-map": {
           "version": "0.0.1",
           "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
           "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=",
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "console-control-strings": {
           "version": "1.1.0",
           "resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz",
           "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=",
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "core-util-is": {
           "version": "1.0.2",
@@ -4977,7 +4983,8 @@
           "version": "2.0.3",
           "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
           "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=",
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "ini": {
           "version": "1.3.5",
@@ -4991,6 +4998,7 @@
           "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz",
           "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=",
           "dev": true,
+          "optional": true,
           "requires": {
             "number-is-nan": "^1.0.0"
           }
@@ -5007,6 +5015,7 @@
           "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
           "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
           "dev": true,
+          "optional": true,
           "requires": {
             "brace-expansion": "^1.1.7"
           }
@@ -5015,13 +5024,15 @@
           "version": "0.0.8",
           "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz",
           "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=",
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "minipass": {
           "version": "2.2.4",
           "resolved": "https://registry.npmjs.org/minipass/-/minipass-2.2.4.tgz",
           "integrity": "sha512-hzXIWWet/BzWhYs2b+u7dRHlruXhwdgvlTMDKC6Cb1U7ps6Ac6yQlR39xsbjWJE377YTCtKwIXIpJ5oP+j5y8g==",
           "dev": true,
+          "optional": true,
           "requires": {
             "safe-buffer": "^5.1.1",
             "yallist": "^3.0.0"
@@ -5042,6 +5053,7 @@
           "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz",
           "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=",
           "dev": true,
+          "optional": true,
           "requires": {
             "minimist": "0.0.8"
           }
@@ -5130,7 +5142,8 @@
           "version": "1.0.1",
           "resolved": "https://registry.npmjs.org/number-is-nan/-/number-is-nan-1.0.1.tgz",
           "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=",
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "object-assign": {
           "version": "4.1.1",
@@ -5144,6 +5157,7 @@
           "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
           "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=",
           "dev": true,
+          "optional": true,
           "requires": {
             "wrappy": "1"
           }
@@ -5239,7 +5253,8 @@
           "version": "5.1.1",
           "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.1.tgz",
           "integrity": "sha512-kKvNJn6Mm93gAczWVJg7wH+wGYWNrDHdWvpUmHyEsgCtIwwo3bqPtV4tR5tuPaUhTOo/kvhVwd8XwwOllGYkbg==",
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "safer-buffer": {
           "version": "2.1.2",
@@ -5281,6 +5296,7 @@
           "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz",
           "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=",
           "dev": true,
+          "optional": true,
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",
@@ -5302,6 +5318,7 @@
           "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
           "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
           "dev": true,
+          "optional": true,
           "requires": {
             "ansi-regex": "^2.0.0"
           }
@@ -5350,13 +5367,15 @@
           "version": "1.0.2",
           "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
           "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=",
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "yallist": {
           "version": "3.0.2",
           "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.0.2.tgz",
           "integrity": "sha1-hFK0u36Dx8GI2AQcGoN8dz1ti7k=",
-          "dev": true
+          "dev": true,
+          "optional": true
         }
       }
     },
@@ -11377,9 +11396,9 @@
       }
     },
     "seafile-js": {
-      "version": "0.2.140",
+      "version": "0.2.143",
-      "resolved": "https://registry.npmjs.org/seafile-js/-/seafile-js-0.2.140.tgz",
+      "resolved": "https://registry.npmjs.org/seafile-js/-/seafile-js-0.2.143.tgz",
-      "integrity": "sha512-7WMvQMShWBorBGxygDFCIUt9XPBxHnbobnObSw3eOHflSWfdXrCu0G4ZEj32cDbeece/mEEaD5p/YNn7O7zgKw==",
+      "integrity": "sha512-HydirrVXSyoOjzQHAYo+OPk8okkI2qHbwWa6fpoZY3S7xjSXGcG9kSCCFTbZSe4y9aTSIT6WTLlDXKeDpbyvUg==",
       "requires": {
         "axios": "^0.18.0",
         "form-data": "^2.3.2",

frontend/package.json

@@ -36,7 +36,7 @@
     "react-responsive": "^6.1.2",
     "react-select": "^2.4.1",
     "reactstrap": "^6.4.0",
-    "seafile-js": "^0.2.140",
+    "seafile-js": "^0.2.143",
     "socket.io-client": "^2.2.0",
     "sw-precache-webpack-plugin": "0.11.4",
     "unified": "^7.0.0",

frontend/src/components/dialog/copy-move-dirent-progress-dialog.js

@@ -0,0 +1,47 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Modal, ModalHeader, ModalBody } from 'reactstrap';
+import { gettext } from '../../utils/constants';
+
+const propTypes = {
+  type: PropTypes.oneOf(['move', 'copy']).isRequired,
+  asyncOperationProgress: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+  toggleDialog: PropTypes.func.isRequired,
+};
+
+class CopyMoveDirentProgressDialog extends React.Component {
+
+  render() {
+
+    let { type , asyncOperationProgress } = this.props;
+    let title = type === 'move' ? gettext('Move Progress') : gettext('Copy Progress');
+    let progressStyle = {
+      width: asyncOperationProgress + '%',
+      lineHeight: '40px',
+      textAlign: 'left',
+    };
+    return (
+      <Modal isOpen={true} toggle={this.props.toggleDialog}>
+        <ModalHeader toggle={this.props.toggleDialog}>{title}</ModalHeader>
+        <ModalBody style={{minHeight: '80px'}}>
+          <div className="progress" style={{height: '40px'}}>
+            <div 
+              className="progress-bar pl-2" 
+              role="progressbar" 
+              style={progressStyle}
+              aria-valuenow={asyncOperationProgress} 
+              aria-valuemin="0" 
+              aria-valuemax="100"
+            >
+              {asyncOperationProgress + '%'}
+            </div>
+          </div>
+        </ModalBody>
+      </Modal>
+    );
+  }
+}
+
+CopyMoveDirentProgressDialog.propTypes = propTypes;
+
+export default CopyMoveDirentProgressDialog;

frontend/src/pages/lib-content-view/lib-content-view.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
 import cookie from 'react-cookies';
 import moment from 'moment';
@@ -19,6 +19,7 @@ import LibContentToolbar from './lib-content-toolbar';
 import LibContentContainer from './lib-content-container';
 import FileUploader from '../../components/file-uploader/file-uploader';
 import SessionExpiredTip from '../../components/session-expired-tip';
+import CopyMoveDirentProgressDialog from '../../components/dialog/copy-move-dirent-progress-dialog';
 
 const propTypes = {
   pathPrefix: PropTypes.array.isRequired,
@@ -75,6 +76,9 @@ class LibContentView extends React.Component {
       updateDetail: false,
       itemsShowLength: 100,
       isSessionExpired: false,
+      isCopyMoveProgressDialogShow: false,
+      asyncCopyMoveTaskId: '',
+      asyncOperationProgress: 0,
     };
 
     this.oldonpopstate = window.onpopstate;
@@ -574,43 +578,100 @@ class LibContentView extends React.Component {
     });
   }
 
+  async getAsyncCopyMoveProgress() {
+    let { asyncOperationType, asyncCopyMoveTaskId } = this.state;
+    try {
+      let res = await seafileAPI.queryAsyncOperationProgress(asyncCopyMoveTaskId);
+      let data = res.data;
+      if (data.failed) {
+        let message = gettext('Files moved to another repository failed.')
+        if (asyncOperationType === 'copy') {
+          message = gettext('Files copyed to another repository failed.')
+        }
+        toaster.danger(message);
+        this.setState({
+          asyncOperationProgress: 0,
+          isCopyMoveProgressDialogShow: false,
+        });
+        return;
+      }
+      
+      if (data.successful) {
+        this.setState({isCopyMoveProgressDialogShow: false});
+        let message = gettext('Files moved to another repository successfully.')
+        if (asyncOperationType === 'copy') {
+          message = gettext('Files copyed to another repository successfully.')
+        }
+        toaster.success(message);
+        return;
+      }
+
+      let asyncOperationProgress = parseInt((data.done/data.total * 100).toFixed(2));
+      this.setState({asyncOperationProgress: asyncOperationProgress});
+      this.getAsyncCopyMoveProgress();
+    } catch (error) {
+      this.setState({
+        asyncOperationProgress: 0,
+        isCopyMoveProgressDialogShow: false,
+      }); 
+    }
+  }
+
+  cancelCopyMoveDirent = () => {
+    let taskId = this.state.asyncCopyMoveTaskId;
+    seafileAPI.cancelCopyMoveOperation(taskId);
+  }
+
+  onMoveProgressDialogToggle = () => {
+    let { asyncOperationProgress } = this.state;
+    if (asyncOperationProgress && asyncOperationProgress !== 100) {
+      this.cancelCopyMoveDirent();
+    }
+
+    this.setState({
+      asyncOperationProgress: 0,
+      isCopyMoveProgressDialogShow: false,
+    })
+  }
+
   // toolbar operations
   onMoveItems = (destRepo, destDirentPath) => {
     let repoID = this.props.repoID;
     let direntPaths = this.getSelectedDirentPaths();
     let dirNames = this.getSelectedDirentNames();
 
+    if (repoID !== destRepo.repo_id) {
+      this.setState({
+        asyncOperationProgress: 0,
+        asyncOperationType: 'move',
+        isCopyMoveProgressDialogShow: true
+      });
+    }
+
     seafileAPI.moveDir(repoID, destRepo.repo_id, destDirentPath, this.state.path, dirNames).then(res => {
       if (repoID !== destRepo.repo_id) {
-        let taskId = res.data.task_id;
+        this.setState({
-        seafileAPI.queryAsyncOperationProgress(taskId).then(res => {
+          asyncCopyMoveTaskId: res.data.task_id,
-          if (res.data.failed) {
+        }, () => {
-            let errMessage = Utils.getMoveFailedMessage(dirNames);
+          this.getAsyncCopyMoveProgress();
-            toaster.danger(errMessage);
-            return;
-          }
-          direntPaths.forEach((direntPath, index) => {
-            if (this.state.currentMode === 'column') {
-              this.deleteTreeNode(direntPath);
-            }
-            this.moveDirent(direntPath);
-          });
-          let message =  Utils.getMoveSuccessMessage(dirNames);
-          toaster.success(message);
-        }).catch(error => {
-          let errMessage = Utils.getErrorMsg(error);
-          toaster.danger(errMessage);
-        });
-      } else {
-        direntPaths.forEach((direntPath, index) => {
-          if (this.state.currentMode === 'column') {
-            this.deleteTreeNode(direntPath);
-          }
-          this.moveDirent(direntPath);
         });
+      }
+
+      direntPaths.forEach((direntPath, index) => {
         if (this.state.currentMode === 'column') {
-          this.updateMoveCopyTreeNode(destDirentPath);
+          this.deleteTreeNode(direntPath);
         }
+        this.moveDirent(direntPath);
+      });
+
+      // 1. move to current repo 
+      // 2. tow columns mode need update left tree
+      if (repoID === destRepo.repo_id && this.state.currentMode === 'column') {
+        this.updateMoveCopyTreeNode(destDirentPath);
+      }
+
+      // show tip message if move to current repo
+      if (repoID === destRepo.repo_id) {
         let message =  Utils.getMoveSuccessMessage(dirNames);
         toaster.success(message);
       }
@@ -625,38 +686,32 @@ class LibContentView extends React.Component {
 
   onCopyItems = (destRepo, destDirentPath) => {
     let repoID = this.props.repoID;
-    let direntPaths = this.getSelectedDirentPaths();
     let dirNames = this.getSelectedDirentNames();
 
+    if (repoID !== destRepo.repo_id) {
+      this.setState({
+        asyncOperationProgress: 0,
+        asyncOperationType: 'copy',
+        isCopyMoveProgressDialogShow: true
+      });
+    }
+
     seafileAPI.copyDir(repoID, destRepo.repo_id, destDirentPath, this.state.path, dirNames).then(res => {
       if (repoID !== destRepo.repo_id) {
-        let taskId = res.data.task_id;
+        this.setState({
-        seafileAPI.queryAsyncOperationProgress(taskId).then(res => {
+          asyncCopyMoveTaskId: res.data.task_id,
-          if (res.data.failed) {
+        }, () => {
-            let errMessage = Utils.getCopyFailedMessage(dirNames);
+          this.getAsyncCopyMoveProgress();
-            toaster.danger(errMessage);
-            return;
-          }
-          if (destDirentPath === this.state.path) {
-            this.loadDirentList(this.state.path);
-          }
-          let message =  Utils.getCopySuccessfulMessage(dirNames);
-          toaster.success(message);
-        }).catch(error => {
-          let errMessage = Utils.getErrorMsg(error);
-          toaster.danger(errMessage);
         });
-      } else {
-        if (this.state.currentMode === 'column') {
-          this.updateMoveCopyTreeNode(destDirentPath);
-        }
-        if (destDirentPath === this.state.path) {
-          this.loadDirentList(this.state.path);
-        }
-        let message =  Utils.getCopySuccessfulMessage(dirNames);
-        toaster.success(message);
       }
-      
+
+      if (repoID === destRepo.repo_id && this.state.currentMode === 'column') {
+        this.updateMoveCopyTreeNode(destDirentPath);
+      }
+
+      if (destDirentPath === this.state.path) {
+        this.loadDirentList(this.state.path);
+      }
     }).catch((error) => {
       let errMessage = Utils.getErrorMsg(error);
       if (errMessage === gettext('Error')) {
@@ -951,34 +1006,38 @@ class LibContentView extends React.Component {
       nodeParentPath = this.state.path;
     }
     let direntPath = Utils.joinPath(nodeParentPath, dirName);
+
+    if (repoID !== destRepo.repo_id) {
+      this.setState({
+        asyncOperationProgress: 0,
+        asyncOperationType: 'move',
+        isCopyMoveProgressDialogShow: true,
+      });
+    }
+
     seafileAPI.moveDir(repoID, destRepo.repo_id, moveToDirentPath, nodeParentPath, dirName).then(res => {
       if (repoID !== destRepo.repo_id) {
-        let taskId = res.data.task_id;
+        this.setState({
-        seafileAPI.queryAsyncOperationProgress(taskId).then(res => {
+          asyncCopyMoveTaskId: res.data.task_id,
-          if (res.data.failed) {
+        }, () => {
-            let errMessage = gettext('Failed to move {name}.');
+          this.getAsyncCopyMoveProgress();
-            errMessage = errMessage.replace('{name}', dirName);
-            toaster.danger(errMessage);
-            return;
-          }
-          if (this.state.currentMode === 'column') {
-            this.deleteTreeNode(direntPath);
-          }
-          this.moveDirent(direntPath);
-          let message = gettext('Successfully moved {name}.');
-          message = message.replace('{name}', dirName);
-          toaster.success(message);
-        }).catch(error => {
-          let errMessage = Utils.getErrorMsg(error);
-          toaster.danger(errMessage);
         });
-      } else {
+      }
-        if (this.state.currentMode === 'column') {
+
-          this.deleteTreeNode(direntPath);
+      if (this.state.currentMode === 'column') {
-          this.updateMoveCopyTreeNode(moveToDirentPath);
+        this.deleteTreeNode(direntPath);
-        }
+      }
-        this.moveDirent(direntPath, moveToDirentPath);
+
-  
+      // 1. move to current repo 
+      // 2. tow columns mode need update left tree
+      if (repoID === destRepo.repo_id && this.state.currentMode === 'column') {
+        this.updateMoveCopyTreeNode(moveToDirentPath);
+      }
+
+      this.moveDirent(direntPath, moveToDirentPath);
+
+      // show tip message if move to current repo
+      if (repoID === destRepo.repo_id) {
         let message = gettext('Successfully moved {name}.');
         message = message.replace('{name}', dirName);
         toaster.success(message);
@@ -1000,36 +1059,34 @@ class LibContentView extends React.Component {
     if (!nodeParentPath) {
       nodeParentPath = this.state.path;
     }
-    let direntPath = Utils.joinPath(nodeParentPath, dirName);
+
+    if (repoID !== destRepo.repo_id) {
+      this.setState({
+        asyncOperationProgress: 0,
+        asyncOperationType: 'copy',
+        isCopyMoveProgressDialogShow: true
+      });
+    }
 
     seafileAPI.copyDir(repoID, destRepo.repo_id, copyToDirentPath, nodeParentPath, dirName).then(res => {
       
       if (repoID !== destRepo.repo_id) {
-        let taskId = res.data.task_id;
+        this.setState({
-        seafileAPI.queryAsyncOperationProgress(taskId).then(res => {
+          asyncCopyMoveTaskId: res.data.task_id,
-          if (res.data.failed) {
+        }, () => {
-            let errMessage = gettext('Failed to copy %(name)s');
+          this.getAsyncCopyMoveProgress();
-            errMessage = errMessage.replace('%(name)s', dirName);
-            toaster.danger(errMessage);
-            return;
-          }
-          if (copyToDirentPath === nodeParentPath) {
-            this.loadDirentList(this.state.path);
-          }
-          let message = gettext('Successfully copied %(name)s.');
-          message = message.replace('%(name)s', dirName);
-          toaster.success(message);
-        }).catch(error => {
-          let errMessage = Utils.getErrorMsg(error);
-          toaster.danger(errMessage);
         });
-      } else {
+      }
-        if (this.state.currentMode === 'column') {
+
-          this.updateMoveCopyTreeNode(copyToDirentPath);
+      if (repoID === destRepo.repo_id && this.state.currentMode === 'column') {
-        }
+        this.updateMoveCopyTreeNode(copyToDirentPath);
-        if (copyToDirentPath === nodeParentPath) {
+      }
-          this.loadDirentList(this.state.path);
+
-        }
+      if (copyToDirentPath === nodeParentPath) {
+        this.loadDirentList(this.state.path);
+      }
+
+      if (repoID === destRepo.repo_id) {
         let message = gettext('Successfully copied %(name)s.');
         message = message.replace('%(name)s', dirName);
         toaster.success(message);
@@ -1672,137 +1729,147 @@ class LibContentView extends React.Component {
     });
 
     return (
-      <div className="main-panel o-hidden">
+      <Fragment>
-        <div className="main-panel-north border-left-show">
+
-          <LibContentToolbar
+        <div className="main-panel o-hidden">
-            isViewFile={this.state.isViewFile}
+          <div className="main-panel-north border-left-show">
-            filePermission={this.state.filePermission}
+            <LibContentToolbar
-            isDraft={this.state.isDraft}
+              isViewFile={this.state.isViewFile}
-            hasDraft={this.state.hasDraft}
+              filePermission={this.state.filePermission}
-            fileTags={this.state.fileTags}
+              isDraft={this.state.isDraft}
-            relatedFiles={this.state.relatedFiles}
+              hasDraft={this.state.hasDraft}
-            onFileTagChanged={this.onToolbarFileTagChanged}
+              fileTags={this.state.fileTags}
-            onRelatedFileChange={this.onToolbarRelatedFileChange}
+              relatedFiles={this.state.relatedFiles}
-            onSideNavMenuClick={this.props.onMenuClick}
+              onFileTagChanged={this.onToolbarFileTagChanged}
-            repoID={this.props.repoID}
+              onRelatedFileChange={this.onToolbarRelatedFileChange}
-            path={this.state.path}
+              onSideNavMenuClick={this.props.onMenuClick}
-            isDirentSelected={this.state.isDirentSelected}
-            selectedDirentList={this.state.selectedDirentList}
-            onItemsMove={this.onMoveItems}
-            onItemsCopy={this.onCopyItems}
-            onItemsDelete={this.onDeleteItems}
-            onItemRename={this.onMainPanelItemRename}
-            direntList={this.state.direntList}
-            repoName={this.state.repoName}
-            repoEncrypted={this.state.repoEncrypted}
-            isGroupOwnedRepo={this.state.isGroupOwnedRepo}
-            userPerm={this.state.userPerm}
-            showShareBtn={showShareBtn}
-            enableDirPrivateShare={enableDirPrivateShare}
-            onAddFile={this.onAddFile}
-            onAddFolder={this.onAddFolder}
-            onUploadFile={this.onUploadFile}
-            onUploadFolder={this.onUploadFolder}
-            currentMode={this.state.currentMode}
-            switchViewMode={this.switchViewMode}
-            onSearchedClick={this.onSearchedClick}
-            isRepoOwner={isRepoOwner}
-            currentRepoInfo={this.state.currentRepoInfo}
-            updateDirent={this.updateDirent}
-            onDirentSelected={this.onDirentSelected}
-            showDirentDetail={this.showDirentDetail}
-            listRelatedFiles={this.listRelatedFiles}
-            unSelectDirent={this.unSelectDirent}
-            onFilesTagChanged={this.onFileTagChanged}
-          />
-        </div>
-        <div className="main-panel-center flex-row">
-          <LibContentContainer 
-            pathPrefix={this.props.pathPrefix}
-            currentMode={this.state.currentMode}
-            path={this.state.path}
-            pathExist={this.state.pathExist}
-            currentRepoInfo={this.state.currentRepoInfo}
-            repoID={this.props.repoID}
-            repoPermission={this.state.repoPermission}
-            enableDirPrivateShare={enableDirPrivateShare}
-            userPerm={userPerm}
-            isGroupOwnedRepo={this.state.isGroupOwnedRepo}
-            onTabNavClick={this.props.onTabNavClick}
-            onMainNavBarClick={this.onMainNavBarClick}
-            isViewFile={this.state.isViewFile}
-            hash={this.state.hash}
-            isDraft={this.state.isDraft}
-            hasDraft={this.state.hasDraft}
-            fileTags={this.state.fileTags}
-            relatedFiles={this.state.relatedFiles}
-            goDraftPage={this.goDraftPage}
-            isFileLoading={this.state.isFileLoading}
-            isFileLoadedErr={this.state.isFileLoadedErr}
-            filePermission={this.state.filePermission}
-            content={this.state.content}
-            lastModified={this.state.lastModified}
-            latestContributor={this.state.latestContributor}
-            onLinkClick={this.onLinkClick}
-            isTreeDataLoading={this.state.isTreeDataLoading}
-            treeData={this.state.treeData}
-            currentNode={this.state.currentNode}
-            onNodeClick={this.onTreeNodeClick}
-            onNodeCollapse={this.onTreeNodeCollapse}
-            onNodeExpanded={this.onTreeNodeExpanded}
-            onAddFolderNode={this.onAddFolder}
-            onAddFileNode={this.onAddFile}
-            onRenameNode={this.onRenameTreeNode}
-            onDeleteNode={this.onDeleteTreeNode}
-            draftCounts={this.state.draftCounts}
-            usedRepoTags={this.state.usedRepoTags}
-            readmeMarkdown={this.state.readmeMarkdown}
-            updateUsedRepoTags={this.updateUsedRepoTags}
-            isDirentListLoading={this.state.isDirentListLoading}
-            direntList={direntItemsList}
-            sortBy={this.state.sortBy}
-            sortOrder={this.state.sortOrder}
-            sortItems={this.sortItems}
-            updateDirent={this.updateDirent}
-            onDirentClick={this.onDirentClick}
-            onItemClick={this.onItemClick}
-            onItemSelected={this.onDirentSelected}
-            onItemDelete={this.onMainPanelItemDelete}
-            onItemRename={this.onMainPanelItemRename}
-            onItemMove={this.onMoveItem}
-            onItemCopy={this.onCopyItem}
-            onAddFolder={this.onAddFolder}
-            onAddFile={this.onAddFile}
-            onFileTagChanged={this.onFileTagChanged}
-            isDirentSelected={this.state.isDirentSelected}
-            isAllDirentSelected={this.state.isAllDirentSelected}
-            onAllDirentSelected={this.onAllDirentSelected}
-            isDirentDetailShow={this.state.isDirentDetailShow}
-            selectedDirent={this.state.selectedDirentList && this.state.selectedDirentList[0]}
-            selectedDirentList={this.state.selectedDirentList}
-            onItemsMove={this.onMoveItems}
-            onItemsCopy={this.onCopyItems}
-            onItemsDelete={this.onDeleteItems}
-            closeDirentDetail={this.closeDirentDetail}
-            showDirentDetail={this.showDirentDetail}
-            direntDetailPanelTab={this.state.direntDetailPanelTab}
-            onDeleteRepoTag={this.onDeleteRepoTag}
-            onToolbarFileTagChanged={this.onToolbarFileTagChanged}
-            updateDetail={this.state.updateDetail}
-            onListContainerScroll={this.onListContainerScroll}
-          />
-          {this.state.pathExist && !this.state.isViewFile && (
-            <FileUploader
-              ref={uploader => this.uploader = uploader}
-              dragAndDrop={true}
-              path={this.state.path}
               repoID={this.props.repoID}
+              path={this.state.path}
+              isDirentSelected={this.state.isDirentSelected}
+              selectedDirentList={this.state.selectedDirentList}
+              onItemsMove={this.onMoveItems}
+              onItemsCopy={this.onCopyItems}
+              onItemsDelete={this.onDeleteItems}
+              onItemRename={this.onMainPanelItemRename}
               direntList={this.state.direntList}
-              onFileUploadSuccess={this.onFileUploadSuccess}
+              repoName={this.state.repoName}
+              repoEncrypted={this.state.repoEncrypted}
+              isGroupOwnedRepo={this.state.isGroupOwnedRepo}
+              userPerm={this.state.userPerm}
+              showShareBtn={showShareBtn}
+              enableDirPrivateShare={enableDirPrivateShare}
+              onAddFile={this.onAddFile}
+              onAddFolder={this.onAddFolder}
+              onUploadFile={this.onUploadFile}
+              onUploadFolder={this.onUploadFolder}
+              currentMode={this.state.currentMode}
+              switchViewMode={this.switchViewMode}
+              onSearchedClick={this.onSearchedClick}
+              isRepoOwner={isRepoOwner}
+              currentRepoInfo={this.state.currentRepoInfo}
+              updateDirent={this.updateDirent}
+              onDirentSelected={this.onDirentSelected}
+              showDirentDetail={this.showDirentDetail}
+              listRelatedFiles={this.listRelatedFiles}
+              unSelectDirent={this.unSelectDirent}
+              onFilesTagChanged={this.onFileTagChanged}
             />
-          )}
+          </div>
+          <div className="main-panel-center flex-row">
+            <LibContentContainer 
+              pathPrefix={this.props.pathPrefix}
+              currentMode={this.state.currentMode}
+              path={this.state.path}
+              pathExist={this.state.pathExist}
+              currentRepoInfo={this.state.currentRepoInfo}
+              repoID={this.props.repoID}
+              repoPermission={this.state.repoPermission}
+              enableDirPrivateShare={enableDirPrivateShare}
+              userPerm={userPerm}
+              isGroupOwnedRepo={this.state.isGroupOwnedRepo}
+              onTabNavClick={this.props.onTabNavClick}
+              onMainNavBarClick={this.onMainNavBarClick}
+              isViewFile={this.state.isViewFile}
+              hash={this.state.hash}
+              isDraft={this.state.isDraft}
+              hasDraft={this.state.hasDraft}
+              fileTags={this.state.fileTags}
+              relatedFiles={this.state.relatedFiles}
+              goDraftPage={this.goDraftPage}
+              isFileLoading={this.state.isFileLoading}
+              isFileLoadedErr={this.state.isFileLoadedErr}
+              filePermission={this.state.filePermission}
+              content={this.state.content}
+              lastModified={this.state.lastModified}
+              latestContributor={this.state.latestContributor}
+              onLinkClick={this.onLinkClick}
+              isTreeDataLoading={this.state.isTreeDataLoading}
+              treeData={this.state.treeData}
+              currentNode={this.state.currentNode}
+              onNodeClick={this.onTreeNodeClick}
+              onNodeCollapse={this.onTreeNodeCollapse}
+              onNodeExpanded={this.onTreeNodeExpanded}
+              onAddFolderNode={this.onAddFolder}
+              onAddFileNode={this.onAddFile}
+              onRenameNode={this.onRenameTreeNode}
+              onDeleteNode={this.onDeleteTreeNode}
+              draftCounts={this.state.draftCounts}
+              usedRepoTags={this.state.usedRepoTags}
+              readmeMarkdown={this.state.readmeMarkdown}
+              updateUsedRepoTags={this.updateUsedRepoTags}
+              isDirentListLoading={this.state.isDirentListLoading}
+              direntList={direntItemsList}
+              sortBy={this.state.sortBy}
+              sortOrder={this.state.sortOrder}
+              sortItems={this.sortItems}
+              updateDirent={this.updateDirent}
+              onDirentClick={this.onDirentClick}
+              onItemClick={this.onItemClick}
+              onItemSelected={this.onDirentSelected}
+              onItemDelete={this.onMainPanelItemDelete}
+              onItemRename={this.onMainPanelItemRename}
+              onItemMove={this.onMoveItem}
+              onItemCopy={this.onCopyItem}
+              onAddFolder={this.onAddFolder}
+              onAddFile={this.onAddFile}
+              onFileTagChanged={this.onFileTagChanged}
+              isDirentSelected={this.state.isDirentSelected}
+              isAllDirentSelected={this.state.isAllDirentSelected}
+              onAllDirentSelected={this.onAllDirentSelected}
+              isDirentDetailShow={this.state.isDirentDetailShow}
+              selectedDirent={this.state.selectedDirentList && this.state.selectedDirentList[0]}
+              selectedDirentList={this.state.selectedDirentList}
+              onItemsMove={this.onMoveItems}
+              onItemsCopy={this.onCopyItems}
+              onItemsDelete={this.onDeleteItems}
+              closeDirentDetail={this.closeDirentDetail}
+              showDirentDetail={this.showDirentDetail}
+              direntDetailPanelTab={this.state.direntDetailPanelTab}
+              onDeleteRepoTag={this.onDeleteRepoTag}
+              onToolbarFileTagChanged={this.onToolbarFileTagChanged}
+              updateDetail={this.state.updateDetail}
+              onListContainerScroll={this.onListContainerScroll}
+            />
+            {this.state.pathExist && !this.state.isViewFile && (
+              <FileUploader
+                ref={uploader => this.uploader = uploader}
+                dragAndDrop={true}
+                path={this.state.path}
+                repoID={this.props.repoID}
+                direntList={this.state.direntList}
+                onFileUploadSuccess={this.onFileUploadSuccess}
+              />
+            )}
+          </div>
         </div>
-      </div>
+        {this.state.isCopyMoveProgressDialogShow && (
+          <CopyMoveDirentProgressDialog
+            type={this.state.asyncOperationType}
+            asyncOperationProgress={this.state.asyncOperationProgress}
+            toggleDialog={this.onMoveProgressDialogToggle}
+          />
+        )}
+      </Fragment>
     );
   }
 }