[Continue S3 support] [Handle set configuration errors]

src/containers/AddMount/AddMount.js

@@ -8,6 +8,8 @@ import Text from '../../components/UI/Text/Text';
 import {notifyError} from '../../redux/actions/error_actions';
 import {addRemoteMount, addS3Mount} from '../../redux/actions/mount_actions';
 import {createModalConditionally} from '../../utils';
+import DropDown from '../../components/UI/DropDown/DropDown';
+import * as Constants from '../../constants';
 
 const mapStateToProps = state => {
   return {
@@ -19,7 +21,7 @@ const mapStateToProps = state => {
 const mapDispatchToProps = dispatch => {
   return {
     addRemoteMount: (hostNameOrIp, port, token) => dispatch(addRemoteMount(hostNameOrIp, port, token)),
-    addS3Mount: (name, accessKey, secretKey, region, bucketName) => dispatch(addS3Mount(name, accessKey, secretKey, region, bucketName)),
+    addS3Mount: (name, accessKey, secretKey, region, bucketName, url) => dispatch(addS3Mount(name, accessKey, secretKey, region, bucketName, url)),
     notifyError: (msg, critical, callback) => dispatch(notifyError(msg, critical, callback)),
   }
 };
@@ -32,6 +34,7 @@ const default_state = {
   HostNameOrIp: '',
   Name: '',
   Port: 20000,
+  Provider: '',
   Region: 'any',
   SecretKey: '',
   Token: '',
@@ -51,7 +54,7 @@ export default connect(mapStateToProps, mapDispatchToProps)(class extends Compon
         this.props.notifyError('Remote host already exists');
       } else {
         this.setState({
-          Display: false
+          DisplayRemote: false
         }, () => {
           this.props.addRemoteMount(this.state.HostNameOrIp, this.state.Port, this.state.Token);
           this.setState({
@@ -63,7 +66,28 @@ export default connect(mapStateToProps, mapDispatchToProps)(class extends Compon
   };
 
   addS3Mount = () => {
-
+    if (this.state.Name.length === 0) {
+      this.props.notifyError('Name cannot be empty.');
+    } else if (this.state.AccessKey.length === 0) {
+      this.props.notifyError('AccessKey cannot be empty.');
+    } else if (this.state.SecretKey.length === 0) {
+      this.props.notifyError('SecretKey cannot be empty.')
+    } else {
+      const provider = 'S3' + this.state.Name;
+      if (this.props.S3Mounts.includes(provider)) {
+        this.props.notifyError('Remote host already exists');
+      } else {
+        this.setState({
+          DisplayS3: false
+        }, () => {
+          this.props.addS3Mount(this.state.Name, this.state.AccessKey, this.state.SecretKey,
+            this.state.Region, this.state.BucketName, Constants.S3_PROVIDER_URL[this.state.Provider]);
+          this.setState({
+            ...default_state,
+          });
+        });
+      }
+    }
   };
 
   handleAddS3Mount = () => {
@@ -112,21 +136,13 @@ export default connect(mapStateToProps, mapDispatchToProps)(class extends Compon
                type={'text'}
                value={this.state.Token}/>
         <div style={{paddingTop: 'var(--default_spacing)'}}/>
-        <table cellSpacing={1}
-               width="100%">
-          <tbody>
-          <tr>
-            <td width="50%">
-              <Button buttonStyles={{width: '100%'}}
-                      clicked={() => this.addRemoteMount()}>OK</Button>
-            </td>
-            <td width="50%">
-              <Button buttonStyles={{width: '100%'}}
-                      clicked={() => this.setState({DisplayRemote: false})}>Cancel</Button>
-            </td>
-          </tr>
-          </tbody>
-        </table>
+        <div style={{display: 'flex', flexDirection: 'row'}}>
+          <Button buttonStyles={{width: '100%'}}
+                  clicked={() => this.addRemoteMount()}>OK</Button>
+          <div style={{paddingLeft: 'var(--default_spacing)'}}/>
+          <Button buttonStyles={{width: '100%'}}
+                  clicked={() => this.setState({DisplayRemote: false})}>Cancel</Button>
+        </div>
       </Box>
     ));
 
@@ -135,33 +151,49 @@ export default connect(mapStateToProps, mapDispatchToProps)(class extends Compon
            dxStyle={{width: 'auto', height: 'auto', padding: 'var(--default_spacing)'}}>
         <h1 style={{textAlign: 'center', paddingBottom: 'var(--default_spacing)'}}>Add S3
           Mount</h1>
-        <Text text={'Name'}
-              textAlign={'left'}
-              type={'Heading2'}/>
-        <input onChange={e => this.setState({Name: e.target.value.trim()})}
-               className={'ConfigurationItemInput'}
-               style={{width: '100%'}}
-               type={'text'}
-               value={this.state.Name}/>
+        <div style={{display: 'flex', flexDirection: 'row'}}>
+          <Text text={'Name'}
+                textAlign={'left'}
+                type={'Heading2'}/>
+          <div style={{paddingLeft: 'var(--default_spacing)'}}/>
+          <Text text={'Provider'}
+                textAlign={'left'}
+                type={'Heading2'}/>
+        </div>
+        <div style={{display: 'flex', flexDirection: 'row'}}>
+          <input onChange={e => this.setState({Name: e.target.value.trim()})}
+                 className={'ConfigurationItemInput'}
+                 style={{width: '100%'}}
+                 type={'text'}
+                 value={this.state.Name}/>
+          <div style={{paddingLeft: 'var(--default_spacing)'}}/>
+          <DropDown changed={e => this.setState({Provider: e.target.value})}
+                    items={Constants.S3_PROVIDER_LIST}
+                    selected={Constants.S3_PROVIDER_LIST[0]}/>
+        </div>
         <div style={{paddingTop: 'var(--default_spacing)'}}/>
-        <Text text={'Bucket Name (optional)'}
-              textAlign={'left'}
-              type={'Heading2'}/>
-        <input onChange={e => this.setState({BucketName: e.target.value})}
-               className={'ConfigurationItemInput'}
-               style={{width: '100%'}}
-               type={'text'}
-               value={this.state.BucketName}/>
+        <div style={{display: 'flex', flexDirection: 'row'}}>
+          <Text text={'Bucket Name (optional)'}
+                textAlign={'left'}
+                type={'Heading2'}/>
+          <div style={{paddingLeft: 'var(--default_spacing)'}}/>
+          <Text text={'Region'}
+                textAlign={'left'}
+                type={'Heading2'}/>
+        </div>
+        <div style={{display: 'flex', flexDirection: 'row'}}>
+          <input onChange={e => this.setState({BucketName: e.target.value})}
+                 className={'ConfigurationItemInput'}
+                 style={{width: '100%'}}
+                 type={'text'}
+                 value={this.state.BucketName}/>
+          <div style={{paddingLeft: 'var(--default_spacing)'}}/>
+          <input onChange={e => this.setState({Region: e.target.value})}
+                 className={'ConfigurationItemInput'}
+                 type={'text'}
+                 value={this.state.Region}/>
+        </div>
         <div style={{paddingTop: 'var(--default_spacing)'}}/>
-        <Text text={'Region'}
-              textAlign={'left'}
-              type={'Heading2'}/>
-        <input onChange={e => this.setState({Region: e.target.value})}
-               className={'ConfigurationItemInput'}
-               type={'text'}
-               value={this.state.Region}/>
-        <div style={{paddingTop: 'var(--default_spacing)'}}/>
-
         <div style={{display: 'flex', flexDirection: 'row'}}>
           <Text text={'Access Key'}
                 textAlign={'left'}
@@ -182,23 +214,15 @@ export default connect(mapStateToProps, mapDispatchToProps)(class extends Compon
                  type={'text'}
                  value={this.state.SecretKey}/>
         </div>
-
-        <div style={{paddingTop: 'var(--default_spacing)'}}/>
-        <table cellSpacing={1}
-               width="100%">
-          <tbody>
-          <tr>
-            <td width="50%">
-              <Button buttonStyles={{width: '100%'}}
-                      clicked={() => this.addS3Mount()}>OK</Button>
-            </td>
-            <td width="50%">
-              <Button buttonStyles={{width: '100%'}}
-                      clicked={() => this.setState({DisplayS3: false})}>Cancel</Button>
-            </td>
-          </tr>
-          </tbody>
-        </table>
+        <div style={{paddingTop: 'calc(var(--default_spacing) * 2)'}}/>
+        <div style={{display: 'flex', flexDirection: 'row'}}>
+          <div style={{width: '200%'}}/>
+          <Button buttonStyles={{width: '100%'}}
+                  clicked={() => this.addS3Mount()}>OK</Button>
+          <div style={{paddingLeft: 'var(--default_spacing)'}}/>
+          <Button buttonStyles={{width: '100%'}}
+                  clicked={() => this.setState({DisplayS3: false})}>Cancel</Button>
+        </div>
       </Box>
     ));
 

src/containers/MountItems/MountItem/MountItem.js

@@ -183,7 +183,7 @@ export default connect(mapStateToProps, mapDispatchToProps)(props => {
         <Text
           col={configButton ? 6 : 0}
           rowSpan={5}
-          text={props.remote ? props.provider.substr(6) : props.provider}
+          text={props.remote ? props.provider.substr(6) : props.s3 ? props.provider.substr(2) : props.provider}
           type={'Heading2'}/>
         {((props.provider === 'Skynet') && (props.MState.Mounted)) ? (
           <a href={'#'}

src/containers/MountItems/MountItems.js

@@ -80,6 +80,7 @@ class MountItems extends IPCContainer {
 
     this.sendRequest(Constants.IPC_Detect_Mount, {
       RemoteMounts: this.props.RemoteMounts,
+      S3Mounts: this.props.S3Mounts,
       Provider: provider,
       Version: this.props.InstalledVersion,
     });