Improve/move dirent dialog UI (#6786)

* update move dialog and search input

* update move dialog ui

* clean up code

* update code

---------

Co-authored-by: renjie-run <rj.aiyayao@gmail.com>

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

@@ -1,9 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Button, Modal, ModalHeader, ModalFooter, ModalBody, Alert, Row, Col } from 'reactstrap';
+import FileChooser from '../file-chooser';
 import { gettext } from '../../utils/constants';
 import { Utils } from '../../utils/utils';
-import FileChooser from '../file-chooser/file-chooser';
 
 const propTypes = {
   path: PropTypes.string.isRequired,

frontend/src/components/dialog/insert-file-dialog.js

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
 import { gettext } from '../../utils/constants';
-import FileChooser from '../file-chooser/file-chooser';
+import FileChooser from '../file-chooser';
 
 const propTypes = {
   repoID: PropTypes.string.isRequired,

frontend/src/components/dialog/insert-repo-image-dialog.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
 import { gettext } from '../../utils/constants';
 import { Utils } from '../../utils/utils';
-import FileChooser from '../file-chooser/file-chooser';
+import FileChooser from '../file-chooser';
 import '../../css/insert-repo-image-dialog.css';
 
 const { siteRoot, serviceUrl } = window.app.config;

frontend/src/components/dialog/lib-sub-folder-set-group-permission-dialog.js

@@ -5,7 +5,7 @@ import { gettext, isPro, siteRoot } from '../../utils/constants';
 import { seafileAPI } from '../../utils/seafile-api';
 import { Utils } from '../../utils/utils';
 import SharePermissionEditor from '../select-editor/share-permission-editor';
-import FileChooser from '../file-chooser/file-chooser';
+import FileChooser from '../file-chooser';
 import { SeahubSelect, NoGroupMessage } from '../common/select';
 import toaster from '../../components/toast';
 

frontend/src/components/dialog/lib-sub-folder-set-user-permission-dialog.js

@@ -6,7 +6,7 @@ import { seafileAPI } from '../../utils/seafile-api';
 import { Utils } from '../../utils/utils';
 import UserSelect from '../user-select';
 import SharePermissionEditor from '../select-editor/share-permission-editor';
-import FileChooser from '../file-chooser/file-chooser';
+import FileChooser from '../file-chooser';
 import toaster from '../../components/toast';
 
 class UserItem extends React.Component {

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

@@ -1,9 +1,9 @@
 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 SelectDirentBody from './select-dirent-body';
 import { gettext } from '../../utils/constants';
 import { Utils } from '../../utils/utils';
-import FileChooser from '../file-chooser/file-chooser';
 
 const propTypes = {
   path: PropTypes.string.isRequired,
@@ -14,10 +14,8 @@ const propTypes = {
   onItemMove: PropTypes.func,
   onItemsMove: PropTypes.func,
   onCancelMove: PropTypes.func.isRequired,
-  repoEncrypted: PropTypes.bool.isRequired,
 };
 
-// need dirent file Path；
 class MoveDirent extends React.Component {
 
   constructor(props) {
@@ -26,7 +24,6 @@ class MoveDirent extends React.Component {
       repo: { repo_id: this.props.repoID },
       selectedPath: this.props.path,
       errMessage: '',
-      mode: 'only_current_library',
     };
   }
 
@@ -44,7 +41,7 @@ class MoveDirent extends React.Component {
     let message = gettext('Invalid destination path');
 
     if (!repo || selectedPath === '') {
-      this.setState({ errMessage: message });
+      this.setErrMessage(message);
       return;
     }
 
@@ -57,13 +54,13 @@ class MoveDirent extends React.Component {
 
     // move dirents to one of them. eg: A/B, A/C -> A/B
     if (direntPaths.some(direntPath => { return direntPath === selectedPath;})) {
-      this.setState({ errMessage: message });
+      this.setErrMessage(message);
       return;
     }
 
     // move dirents to current path
     if (selectedPath && selectedPath === this.props.path && (repo.repo_id === repoID)) {
-      this.setState({ errMessage: message });
+      this.setErrMessage(message);
       return;
     }
 
@@ -81,7 +78,7 @@ class MoveDirent extends React.Component {
       message = gettext('Can not move folder %(src)s to its subfolder %(des)s');
       message = message.replace('%(src)s', moveDirentPath);
       message = message.replace('%(des)s', selectedPath);
-      this.setState({ errMessage: message });
+      this.setErrMessage(message);
       return;
     }
 
@@ -96,19 +93,19 @@ class MoveDirent extends React.Component {
     let message = gettext('Invalid destination path');
 
     if (!repo || (repo.repo_id === repoID && selectedPath === '')) {
-      this.setState({ errMessage: message });
+      this.setErrMessage(message);
       return;
     }
 
     // copy the dirent to itself. eg: A/B -> A/B
     if (selectedPath && direntPath === selectedPath) {
-      this.setState({ errMessage: message });
+      this.setErrMessage(message);
       return;
     }
 
     // copy the dirent to current path
     if (selectedPath && this.props.path === selectedPath && repo.repo_id === repoID) {
-      this.setState({ errMessage: message });
+      this.setErrMessage(message);
       return;
     }
 
@@ -117,7 +114,7 @@ class MoveDirent extends React.Component {
       message = gettext('Can not move folder %(src)s to its subfolder %(des)s');
       message = message.replace('%(src)s', direntPath);
       message = message.replace('%(des)s', selectedPath);
-      this.setState({ errMessage: message });
+      this.setErrMessage(message);
       return;
     }
 
@@ -129,24 +126,16 @@ class MoveDirent extends React.Component {
     this.props.onCancelMove();
   };
 
-  onDirentItemClick = (repo, selectedPath) => {
-    this.setState({
-      repo: repo,
-      selectedPath: selectedPath,
-      errMessage: ''
-    });
+  selectRepo = (repo) => {
+    this.setState({ repo });
   };
 
-  onRepoItemClick = (repo) => {
-    this.setState({
-      repo: repo,
-      selectedPath: '/',
-      errMessage: ''
-    });
+  setSelectedPath = (selectedPath) => {
+    this.setState({ selectedPath });
   };
 
-  onSelectedMode = (mode) => {
-    this.setState({ mode: mode });
+  setErrMessage = (message) => {
+    this.setState({ errMessage: message });
   };
 
   renderTitle = () => {
@@ -161,48 +150,28 @@ class MoveDirent extends React.Component {
   };
 
   render() {
-    const { dirent, selectedDirentList, isMultipleOperation, repoID, path } = this.props;
-    const { mode, errMessage } = this.state;
-
+    const { dirent, selectedDirentList, isMultipleOperation, path, repoID } = this.props;
     const movedDirent = dirent || selectedDirentList[0];
     const { permission } = movedDirent;
     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}>
         <ModalHeader toggle={this.toggle}>
           {isMultipleOperation ? this.renderTitle() : <div dangerouslySetInnerHTML={{ __html: this.renderTitle() }} className='d-flex mw-100'></div>}
         </ModalHeader>
-        <Row>
-          <Col className='repo-list-col border-right' >
-            <LibraryOption mode='only_current_library' label={gettext('Current Library')} />
-            {!isCustomPermission && <LibraryOption mode='only_other_libraries' label={gettext('Other Libraries')} />}
-            <LibraryOption mode='recently_used' label={gettext('Recently Used')} />
-          </Col>
-          <Col className='file-list-col'>
-            <ModalBody>
-              <FileChooser
-                repoID={repoID}
-                currentPath={path}
-                onDirentItemClick={this.onDirentItemClick}
-                onRepoItemClick={this.onRepoItemClick}
-                mode={mode}
-                hideLibraryName={false}
-              />
-              {errMessage && <Alert color="danger" className="alert-message">{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>
+        <SelectDirentBody
+          path={path}
+          selectedPath={this.state.selectedPath}
+          repoID={repoID}
+          isSupportOtherLibraries={!isCustomPermission}
+          errMessage={this.state.errMessage}
+          onCancel={this.toggle}
+          selectRepo={this.selectRepo}
+          setSelectedPath={this.setSelectedPath}
+          setErrMessage={this.setErrMessage}
+          handleSubmit={this.handleSubmit}
+        />
       </Modal>
     );
   }

frontend/src/components/dialog/save-shared-dir-dialog.js

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Button, Modal, ModalHeader, ModalBody, ModalFooter, Alert } from 'reactstrap';
 import { gettext } from '../../utils/constants';
-import FileChooser from '../file-chooser/file-chooser';
+import FileChooser from '../file-chooser';
 
 const propTypes = {
   sharedToken: PropTypes.string.isRequired,

frontend/src/components/dialog/save-shared-file-dialog.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { Button, Modal, ModalHeader, ModalBody, ModalFooter, Alert } from 'reactstrap';
 import { gettext } from '../../utils/constants';
 import { seafileAPI } from '../../utils/seafile-api';
-import FileChooser from '../file-chooser/file-chooser';
+import FileChooser from '../file-chooser';
 import { Utils } from '../../utils/utils';
 
 const propTypes = {

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

@@ -0,0 +1,232 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Button, ModalFooter, ModalBody, Alert, Row, Col } from 'reactstrap';
+import toaster from '../toast';
+import Searcher, { SearchStatus } from '../file-chooser/searcher';
+import RepoListWrapper, { MODE_TYPE_MAP } from '../file-chooser/repo-list-wrapper';
+import { seafileAPI } from '../../utils/seafile-api';
+import { gettext, isPro } from '../../utils/constants';
+import { Utils } from '../../utils/utils';
+import { RepoInfo } from '../../models';
+
+const LibraryOption = ({ mode, label, currentMode, selectedMode }) => {
+  return (
+    <div className={`repo-list-item ${mode === currentMode ? 'active' : ''}`} onClick={() => selectedMode(mode)}>
+      <span className='library'>{label}</span>
+    </div>
+  );
+};
+
+class SelectDirentBody extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      mode: MODE_TYPE_MAP.ONLY_CURRENT_LIBRARY,
+      currentRepoInfo: null,
+      repoList: [],
+      selectedSearchedItem: null,
+      selectedRepo: null,
+      browsingPath: '',
+      searchStatus: SearchStatus.IDLE,
+      errMessage: '',
+    };
+  }
+
+  componentDidMount() {
+    this.fetchRepoInfo();
+    this.fetchRepoList();
+  }
+
+  fetchRepoInfo = async () => {
+    try {
+      const res = await seafileAPI.getRepoInfo(this.props.repoID);
+      const repoInfo = new RepoInfo(res.data);
+      this.props.setSelectedPath('/');
+      this.setState({
+        currentRepoInfo: repoInfo,
+        selectedRepo: repoInfo,
+      });
+    } catch (err) {
+      const errMessage = Utils.getErrorMsg(err);
+      toaster.danger(errMessage);
+    }
+  };
+
+  fetchRepoList = async () => {
+    try {
+      const res = await seafileAPI.listRepos();
+      const repos = res.data.repos;
+      const repoList = repos.filter((repo) => repo.permission === 'rw' && repo.repo_id !== this.props.repoID);
+      const sortedRepoList = Utils.sortRepos(repoList, 'name', 'asc');
+      const selectedRepo = sortedRepoList.find((repo) => repo.repo_id === this.props.repoID);
+      const path = this.props.path.substring(0, this.props.path.length - 1);
+
+      this.props.setSelectedPath(path);
+      this.setState({
+        repoList: sortedRepoList,
+        selectedRepo: selectedRepo || this.state.selectedRepo,
+      });
+    } catch (error) {
+      const errMessage = Utils.getErrorMsg(error);
+      toaster.danger(errMessage);
+    }
+  };
+
+  onUpdateSearchStatus = (status) => {
+    this.setState({ searchStatus: status });
+  };
+
+  onUpdateRepoList = (repoList) => {
+    this.setState({ repoList: repoList });
+  };
+
+  selectSearchedItem = (item) => {
+    this.setState({ selectedSearchedItem: item });
+  };
+
+  onSelectSearchedRepo = (repo) => {
+    this.setState({
+      selectedRepo: repo,
+      mode: repo.repo_id === this.props.repoID ? MODE_TYPE_MAP.ONLY_CURRENT_LIBRARY : MODE_TYPE_MAP.ONLY_OTHER_LIBRARIES,
+    });
+  };
+
+  selectPath = (path) => {
+    this.props.setSelectedPath(path);
+  };
+
+  setBrowsingPath = (path) => {
+    this.setState({ browsingPath: path });
+  };
+
+  handleSubmit = () => {
+    if (this.props.handleSubmit) {
+      this.props.handleSubmit();
+    }
+  };
+
+  onCancel = () => {
+    if (this.props.onCancel) {
+      this.props.onCancel();
+    }
+  };
+
+  onDirentItemClick = (repo, selectedPath) => {
+    this.props.selectRepo(repo);
+    this.props.setSelectedPath(selectedPath);
+    this.props.setErrMessage('');
+    this.setState({ selectedRepo: repo });
+  };
+
+  onRepoItemClick = (repo) => {
+    this.props.selectRepo(repo);
+    this.props.setSelectedPath('/');
+    this.props.setErrMessage('');
+    this.setState({ selectedRepo: repo });
+  };
+
+  selectedMode = (mode) => {
+    const { repoID, path } = this.props;
+
+    // reset selecting status
+    this.props.selectRepo({ repo_id: repoID });
+    this.props.setSelectedPath(path);
+
+    this.setState({
+      mode,
+      selectedSearchedItem: null,
+      searchStatus: SearchStatus.RESULTS,
+    });
+  };
+
+  render() {
+    const { path, selectedPath, isSupportOtherLibraries, errMessage } = this.props;
+    const { mode, searchStatus, selectedSearchedItem, selectedRepo, repoList, currentRepoInfo, browsingPath } = this.state;
+    let repoListWrapperKey = 'repo-list-wrapper';
+    if (selectedSearchedItem && selectedSearchedItem.repoID) {
+      repoListWrapperKey = `${repoListWrapperKey}-${selectedSearchedItem.repoID}`;
+    }
+
+    return (
+      <Row>
+        <Col className='repo-list-col border-right'>
+          {isPro && (
+            <Searcher
+              searchStatus={searchStatus}
+              onUpdateSearchStatus={this.onUpdateSearchStatus}
+              onDirentItemClick={this.onDirentItemClick}
+              selectSearchedItem={this.selectSearchedItem}
+              selectRepo={this.onSelectSearchedRepo}
+              selectPath={this.selectPath}
+              setBrowsingPath={this.setBrowsingPath}
+            />
+          )}
+          <LibraryOption
+            mode={MODE_TYPE_MAP.ONLY_CURRENT_LIBRARY}
+            label={gettext('Current Library')}
+            currentMode={mode}
+            selectedMode={this.selectedMode}
+          />
+          {isSupportOtherLibraries && (
+            <LibraryOption
+              mode={MODE_TYPE_MAP.ONLY_OTHER_LIBRARIES}
+              label={gettext('Other Libraries')}
+              currentMode={mode}
+              selectedMode={this.selectedMode}
+            />
+          )}
+          <LibraryOption
+            mode={MODE_TYPE_MAP.RECENTLY_USED}
+            label={gettext('Recently Used')}
+            currentMode={mode}
+            selectedMode={this.selectedMode}
+          />
+        </Col>
+        <Col className='file-list-col'>
+          <ModalBody>
+            {currentRepoInfo && (
+              <RepoListWrapper
+                key={repoListWrapperKey}
+                mode={mode}
+                currentPath={path}
+                isBrowsing={searchStatus === SearchStatus.BROWSING}
+                browsingPath={browsingPath}
+                selectedItemInfo={selectedSearchedItem}
+                currentRepoInfo={currentRepoInfo}
+                selectedRepo={selectedRepo}
+                selectedPath={selectedPath}
+                repoList={repoList}
+                handleClickRepo={this.onRepoItemClick}
+                handleClickDirent={this.onDirentItemClick}
+              />
+            )}
+            {errMessage && <Alert color="danger" className="alert-message">{errMessage}</Alert>}
+          </ModalBody>
+          <ModalFooter>
+            <Button color="secondary" onClick={this.onCancel}>{gettext('Cancel')}</Button>
+            <Button color="primary" onClick={this.handleSubmit}>{gettext('Submit')}</Button>
+          </ModalFooter>
+        </Col>
+      </Row>
+    );
+  }
+}
+
+SelectDirentBody.propTypes = {
+  path: PropTypes.string,
+  selectedPath: PropTypes.string,
+  repoID: PropTypes.string,
+  isSupportOtherLibraries: PropTypes.bool,
+  onCancel: PropTypes.func,
+  handleSubmit: PropTypes.func,
+  selectRepo: PropTypes.func,
+  setSelectedPath: PropTypes.func,
+  setErrMessage: PropTypes.func,
+};
+
+SelectDirentBody.defaultProps = {
+  isSupportOtherLibraries: true,
+};
+
+export default SelectDirentBody;