Add custom S3 items

src/constants.js

@@ -76,9 +76,16 @@ exports.REPERTORY_LOCATIONS = {
   win32: '%LOCALAPPDATA%\\repertory',
 };
 
-exports.S3_PROVIDER_LIST = ['Filebase'];
+const _S3_CUSTOM_PROVIDER = 'Custom...';
+exports.S3_CUSTOM_PROVIDER = _S3_CUSTOM_PROVIDER;
+exports.S3_PROVIDER_LIST = ['Filebase', _S3_CUSTOM_PROVIDER];
 
-exports.S3_REGION_PROVIDER_REGION = ['us-east-1'];
+const _S3_CUSTOM_REGION = 'Custom...';
+exports.S3_CUSTOM_REGION = _S3_CUSTOM_REGION;
+exports.S3_REGION_PROVIDER_REGION = [
+  ['us-east-1', _S3_CUSTOM_REGION],
+  ['any', _S3_CUSTOM_REGION],
+];
 
 exports.S3_PROVIDER_URL = {
   Filebase: 'https://s3.filebase.com',

src/containers/AddMount/AddMount.js

@@ -21,9 +21,11 @@ const default_state = {
   Name: '',
   Port: 20000,
   Provider: Constants.S3_PROVIDER_LIST[0],
-  Region: Constants.S3_REGION_PROVIDER_REGION[0],
+  Region: Constants.S3_REGION_PROVIDER_REGION[0][0],
   SecretKey: '',
   Token: '',
+  CustomURL: '',
+  CustomRegion: '',
 };
 
 class AddMount extends Component {
@@ -55,12 +57,18 @@ class AddMount extends Component {
   };
 
   addS3Mount = () => {
+    const isCustomProvider = this.state.Provider === Constants.S3_CUSTOM_PROVIDER;
+    const isCustomRegion = this.state.Region === Constants.S3_CUSTOM_REGION;
     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 if (isCustomProvider && !this.state.CustomURL.trim()) {
+      this.props.notifyError('Custom URL cannot be empty.');
+    } else if (isCustomRegion && !this.state.CustomRegion.trim()) {
+      this.props.notifyError('Custom Region cannot be empty.');
     } else {
       const provider = 'S3' + this.state.Name;
       if (this.props.S3Mounts.includes(provider)) {
@@ -75,9 +83,11 @@ class AddMount extends Component {
               this.state.Name,
               this.state.AccessKey,
               this.state.SecretKey,
-              this.state.Region,
+              isCustomRegion ? this.state.CustomRegion : this.state.Region,
               this.state.BucketName,
-              Constants.S3_PROVIDER_URL[this.state.Provider]
+              isCustomProvider
+                ? this.state.CustomURL
+                : Constants.S3_PROVIDER_URL[this.state.Provider]
             );
             this.setState({
               ...default_state,
@@ -190,12 +200,37 @@ class AddMount extends Component {
           />
           <div style={{ paddingLeft: 'var(--default_spacing)' }} />
           <DropDown
-            changed={(e) => this.setState({ Provider: e.target.value })}
+            changed={(e) =>
+              this.setState({
+                Provider: e.target.value,
+                Region:
+                  Constants.S3_REGION_PROVIDER_REGION[
+                    Constants.S3_PROVIDER_LIST.indexOf(e.target.value)
+                  ][0],
+              })
+            }
             items={Constants.S3_PROVIDER_LIST}
             selected={this.state.Provider}
           />
         </div>
         <div style={{ paddingTop: 'var(--default_spacing)' }} />
+        {this.state.Provider === Constants.S3_CUSTOM_PROVIDER ? (
+          <div>
+            <div style={{ display: 'flex', flexDirection: 'row' }}>
+              <Text text={'Custom URL'} textAlign={'left'} type={'Heading2'} />
+            </div>
+            <div style={{ display: 'flex', flexDirection: 'row' }}>
+              <input
+                onChange={(e) => this.setState({ CustomURL: e.target.value })}
+                className={'ConfigurationItemInput'}
+                style={{ width: '100%' }}
+                type={'text'}
+                value={this.state.CustomURL}
+              />
+            </div>
+            <div style={{ paddingTop: 'var(--default_spacing)' }} />
+          </div>
+        ) : null}
         <div style={{ display: 'flex', flexDirection: 'row' }}>
           <Text text={'Bucket Name (optional)'} textAlign={'left'} type={'Heading2'} />
           <div style={{ paddingLeft: 'var(--default_spacing)' }} />
@@ -210,14 +245,40 @@ class AddMount extends Component {
             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}
+          <DropDown
+            changed={(e) =>
+              this.setState({
+                Region: e.target.value,
+              })
+            }
+            items={
+              Constants.S3_REGION_PROVIDER_REGION[
+                Constants.S3_PROVIDER_LIST.indexOf(this.state.Provider)
+              ]
+            }
+            selected={this.state.Region}
           />
         </div>
         <div style={{ paddingTop: 'var(--default_spacing)' }} />
+        {this.state.Region === Constants.S3_CUSTOM_REGION ? (
+          <div>
+            <div style={{ display: 'flex', flexDirection: 'row' }}>
+              <div style={{ paddingLeft: 'var(--default_spacing)', width: '100%' }} />
+              <Text text={'Custom Region'} textAlign={'left'} type={'Heading2'} />
+            </div>
+            <div style={{ display: 'flex', flexDirection: 'row' }}>
+              <div style={{ paddingLeft: 'var(--default_spacing)', width: '100%' }} />
+              <input
+                onChange={(e) => this.setState({ CustomRegion: e.target.value })}
+                className={'ConfigurationItemInput'}
+                style={{ width: '100%' }}
+                type={'text'}
+                value={this.state.CustomRegion}
+              />
+            </div>
+            <div style={{ paddingTop: 'var(--default_spacing)' }} />
+          </div>
+        ) : null}
         <div style={{ display: 'flex', flexDirection: 'row' }}>
           <Text text={'Access Key'} textAlign={'left'} type={'Heading2'} />
           <div style={{ paddingLeft: 'var(--default_spacing)' }} />

src/containers/Configuration/Configuration.js

@@ -61,23 +61,17 @@ class Configuration extends IPCContainer {
   };
 
   checkSaveRequired = () => {
-    const changedItems = [];
     let i = 0;
-    for (const item of this.state.ItemList) {
-      if (this.checkItemChanged(this.state.OriginalItemList[i++], item)) {
-        changedItems.push(item);
-      }
-    }
+    const changedItems = this.state.ItemList.filter((item) => {
+      return this.checkItemChanged(this.state.OriginalItemList[i++], item);
+    });
 
     let changedObjectLookup = null;
     for (const key of Object.keys(this.state.ObjectLookup)) {
-      const changedObjectItems = [];
       let j = 0;
-      for (const item of this.state.ObjectLookup[key]) {
-        if (this.checkItemChanged(this.state.OriginalObjectLookup[key][j++], item)) {
-          changedObjectItems.push(item);
-        }
-      }
+      const changedObjectItems = this.state.ObjectLookup[key].filter((item) => {
+        return this.checkItemChanged(this.state.OriginalObjectLookup[key][j++], item);
+      });
 
       if (changedObjectItems.length > 0) {
         if (changedObjectLookup === null) {