Add region to s3 settings

ui/src/preferences/StoragePrefs.tsx

@@ -17,6 +17,7 @@ interface CredentialsSubmit {
   endpoint: string;
   accessId: string;
   accessSecret: string;
+  region: string;
   bucket: string;
 }
 
@@ -38,6 +39,11 @@ export const StoragePrefs = () => {
       api.poke(setAccessKeyId(data.accessId));
       api.poke(setSecretAccessKey(data.accessSecret));
       api.poke(setCurrentBucket(data.bucket));
+      api.poke({
+        app: 's3-store',
+        mark: 's3-action',
+        json: { 'set-region': data.region },
+      });
     }, [])
   );
 
@@ -113,6 +119,20 @@ export const StoragePrefs = () => {
             className="input default-ring bg-gray-50"
           />
         </div>
+        <div className="mb-8 flex flex-col space-y-2">
+          <label className="font-semibold" htmlFor="region">
+            Region<span title="Required field">*</span>
+          </label>
+          <input
+            disabled={!loaded}
+            required
+            id="region"
+            type="text"
+            defaultValue={s3.configuration?.region}
+            {...register('region', { required: true })}
+            className="input default-ring bg-gray-50"
+          />
+        </div>
         <div className="mb-8 flex flex-col space-y-2">
           <label className="font-semibold" htmlFor="bucket">
             Bucket Name<span title="Required field">*</span>

ui/src/state/storage-reducer.ts

@@ -18,7 +18,8 @@ const configuration = (json: S3Update, state: StorageState): StorageState => {
   if (data) {
     state.s3.configuration = {
       buckets: new Set(data.buckets),
-      currentBucket: data.currentBucket
+      currentBucket: data.currentBucket,
+      region: data.region,
     };
   }
   return state;
@@ -32,6 +33,14 @@ const currentBucket = (json: S3Update, state: StorageState): StorageState => {
   return state;
 };
 
+const region = (json: S3Update, state: StorageState): StorageState => {
+  const data = _.get(json, 'setRegion', false);
+  if (data && state.s3) {
+    state.s3.configuration.region = data;
+  }
+  return state;
+};
+
 const addBucket = (json: S3Update, state: StorageState): StorageState => {
   const data = _.get(json, 'addBucket', false);
   if (data) {
@@ -81,5 +90,6 @@ export const reduce = [
   removeBucket,
   endpoint,
   accessKeyId,
-  secretAccessKey
+  secretAccessKey,
+  region
 ];

ui/src/state/storage.ts

@@ -28,6 +28,7 @@ export interface BaseStorageState {
     configuration: {
       buckets: Set<string>;
       currentBucket: string;
+      region: string;
     };
     credentials: S3Credentials | null;
   };
@@ -65,7 +66,8 @@ export const useStorageState = createState<BaseStorageState>(
     s3: {
       configuration: {
         buckets: new Set(),
-        currentBucket: ''
+        currentBucket: '',
+        region: 'global'
       },
       credentials: null
     }
@@ -84,4 +86,4 @@ export const useStorageState = createState<BaseStorageState>(
   ]
 );
 
-export default useStorageState;
+export default useStorageState;