From bbb79bdcf3a4effb37fe905908d577b823081fb5 Mon Sep 17 00:00:00 2001
From: dc-bcgov <117310853+dc-bcgov@users.noreply.github.com>
Date: Thu, 16 Feb 2023 12:18:59 -0800
Subject: [PATCH] Implementation of 2966 bucket configure (#36)

* Adding bucket config dialog and form. Dialog and form support create a new bucket and update. Form contains required bucket fields, submit and cancel.

* Removing $ - global in dialog visible and unnecessary eslint comment.

* Fixing the x close dialog

* Removing apply button disable support as it is not working at the moment

* Adding support for color-border: red for invalid input

* Removing update bucket config header and using newBucket instead for dialog

* Adding yup/schema and fixing form validation before submit. Refactoring of TextInput to support validation.

* Final commit - import ordering fix

* Replacing asterisk yup import

* Updating with new yup dependency

* Adding password component to support redacted for access and secret keys. Reordering imports and removing async.

* Removing space conditifion for redacted check

* Removed unnecessary div for dialog

* Fixed alphabetical emit ordering

* Fixed @ reference recommended vs relative.

* Removing isUpdate flag

* Removing isUpdate flag 2

* Fixed bucketConfigTitle set via ternary operator

* Removed console.log

* Deleting BucketConfigForm and putting Dialog inside of BucketList. Removing the rest of the isUpdate logic.

* Fixed import ordering, extra newline, replaced primeflex margins, relative path changed to an absolute, removed invalid attribute

* Removed extra line
---
 frontend/package-lock.json                    |  73 ++++++++-
 frontend/package.json                         |   3 +-
 .../components/bucket/BucketConfigForm.vue    | 148 ++++++++++++++++++
 frontend/src/components/bucket/BucketList.vue |  72 ++++++++-
 .../src/components/bucket/BucketsTable.vue    |  12 +-
 frontend/src/components/form/Password.vue     |  39 +++++
 frontend/src/components/form/TextInput.vue    |  44 +++---
 frontend/src/services/bucketService.ts        |  21 +++
 frontend/src/store/bucketStore.ts             |  22 +++
 frontend/src/utils/constants.ts               |   5 +
 10 files changed, 408 insertions(+), 31 deletions(-)
 create mode 100644 frontend/src/components/bucket/BucketConfigForm.vue
 create mode 100644 frontend/src/components/form/Password.vue

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 2c0453f3..3e0747c5 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -22,7 +22,8 @@
         "primevue": "^3.21.0",
         "vee-validate": "^4.7.1",
         "vue": "^3.2.41",
-        "vue-router": "^4.1.5"
+        "vue-router": "^4.1.5",
+        "yup": "^1.0.0"
       },
       "devDependencies": {
         "@pinia/testing": "^0.0.14",
@@ -5155,6 +5156,11 @@
         "asap": "~2.0.6"
       }
     },
+    "node_modules/property-expr": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/property-expr/-/property-expr-2.0.5.tgz",
+      "integrity": "sha512-IJUkICM5dP5znhCckHSv30Q4b5/JA5enCtkRHYaOVOAocnH/1BQEYTC5NMfT3AVl/iXKdr3aqQbQn9DxyWknwA=="
+    },
     "node_modules/proxy-from-env": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
@@ -5680,6 +5686,11 @@
         "node": ">= 0.12"
       }
     },
+    "node_modules/tiny-case": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/tiny-case/-/tiny-case-1.0.3.tgz",
+      "integrity": "sha512-Eet/eeMhkO6TX8mnUteS9zgPbUMQa4I6Kkp5ORiBD5476/m+PIRiumP5tmh5ioJpH7k51Kehawy2UDfsnxxY8Q=="
+    },
     "node_modules/tinybench": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/tinybench/-/tinybench-2.3.1.tgz",
@@ -5725,6 +5736,11 @@
         "node": ">=8.0"
       }
     },
+    "node_modules/toposort": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/toposort/-/toposort-2.0.2.tgz",
+      "integrity": "sha512-0a5EOkAUp8D4moMi2W8ZF8jcga7BgZd91O/yabJCFY8az+XSzeGyTKs0Aoo897iV1Nj6guFq8orWDS96z91oGg=="
+    },
     "node_modules/tr46": {
       "version": "0.0.3",
       "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
@@ -6373,6 +6389,28 @@
       "funding": {
         "url": "https://github.com/sponsors/sindresorhus"
       }
+    },
+    "node_modules/yup": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/yup/-/yup-1.0.0.tgz",
+      "integrity": "sha512-bRZIyMkoe212ahGJTE32cr2dLkJw53Va+Uw5mzsBKpcef9zCGQ23k/xtpQUfGwdWPKvCIlR8CzFwchs2rm2XpQ==",
+      "dependencies": {
+        "property-expr": "^2.0.5",
+        "tiny-case": "^1.0.3",
+        "toposort": "^2.0.2",
+        "type-fest": "^2.19.0"
+      }
+    },
+    "node_modules/yup/node_modules/type-fest": {
+      "version": "2.19.0",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-2.19.0.tgz",
+      "integrity": "sha512-RAH822pAdBgcNMAfWnCBU3CFZcfZ/i1eZjwFU/dsLKumyuuP3niueg2UAukXYF0E2AAoc82ZSSf9J0WQBinzHA==",
+      "engines": {
+        "node": ">=12.20"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
     }
   },
   "dependencies": {
@@ -10044,6 +10082,11 @@
         "asap": "~2.0.6"
       }
     },
+    "property-expr": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/property-expr/-/property-expr-2.0.5.tgz",
+      "integrity": "sha512-IJUkICM5dP5znhCckHSv30Q4b5/JA5enCtkRHYaOVOAocnH/1BQEYTC5NMfT3AVl/iXKdr3aqQbQn9DxyWknwA=="
+    },
     "proxy-from-env": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
@@ -10426,6 +10469,11 @@
         }
       }
     },
+    "tiny-case": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/tiny-case/-/tiny-case-1.0.3.tgz",
+      "integrity": "sha512-Eet/eeMhkO6TX8mnUteS9zgPbUMQa4I6Kkp5ORiBD5476/m+PIRiumP5tmh5ioJpH7k51Kehawy2UDfsnxxY8Q=="
+    },
     "tinybench": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/tinybench/-/tinybench-2.3.1.tgz",
@@ -10459,6 +10507,11 @@
         "is-number": "^7.0.0"
       }
     },
+    "toposort": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/toposort/-/toposort-2.0.2.tgz",
+      "integrity": "sha512-0a5EOkAUp8D4moMi2W8ZF8jcga7BgZd91O/yabJCFY8az+XSzeGyTKs0Aoo897iV1Nj6guFq8orWDS96z91oGg=="
+    },
     "tr46": {
       "version": "0.0.3",
       "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
@@ -10884,6 +10937,24 @@
       "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
       "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==",
       "dev": true
+    },
+    "yup": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/yup/-/yup-1.0.0.tgz",
+      "integrity": "sha512-bRZIyMkoe212ahGJTE32cr2dLkJw53Va+Uw5mzsBKpcef9zCGQ23k/xtpQUfGwdWPKvCIlR8CzFwchs2rm2XpQ==",
+      "requires": {
+        "property-expr": "^2.0.5",
+        "tiny-case": "^1.0.3",
+        "toposort": "^2.0.2",
+        "type-fest": "^2.19.0"
+      },
+      "dependencies": {
+        "type-fest": {
+          "version": "2.19.0",
+          "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-2.19.0.tgz",
+          "integrity": "sha512-RAH822pAdBgcNMAfWnCBU3CFZcfZ/i1eZjwFU/dsLKumyuuP3niueg2UAukXYF0E2AAoc82ZSSf9J0WQBinzHA=="
+        }
+      }
     }
   }
 }
diff --git a/frontend/package.json b/frontend/package.json
index 062e9231..fb07225b 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -36,7 +36,8 @@
     "primevue": "^3.21.0",
     "vee-validate": "^4.7.1",
     "vue": "^3.2.41",
-    "vue-router": "^4.1.5"
+    "vue-router": "^4.1.5",
+    "yup": "^1.0.0"
   },
   "devDependencies": {
     "@pinia/testing": "^0.0.14",
diff --git a/frontend/src/components/bucket/BucketConfigForm.vue b/frontend/src/components/bucket/BucketConfigForm.vue
new file mode 100644
index 00000000..f27e9d0a
--- /dev/null
+++ b/frontend/src/components/bucket/BucketConfigForm.vue
@@ -0,0 +1,148 @@
+<script setup lang="ts">
+import Button from 'primevue/button';
+import { Form } from 'vee-validate';
+import { object, string } from 'yup';
+import { useToast } from 'primevue/usetoast';
+import Password from '@/components/form/Password.vue';
+import TextInput from '@/components/form/TextInput.vue';
+import { useBucketStore } from '@/store';
+import type { Bucket } from '@/interfaces';
+
+const props = defineProps<{
+  bucket?: Bucket;
+}>();
+
+const bucketStore = useBucketStore();
+const toast = useToast();
+
+const emit = defineEmits(['cancel-bucket-config', 'submit-bucket-config']);
+
+const initialValues = {
+  bucketName: props.bucket?.bucketName,
+  bucket: props.bucket?.bucket,
+  endpoint: props.bucket?.endpoint,
+  accessKeyId: props.bucket?.accessKeyId,
+  secretAccessKey: props.bucket?.secretAccessKey,
+  key: props.bucket?.key
+};
+
+const schema = object({
+  bucketName: string().max(255).required().label('Bucket name'),
+  bucket: string().max(255).required().label('Bucket'),
+  endpoint: string().max(255).required().label('Endpoint'),
+  accessKeyId: string().max(255).required().label('Access Key ID'),
+  secretAccessKey: string().max(255).required().label('Secret Access Key'),
+  key: string().max(255).required().label('Key'),
+});
+
+const onSubmit = async (values: any) => {
+
+  try {
+    const formBucket = {
+      bucketName: values.bucketName,
+      bucket: values.bucket,
+      endpoint: values.endpoint,
+      accessKeyId: values.accessKeyId !== 'REDACTED' ? values.accessKeyId : undefined,
+      secretAccessKey:
+        values.secretAccessKey !== 'REDACTED' ? values.secretAccessKey : undefined,
+      key: values.key,
+      active: true
+    } as Bucket;
+
+    props.bucket ?
+      await bucketStore.updateBucket(props.bucket!.bucketId, formBucket) :
+      await bucketStore.createBucket(formBucket);
+
+    await bucketStore.load();
+    emit('submit-bucket-config');
+
+    toast.add(
+      {
+        severity: 'success',
+        summary: 'Success',
+        detail: 'Bucket configuration successful',
+        life: 3000
+      }
+    );
+  } catch (error: any) {
+    emit('cancel-bucket-config');
+    toast.add(
+      {
+        severity: 'error',
+        summary: 'Bucket configuration was not successful',
+        detail: error,
+        life: 5000
+      }
+    );
+  }
+};
+
+const onCancel = () => {
+  emit('cancel-bucket-config');
+};
+</script>
+
+<template>
+  <div>
+    <Form
+      :initial-values="initialValues"
+      :validation-schema="schema"
+      @submit="onSubmit"
+    >
+      <TextInput
+        name="bucketName"
+        label="Bucket name (what other users will see)"
+      />
+      <TextInput
+        name="bucket"
+        label="Bucket"
+      />
+      <TextInput
+        name="endpoint"
+        label="Endpoint"
+      />
+      <Password
+        name="accessKeyId"
+        label="Access key Identifier"
+      />
+      <Password
+        name="secretAccessKey"
+        label="Secret access key"
+      />
+      <TextInput
+        name="key"
+        label="Key"
+      />
+      <Button
+        class="mt-2"
+        label="Apply"
+        type="submit"
+        icon="pi pi-check"
+        autofocus
+      />
+      <Button
+        class="p-button-text mt-2"
+        label="Cancel"
+        icon="pi pi-times"
+        @click="onCancel"
+      />
+    </Form>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+
+:deep(.p-inputtext) {
+  width: 65% !important;
+}
+
+:deep(.pi-eye) {
+  right: auto !important;
+  margin-left: 10px;
+}
+
+:deep(.pi-eye-slash) {
+  right: auto !important;
+  margin-left: 10px;
+}
+</style>
diff --git a/frontend/src/components/bucket/BucketList.vue b/frontend/src/components/bucket/BucketList.vue
index 578723de..d1811b1c 100644
--- a/frontend/src/components/bucket/BucketList.vue
+++ b/frontend/src/components/bucket/BucketList.vue
@@ -1,14 +1,24 @@
 <script setup lang="ts">
-import { ref, onMounted } from 'vue';
-import BucketsTable from './BucketsTable.vue';
-import BucketsSidebar from './BucketsSidebar.vue';
+import Button from 'primevue/button';
+import Dialog from 'primevue/dialog';
+import { ref, onMounted, Ref } from 'vue';
+import { BucketConfig as BucketConfigConst } from '@/utils/constants';
+import BucketConfigForm from '@/components/bucket/BucketConfigForm.vue';
+import BucketsSidebar from '@/components/bucket/BucketsSidebar.vue';
+import BucketsTable from '@/components/bucket/BucketsTable.vue';
 import { useBucketStore } from '@/store';
 import { useToaster } from '@/composables/useToaster';
+import type { Bucket } from '@/interfaces';
 
 const bucketStore = useBucketStore();
 
 const displayInfo: any = ref(null);
 
+const displayBucketConfig: Ref<boolean> = ref(false);
+const bucketConfigHeader: Ref<string> = ref('');
+const bucketConfigTitle: Ref<string> = ref('');
+const bucketToUpdate: Ref<Bucket | undefined> = ref(undefined);
+
 const showInfo = async (bucketId: any) => {
   displayInfo.value = await bucketStore.getBucketInfo(bucketId);
 };
@@ -17,6 +27,17 @@ const closeInfo = () => {
   displayInfo.value = null;
 };
 
+const showBucketConfig = (bucket?: Bucket) => {
+  bucketConfigHeader.value = BucketConfigConst.headerNewBucket;
+  bucketConfigTitle.value = bucket ? bucket.bucketName : BucketConfigConst.titleNewBucket;
+  bucketToUpdate.value = bucket;
+  displayBucketConfig.value = true;
+};
+
+const closeBucketConfig = () => {
+  displayBucketConfig.value = false;
+};
+
 onMounted(() => {
   useToaster(bucketStore.load, { summary: 'Unable to load buckets.' });
 });
@@ -28,9 +49,47 @@ onMounted(() => {
       <h1>Select a bucket</h1>
       <h3>Buckets are containers for storing objects.</h3>
     </div>
+    <div>
+      <Button
+        label="Primary"
+        class="p-button-outlined mt-4"
+        @click="showBucketConfig()"
+      >
+        <font-awesome-icon icon="fa-solid fa-plus" />
+        Configure new bucket
+      </Button>
+      <Dialog
+        :visible="displayBucketConfig"
+        :style="{width: '50vw'}"
+        :modal="true"
+        @update:visible="closeBucketConfig"
+      >
+        <template #header>
+          <div class="flex">
+            <font-awesome-icon
+              icon="fas fa-cog"
+              class="pr-3 pt-2"
+              style="font-size: 2rem"
+            />
+            <div>
+              <h1>{{ bucketConfigHeader }}</h1>
+              <h3>{{ bucketConfigTitle }}</h3>
+            </div>
+          </div>
+        </template>
+        <BucketConfigForm
+          :bucket="bucketToUpdate"
+          @submit-bucket-config="closeBucketConfig"
+          @cancel-bucket-config="closeBucketConfig"
+        />
+      </Dialog>
+    </div>
     <div class="flex mt-7">
       <div class="flex-grow-1">
-        <BucketsTable @show-info="showInfo" />
+        <BucketsTable
+          @show-info="showInfo"
+          @show-bucket-config="showBucketConfig"
+        />
       </div>
       <div
         v-if="displayInfo"
@@ -54,4 +113,9 @@ h1 {
 h3 {
   font-weight: bold;
 }
+
+button {
+  float: right;
+  text-indent: 10px;
+}
 </style>
diff --git a/frontend/src/components/bucket/BucketsTable.vue b/frontend/src/components/bucket/BucketsTable.vue
index 4b81bfe6..bebf986c 100644
--- a/frontend/src/components/bucket/BucketsTable.vue
+++ b/frontend/src/components/bucket/BucketsTable.vue
@@ -17,12 +17,16 @@ const permissionsVisible = ref(false);
 const permissionsBucketId = ref('');
 const permissionBucketName = ref('');
 
-const emit = defineEmits(['show-info']);
+const emit = defineEmits(['show-bucket-config', 'show-info']);
 
 const showInfo = async (id: number) => {
   emit('show-info', id);
 };
 
+const showBucketConfig = async (bucket: Bucket) => {
+  emit('show-bucket-config', bucket);
+};
+
 const showPermissions = async (bucketId: string, bucketName: string) => {
   permissionsVisible.value = true;
   permissionsBucketId.value = bucketId;
@@ -90,6 +94,12 @@ const displayPermissionsIcon = (bucket: Bucket) => {
         body-class="content-right action-buttons"
       >
         <template #body="{ data }">
+          <Button
+            class="p-button-lg p-button-text"
+            @click="showBucketConfig(data)"
+          >
+            <font-awesome-icon icon="fas fa-cog" />
+          </Button>
           <Button
             v-if="displayPermissionsIcon(data)"
             class="p-button-lg p-button-text"
diff --git a/frontend/src/components/form/Password.vue b/frontend/src/components/form/Password.vue
new file mode 100644
index 00000000..5993b41b
--- /dev/null
+++ b/frontend/src/components/form/Password.vue
@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import { toRef } from 'vue';
+import Password from 'primevue/password';
+import { useField, ErrorMessage } from 'vee-validate';
+
+const props = defineProps({
+  name: { type: String, required: true },
+  type: { type: String, default: 'text' },
+  label: { type: String, default: '' },
+  placeholder: { type: String, default: '' },
+});
+
+const { errorMessage, value } = useField<string>(toRef(props, 'name'));
+</script>
+
+<template>
+  <div class="field">
+    <label :for="name">{{ label }}</label>
+    <Password
+      v-model="value"
+      :aria-describedby="`${name}-help`"
+      :name="name"
+      :type="type"
+      :placeholder="placeholder"
+      :class="{ 'p-invalid': errorMessage }"
+      :feedback="false"
+      toggle-mask
+    />
+    <ErrorMessage
+      :name="name"
+    />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.field * {
+  display: block;
+}
+</style>
diff --git a/frontend/src/components/form/TextInput.vue b/frontend/src/components/form/TextInput.vue
index 42202bb0..3d5f6a06 100644
--- a/frontend/src/components/form/TextInput.vue
+++ b/frontend/src/components/form/TextInput.vue
@@ -1,34 +1,30 @@
-<script lang="ts">
-export default {
-  props: {
-    name: { type: String, required: true },
-    type: { type: String, default: 'text' },
-    rules: { type: null, default: null },
-    label: { type: String, default: '' },
-  },
-};
-</script>
-
 <script setup lang="ts">
+import { toRef } from 'vue';
 import InputText from 'primevue/inputtext';
-import { Field, ErrorMessage } from 'vee-validate';
+import { useField, ErrorMessage } from 'vee-validate';
+
+const props = defineProps({
+  name: { type: String, required: true },
+  label: { type: String, default: '' },
+  placeholder: { type: String, default: '' },
+});
+
+const { errorMessage, value } = useField<string>(toRef(props, 'name'));
 </script>
 
 <template>
   <div class="field">
-    <Field
-      v-slot="{ field }"
+    <label :for="name">{{ label }}</label>
+    <InputText
+      v-model="value"
+      :aria-describedby="`${name}-help`"
+      :name="name"
+      :placeholder="placeholder"
+      :class="{ 'p-invalid': errorMessage }"
+    />
+    <ErrorMessage
       :name="name"
-      :type="type"
-      :rules="rules"
-    >
-      <label :for="name">{{ label }}</label>
-      <InputText
-        v-bind="field"
-        :type="type"
-      />
-    </Field>
-    <ErrorMessage :name="name" />
+    />
   </div>
 </template>
 
diff --git a/frontend/src/services/bucketService.ts b/frontend/src/services/bucketService.ts
index 471bea02..741182dc 100644
--- a/frontend/src/services/bucketService.ts
+++ b/frontend/src/services/bucketService.ts
@@ -1,4 +1,5 @@
 import { comsAxios } from './interceptors';
+import type { Bucket } from '@/interfaces';
 const BUCKET_PATH = 'bucket';
 
 
@@ -12,4 +13,24 @@ export default {
   searchForBuckets(params?: Object) {
     return comsAxios().get(`${BUCKET_PATH}`, { params: params });
   },
+
+  /**
+   * @function createBucket
+   * Creates a bucket
+   * @param {Bucket} data Bucket object containing the data to create bucket
+   * @returns {Promise} An axios response
+   */
+  createBucket(data: Bucket) {
+    return comsAxios().put(`${BUCKET_PATH}`, data);
+  },
+
+  /**
+   * @function updateBucket
+   * Updates a bucket
+   * @param {Bucket} data Bucket object containing the data to update bucket
+   * @returns {Promise} An axios response
+   */
+  updateBucket(bucketId: string, data: Bucket) {
+    return comsAxios().patch(`${BUCKET_PATH}/${bucketId}`, data);
+  }
 };
diff --git a/frontend/src/store/bucketStore.ts b/frontend/src/store/bucketStore.ts
index 8207ea6d..f2a30455 100644
--- a/frontend/src/store/bucketStore.ts
+++ b/frontend/src/store/bucketStore.ts
@@ -160,6 +160,26 @@ export const useBucketStore = defineStore('bucket', () => {
     }
   }
 
+  async function createBucket(bucket: Bucket) {
+    try {
+      loading.value = true;
+
+      return (await bucketService.createBucket(bucket)).data;
+    } finally {
+      loading.value = false;
+    }
+  }
+
+  async function updateBucket(bucketId: string, bucket: Bucket) {
+    try {
+      loading.value = true;
+
+      return (await bucketService.updateBucket(bucketId, bucket)).data;
+    } finally {
+      loading.value = false;
+    }
+  }
+
   return {
     loading,
     load,
@@ -169,6 +189,8 @@ export const useBucketStore = defineStore('bucket', () => {
     addBucketPermission,
     deleteBucketPermission,
     removeBucketUser,
+    createBucket,
+    updateBucket,
     buckets,
     permissions,
     selectedBucketPermissionsForUser
diff --git a/frontend/src/utils/constants.ts b/frontend/src/utils/constants.ts
index 5c68b8d2..f38e4095 100644
--- a/frontend/src/utils/constants.ts
+++ b/frontend/src/utils/constants.ts
@@ -30,3 +30,8 @@ export const RouteNames = Object.freeze({
 export const ValidationMessages = Object.freeze({
   Required: 'This field is required.',
 });
+
+export const BucketConfig = Object.freeze({
+  headerNewBucket: 'Configure bucket',
+  titleNewBucket: 'Use this form to configure a bucket to be used in BCBox for the first time.'
+});