[add] add file chooser modes and fix share text page (#2947)

frontend/src/components/dialog/add-related-file-dialog.js

@@ -95,6 +95,7 @@ class AddRelatedFileDialog extends React.Component {
             repoID={this.props.repoID}
             onDirentItemClick={this.onDirentItemClick}
             onRepoItemClick={this.onRepoItemClick}
+            mode="current_repo_and_other_repos"
           />
           {this.state.errMessage && <Alert color="danger">{this.state.errMessage}</Alert>}
         </ModalBody>

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

@@ -164,6 +164,7 @@ class CopyDirent extends React.Component {
             repoID={this.props.repoID}
             onDirentItemClick={this.onDirentItemClick}
             onRepoItemClick={this.onRepoItemClick}
+            mode="current_repo_and_other_repos"
           />
           {this.state.errMessage && <Alert color="danger" style={{margin: '0.5rem'}}>{this.state.errMessage}</Alert>}
         </ModalBody>

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

@@ -164,6 +164,7 @@ class MoveDirent extends React.Component {
             repoID={this.props.repoID}
             onDirentItemClick={this.onDirentItemClick}
             onRepoItemClick={this.onRepoItemClick}
+            mode="current_repo_and_other_repos"
           />
           {this.state.errMessage && <Alert color="danger" style={{margin: '0.5rem'}}>{this.state.errMessage}</Alert>}
         </ModalBody>

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

@@ -6,7 +6,6 @@ import { seafileAPI } from '../../utils/seafile-api';
 import FileChooser from '../file-chooser/file-chooser';
 
 const propTypes = {
-  repoID: PropTypes.string.isRequired,
   sharedToken: PropTypes.string.isRequired,
   toggleCancel: PropTypes.func.isRequired,
   handleSaveSharedFile: PropTypes.func.isRequired,
@@ -51,14 +50,23 @@ class SaveSharedFileDialog extends React.Component {
     }
   }
 
+  onRepoItemClick = (repo) => {
+    this.setState({
+      repo: repo,
+      selectedPath: '/',
+    });
+  }
+
   render() {
     return (
       <Modal isOpen={true} className="sf-save-file">
-        <ModalHeader toggle={this.props.toggleCancel}>{gettext('Select Folder')}</ModalHeader>
+        <ModalHeader toggle={this.props.toggleCancel}>{gettext('Save to:')}</ModalHeader>
         <ModalBody>
           <FileChooser
             isShowFile={false}
             onDirentItemClick={this.onDirentItemClick}
+            onRepoItemClick={this.onRepoItemClick}
+            mode="only_all_repos"
           />
           {this.state.errMessage && <Alert color="danger">{this.state.errMessage}</Alert>}
         </ModalBody>

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

@@ -13,6 +13,7 @@ const propTypes = {
   repoID: PropTypes.string,
   onDirentItemClick: PropTypes.func,
   onRepoItemClick: PropTypes.func,
+  mode: PropTypes.oneOf(['current_repo_and_other_repos', 'only_all_repos', 'only_current_library']),
 };
 
 class FileChooser extends React.Component {
@@ -99,10 +100,11 @@ class FileChooser extends React.Component {
   }
 
   render() {
+    const mode = this.props.mode;
+    let libName = mode === 'current_repo_and_other_repos' ? gettext('Other Libraries') : gettext('Libraries');
     return (
       <div className="file-chooser-container">
-        {
+        {(mode === 'current_repo_and_other_repos' || mode === 'only_current_library') &&
-          this.props.repoID &&
           <div className="list-view">
             <div className="list-view-header">
               <span className={`item-toggle fa ${this.state.isCurrentRepoShow ? 'fa-caret-down' : 'fa-caret-right'}`} onClick={this.onCurrentRepoToggle}></span>
@@ -122,24 +124,26 @@ class FileChooser extends React.Component {
             }
           </div>
         }
-        <div className="list-view">
+        {mode !== 'only_current_library' &&
-          <div className="list-view-header">
+          <div className="list-view">
-            <span className={`item-toggle fa ${this.state.isOtherRepoShow ? 'fa-caret-down' : 'fa-caret-right'}`} onClick={this.onOtherRepoToggle}></span>
+            <div className="list-view-header">
-            <span className="library">{gettext('Other Libraries')}</span>
+              <span className={`item-toggle fa ${this.state.isOtherRepoShow ? 'fa-caret-down' : 'fa-caret-right'}`} onClick={this.onOtherRepoToggle}></span>
+              <span className="library">{libName}</span>
+            </div>
+            {
+              this.state.isOtherRepoShow && 
+              <RepoListView 
+                initToShowChildren={false}
+                repoList={this.state.repoList}
+                selectedRepo={this.state.selectedRepo}
+                selectedPath={this.state.selectedPath}
+                onRepoItemClick={this.onRepoItemClick} 
+                onDirentItemClick={this.onDirentItemClick}
+                isShowFile={this.props.isShowFile}
+              /> 
+            }
           </div>
-          {
+        }
-            this.state.isOtherRepoShow && 
-            <RepoListView 
-              initToShowChildren={false}
-              repoList={this.state.repoList}
-              selectedRepo={this.state.selectedRepo}
-              selectedPath={this.state.selectedPath}
-              onRepoItemClick={this.onRepoItemClick} 
-              onDirentItemClick={this.onDirentItemClick}
-              isShowFile={this.props.isShowFile}
-            /> 
-          }
-        </div>
       </div>
     );
   }

frontend/src/shared-file-view-text.js

@@ -5,6 +5,8 @@ import CodeMirror from 'react-codemirror';
 import { Button } from 'reactstrap';
 import { Utils } from './utils/utils';
 import watermark from 'watermark-dom';
+import SaveSharedFileDialog from './components/dialog/save-shared-file-dialog';
+import toaster from './components/toast';
 import { serviceURL, gettext, siteRoot, mediaUrl, logoPath, logoWidth, logoHeight, siteTitle } from './utils/constants';
 
 import 'codemirror/lib/codemirror.css';
@@ -42,6 +44,9 @@ class SharedFileViewText extends React.Component {
 
   constructor(props) {
     super(props);
+    this.state = {
+      showSaveSharedFileDialog: false,
+    };
   }
 
   changeEncode = (e) => {
@@ -68,6 +73,18 @@ class SharedFileViewText extends React.Component {
     );
   }
 
+  handleSaveSharedFileDialog = () => {
+    this.setState({
+      showSaveSharedFileDialog: !this.state.showSaveSharedFileDialog
+    });
+  }
+
+  saveFileSuccess = () => {
+    let msg = gettext('Successfully saved {fileName}.');
+    msg = msg.replace('{fileName}', fileName);
+    toaster.success(msg);
+  }
+
   render() {
     return (
       <div className="shared-file-view-md">
@@ -94,7 +111,7 @@ class SharedFileViewText extends React.Component {
                 }{' '}
                 {(trafficOverLimit === 'False') &&
                   <Button color="success" className="shared-file-op-btn">
-                    <a href="?dl=1">{gettext('Download')}({Utils.bytesToSize(fileSize)})</a>
+                    <a href="?dl=1">{gettext('Download')}{' '}({Utils.bytesToSize(parseInt(fileSize))})</a>
                   </Button>
                 }
               </div>
@@ -104,7 +121,14 @@ class SharedFileViewText extends React.Component {
             {this.fileEncode()}
             <div className="txt-view">
               { err ? <div className="file-view-tip error">{err}</div> :
-                <CodeMirror ref="editor-sql" value={fileContent} options={options}/>}
+              <CodeMirror ref="editor-sql" value={fileContent} options={options}/>}
+              { this.state.showSaveSharedFileDialog &&
+                <SaveSharedFileDialog
+                  sharedToken={sharedToken}
+                  toggleCancel={this.handleSaveSharedFileDialog}
+                  handleSaveSharedFile={this.saveFileSuccess}
+                />
+              }
             </div>
           </div>
         </div>