Allow child bucket sub-path to contains forward slashes

frontend/src/components/bucket/BucketChildConfig.vue

@@ -26,8 +26,7 @@
   bucketName: string().required().max(255).label('Folder display name'),
   subKey: string()
     .required()
-    .matches(/^[^/\\]+$/, 'Folder sub-path must not contain back or forward slashes')
-    .label('Folder sub-path')
+    .matches(/^[^\\]+$/, { excludeEmptyString: true, message: 'Path must not contain backslashes' })
 });
 
 // Actions
@@ -102,17 +101,19 @@
       </Message>
       <TextInput
         name="subKey"
-        label="Folder sub-path"
+        label="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."
+        :help-text="`The relative path of the subfolder. You can pick a new path or choose an existing object storage path,
+          but it can't be changed after it is set.<br />
+          Folder levels are supported using '/' between levels (for example: 2024/January/my-documents).`"
+        class="child-input"
       />
       <TextInput
         name="bucketName"
         label="Folder display name *"
         placeholder="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 +129,8 @@
     </Form>
   </Dialog>
 </template>
+<style scoped lang="scss">
+.child-input:deep(input) {
+  width: 70%;
+}
+</style>

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);
@@ -136,7 +136,7 @@ const onCancel = () => {
       <TextInput
         name="endpoint"
         label="Endpoint *"
-        placeholder="https://example.com/"
+        placeholder="https://example.com"
         help-text="The URL of your object storage namespace without the bucket identifier/name."
       />
       <Password
@@ -153,12 +153,11 @@ const onCancel = () => {
       />
       <TextInput
         name="key"
-        label="Sub-path"
+        label="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.
-          This value cannot be changed after the storage location source is configured."
+        help-text="Optionally mounts the storage location at a specific path.
+          A folder will be created if it does not already exist.<br />
+          This will default to the root '/' if not provided."
         :disabled="!!props.bucket"
       />
       <Button

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>

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"