Bucket Terminology changes

Replace term bucket with folder
Reformat folder name in folder list
Change invite button terminology

frontend/src/components/bucket/BucketChildConfig.vue

@@ -48,7 +48,7 @@ const onSubmit = async (values: any) => {
     // refresh stores
     await bucketStore.fetchBuckets({ userId: getUserId.value, objectPerms: true });
     showDialog(false);
-    toast.success('Adding Folder to a bucket', 'Folder configuration successful');
+    toast.success('Adding subfolder', 'Folder configuration successful');
   } catch (error: any) {
     validationMessages.value = [];
     validationMessages.value.push(error.response.data.detail);
@@ -61,9 +61,9 @@ const onCancel = () => {
 
 <template>
   <Button
-    v-tooltip.bottom="'Add folder to a bucket'"
+    v-tooltip.bottom="'Add subfolder'"
     class="p-button-lg p-button-text"
-    aria-label="Add folder to a bucket"
+    aria-label="Add subfolder"
     @click="showDialog(true)"
     @keyup.enter="showDialog(true)"
   >
@@ -82,12 +82,12 @@ const onCancel = () => {
         icon="fas fa-cog"
         fixed-width
       />
-      <span class="p-dialog-title">Add folder to bucket</span>
+      <span class="p-dialog-title">Add subfolder</span>
     </template>
 
     <h3 class="bcbox-info-dialog-subhead mb-0">{{ props.parentBucket.bucketName }}</h3>
     <ul class="mt-0 pl-3">
-      <li>Sets a folder to appear within a bucket</li>
+      <li>Sets a subfolder to appear within a folder</li>
     </ul>
     <Form
       :validation-schema="schema"
@@ -112,7 +112,7 @@ const onCancel = () => {
         name="bucketName"
         label="Folder display name *"
         placeholder="My Documents"
-        help-text="Your custom display name for the bucket - any name as you would like to see it listed in BCBox."
+        help-text="Your custom display name for the subfolder - any name as you would like to see it listed in BCBox."
         autofocus
       />
       <Button

frontend/src/components/bucket/BucketConfigForm.vue

@@ -50,7 +50,7 @@ const initialValues: BucketForm = {
 const schema = object({
   accessKeyId: string().max(255).required().label('Access Key ID'),
   bucket: string().max(255).required().label('Bucket'),
-  bucketName: string().max(255).required().label('Bucket name'),
+  bucketName: string().max(255).required().label('Folder name'),
   endpoint: string().max(255).required().label('Endpoint'),
   key: string()
     .matches(/^[^\\]+$/, 'Sub-path must not contain backslashes')
@@ -96,13 +96,14 @@ const onSubmit = async (values: any) => {
 
     emit('submit-bucket-config');
 
-    toast.success('Configuring bucket', 'Bucket configuration successful');
+    toast.success('Configuring storage location source', 'Configuration successful');
 
     if ((bucketChanges.accessKeyId || bucketChanges.secretAccessKey) && hasChildren) {
-      toast.info('Buckets under this bucket', 'Remember to update their credentials where applicable', { life: 10000 });
+      toast.info('Child storage locations exist',
+        'Remember to update their credentials where applicable', { life: 10000 });
     }
   } catch (error: any) {
-    toast.error('Configuring bucket', error);
+    toast.error('Configuring storage location source', error);
   }
 };
 
@@ -120,9 +121,10 @@ const onCancel = () => {
     >
       <TextInput
         name="bucketName"
-        label="Bucket name *"
+        label="Folder name *"
         placeholder="My Documents"
-        help-text="Your custom display name for the bucket - any name as you would like to see it listed in BCBox."
+        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
       />
       <TextInput
@@ -151,12 +153,12 @@ const onCancel = () => {
       />
       <TextInput
         name="key"
-        label="Bucket sub-path"
+        label="Sub-path"
         placeholder="/"
-        help-text="Optionally sets the bucket to mount at a specific subdirectory.
+        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 bucket is configured."
+          This value cannot be changed after the storage location source is configured."
         :disabled="!!props.bucket"
       />
       <Button

frontend/src/components/bucket/BucketList.vue

@@ -55,17 +55,17 @@ onMounted(async () => {
 
   <div class="flex flex-wrap">
     <div class="flex-grow-1">
-      <h1 class="">Select a bucket</h1>
-      <h4 class="mb-4">Buckets are containers for storing objects.</h4>
+      <h1 class="">My files</h1>
+      <h4 class="mb-4">Select a folder to view the files inside it.</h4>
     </div>
 
     <div class="flex-none align-items-right">
       <Button
         v-if="usePermissionStore().isUserElevatedRights()"
-        label="Connect bucket to BCBox"
+        label="Add a new storage location source"
         class="p-button-outlined my-4"
         data-test="connect-bucket"
-        aria-label="Configure bucket"
+        aria-label="Add a new storage location source"
         icon="pi pi-plus"
         @click="showBucketConfig()"
         @keyup.enter="showBucketConfig()"
@@ -99,7 +99,8 @@ onMounted(async () => {
           >
             NRIDS Optimization
           </a>
-          (Natural Resource ministries) or your ministry's service desk if you need help with buckets.
+          (Natural Resource ministries) or your ministry's service desk if you
+          need help with &quot;bucket&quot; storage location sources.
         </Message>
 
         <Message severity="warn">

frontend/src/components/bucket/BucketSidebar.vue

@@ -69,7 +69,7 @@ watch(props, () => {
   <div class="side-panel pl-4">
     <div class="flex panel-header align-items-start">
       <font-awesome-icon icon="fa-solid fa-circle-info" />
-      <h1 class="mt-0 ml-3 flex-grow-1">Bucket details</h1>
+      <h1 class="mt-0 ml-3 flex-grow-1">Folder details</h1>
       <Button
         class="p-button-text pt-0"
         @click="closeSidebarInfo"
@@ -83,13 +83,13 @@ watch(props, () => {
         <h2>Properties</h2>
       </div>
       <div class="grid overflow-hidden">
-        <div class="col-fixed">Bucket Name:</div>
+        <div class="col-fixed">Folder name:</div>
         <div class="col wrap-block">
           {{ props.sidebarInfo?.bucketName }}
         </div>
       </div>
       <div class="grid">
-        <div class="col-fixed">Bucket ID:</div>
+        <div class="col-fixed">Source storage location ID:</div>
         <div class="col">
           {{ props.sidebarInfo?.bucketId }}
         </div>

frontend/src/components/bucket/BucketTable.vue

@@ -52,10 +52,10 @@ const showPermissions = async (bucketId: string, bucketName: string) => {
 const confirmDeleteBucket = (bucketId: string) => {
   confirm.require({
     message:
-      'Are you sure you want to delete this bucket in BCBox? \
+      'Are you sure you want to delete this folder in BCBox? \
       This will drop all related objects and permissions from BCBox, \
-      but the files will still remain in the actual bucket.',
-    header: 'Delete bucket',
+      but the files will still remain in the actual source storage location.',
+    header: 'Delete folder',
     acceptLabel: 'Confirm',
     rejectLabel: 'Cancel',
     accept: () => deleteBucket(bucketId)
@@ -248,37 +248,21 @@ watch(getBuckets, () => {
         v-if="!getIsLoading"
         class="flex justify-content-center"
       >
-        <h3>There are no buckets associated with your account.</h3>
+        <h3>There are no folders associated with your account.</h3>
       </div>
     </template>
     <template #loadingicon>
       <Spinner />
     </template>
     <Column
       field="bucketName"
-      header="Bucket Name"
+      header="Folder Name"
       header-style="padding-left: 50px"
       body-class="truncate"
       expander
     >
       <template #body="{ node }">
         <span class="row-head mr-2">
-          <font-awesome-icon
-            v-if="!node.data.dummy"
-            icon="fa-solid fa-box-open"
-          />
-          <font-awesome-icon
-            v-else
-            icon="fa-solid fa-folder"
-          />
-        </span>
-        <span
-          v-if="node.data.bucketName.length > 150"
-          v-tooltip.bottom="{ value: node.data.bucketName }"
-        >
-          <BucketTableBucketName :node="node" />
-        </span>
-        <span v-else>
           <BucketTableBucketName :node="node" />
         </span>
       </template>
@@ -293,51 +277,51 @@ watch(getBuckets, () => {
         <span v-if="!node.data.dummy">
           <InviteButton
             :bucket-id="node.data.bucketId"
-            label-text="Bucket"
+            label-text="Folder"
           />
           <BucketChildConfig
             v-if="permissionStore.isBucketActionAllowed(node.data.bucketId, getUserId, Permissions.MANAGE)"
             :parent-bucket="node.data"
           />
           <Button
             v-if="permissionStore.isBucketActionAllowed(node.data.bucketId, getUserId, Permissions.MANAGE)"
-            v-tooltip.bottom="'Configure bucket'"
+            v-tooltip.bottom="'Configure folder'"
             class="p-button-lg p-button-text"
-            aria-label="Configure bucket"
+            aria-label="Configure folder"
             @click="showBucketConfig(node.data)"
             @keyup.enter="showBucketConfig(node.data)"
           >
             <font-awesome-icon icon="fas fa-cog" />
           </Button>
           <Button
             v-if="permissionStore.isBucketActionAllowed(node.data.bucketId, getUserId, Permissions.MANAGE)"
-            v-tooltip.bottom="'Bucket permissions'"
+            v-tooltip.bottom="'Folder permissions'"
             class="p-button-lg p-button-text"
-            aria-label="Bucket permissions"
+            aria-label="Folder permissions"
             @click="showPermissions(node.data.bucketId, node.data.bucketName)"
             @keyup.enter="showPermissions(node.data.bucketId, node.data.bucketName)"
           >
             <font-awesome-icon icon="fa-solid fa-users" />
           </Button>
           <SyncButton
-            label-text="Synchronize bucket"
+            label-text="Synchronize storage location"
             :bucket-id="node.data.bucketId"
           />
           <Button
             v-if="permissionStore.isBucketActionAllowed(node.data.bucketId, getUserId, Permissions.READ)"
-            v-tooltip.bottom="'Bucket details'"
+            v-tooltip.bottom="'Folder details'"
             class="p-button-lg p-button-rounded p-button-text"
-            aria-label="Bucket details"
+            aria-label="Folder details"
             @click="showSidebarInfo(node.data.bucketId)"
             @keyup.enter="showSidebarInfo(node.data.bucketId)"
           >
             <font-awesome-icon icon="fa-solid fa-circle-info" />
           </Button>
           <Button
             v-if="permissionStore.isBucketActionAllowed(node.data.bucketId, getUserId, Permissions.DELETE)"
-            v-tooltip.bottom="'Delete bucket'"
+            v-tooltip.bottom="'Delete folder'"
             class="p-button-lg p-button-text p-button-danger"
-            aria-label="Delete bucket"
+            aria-label="Delete folder"
             @click="confirmDeleteBucket(node.data.bucketId)"
             @keyup.enter="confirmDeleteBucket(node.data.bucketId)"
           >
@@ -361,7 +345,7 @@ watch(getBuckets, () => {
         icon="fas fa-users"
         fixed-width
       />
-      <span class="p-dialog-title">Bucket Permissions</span>
+      <span class="p-dialog-title">Folder permissions</span>
     </template>
 
     <h3 class="bcbox-info-dialog-subhead">

frontend/src/components/bucket/BucketTableBucketName.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { RouteNames } from '@/utils/constants';
-import { getBucketPath, getLastSegment } from '@/utils/utils';
+import { getBucketPath } from '@/utils/utils';
 
 import type { BucketTreeNode } from '@/types';
 
@@ -13,37 +13,26 @@ const props = withDefaults(defineProps<Props>(), {});
 </script>
 
 <template>
-  <span v-if="props.node.data.dummy">
+  <span
+    v-if="props.node.data.dummy"
+    class="opacity-70"
+  >
+    <font-awesome-icon
+      icon="fa-solid fa-folder"
+      class="mr-2"
+    />
     {{ props.node.data.bucketName }}
-    <span
-      v-if="props.node.data.key === '/'"
-      class="pl-2 text-xs"
-    >
-      {{ props.node.data.bucketName }}
-    </span>
-    <span
-      v-else
-      class="pl-2 text-xs"
-    >
-      {{ '/' + props.node.data.bucketName }}
-    </span>
   </span>
-
-  <span v-else>
+  <span
+    v-else
+    v-tooltip.bottom="'path: /' + getBucketPath(node.data, true).replace('//', '')"
+  >
+    <font-awesome-icon
+      icon="fa-solid fa-folder"
+      class="mr-2"
+    />
     <router-link :to="{ name: RouteNames.LIST_OBJECTS, query: { bucketId: props.node.data.bucketId } }">
       {{ props.node.data.bucketName }}
     </router-link>
-    <span
-      v-if="props.node.data.key === '/'"
-      class="pl-2 text-xs"
-    >
-      {{ getLastSegment(getBucketPath(props.node.data)) }}
-    </span>
-    <span
-      v-else
-      class="pl-2 text-xs"
-    >
-      {{ '/' + getLastSegment(getBucketPath(props.node.data)) }}
-    </span>
   </span>
 </template>

frontend/src/components/common/InviteButton.vue

@@ -172,7 +172,10 @@ onMounted(() => {
         Invite someone using an invite link - the links are single-use; you must generate a new link for each user you
         intend to send this to
       </li>
-      <li>To share publicly or with a direct link, you must set the file to public - this only works for objects</li>
+      <li>
+        To share publicly or with a direct link,
+        you must set the file to public - this only works for individual files
+      </li>
     </ul>
     <TabView>
       <TabPanel
@@ -198,7 +201,7 @@ onMounted(() => {
         header="Invite link"
         :disabled="!hasManagePermission"
       >
-        <h3 class="mt-1 mb-2">{{ props.labelText }} Invite</h3>
+        <h3 class="mt-1 mb-2">{{ (props.labelText) }} Invite</h3>
         <p>Make invite available for</p>
         <div class="flex flex-wrap gap-3">
           <div
@@ -281,9 +284,9 @@ onMounted(() => {
     </TabView>
   </Dialog>
   <Button
-    v-tooltip.bottom="`${props.labelText} Share`"
+    v-tooltip.bottom="`Share ${props.labelText.toLocaleLowerCase()}`"
     class="p-button-lg p-button-text primary"
-    :aria-label="`${props.labelText} Share`"
+    :aria-label="`Share ${props.labelText.toLocaleLowerCase()}`"
     @click="displayInviteDialog = true"
     @keyup.enter="displayInviteDialog = true"
   >