From 09f32f23121aacd467f8752c4a7c9d2714576d59 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=A8=E9=A1=BA=E5=BC=BA?= <ysq9207@126.com>
Date: Wed, 28 Nov 2018 12:41:49 +0800
Subject: [PATCH] Optimized module code (#2574)

---
 .../src/components/cur-dir-path/dir-tool.js   | 14 ++++++++----
 frontend/src/components/cur-dir-path/index.js |  9 +++++++-
 .../components/dialog/copy-dirent-dialog.js   | 10 +++++----
 .../components/dialog/create-tag-dialog.js    |  4 +++-
 .../components/dialog/edit-filetag-dialog.js  |  5 ++++-
 .../src/components/dialog/list-tag-dialog.js  |  4 +++-
 .../components/dialog/move-dirent-dialog.js   | 10 +++++----
 .../components/dialog/update-tag-dialog.js    |  5 ++++-
 .../dirent-detail/detail-list-view.js         |  2 ++
 .../dirent-detail/dirent-details.js           |  9 +++++---
 .../dirent-list-view/dirent-list-item.js      | 15 +++++++++++--
 .../dirent-list-view/dirent-list-view.js      | 12 ++++++----
 .../components/file-chooser/file-chooser.js   |  4 +++-
 .../components/file-uploader/file-uploader.js |  8 ++++++-
 frontend/src/components/search/search.js      |  6 +++--
 .../src/components/toolbar/common-toolbar.js  |  9 +++++++-
 .../toolbar/dir-operation-toolbar.js          |  5 +++--
 .../src/components/toolbar/general-toolbar.js |  2 ++
 .../toolbar/mutilple-dir-operation-toolbar.js |  2 ++
 frontend/src/css/file-uploader.css            |  1 +
 .../src/pages/repo-wiki-mode/main-panel.js    | 22 ++++++++++++++-----
 21 files changed, 120 insertions(+), 38 deletions(-)

diff --git a/frontend/src/components/cur-dir-path/dir-tool.js b/frontend/src/components/cur-dir-path/dir-tool.js
index f3e9deb8b9..8144c17347 100644
--- a/frontend/src/components/cur-dir-path/dir-tool.js
+++ b/frontend/src/components/cur-dir-path/dir-tool.js
@@ -1,5 +1,5 @@
 import React, { Fragment } from 'react';
-import { gettext, repoID, slug, permission, siteRoot } from '../../utils/constants';
+import { gettext, siteRoot } from '../../utils/constants';
 import { Utils } from '../../utils/utils';
 import PropTypes from 'prop-types';
 import ListTagDialog from '../dialog/list-tag-dialog';
@@ -7,7 +7,10 @@ import CreateTagDialog from '../dialog/create-tag-dialog';
 import UpdateTagDialog from '../dialog/update-tag-dialog';
 
 const propTypes = {
-  currentPath: PropTypes.string.isRequired
+  repoID: PropTypes.string.isRequired,
+  repoName: PropTypes.string.isRequired,
+  permission: PropTypes.bool.isRequired,
+  currentPath: PropTypes.string.isRequired,
 };
 
 class DirTool extends React.Component {
@@ -47,12 +50,12 @@ class DirTool extends React.Component {
   }
 
   render() {
-    let { currentPath } = this.props;
+    let { repoID, repoName, permission, currentPath } = this.props;
     let isFile = this.isMarkdownFile(currentPath);
     let name = Utils.getFileName(currentPath);
     let trashUrl = siteRoot + 'repo/recycle/' + repoID + '/?referer=' + encodeURIComponent(location.href);
     let historyUrl = siteRoot + 'repo/history/' + repoID + '/?referer=' + encodeURIComponent(location.href);
-    if ( (name === slug  || name === '') && !isFile && permission) {
+    if ( (name === repoName  || name === '') && !isFile && permission) {
       return (
         <Fragment>
           <ul className="path-toolbar">
@@ -63,6 +66,7 @@ class DirTool extends React.Component {
           {
             this.state.isListRepoTagShow &&
             <ListTagDialog
+              repoID={repoID}
               onListTagCancel={this.onListRepoTagToggle}
               onCreateRepoTag={this.onCreateRepoTagToggle}
               onUpdateRepoTag={this.onUpdateRepoTagToggle}
@@ -71,12 +75,14 @@ class DirTool extends React.Component {
           {
             this.state.isCreateRepoTagShow &&
             <CreateTagDialog
+              repoID={repoID}
               toggleCancel={this.onCreateRepoTagToggle}
             />
           }
           {
             this.state.isUpdateRepoTagShow &&
             <UpdateTagDialog
+              repoID={repoID}
               currentTag={this.state.currentTag}
               toggleCancel={this.onUpdateRepoTagToggle}
             />
diff --git a/frontend/src/components/cur-dir-path/index.js b/frontend/src/components/cur-dir-path/index.js
index 4522065103..59215351a4 100644
--- a/frontend/src/components/cur-dir-path/index.js
+++ b/frontend/src/components/cur-dir-path/index.js
@@ -4,7 +4,9 @@ import DirPath from './dir-path';
 import DirTool from './dir-tool';
 
 const propTypes = {
+  repoID: PropTypes.string.isRequired,
   repoName: PropTypes.string.isRequired,
+  permission: PropTypes.bool.isRequired,
   currentPath: PropTypes.string.isRequired,
   onPathClick: PropTypes.func.isRequired,
 };
@@ -19,7 +21,12 @@ class CurDirPath extends React.Component {
           currentPath={this.props.currentPath}
           onPathClick={this.props.onPathClick}
         />
-        <DirTool currentPath={this.props.currentPath} />
+        <DirTool 
+          repoID={this.props.repoID}
+          repoName={this.props.repoName} 
+          permission={this.props.permission}
+          currentPath={this.props.currentPath} 
+        />
       </Fragment>
     );
   }
diff --git a/frontend/src/components/dialog/copy-dirent-dialog.js b/frontend/src/components/dialog/copy-dirent-dialog.js
index 9a1b89b1e1..61c6b1af55 100644
--- a/frontend/src/components/dialog/copy-dirent-dialog.js
+++ b/frontend/src/components/dialog/copy-dirent-dialog.js
@@ -1,12 +1,13 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Button, Modal, ModalHeader, ModalFooter, ModalBody, Alert } from 'reactstrap';
-import { gettext, repoID } from '../../utils/constants';
+import { gettext } from '../../utils/constants';
 import { Utils } from '../../utils/utils';
 import FileChooser from '../file-chooser/file-chooser';
 
 const propTypes = {
   path: PropTypes.string.isRequired,
+  repoID: PropTypes.string.isRequired,
   dirent: PropTypes.object,
   selectedDirentList: PropTypes.array,
   isMutipleOperation: PropTypes.bool.isRequired,
@@ -43,7 +44,7 @@ class CopyDirent extends React.Component {
   }
 
   copyItems = () => {
-    let { repo, selectedPath } = this.state;
+    let { repo, repoID, selectedPath } = this.state;
     let message = gettext('Invalid destination path');
     
     if (!repo || selectedPath === '') {
@@ -93,7 +94,7 @@ class CopyDirent extends React.Component {
   }
 
   copyItem = () => {
-    let { repo, selectedPath } = this.state; 
+    let { repo, repoID, selectedPath } = this.state; 
     let direntPath = Utils.joinPath(this.props.path, this.props.dirent.name);
     let message = 'Invalid destination path';
 
@@ -109,7 +110,7 @@ class CopyDirent extends React.Component {
     }
     
     // copy the dirent to current path
-    if (selectedPath && this.props.path === selectedPath) {
+    if (selectedPath && this.props.path === selectedPath && repo.repo_id === repoID) {
       this.setState({errMessage: message});
       return;
     }
@@ -159,6 +160,7 @@ class CopyDirent extends React.Component {
         <ModalHeader toggle={this.toggle}><div dangerouslySetInnerHTML={{__html: title}}></div></ModalHeader>
         <ModalBody>
           <FileChooser 
+            repoID={this.props.repoID}
             onDirentItemClick={this.onDirentItemClick}
             onRepoItemClick={this.onRepoItemClick}
           />
diff --git a/frontend/src/components/dialog/create-tag-dialog.js b/frontend/src/components/dialog/create-tag-dialog.js
index 5bfed448fa..8b4425cdd7 100644
--- a/frontend/src/components/dialog/create-tag-dialog.js
+++ b/frontend/src/components/dialog/create-tag-dialog.js
@@ -1,10 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Button, Modal, ModalHeader, ModalBody, ModalFooter, Input } from 'reactstrap';
-import { gettext, repoID } from '../../utils/constants';
+import { gettext } from '../../utils/constants';
 import { seafileAPI } from '../../utils/seafile-api';
 
 const propTypes = {
+  repoID: PropTypes.string.isRequired,
   toggleCancel: PropTypes.func.isRequired,
 };
 
@@ -35,6 +36,7 @@ class CreateTagDialog extends React.Component {
   createTag = () => {  
     let name = this.state.tagName;
     let color = this.state.tagColor;
+    let repoID = this.props.repoID;
     seafileAPI.createRepoTag(repoID, name, color).then(() =>{
       this.props.toggleCancel();
     });
diff --git a/frontend/src/components/dialog/edit-filetag-dialog.js b/frontend/src/components/dialog/edit-filetag-dialog.js
index 275f6a18ff..f37624eb68 100644
--- a/frontend/src/components/dialog/edit-filetag-dialog.js
+++ b/frontend/src/components/dialog/edit-filetag-dialog.js
@@ -1,11 +1,12 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
-import { repoID, gettext } from '../../utils/constants';
+import { gettext } from '../../utils/constants';
 import { seafileAPI } from '../../utils/seafile-api';
 import RepoTag from '../../models/repo-tag';
 
 const propTypes = {
+  repoID: PropTypes.string.isRequired,
   filePath: PropTypes.string.isRequired,
   fileTagList: PropTypes.array.isRequired,
   onFileTagChanged: PropTypes.func.isRequired,
@@ -25,6 +26,7 @@ class EditFileTagDialog extends React.Component {
   }
 
   getRepoTagList = () => {
+    let repoID = this.props.repoID;
     seafileAPI.listRepoTags(repoID).then(res => {
       let repotagList = [];
       res.data.repo_tags.forEach(item => {
@@ -47,6 +49,7 @@ class EditFileTagDialog extends React.Component {
   }
 
   editFileTag = (repoTag) => {
+    let repoID = this.props.repoID;
     let repoTagIdList = this.getRepoTagIdList();
     if (repoTagIdList.indexOf(repoTag.id) === -1) {
       let id = repoTag.id;
diff --git a/frontend/src/components/dialog/list-tag-dialog.js b/frontend/src/components/dialog/list-tag-dialog.js
index 2df5431114..3e2a73b924 100644
--- a/frontend/src/components/dialog/list-tag-dialog.js
+++ b/frontend/src/components/dialog/list-tag-dialog.js
@@ -1,7 +1,7 @@
 import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
-import { gettext, repoID } from '../../utils/constants';
+import { gettext } from '../../utils/constants';
 import { seafileAPI } from '../../utils/seafile-api';
 import RepoTag from '../../models/repo-tag';
 import '../../css/repo-tag.css';
@@ -31,6 +31,7 @@ class TagListItem extends React.Component {
 TagListItem.propTypes = tagListItemPropTypes;
 
 const listTagPropTypes = {
+  repoID: PropTypes.string.isRequired,
   onListTagCancel: PropTypes.func.isRequired,
   onCreateRepoTag: PropTypes.func.isRequired,
   onUpdateRepoTag: PropTypes.func.isRequired,
@@ -45,6 +46,7 @@ class ListTagDialog extends React.Component {
   }
 
   componentDidMount() {
+    let repoID = this.props.repoID;
     seafileAPI.listRepoTags(repoID).then(res => {
       let repotagList = [];
       res.data.repo_tags.forEach(item => {
diff --git a/frontend/src/components/dialog/move-dirent-dialog.js b/frontend/src/components/dialog/move-dirent-dialog.js
index 6d5a885e31..10cfc50529 100644
--- a/frontend/src/components/dialog/move-dirent-dialog.js
+++ b/frontend/src/components/dialog/move-dirent-dialog.js
@@ -1,12 +1,13 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Button, Modal, ModalHeader, ModalFooter, ModalBody, Alert } from 'reactstrap';
-import { gettext, repoID } from '../../utils/constants';
+import { gettext } from '../../utils/constants';
 import { Utils } from '../../utils/utils';
 import FileChooser from '../file-chooser/file-chooser';
 
 const propTypes = {
   path: PropTypes.string.isRequired,
+  repoID: PropTypes.string.isRequired,
   dirent: PropTypes.object,
   selectedDirentList: PropTypes.array,
   isMutipleOperation: PropTypes.bool.isRequired,
@@ -43,7 +44,7 @@ class MoveDirent extends React.Component {
   }
 
   moveItems = () => {
-    let { repo, selectedPath } = this.state;
+    let { repo, repoID, selectedPath } = this.state;
     let message = gettext('Invalid destination path');
     
     if (!repo || selectedPath === '') {
@@ -93,7 +94,7 @@ class MoveDirent extends React.Component {
   }
 
   moveItem = () => {
-    let { repo, selectedPath } = this.state; 
+    let { repo, repoID, selectedPath } = this.state; 
     let direntPath = Utils.joinPath(this.props.path, this.props.dirent.name);
     let message = gettext('Invalid destination path');
 
@@ -109,7 +110,7 @@ class MoveDirent extends React.Component {
     }
     
     // copy the dirent to current path
-    if (selectedPath && Utils.getDirName(direntPath) === selectedPath) {
+    if (selectedPath && this.props.path === selectedPath && repo.repo_id === repoID) {
       this.setState({errMessage: message});
       return;
     }
@@ -159,6 +160,7 @@ class MoveDirent extends React.Component {
         <ModalHeader toggle={this.toggle}><div dangerouslySetInnerHTML={{__html: title}}></div></ModalHeader>
         <ModalBody>
           <FileChooser 
+            repoID={this.props.repoID}
             onDirentItemClick={this.onDirentItemClick}
             onRepoItemClick={this.onRepoItemClick}
           />
diff --git a/frontend/src/components/dialog/update-tag-dialog.js b/frontend/src/components/dialog/update-tag-dialog.js
index 72deac5c38..c7fd07e71e 100644
--- a/frontend/src/components/dialog/update-tag-dialog.js
+++ b/frontend/src/components/dialog/update-tag-dialog.js
@@ -1,11 +1,12 @@
 import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { Button, Modal, ModalHeader, ModalBody, ModalFooter, Input } from 'reactstrap';
-import { gettext, repoID } from '../../utils/constants';
+import { gettext } from '../../utils/constants';
 import { seafileAPI } from '../../utils/seafile-api';
 
 const propTypes = {
   currentTag: PropTypes.object,
+  repoID: PropTypes.string.isRequired,
   toggleCancel: PropTypes.func.isRequired,
 };
 
@@ -42,6 +43,7 @@ class UpdateTagDialog extends React.Component {
     let tag_id = this.props.currentTag.id;
     let name = this.state.newName;
     let color = this.state.newColor;
+    let repoID = this.props.repoID;
     seafileAPI.updateRepoTag(repoID, tag_id, name, color).then(() => {
       this.props.toggleCancel();
     });
@@ -65,6 +67,7 @@ class UpdateTagDialog extends React.Component {
 
   onDeleteTag = () => {
     let tag = this.props.currentTag;
+    let repoID = this.props.repoID;
     seafileAPI.deleteRepoTag(repoID, tag.id).then(() => {
       this.props.toggleCancel();
     });
diff --git a/frontend/src/components/dirent-detail/detail-list-view.js b/frontend/src/components/dirent-detail/detail-list-view.js
index 2751b7d171..8a1d74ccfa 100644
--- a/frontend/src/components/dirent-detail/detail-list-view.js
+++ b/frontend/src/components/dirent-detail/detail-list-view.js
@@ -7,6 +7,7 @@ import EditFileTagDialog from '../dialog/edit-filetag-dialog';
 
 const propTypes = {
   repo: PropTypes.object.isRequired,
+  repoID: PropTypes.string.isRequired,
   dirent: PropTypes.object.isRequired,
   direntType: PropTypes.string.isRequired,
   direntDetail: PropTypes.object.isRequired,
@@ -90,6 +91,7 @@ class DetailListView extends React.Component {
           {
             this.state.isEditFileTagShow &&
             <EditFileTagDialog
+              repoID={this.props.repoID}
               fileTagList={fileTagList}
               filePath={this.props.direntPath}
               toggleCancel={this.onEditFileTagToggle}
diff --git a/frontend/src/components/dirent-detail/dirent-details.js b/frontend/src/components/dirent-detail/dirent-details.js
index 5a428e8450..0534006725 100644
--- a/frontend/src/components/dirent-detail/dirent-details.js
+++ b/frontend/src/components/dirent-detail/dirent-details.js
@@ -1,13 +1,14 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { seafileAPI } from '../../utils/seafile-api';
-import { serviceUrl, repoID } from '../../utils/constants';
 import DetailListView from './detail-list-view';
 import Repo from '../../models/repo';
 import FileTag from '../../models/file-tag';
 import '../../css/dirent-detail.css';
 
 const propTypes = {
+  repoID: PropTypes.string.isRequired,
+  serviceUrl: PropTypes.string.isRequired,
   dirent: PropTypes.object.isRequired,
   direntPath: PropTypes.string.isRequired,
   onItemDetailsClose: PropTypes.func.isRequired,
@@ -27,7 +28,7 @@ class DirentDetail extends React.Component {
   }
 
   componentDidMount() {
-    let { dirent, direntPath } = this.props;
+    let { dirent, direntPath, repoID } = this.props;
     seafileAPI.getRepoInfo(repoID).then(res => {
       let repo = new Repo(res.data);
       this.setState({repo: repo});
@@ -40,6 +41,7 @@ class DirentDetail extends React.Component {
   }
 
   updateDetailView = (dirent, direntPath) => {
+    let repoID = this.props.repoID;
     if (dirent.type === 'file') {
       seafileAPI.getFileInfo(repoID, direntPath).then(res => {
         this.setState({
@@ -66,7 +68,7 @@ class DirentDetail extends React.Component {
   }
 
   render() {
-    let { dirent } = this.props;
+    let { dirent, serviceUrl } = this.props;
     return (
       <div className="detail-container">
         <div className="detail-header">
@@ -84,6 +86,7 @@ class DirentDetail extends React.Component {
             <div className="dirent-table-container">
               <DetailListView 
                 repo={this.state.repo}
+                repoID={this.props.repoID}
                 dirent={this.props.dirent}
                 direntPath={this.props.direntPath}
                 direntType={this.state.direntType}
diff --git a/frontend/src/components/dirent-list-view/dirent-list-item.js b/frontend/src/components/dirent-list-view/dirent-list-item.js
index a9fed6b6f5..751f995e8c 100644
--- a/frontend/src/components/dirent-list-view/dirent-list-item.js
+++ b/frontend/src/components/dirent-list-view/dirent-list-item.js
@@ -1,6 +1,6 @@
 import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
-import { serviceUrl, gettext, repoID } from '../../utils/constants';
+import { gettext } from '../../utils/constants';
 import { seafileAPI } from '../../utils/seafile-api';
 import URLDecorator from '../../utils/url-decorator';
 import Toast from '../toast';
@@ -13,6 +13,8 @@ import CopyDirentDialog from '../dialog/copy-dirent-dialog';
 
 const propTypes = {
   path: PropTypes.string.isRequired,
+  repoID: PropTypes.string.isRequired,
+  serviceUrl: PropTypes.string.isRequired,
   isItemFreezed: PropTypes.bool.isRequired,
   dirent: PropTypes.object.isRequired,
   onItemClick: PropTypes.func.isRequired,
@@ -123,6 +125,7 @@ class DirentListItem extends React.Component {
 
   onItemStarred = () => {
     let dirent = this.props.dirent;
+    let repoID = this.props.repoID;
     let filePath = this.getDirentPath(dirent);
     if (dirent.starred) {
       seafileAPI.unStarFile(repoID, filePath).then(() => {
@@ -247,6 +250,7 @@ class DirentListItem extends React.Component {
   }
 
   onLockItem = () => {
+    let repoID = this.props.repoID;
     let filePath = this.getDirentPath(this.props.dirent);
     seafileAPI.lockfile(repoID, filePath).then(() => {
       this.props.updateDirent(this.props.dirent, 'is_locked', true);
@@ -256,6 +260,7 @@ class DirentListItem extends React.Component {
   }
 
   onUnlockItem = () => {
+    let repoID = this.props.repoID;
     let filePath = this.getDirentPath(this.props.dirent);
     seafileAPI.unlockfile(repoID, filePath).then(() => {
       this.props.updateDirent(this.props.dirent, 'is_locked', false);
@@ -265,6 +270,7 @@ class DirentListItem extends React.Component {
   }
 
   onNewDraft = () => {
+    let repoID = this.props.repoID;
     let filePath = this.getDirentPath(this.props.dirent);
     seafileAPI.createDraft(repoID, filePath).then(res => {
       let draft_file_Path = res.data.draft_file_path;
@@ -283,6 +289,7 @@ class DirentListItem extends React.Component {
   }
 
   onHistory = () => {
+    let repoID = this.props.repoID;
     let filePath = this.getDirentPath(this.props.dirent);
     let referer = location.href;
     let url = URLDecorator.getUrl({type: 'file_revisions', repoID: repoID, filePath: filePath, referer: referer});
@@ -295,6 +302,7 @@ class DirentListItem extends React.Component {
   }
 
   onOpenViaClient = () => {
+    let repoID = this.props.repoID;
     let filePath = this.getDirentPath(this.props.dirent);
     let url = URLDecorator.getUrl({type: 'open_via_client', repoID: repoID, filePath: filePath});
     location.href = url;
@@ -304,6 +312,7 @@ class DirentListItem extends React.Component {
   onItemDownload = (e) => {
     e.nativeEvent.stopImmediatePropagation();
     let dirent = this.props.dirent;
+    let repoID = this.props.repoID;
     let direntPath = this.getDirentPath(dirent);
     if (dirent.type === 'dir') {
       this.setState({isProgressDialogShow: true, progress: 0});
@@ -359,7 +368,7 @@ class DirentListItem extends React.Component {
   }
 
   render() {
-    let { dirent } = this.props;
+    let { dirent, serviceUrl } = this.props;
     return (
       <Fragment>
         <tr className={this.state.highlight ? 'tr-highlight' : ''} onMouseEnter={this.onMouseEnter} onMouseOver={this.onMouseOver} onMouseLeave={this.onMouseLeave}>
@@ -429,6 +438,7 @@ class DirentListItem extends React.Component {
           <ModalPortal>
             <MoveDirentDialog
               path={this.props.path}
+              repoID={this.props.repoID}
               dirent={this.props.dirent}
               isMutipleOperation={this.state.isMutipleOperation}
               onItemMove={this.props.onItemMove}
@@ -440,6 +450,7 @@ class DirentListItem extends React.Component {
           <ModalPortal>
             <CopyDirentDialog
               path={this.props.path}
+              repoID={this.props.repoID}
               dirent={this.props.dirent}
               isMutipleOperation={this.state.isMutipleOperation}
               onItemCopy={this.props.onItemCopy}
diff --git a/frontend/src/components/dirent-list-view/dirent-list-view.js b/frontend/src/components/dirent-list-view/dirent-list-view.js
index a5e1a501d9..8c4337bc3c 100644
--- a/frontend/src/components/dirent-list-view/dirent-list-view.js
+++ b/frontend/src/components/dirent-list-view/dirent-list-view.js
@@ -6,6 +6,12 @@ import DirentListItem from './dirent-list-item';
 
 const propTypes = {
   path: PropTypes.string.isRequired,
+  repoID: PropTypes.string.isRequired,
+  serviceUrl: PropTypes.string.isRequired,
+  isRepoOwner: PropTypes.bool,
+  currentRepo: PropTypes.object,
+  isAllItemSelected: PropTypes.bool.isRequired,
+  isDirentListLoading: PropTypes.bool.isRequired,
   direntList: PropTypes.array.isRequired,
   onItemDelete: PropTypes.func.isRequired,
   onAllItemSelected: PropTypes.func.isRequired,
@@ -16,10 +22,6 @@ const propTypes = {
   onItemCopy: PropTypes.func.isRequired,
   onItemDetails: PropTypes.func.isRequired,
   updateDirent: PropTypes.func.isRequired,
-  isDirentListLoading: PropTypes.bool.isRequired,
-  isRepoOwner: PropTypes.bool,
-  currentRepo: PropTypes.object,
-  isAllItemSelected: PropTypes.bool.isRequired,
 };
 
 class DirentListView extends React.Component {
@@ -78,6 +80,8 @@ class DirentListView extends React.Component {
                   key={index}
                   dirent={dirent}
                   path={this.props.path}
+                  repoID={this.props.repoID}
+                  serviceUrl={this.props.serviceUrl}
                   currentRepo={this.props.currentRepo}
                   isRepoOwner={this.props.isRepoOwner}
                   onItemClick={this.props.onItemClick}
diff --git a/frontend/src/components/file-chooser/file-chooser.js b/frontend/src/components/file-chooser/file-chooser.js
index 764f5d8c5f..5a312ac7e8 100644
--- a/frontend/src/components/file-chooser/file-chooser.js
+++ b/frontend/src/components/file-chooser/file-chooser.js
@@ -2,12 +2,13 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import RepoListView from './repo-list-view';
 import { seafileAPI } from '../../utils/seafile-api';
-import { gettext, repoID } from '../../utils/constants';
+import { gettext } from '../../utils/constants';
 import Repo from '../../models/repo';
 
 import '../../css/file-chooser.css';
 
 const propTypes = {
+  repoID: PropTypes.string.isRequired,
   onDirentItemClick: PropTypes.func,
   onRepoItemClick: PropTypes.func,
 };
@@ -28,6 +29,7 @@ class FileChooser extends React.Component {
   }
 
   componentDidMount() {
+    let repoID = this.props.repoID;
     seafileAPI.getRepoInfo(repoID).then(res => {
       let repo = new Repo(res.data);
       this.setState({
diff --git a/frontend/src/components/file-uploader/file-uploader.js b/frontend/src/components/file-uploader/file-uploader.js
index 4a82986f78..6f3387d3e9 100644
--- a/frontend/src/components/file-uploader/file-uploader.js
+++ b/frontend/src/components/file-uploader/file-uploader.js
@@ -2,13 +2,15 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import Resumablejs from '@seafile/resumablejs';
 import MD5 from 'MD5';
-import { repoID, enableResumableFileUpload } from '../../utils/constants';
+import { enableResumableFileUpload } from '../../utils/constants';
 import { seafileAPI } from '../../utils/seafile-api';
 import UploadProgressDialog from './upload-progress-dialog';
 import UploadRemindDialog from '../dialog/upload-remind-dialog';
 import '../../css/file-uploader.css';
 
 const propTypes = {
+  repoID: PropTypes.string.isRequired,
+  direntList: PropTypes.array.isRequired,
   filetypes: PropTypes.array,
   chunkSize: PropTypes.number,
   withCredentials: PropTypes.bool,
@@ -112,6 +114,7 @@ class FileUploader extends React.Component {
       return; // is upload a folder;
     }
     if (enableResumableFileUpload) {
+      let repoID = this.props.repoID;
       seafileAPI.getFileUploadedBytes(repoID, this.props.path, file.fileName).then(res => {
         let uploadedBytes = res.data.uploadedBytes;
         let offset = Math.floor(uploadedBytes / (1024 * 1024));
@@ -277,6 +280,7 @@ class FileUploader extends React.Component {
   onFileUpload = () => {
     this.uploadInput.removeAttribute('webkitdirectory');
     this.uploadInput.click();
+    let repoID = this.props.repoID;
     seafileAPI.getUploadLink(repoID, this.props.path).then(res => {
       this.resumable.opts.target = res.data;
     });
@@ -285,12 +289,14 @@ class FileUploader extends React.Component {
   onFolderUpload = () => {
     this.uploadInput.setAttribute('webkitdirectory', 'webkitdirectory');
     this.uploadInput.click();
+    let repoID = this.props.repoID;
     seafileAPI.getUploadLink(repoID, this.props.path).then(res => {
       this.resumable.opts.target = res.data;
     });
   }
 
   onDragStart = () => {
+    let repoID = this.props.repoID;
     this.uploadInput.setAttribute('webkitdirectory', 'webkitdirectory');
     seafileAPI.getUploadLink(repoID, this.props.path).then(res => {
       this.resumable.opts.target = res.data;
diff --git a/frontend/src/components/search/search.js b/frontend/src/components/search/search.js
index e537704683..b87187f7b0 100644
--- a/frontend/src/components/search/search.js
+++ b/frontend/src/components/search/search.js
@@ -1,12 +1,13 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { repoID, siteRoot } from '../../utils/constants';
+import { siteRoot } from '../../utils/constants';
 import SearchResultItem from './search-result-item';
 import editorUtilities from '../../utils/editor-utilties';
 import More from '../more';
 
 const propTypes = {
   placeholder: PropTypes.string,
+  repoID: PropTypes.string.isRequired,
   onSearchedClick: PropTypes.func.isRequired,
 };
 
@@ -60,7 +61,7 @@ class Search extends Component {
       });
       return false;
     }
-
+    let repoID = this.props.repoID;
     let queryData = {
       q: newValue,
       search_repo: repoID ? repoID : 'all',
@@ -165,6 +166,7 @@ class Search extends Component {
   }
 
   onShowMore = () => {
+    let repoID = this.props.repoID;
     let newValue = this.state.value;
     let queryData = {
       q: newValue,
diff --git a/frontend/src/components/toolbar/common-toolbar.js b/frontend/src/components/toolbar/common-toolbar.js
index 4c7a126f85..7a34d857c4 100644
--- a/frontend/src/components/toolbar/common-toolbar.js
+++ b/frontend/src/components/toolbar/common-toolbar.js
@@ -6,6 +6,7 @@ import Notification from '../common/notification';
 import Account from '../common/account';
 
 const propTypes = {
+  repoID: PropTypes.string.isRequired,
   onSearchedClick: PropTypes.func.isRequired,
   searchPlaceholder: PropTypes.string
 };
@@ -14,7 +15,13 @@ class  CommonToolbar extends React.Component {
   render() {
     return (
       <div className="common-toolbar">
-        {isPro && <Search onSearchedClick={this.props.onSearchedClick} placeholder={gettext(this.props.searchPlaceholder)}/>}
+        {isPro && (
+          <Search 
+            repoID={this.props.repoID}
+            placeholder={gettext(this.props.searchPlaceholder)}
+            onSearchedClick={this.props.onSearchedClick} 
+          />
+        )}
         <Notification  />
         <Account />
       </div>
diff --git a/frontend/src/components/toolbar/dir-operation-toolbar.js b/frontend/src/components/toolbar/dir-operation-toolbar.js
index bc71e93070..c4ee406420 100644
--- a/frontend/src/components/toolbar/dir-operation-toolbar.js
+++ b/frontend/src/components/toolbar/dir-operation-toolbar.js
@@ -1,7 +1,7 @@
 import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { Utils } from '../../utils/utils';
-import { gettext, serviceUrl } from '../../utils/constants';
+import { gettext } from '../../utils/constants';
 import ModalPortal from '../modal-portal';
 import CreateFolder from '../../components/dialog/create-folder-dialog';
 import CreateFile from '../../components/dialog/create-file-dialog';
@@ -10,6 +10,7 @@ const propTypes = {
   isViewFile: PropTypes.bool,
   path: PropTypes.string.isRequired,
   repoID: PropTypes.string.isRequired,
+  serviceUrl: PropTypes.string.isRequired,
   permission: PropTypes.string.isRequired,
   onAddFile: PropTypes.func.isRequired,
   onAddFolder: PropTypes.func.isRequired,
@@ -57,7 +58,7 @@ class DirOperationToolbar extends React.Component {
 
   onEditClick = (e) => {
     e.preventDefault();
-    let { path, repoID} = this.props;
+    let { path, repoID, serviceUrl } = this.props;
     window.location.href= serviceUrl + '/lib/' + repoID + '/file' + path + '?mode=edit';
   }
 
diff --git a/frontend/src/components/toolbar/general-toolbar.js b/frontend/src/components/toolbar/general-toolbar.js
index bccca98950..bbfe7b1990 100644
--- a/frontend/src/components/toolbar/general-toolbar.js
+++ b/frontend/src/components/toolbar/general-toolbar.js
@@ -11,6 +11,7 @@ const propTypes = {
 class GeneralToolbar extends React.Component {
 
   render() {
+    // todo get repoID?
     let { onShowSidePanel, onSearchedClick } = this.props;
     let placeHolder = this.props.searchPlaceholder || 'Search files in this library';
     return (
@@ -23,6 +24,7 @@ class GeneralToolbar extends React.Component {
           </span>
         </div>
         <CommonToolbar 
+          repoID={'todo'}
           searchPlaceholder={placeHolder}
           onSearchedClick={onSearchedClick} 
         />
diff --git a/frontend/src/components/toolbar/mutilple-dir-operation-toolbar.js b/frontend/src/components/toolbar/mutilple-dir-operation-toolbar.js
index c6b9b1244e..8a4aaa4762 100644
--- a/frontend/src/components/toolbar/mutilple-dir-operation-toolbar.js
+++ b/frontend/src/components/toolbar/mutilple-dir-operation-toolbar.js
@@ -104,6 +104,7 @@ class MutipleDirOperationToolbar extends React.Component {
         {this.state.isMoveDialogShow && 
           <MoveDirentDialog 
             path={this.props.path}
+            repoID={this.props.repoID}
             isMutipleOperation={this.state.isMutipleOperation}
             selectedDirentList={this.props.selectedDirentList}
             onItemsMove={this.props.onItemsMove}
@@ -113,6 +114,7 @@ class MutipleDirOperationToolbar extends React.Component {
         {this.state.isCopyDialogShow &&
           <CopyDirentDialog
             path={this.props.path}
+            repoID={this.props.repoID}
             selectedDirentList={this.props.selectedDirentList}
             isMutipleOperation={this.state.isMutipleOperation}
             onItemsCopy={this.props.onItemsCopy}
diff --git a/frontend/src/css/file-uploader.css b/frontend/src/css/file-uploader.css
index 4ac3487cb7..edef8233e7 100644
--- a/frontend/src/css/file-uploader.css
+++ b/frontend/src/css/file-uploader.css
@@ -44,4 +44,5 @@
 .uploader-list-content {
   padding: 0.625rem 1rem 1.25rem;
   background-color: #fff;
+  overflow: auto;
 }
\ No newline at end of file
diff --git a/frontend/src/pages/repo-wiki-mode/main-panel.js b/frontend/src/pages/repo-wiki-mode/main-panel.js
index 9be94dcef7..4d1e8ac58a 100644
--- a/frontend/src/pages/repo-wiki-mode/main-panel.js
+++ b/frontend/src/pages/repo-wiki-mode/main-panel.js
@@ -1,7 +1,7 @@
 import React, { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
 import cookie from 'react-cookies';
-import { gettext, repoID, serviceUrl, slug } from '../../utils/constants';
+import { gettext, repoID, serviceUrl, slug, permission } from '../../utils/constants';
 import { seafileAPI } from '../../utils/seafile-api';
 import { Utils } from '../../utils/utils';
 import Repo from '../../models/repo';
@@ -139,8 +139,9 @@ class MainPanel extends Component {
                   onItemsDelete={this.props.onItemsDelete}
                 /> :
                 <DirOperationToolBar 
-                  repoID={repoID}
                   path={this.props.path}
+                  repoID={repoID}
+                  serviceUrl={serviceUrl}
                   permission={this.props.permission}
                   isViewFile={this.props.isViewFile}
                   onAddFile={this.props.onAddFile}
@@ -152,12 +153,18 @@ class MainPanel extends Component {
             </div>
             <ViewModeToolbar currentMode={this.state.currentMode} switchViewMode={this.switchViewMode}/>
           </div>
-          <CommonToolbar onSearchedClick={this.props.onSearchedClick} searchPlaceholder={'Search files in this library'}/>
+          <CommonToolbar repoID={repoID} onSearchedClick={this.props.onSearchedClick} searchPlaceholder={'Search files in this library'}/>
         </div>
         <div className="main-panel-center flex-direction-row">
           <div className="cur-view-container">
             <div className="cur-view-path">
-              <CurDirPath currentPath={this.props.path} repoName={slug} onPathClick={this.onMainNavBarClick}/>
+              <CurDirPath 
+                repoID={repoID}
+                repoName={slug}
+                currentPath={this.props.path} 
+                permission={permission} 
+                onPathClick={this.onMainNavBarClick}
+              />
             </div>
             <div className="cur-view-content">
               { !this.props.pathExist ?
@@ -173,8 +180,10 @@ class MainPanel extends Component {
                     /> :
                     <Fragment>
                       <DirentListView
-                        direntList={this.props.direntList}
                         path={this.props.path}
+                        repoID={repoID}
+                        serviceUrl={serviceUrl}
+                        direntList={this.props.direntList}
                         onItemClick={this.props.onItemClick}
                         onItemDelete={this.props.onItemDelete}
                         onItemRename={this.props.onItemRename}
@@ -193,6 +202,7 @@ class MainPanel extends Component {
                         ref={uploader => this.uploader = uploader}
                         dragAndDrop={true}
                         path={this.props.path}
+                        repoID={repoID}
                         onFileSuccess={this.onFileSuccess}
                         direntList={this.props.direntList}
                       />
@@ -205,6 +215,8 @@ class MainPanel extends Component {
           { this.state.isDirentDetailShow &&
             <div className="cur-view-detail">
               <DirentDetail
+                repoID={repoID}
+                serviceUrl={serviceUrl}
                 dirent={this.state.currentDirent}
                 direntPath={this.state.direntPath}
                 onItemDetailsClose={this.onItemDetailsClose}