Feature/update copy dialog (#7047)

* update copy dirent dialog

* optimize code

---------

Co-authored-by: zhouwenxuan <aries@Mac.local>

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

@@ -1,9 +1,15 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Button, Modal, ModalHeader, ModalFooter, ModalBody, Alert, Row, Col } from 'reactstrap';
+import { Modal, ModalHeader } from 'reactstrap';
-import FileChooser from '../file-chooser';
+import { IconBtn } from '@seafile/sf-metadata-ui-component';
-import { gettext } from '../../utils/constants';
+import Searcher from '../file-chooser/searcher';
+import SelectDirentBody from './select-dirent-body';
+import { MODE_TYPE_MAP } from '../../constants';
 import { Utils } from '../../utils/utils';
+import { seafileAPI } from '../../utils/seafile-api';
+import { gettext, isPro } from '../../utils/constants';
+import { RepoInfo } from '../../models';
+import toaster from '../toast';
 
 const propTypes = {
   path: PropTypes.string.isRequired,
@@ -15,21 +21,70 @@ const propTypes = {
   onItemsCopy: PropTypes.func,
   onCancelCopy: PropTypes.func.isRequired,
   repoEncrypted: PropTypes.bool.isRequired,
+  onAddFolder: PropTypes.func,
 };
 
-// need dirent file Path；
 class CopyDirent extends React.Component {
 
   constructor(props) {
     super(props);
     this.state = {
-      repo: { repo_id: this.props.repoID },
+      mode: MODE_TYPE_MAP.ONLY_CURRENT_LIBRARY,
+      currentRepo: { repo_id: this.props.repoID },
+      selectedRepo: { repo_id: this.props.repoID },
+      repoList: [],
       selectedPath: this.props.path,
+      selectedSearchedRepo: null,
+      selectedSearchedItem: { repoID: '', filePath: '' },
+      searchStatus: '',
+      searchResults: [],
+      showSearchBar: false,
       errMessage: '',
-      mode: 'only_current_library',
+      initToShowChildren: false,
     };
+    this.lastMode = MODE_TYPE_MAP.ONLY_CURRENT_LIBRARY;
   }
 
+  componentDidMount() {
+    this.initialize();
+  }
+
+  initialize = async () => {
+    try {
+      const res = await seafileAPI.getRepoInfo(this.props.repoID);
+      const repo = new RepoInfo(res.data);
+      this.setState({ currentRepo: repo });
+      await this.fetchRepoList();
+    } catch (error) {
+      const errMessage = Utils.getErrorMsg(error);
+      toaster.danger(errMessage);
+    }
+  };
+
+  fetchRepoList = async () => {
+    try {
+      const res = await seafileAPI.listRepos();
+      const repos = res.data.repos;
+      const repoList = [];
+      const uniqueRepoIds = new Set();
+      for (const repo of repos) {
+        if (repo.permission === 'rw' && repo.repo_id !== this.props.repoID && !uniqueRepoIds.has(repo.repo_id)) {
+          uniqueRepoIds.add(repo.repo_id);
+          repoList.push(repo);
+        }
+      }
+      const sortedRepoList = Utils.sortRepos(repoList, 'name', 'asc');
+      const selectedRepo = sortedRepoList.find((repo) => repo.repo_id === this.props.repoID);
+      this.setState({
+        repoList: sortedRepoList,
+        repo: selectedRepo,
+      });
+    } catch (error) {
+      const errMessage = Utils.getErrorMsg(error);
+      toaster.danger(errMessage);
+    }
+  };
+
   handleSubmit = () => {
     if (this.props.isMultipleOperation) {
       this.copyItems();
@@ -39,10 +94,10 @@ class CopyDirent extends React.Component {
   };
 
   copyItems = () => {
-    let { repo, selectedPath } = this.state;
+    let { selectedRepo, selectedPath } = this.state;
     let message = gettext('Invalid destination path');
 
-    if (!repo || selectedPath === '') {
+    if (!selectedRepo || selectedPath === '') {
       this.setState({ errMessage: message });
       return;
     }
@@ -78,16 +133,16 @@ class CopyDirent extends React.Component {
       return;
     }
 
-    this.props.onItemsCopy(repo, selectedPath);
+    this.props.onItemsCopy(selectedRepo, selectedPath, true);
     this.toggle();
   };
 
   copyItem = () => {
-    let { repo, repoID, selectedPath } = this.state;
+    let { repoID, selectedRepo, selectedPath } = this.state;
     let direntPath = Utils.joinPath(this.props.path, this.props.dirent.name);
     let message = gettext('Invalid destination path');
 
-    if (!repo || (repo.repo_id === repoID && selectedPath === '')) {
+    if (!selectedRepo || (selectedRepo.repo_id === repoID && selectedPath === '')) {
       this.setState({ errMessage: message });
       return;
     }
@@ -107,7 +162,7 @@ class CopyDirent extends React.Component {
       return;
     }
 
-    this.props.onItemCopy(repo, this.props.dirent, selectedPath, this.props.path);
+    this.props.onItemCopy(selectedRepo, this.props.dirent, selectedPath, this.props.path, true);
     this.toggle();
   };
 
@@ -115,6 +170,113 @@ class CopyDirent extends React.Component {
     this.props.onCancelCopy();
   };
 
+  selectRepo = (repo) => {
+    this.setState({ selectedRepo: repo });
+  };
+
+  selectSearchedRepo = (repo) => {
+    this.setState({ selectedSearchedRepo: repo });
+  };
+
+  setSelectedPath = (selectedPath) => {
+    this.setState({ selectedPath });
+  };
+
+  setErrMessage = (message) => {
+    this.setState({ errMessage: message });
+  };
+
+  updateMode = (mode) => {
+    if (mode === this.state.mode) return;
+
+    if (mode !== MODE_TYPE_MAP.SEARCH_RESULTS) {
+      this.lastMode = mode;
+    }
+
+    const isShowChildren = mode === MODE_TYPE_MAP.ONLY_CURRENT_LIBRARY || mode === MODE_TYPE_MAP.SEARCH_RESULTS;
+    this.setState({
+      mode,
+      initToShowChildren: isShowChildren,
+    });
+
+    if (this.state.mode === MODE_TYPE_MAP.SEARCH_RESULTS) {
+      this.setState({
+        selectedSearchedRepo: null,
+        searchResults: [],
+        showSearchBar: false,
+      });
+    }
+
+    if (this.state.selectedSearchedRepo && mode !== MODE_TYPE_MAP.SEARCH_RESULTS) {
+      this.setState({
+        selectedSearchedRepo: null,
+        searchResults: [],
+        showSearchBar: false,
+      });
+    }
+
+    this.setState({ selectedSearchedItem: { repoID: '', filePath: '' } });
+  };
+
+  onUpdateSearchStatus = (status) => {
+    this.setState({ searchStatus: status });
+  };
+
+  onUpdateSearchResults = (results) => {
+    this.setState({
+      searchResults: results
+    });
+  };
+
+  onOpenSearchBar = () => {
+    this.setState({ showSearchBar: true });
+  };
+
+  onCloseSearchBar = () => {
+    const mode = this.lastMode;
+    this.setState({
+      mode,
+      searchStatus: '',
+      searchResults: [],
+      selectedSearchedRepo: null,
+      showSearchBar: false,
+      initToShowChildren: mode === MODE_TYPE_MAP.ONLY_CURRENT_LIBRARY,
+    });
+  };
+
+  onSearchedItemClick = (item) => {
+    item['type'] = item.is_dir ? 'dir' : 'file';
+    let repo = new RepoInfo(item);
+    this.onDirentItemClick(repo, item.path, item);
+  };
+
+  onSearchedItemDoubleClick = (item) => {
+    if (item.type !== 'dir') return;
+
+    seafileAPI.getRepoInfo(item.repo_id).then(res => {
+      const repoInfo = new RepoInfo(res.data);
+      const path = item.path.substring(0, item.path.length - 1);
+      const mode = item.repo_id === this.props.repoID ? MODE_TYPE_MAP.ONLY_CURRENT_LIBRARY : MODE_TYPE_MAP.ONLY_OTHER_LIBRARIES;
+      this.lastMode = mode;
+      this.setState({
+        mode,
+        selectedRepo: repoInfo,
+        selectedSearchedRepo: repoInfo,
+        selectedPath: path,
+        selectedSearchedItem: { repoID: item.repo_id, filePath: path },
+        showSearchBar: mode === MODE_TYPE_MAP.ONLY_OTHER_LIBRARIES,
+        initToShowChildren: true,
+      });
+    }).catch(err => {
+      const errMessage = Utils.getErrorMsg(err);
+      toaster.danger(errMessage);
+    });
+  };
+
+  selectSearchedItem = (item) => {
+    this.setState({ selectedSearchedItem: item });
+  };
+
   onDirentItemClick = (repo, selectedPath) => {
     this.setState({
       repo: repo,
@@ -131,10 +293,6 @@ class CopyDirent extends React.Component {
     });
   };
 
-  onSelectedMode = (mode) => {
-    this.setState({ mode: mode });
-  };
-
   renderTitle = () => {
     const { dirent, isMultipleOperation } = this.props;
     let title = gettext('Copy {placeholder} to');
@@ -147,48 +305,68 @@ class CopyDirent extends React.Component {
   };
 
   render() {
-    const { dirent, selectedDirentList, isMultipleOperation, repoID, path } = this.props;
+    const { dirent, selectedDirentList, isMultipleOperation, path } = this.props;
-    const { mode, errMessage } = this.state;
+    const { mode, currentRepo, selectedRepo, selectedPath, showSearchBar, searchStatus, searchResults, selectedSearchedRepo } = this.state;
 
     const copiedDirent = dirent || selectedDirentList[0];
     const { permission } = copiedDirent;
     const { isCustomPermission } = Utils.getUserPermission(permission);
 
-    const LibraryOption = ({ mode, label }) => (
-      <div className={`repo-list-item ${this.state.mode === mode ? 'active' : ''}`} onClick={() => this.onSelectedMode(mode)}>
-        <span className='library'>{label}</span>
-      </div>
-    );
-
     return (
-      <Modal className='custom-modal' isOpen={true} toggle={this.toggle}>
+      <Modal className="custom-modal" isOpen={true} toggle={this.toggle}>
-        <ModalHeader toggle={this.toggle}>
+        <ModalHeader toggle={this.toggle} close={
-          {isMultipleOperation ? this.renderTitle() : <div dangerouslySetInnerHTML={{ __html: this.renderTitle() }} className="d-flex mw-100"></div>}
+          <div className="header-close-list">
-        </ModalHeader>
+            <span aria-hidden="true" className="sf3-font sf3-font-x-01 comment-close-icon" onClick={this.toggle}></span>
-        <Row>
+          </div>
-          <Col className='repo-list-col border-right'>
+        }>
-            <LibraryOption mode='only_current_library' label={gettext('Current Library')} />
+          {isMultipleOperation ? this.renderTitle() : <div dangerouslySetInnerHTML={{ __html: this.renderTitle() }} className="d-flex"></div>}
-            {!isCustomPermission && <LibraryOption mode='only_other_libraries' label={gettext('Other Libraries')} />}
+          {isPro && (
-            <LibraryOption mode='recently_used' label={gettext('Recently Used')} />
+            showSearchBar ? (
-          </Col>
+              <Searcher
-          <Col className='file-list-col'>
+                onUpdateMode={this.updateMode}
-            <ModalBody>
+                onUpdateSearchStatus={this.onUpdateSearchStatus}
-              <FileChooser
+                onUpdateSearchResults={this.onUpdateSearchResults}
-                repoID={repoID}
+                onClose={this.onCloseSearchBar}
-                currentPath={path}
+              />
-                onDirentItemClick={this.onDirentItemClick}
+            ) : (
-                onRepoItemClick={this.onRepoItemClick}
+              <IconBtn
-                mode={mode}
+                iconName="search"
-                hideLibraryName={false}
+                size={24}
+                className="search"
+                onClick={this.onOpenSearchBar}
+                role="button"
+                onKeyDown={() => {}}
+                tabIndex={0}
+              />
+            )
+          )}
+        </ModalHeader>
+        <SelectDirentBody
+          mode={mode}
+          currentRepo={currentRepo}
+          selectedRepo={selectedRepo}
+          currentPath={path}
+          repoList={this.state.repoList}
+          selectedPath={selectedPath}
+          isSupportOtherLibraries={!isCustomPermission}
+          onCancel={this.toggle}
+          selectRepo={this.selectRepo}
+          setSelectedPath={this.setSelectedPath}
+          setErrMessage={this.setErrMessage}
+          handleSubmit={this.handleSubmit}
+          onUpdateMode={this.updateMode}
+          searchStatus={searchStatus}
+          searchResults={searchResults}
+          selectedSearchedItem={this.state.selectedSearchedItem}
+          onSelectedSearchedItem={this.selectSearchedItem}
+          onSearchedItemClick={this.onSearchedItemClick}
+          onSearchedItemDoubleClick={this.onSearchedItemDoubleClick}
+          selectedSearchedRepo={selectedSearchedRepo}
+          onSelectSearchedRepo={this.selectSearchedRepo}
+          onAddFolder={this.props.onAddFolder}
+          initToShowChildren={this.state.initToShowChildren}
+          fetchRepoInfo={this.fetchRepoInfo}
         />
-              {errMessage && <Alert color="danger" className="mt-2">{errMessage}</Alert>}
-            </ModalBody>
-            <ModalFooter>
-              <Button color="secondary" onClick={this.toggle}>{gettext('Cancel')}</Button>
-              <Button color="primary" onClick={this.handleSubmit}>{gettext('Submit')}</Button>
-            </ModalFooter>
-          </Col>
-        </Row>
       </Modal>
     );
   }

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

@@ -9,15 +9,7 @@ import Searcher from '../file-chooser/searcher';
 import { RepoInfo } from '../../models';
 import { seafileAPI } from '../../utils/seafile-api';
 import toaster from '../toast';
-
+import { MODE_TYPE_MAP } from '../../constants';
-export const MODE_TYPE_MAP = {
-  CURRENT_AND_OTHER_REPOS: 'current_repo_and_other_repos',
-  ONLY_CURRENT_LIBRARY: 'only_current_library',
-  ONLY_ALL_REPOS: 'only_all_repos',
-  ONLY_OTHER_LIBRARIES: 'only_other_libraries',
-  RECENTLY_USED: 'recently_used',
-  SEARCH_RESULTS: 'search_results',
-};
 
 const propTypes = {
   path: PropTypes.string.isRequired,
@@ -53,12 +45,20 @@ class MoveDirent extends React.Component {
   }
 
   componentDidMount() {
-    seafileAPI.getRepoInfo(this.props.repoID).then(res => {
+    this.initialize();
+  }
+
+  initialize = async () => {
+    try {
+      const res = await seafileAPI.getRepoInfo(this.props.repoID);
       const repo = new RepoInfo(res.data);
       this.setState({ currentRepo: repo });
-      this.fetchRepoList();
+      await this.fetchRepoList();
-    });
+    } catch (error) {
+      const errMessage = Utils.getErrorMsg(error);
+      toaster.danger(errMessage);
     }
+  };
 
   fetchRepoList = async () => {
     try {
@@ -317,13 +317,13 @@ class MoveDirent extends React.Component {
     const { isCustomPermission } = Utils.getUserPermission(permission);
 
     return (
-      <Modal className='custom-modal' isOpen={true} toggle={this.toggle}>
+      <Modal className="custom-modal" isOpen={true} toggle={this.toggle}>
         <ModalHeader toggle={this.toggle} close={
           <div className="header-close-list">
             <span aria-hidden="true" className="sf3-font sf3-font-x-01 comment-close-icon" onClick={this.toggle}></span>
           </div>
         }>
-          {isMultipleOperation ? this.renderTitle() : <div dangerouslySetInnerHTML={{ __html: this.renderTitle() }} className='d-flex'></div>}
+          {isMultipleOperation ? this.renderTitle() : <div dangerouslySetInnerHTML={{ __html: this.renderTitle() }} className="d-flex"></div>}
           {isPro && (
             showSearchBar ? (
               <Searcher

frontend/src/components/dialog/select-dirent-body.js

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Button, ModalFooter, ModalBody, Alert, Row, Col } from 'reactstrap';
 import RepoListWrapper from '../file-chooser/repo-list-wrapper';
-import { MODE_TYPE_MAP } from '../dialog/move-dirent-dialog';
+import { MODE_TYPE_MAP } from '../../constants';
 import { seafileAPI } from '../../utils/seafile-api';
 import { gettext } from '../../utils/constants';
 import { RepoInfo } from '../../models';

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

@@ -957,6 +957,7 @@ class DirentGridView extends React.Component {
             selectedDirentList={selectedDirentList}
             onItemsCopy={this.props.onItemsCopy}
             onCancelCopy={this.onCopyToggle}
+            onAddFolder={this.props.onAddFolder}
           />
         }
         {this.state.isEditFileTagShow &&

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

@@ -982,6 +982,7 @@ class DirentListItem extends React.Component {
               onItemCopy={this.props.onItemCopy}
               onCancelCopy={this.onItemCopyToggle}
               repoEncrypted={this.props.repoEncrypted}
+              onAddFolder={this.props.onAddFolder}
             />
           </ModalPortal>
         }

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

@@ -872,6 +872,7 @@ class DirentListView extends React.Component {
               isMultipleOperation={this.state.isMultipleOperation}
               onItemsCopy={this.props.onItemsCopy}
               onCancelCopy={this.onCopyToggle}
+              onAddFolder={this.props.onAddFolder}
             />
           }
           {this.state.isProgressDialogShow &&

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

@@ -9,6 +9,7 @@ import RepoInfo from '../../models/repo-info';
 import { seafileAPI } from '../../utils/seafile-api';
 import { gettext, isPro } from '../../utils/constants';
 import { Utils } from '../../utils/utils';
+import { MODE_TYPE_MAP } from '../../constants';
 
 import '../../css/file-chooser.css';
 
@@ -18,13 +19,7 @@ const propTypes = {
   repoID: PropTypes.string,
   onDirentItemClick: PropTypes.func,
   onRepoItemClick: PropTypes.func,
-  mode: PropTypes.oneOf([
+  mode: PropTypes.isRequired,
-    'current_repo_and_other_repos',
-    'only_all_repos',
-    'only_current_library',
-    'only_other_libraries',
-    'recently_used'
-  ]).isRequired,
   fileSuffixes: PropTypes.arrayOf(PropTypes.string),
   currentPath: PropTypes.string,
   searchResults: PropTypes.array,
@@ -128,7 +123,7 @@ class FileChooser extends React.Component {
         searchInfo: '',
         searchResults: [],
       });
-      if (this.props.mode === 'only_other_libraries') {
+      if (this.props.mode === MODE_TYPE_MAP.ONLY_OTHER_LIBRARIES) {
         this.onOtherRepoToggle();
       }
     }

frontend/src/components/file-chooser/repo-list-wrapper.js

@@ -5,7 +5,7 @@ import RecentlyUsedListView from './recently-used-list-view';
 import { gettext } from '../../utils/constants';
 import SearchedListView from './searched-list-view';
 import { SearchStatus } from './searcher';
-import { MODE_TYPE_MAP } from '../dialog/move-dirent-dialog';
+import { MODE_TYPE_MAP } from '../../constants';
 import Loading from '../loading';
 
 const RepoListWrapper = (props) => {

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

@@ -4,7 +4,7 @@ import { Input } from 'reactstrap';
 import { gettext } from '../../../utils/constants';
 import { seafileAPI } from '../../../utils/seafile-api';
 import { SEARCH_CONTAINER } from '../../../constants/zIndexes';
-import { MODE_TYPE_MAP } from '../../dialog/move-dirent-dialog';
+import { MODE_TYPE_MAP } from '../../../constants';
 
 import './index.css';
 

frontend/src/components/toolbar/selected-dirents-toolbar.js

@@ -430,6 +430,7 @@ class SelectedDirentsToolbar extends React.Component {
             isMultipleOperation={this.state.isMultipleOperation}
             onItemsCopy={this.props.onItemsCopy}
             onCancelCopy={this.onCopyToggle}
+            onAddFolder={this.props.onAddFolder}
           />
         }
         {this.state.isZipDialogOpen &&

frontend/src/constants/index.js

@@ -23,3 +23,12 @@ export const MAP_TYPE = {
 export const DOMESTIC_MAP_TYPE = [MAP_TYPE.B_MAP];
 
 export { KeyCodes, zIndexes, TAG_COLORS };
+
+export const MODE_TYPE_MAP = {
+  CURRENT_AND_OTHER_REPOS: 'current_repo_and_other_repos',
+  ONLY_CURRENT_LIBRARY: 'only_current_library',
+  ONLY_ALL_REPOS: 'only_all_repos',
+  ONLY_OTHER_LIBRARIES: 'only_other_libraries',
+  RECENTLY_USED: 'recently_used',
+  SEARCH_RESULTS: 'search_results',
+};

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

@@ -733,7 +733,7 @@ class LibContentView extends React.Component {
   };
 
   // toolbar operations
-  onMoveItems = (destRepo, destDirentPath, moveByDialog = false) => {
+  onMoveItems = (destRepo, destDirentPath, byDialog = false) => {
     let repoID = this.props.repoID;
     let selectedDirentList = this.state.selectedDirentList;
 
@@ -771,7 +771,7 @@ class LibContentView extends React.Component {
         toaster.success(message);
       }
 
-      if (moveByDialog) {
+      if (byDialog) {
         this.updateRecentlyUsedRepos(destRepo, destDirentPath);
       }
 
@@ -792,7 +792,7 @@ class LibContentView extends React.Component {
     });
   };
 
-  onCopyItems = (destRepo, destDirentPath) => {
+  onCopyItems = (destRepo, destDirentPath, byDialog = false) => {
     let repoID = this.props.repoID;
     let selectedDirentList = this.state.selectedDirentList;
 
@@ -822,6 +822,10 @@ class LibContentView extends React.Component {
         // show tip message if copy to current repo
         let message = Utils.getCopySuccessfulMessage(dirNames);
         toaster.success(message);
+
+        if (byDialog) {
+          this.updateRecentlyUsedRepos(destRepo, destDirentPath);
+        }
       }
     }).catch((error) => {
       if (!error.response.data.lib_need_decrypt) {
@@ -1217,7 +1221,7 @@ class LibContentView extends React.Component {
   };
 
   // list operations
-  onMoveItem = (destRepo, dirent, moveToDirentPath, nodeParentPath, moveByDialog = false) => {
+  onMoveItem = (destRepo, dirent, moveToDirentPath, nodeParentPath, byDialog = false) => {
     this.updateCurrentNotExistDirent(dirent);
     let repoID = this.props.repoID;
     // just for view list state
@@ -1262,7 +1266,7 @@ class LibContentView extends React.Component {
         toaster.success(message);
       }
 
-      if (moveByDialog) {
+      if (byDialog) {
         this.updateRecentlyUsedRepos(destRepo, moveToDirentPath);
       }
 
@@ -1287,7 +1291,7 @@ class LibContentView extends React.Component {
     });
   };
 
-  onCopyItem = (destRepo, dirent, copyToDirentPath, nodeParentPath) => {
+  onCopyItem = (destRepo, dirent, copyToDirentPath, nodeParentPath, byDialog = false) => {
     let repoID = this.props.repoID;
     // just for view list state
     let dirName = dirent.name;
@@ -1321,6 +1325,10 @@ class LibContentView extends React.Component {
         let message = gettext('Successfully copied %(name)s.');
         message = message.replace('%(name)s', dirName);
         toaster.success(message);
+
+        if (byDialog) {
+          this.updateRecentlyUsedRepos(destRepo, copyToDirentPath);
+        }
       }
     }).catch((error) => {
       if (!error.response.data.lib_need_decrypt) {