Improve move and copy dialog ui components (#6467)

* implement catalog view in move dialog

* update move dialog ui components

* improve move dialog ui

* remove debug info

* improve copy dialog ui

* improve search view ui in move and copy dialog, refactor part of file-chooser.js and file-chooser.css

* handle cases where repo_name is too long, truncate text with an ellipsis, remove search container border

* handle cases where repo_name too long in search result item

* update move and dialog ui details

* add radius to repo list item

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Button, Modal, ModalHeader, ModalFooter, ModalBody, Alert } from 'reactstrap';
+import { Button, Modal, ModalHeader, ModalFooter, ModalBody, Alert, Row, Col } from 'reactstrap';
 import { gettext } from '../../utils/constants';
 import { Utils } from '../../utils/utils';
 import FileChooser from '../file-chooser/file-chooser';
@@ -25,17 +25,11 @@ class MoveDirent extends React.Component {
     this.state = {
       repo: { repo_id: this.props.repoID },
       selectedPath: this.props.path,
-      errMessage: ''
+      errMessage: '',
+      mode: 'only_current_library',
     };
   }
 
-  shouldComponentUpdate(nextProps, nextState) {
-    if (this.state.errMessage === nextState.errMessage) {
-      return false;
-    }
-    return true;
-  }
-
   handleSubmit = () => {
     if (this.props.isMultipleOperation) {
       this.moveItems();
@@ -151,40 +145,64 @@ class MoveDirent extends React.Component {
     });
   };
 
-  render() {
+  onSelectedMode = (mode) => {
+    this.setState({ mode: mode });
+  };
+
+  renderTitle = () => {
+    const { dirent, isMultipleOperation } = this.props;
     let title = gettext('Move {placeholder} to');
-    if (!this.props.isMultipleOperation) {
-      title = title.replace('{placeholder}', '<span class="op-target text-truncate mx-1">' + Utils.HTMLescape(this.props.dirent.name) + '</span>');
+
+    if (isMultipleOperation) {
+      return gettext('Move selected item(s) to:');
     } else {
-      title = gettext('Move selected item(s) to:');
+      return title.replace('{placeholder}', `<span class="op-target text-truncate mx-1">${Utils.HTMLescape(dirent.name)}</span>`);
     }
-    let mode = 'current_repo_and_other_repos';
-    const { dirent, selectedDirentList, isMultipleOperation } = this.props;
-    const movedDirent = dirent ? dirent : selectedDirentList[0];
+  };
+
+  render() {
+    const { dirent, selectedDirentList, isMultipleOperation, repoID, path } = this.props;
+    const { mode, errMessage } = this.state;
+
+    const movedDirent = dirent || selectedDirentList[0];
     const { permission } = movedDirent;
     const { isCustomPermission } = Utils.getUserPermission(permission);
-    if (isCustomPermission) {
-      mode = 'only_current_library';
-    }
+
+    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 isOpen={true} toggle={this.toggle}>
+      <Modal className='custom-modal' isOpen={true} toggle={this.toggle}>
         <ModalHeader toggle={this.toggle}>
-          {isMultipleOperation ? title : <div dangerouslySetInnerHTML={{ __html: title }} className="d-flex mw-100"></div>}
+          {isMultipleOperation ? this.renderTitle() : <div dangerouslySetInnerHTML={{ __html: this.renderTitle() }} className='d-flex mw-100'></div>}
         </ModalHeader>
-        <ModalBody>
-          <FileChooser
-            repoID={this.props.repoID}
-            currentPath={this.props.path}
-            onDirentItemClick={this.onDirentItemClick}
-            onRepoItemClick={this.onRepoItemClick}
-            mode={mode}
-          />
-          {this.state.errMessage && <Alert color="danger" className="mt-2">{this.state.errMessage}</Alert>}
-        </ModalBody>
-        <ModalFooter>
-          <Button color="secondary" onClick={this.toggle}>{gettext('Cancel')}</Button>
-          <Button color="primary" onClick={this.handleSubmit}>{gettext('Submit')}</Button>
-        </ModalFooter>
+        <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>
       </Modal>
     );
   }