From 02084c2bcd3eacc46846fd5f7498f3395416404f Mon Sep 17 00:00:00 2001
From: Csaky <Tim.Csaky@gov.bc.ca>
Date: Wed, 29 May 2024 16:46:20 -0700
Subject: [PATCH] Update wordingf on bucket and child config forms

---
 .../components/bucket/BucketChildConfig.vue   | 23 ++++++++++------
 .../components/bucket/BucketConfigForm.vue    | 26 +++++++++----------
 frontend/src/components/form/TextInput.vue    |  3 ++-
 frontend/src/views/list/ListObjectsView.vue   |  1 -
 4 files changed, 30 insertions(+), 23 deletions(-)

diff --git a/frontend/src/components/bucket/BucketChildConfig.vue b/frontend/src/components/bucket/BucketChildConfig.vue
index 23bae6f9..69474532 100644
--- a/frontend/src/components/bucket/BucketChildConfig.vue
+++ b/frontend/src/components/bucket/BucketChildConfig.vue
@@ -26,8 +26,7 @@ const schema = object({
   bucketName: string().required().max(255).label('Folder display name'),
   subKey: string()
     .required()
-    .matches(/^[^\\]+$/, 'Folder sub-path must not contain back slashes')
-    .label('Folder sub-path')
+    .matches(/^[^\\]+$/, { excludeEmptyString: true, message: 'Path must not contain backslashes' })
 });
 
 // Actions
@@ -102,17 +101,20 @@ const onCancel = () => {
       </Message>
       <TextInput
         name="subKey"
-        label="Folder sub-path"
-        placeholder="my-documents"
-        help-text="The directory will be created if it does not already exist.
-          Sub-paths are supported using '/' between levels.
-          This value cannot be changed after it is set."
+        label="Path"
+        placeholder="For example: '2024/January/documents'"
+        :help-text="`The relative path of the subfolder.<br />
+          You can choose a path that exists in your object storage or create a new one.<br />
+          Folder levels are supported using '/' between levels.<br />
+          This value cannot be changed after it is set.`"
+        class="child-input"
       />
       <TextInput
         name="bucketName"
         label="Folder display name *"
-        placeholder="My Documents"
+        placeholder="For example: 'My Documents'"
         help-text="Your custom display name for the subfolder - any name as you would like to see it listed in BCBox."
+        class="child-input"
         autofocus
       />
       <Button
@@ -128,3 +130,8 @@ const onCancel = () => {
     </Form>
   </Dialog>
 </template>
+<style scoped lang="scss">
+.child-input:deep(input) {
+  width: 70%;
+}
+</style>
diff --git a/frontend/src/components/bucket/BucketConfigForm.vue b/frontend/src/components/bucket/BucketConfigForm.vue
index 182ea0e1..e57aad64 100644
--- a/frontend/src/components/bucket/BucketConfigForm.vue
+++ b/frontend/src/components/bucket/BucketConfigForm.vue
@@ -53,9 +53,8 @@ const schema = object({
   bucketName: string().max(255).required().label('Folder name'),
   endpoint: string().max(255).required().label('Endpoint'),
   key: string()
-    .matches(/^[^\\]+$/, 'Sub-path must not contain backslashes')
-    .max(255)
-    .label('Key'),
+    .matches(/^[^\\]+$/, { excludeEmptyString: true, message: 'Path must not contain backslashes' })
+    .max(255),
   secretAccessKey: string().max(255).required().label('Secret Access Key')
 });
 
@@ -99,8 +98,9 @@ const onSubmit = async (values: any) => {
     toast.success('Configuring storage location source', 'Configuration successful');
 
     if ((bucketChanges.accessKeyId || bucketChanges.secretAccessKey) && hasChildren) {
-      toast.info('Child storage locations exist',
-        'Remember to update their credentials where applicable', { life: 10000 });
+      toast.info('Subfolders exist', 'Remember to update their credentials where applicable', {
+        life: 10000
+      });
     }
   } catch (error: any) {
     toast.error('Configuring storage location source', error);
@@ -122,7 +122,7 @@ const onCancel = () => {
       <TextInput
         name="bucketName"
         label="Folder name *"
-        placeholder="My Documents"
+        placeholder="For example: 'My Documents'"
         help-text="Your custom display name for the storage location,
           shown in BCBox as a folder. Any name as you would like to see it listed in BCBox."
         autofocus
@@ -130,13 +130,13 @@ const onCancel = () => {
       <TextInput
         name="bucket"
         label="Bucket *"
-        placeholder="bucket0123456789"
+        placeholder="For example: 'wildfire_bucket'"
         :help-text="'The name of the bucket given to you. For example: \'yxwgj\'.'"
       />
       <TextInput
         name="endpoint"
         label="Endpoint *"
-        placeholder="https://example.com/"
+        placeholder="For example: 'https://nrs.objectstore.gov.bc.ca'"
         help-text="The URL of your object storage namespace without the bucket identifier/name."
       />
       <Password
@@ -153,11 +153,11 @@ const onCancel = () => {
       />
       <TextInput
         name="key"
-        label="Sub-path"
-        placeholder="/"
-        help-text="Optionally sets the bucket storage location source to mount at a specific subdirectory / subfolder.
-          The directory will be created if it does not already exist.
-          This will default to the root '/' if not provided.
+        label="Path"
+        placeholder="For example: '/maps/bc'"
+        help-text="Optionally mount the storage location source to be mounted at a specific subfolder<br />
+          The folder will be created if it does not already exist.<br />
+          This will default to the root '/' if not provided.<br />
           This value cannot be changed after the storage location source is configured."
         :disabled="!!props.bucket"
       />
diff --git a/frontend/src/components/form/TextInput.vue b/frontend/src/components/form/TextInput.vue
index 3005374d..da7ca85e 100644
--- a/frontend/src/components/form/TextInput.vue
+++ b/frontend/src/components/form/TextInput.vue
@@ -35,7 +35,8 @@ const { errorMessage, value } = useField<string>(toRef(props, 'name'));
       :class="{ 'p-invalid': errorMessage }"
       :disabled="disabled"
     />
-    <small :id="`${name}-help`">{{ helpText }}</small>
+    <!-- eslint-disable-next-line vue/no-v-html -->
+    <small :id="`${name}-help`"><span v-html="helpText" /></small>
     <ErrorMessage :name="name" />
   </div>
 </template>
diff --git a/frontend/src/views/list/ListObjectsView.vue b/frontend/src/views/list/ListObjectsView.vue
index 881b39ca..b9b73fe9 100644
--- a/frontend/src/views/list/ListObjectsView.vue
+++ b/frontend/src/views/list/ListObjectsView.vue
@@ -53,7 +53,6 @@ onBeforeMount(async () => {
 
 <template>
   <div v-if="ready">
-    <h1>Files</h1>
     <h2
       v-if="bucket"
       class="mb-3 flex overflow-hidden"