[multi storage backends] offer 'storage backend' options in 'repo (#3960)

create' dialog

* fixup for 'my libraries - create repo'

frontend/src/components/dialog/create-repo-dialog.js

@@ -1,7 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import Select from 'react-select';
 import { Button, Modal, ModalHeader, Input, ModalBody, ModalFooter, Form, FormGroup, Label, Alert } from 'reactstrap';
-import { gettext, enableEncryptedLibrary, repoPasswordMinLength } from '../../utils/constants';
+import { gettext, enableEncryptedLibrary, repoPasswordMinLength, storages } from '../../utils/constants';
 
 const propTypes = {
   libraryType: PropTypes.string.isRequired,
@@ -20,6 +21,7 @@ class CreateRepoDialog extends React.Component {
       password2: '',
       errMessage: '',
       permission: 'rw',
+      storage_id: storages.length ? storages[0].id : '',
       isSubmitBtnActive: false,
     };
     this.newInput = React.createRef();
@@ -44,17 +46,14 @@ class CreateRepoDialog extends React.Component {
   }
 
   handleSubmit = () => {
-    let isValid= this.validateInputParams();
+    let isValid = this.validateInputParams();
     if (isValid) {
-      let repoName = this.state.repoName.trim();
-      let password = this.state.encrypt ? this.state.password1 : '';
-      let permission= this.state.permission;
-      let repo = this.createRepo(repoName, password, permission);
+      let repoData = this.prepareRepoData();
       if (this.props.libraryType === 'department') {
-        this.props.onCreateRepo(repo, 'department');
+        this.props.onCreateRepo(repoData, 'department');
         return;
       }
-      this.props.onCreateRepo(repo);
+      this.props.onCreateRepo(repoData);
     }
   } 
 
@@ -118,6 +117,10 @@ class CreateRepoDialog extends React.Component {
     this.setState({permission: permission});
   }
 
+  handleStorageInputChange = (selectedItem) => {
+    this.setState({storage_id: selectedItem.value});
+  }
+
   onEncrypted = (e) => {
     let isChecked = e.target.checked;
     this.setState({
@@ -126,25 +129,18 @@ class CreateRepoDialog extends React.Component {
     });
   }
 
-  createRepo = (repoName, password, permission) => {
+  prepareRepoData = () => {
     let libraryType = this.props.libraryType;
-    let encrypt = password ? true : false;
+
+    let repoName = this.state.repoName.trim();
+    let password = this.state.encrypt ? this.state.password1 : '';
+    let permission = this.state.permission;
+
     let repo = null;
     if (libraryType === 'mine' || libraryType === 'public') {
       repo = {
-        id: null,
         name: repoName,
-        desc: '',
-        encrypted: encrypt,
-        passwd: password,
-        passwd1: password,
-        passwd2: password,
-        mtime: 0,
-        mtime_relative: '',
-        owner: '-',
-        owner_nickname: '-',
-        permission: 'rw',
-        storage_name: '-',
+        passwd: password
       };
     }
     if (libraryType === 'group') {
@@ -160,6 +156,12 @@ class CreateRepoDialog extends React.Component {
         passwd: password,
       };
     }
+  
+    const storage_id = this.state.storage_id;
+    if (storage_id) {
+      repo.storage_id = storage_id;
+    }
+
     return repo;
   }
 
@@ -179,6 +181,17 @@ class CreateRepoDialog extends React.Component {
                 onChange={this.handleRepoNameChange}
               />
             </FormGroup>
+            {storages.length > 0 && (
+              <FormGroup>
+                <Label for="storage-backend">{gettext('Storage Backend')}</Label>
+                <Select
+                  id="storage-backend"
+                  defaultValue={{value: storages[0].id, label: storages[0].name}}
+                  options={storages.map((item, index) => { return {value: item.id, label: item.name}; })}
+                  onChange={this.handleStorageInputChange}
+                /> 
+              </FormGroup>
+            )}
             {this.props.libraryType === 'group' && (
               <FormGroup>
                 <Label for="exampleSelect">{gettext('Permission')}</Label>
@@ -191,7 +204,7 @@ class CreateRepoDialog extends React.Component {
             {enableEncryptedLibrary &&
               <div>
                 <FormGroup check>
-                  <Input type="checkbox" id="encrypt" onChange={this.onEncrypted}/>
+                  <Input type="checkbox" id="encrypt" onChange={this.onEncrypted} />
                   <Label for="encrypt">{gettext('Encrypt')}</Label>
                 </FormGroup>
                 {!this.state.disabled && 

frontend/src/models/repo.js

@@ -18,6 +18,7 @@ class Repo {
     this.type = object.type;
     this.starred = object.starred;
     this.status = object.status;
+    this.storage_name = object.storage_name;
     if (object.is_admin != undefined) {
       this.is_admin = object.is_admin;
     }

frontend/src/pages/my-libs/my-libs.js

@@ -80,18 +80,18 @@ class MyLibraries extends Component {
   }
 
   onCreateRepo = (repo) => {
-    let permission = repo.permission;
     seafileAPI.createMineRepo(repo).then((res) => {
-      let repo = {
+      const newRepo = new Repo({
         repo_id: res.data.repo_id,
         repo_name: res.data.repo_name,
         size: res.data.repo_size,
         mtime: res.data.mtime,
         owner_email: res.data.email,
         encrypted: res.data.encrypted,
-        permission: permission,
-      };
-      this.state.repoList.unshift(repo);
+        permission: res.data.permission,
+        storage_name: res.data.storage_name
+      });
+      this.state.repoList.unshift(newRepo);
       this.setState({repoList: this.state.repoList});
     }).catch(error => {
       let errMessage = Utils.getErrorMsg(error);

frontend/src/pages/my-libs/mylib-repo-list-view.js

@@ -85,10 +85,10 @@ class MylibRepoListView extends React.Component {
           <tr>
             <th width="4%"></th>
             <th width="4%"><span className="sr-only">{gettext('Library Type')}</span></th>
-            <th width="38%"><a className="d-block table-sort-op" href="#" onClick={this.sortByName}>{gettext('Name')} {this.props.sortBy === 'name' && sortIcon}</a></th>
+            <th width={showStorageBackend ? '33%' : '38%'}><a className="d-block table-sort-op" href="#" onClick={this.sortByName}>{gettext('Name')} {this.props.sortBy === 'name' && sortIcon}</a></th>
             <th width="14%"><span className="sr-only">{gettext('Actions')}</span></th>
             <th width={showStorageBackend ? '15%' : '20%'}><a className="d-block table-sort-op" href="#" onClick={this.sortBySize}>{gettext('Size')} {this.props.sortBy === 'size' && sortIcon}</a></th>
-            {showStorageBackend ? <th width="10%">{gettext('Storage backend')}</th> : null}
+            {showStorageBackend ? <th width="15%">{gettext('Storage Backend')}</th> : null}
             <th width={showStorageBackend ? '15%' : '20%'}><a className="d-block table-sort-op" href="#" onClick={this.sortByTime}>{gettext('Last Update')} {this.props.sortBy === 'time' && sortIcon}</a></th>
           </tr>
         </thead>

seahub/templates/base_for_react.html

@@ -67,7 +67,6 @@
             resumableUploadFileBlockSize: '{{ resumable_upload_file_block_size }}',
             // storage backends
             storages: (function () {
-              // for 'create repo' & 'storage backend' column in 'my libs'
               var storages = [];
               {% for storage in storages %}
               storages.push({