Recursive sync button

frontend/src/assets/main.scss

@@ -176,6 +176,7 @@ div:focus-visible {
   }
   &.icon-medium { font-size: 200%; }
   &.icon-large { font-size: 250%; }
+  &.sync-icon { font-size: 130%; }
 }
 
 .p-button:hover {

frontend/src/components/bucket/BucketConfigForm.vue

@@ -5,8 +5,11 @@ import { object, string } from 'yup';
 
 import Password from '@/components/form/Password.vue';
 import TextInput from '@/components/form/TextInput.vue';
+import { SyncButton } from '@/components/common';
+
 import { Button, useToast } from '@/lib/primevue';
 import { useAuthStore, useBucketStore } from '@/store';
+import { ButtonMode } from '@/utils/enums';
 import { differential, getBucketPath, joinPath } from '@/utils/utils';
 
 import type { Bucket } from '@/types';
@@ -170,11 +173,20 @@ const onCancel = () => {
         icon="pi pi-check"
       />
       <Button
-        class="p-button-outlined mt-2"
+        class="p-button-outlined mt-2 mr-1"
         label="Cancel"
         icon="pi pi-times"
         @click="onCancel"
       />
+      <SyncButton
+        v-if="props.bucket"
+        class="p-button-outlined mt-2 mr-1"
+        label="Sync"
+        label-text="Synchronize all files and sub-folders"
+        :bucket-id="bucket?.bucketId"
+        :mode="ButtonMode.BUTTON"
+        :recursive="true"
+        />
     </Form>
   </div>
 </template>

frontend/src/components/bucket/BucketTable.vue

@@ -9,6 +9,7 @@ import { Button, Column, Dialog, TreeTable, useConfirm } from '@/lib/primevue';
 import { useAppStore, useAuthStore, useBucketStore, useNavStore, usePermissionStore } from '@/store';
 import { DELIMITER, Permissions } from '@/utils/constants';
 import { getBucketPath, joinPath, onDialogHide } from '@/utils/utils';
+import { ButtonMode } from '@/utils/enums';
 
 import type { TreeTableExpandedKeys } from 'primevue/treetable';
 import type { Ref } from 'vue';
@@ -328,8 +329,9 @@ watch(getBuckets, () => {
           </Button>
           <SyncButton
             v-if="permissionStore.isBucketActionAllowed(node.data.bucketId, getUserId, Permissions.READ)"
-            label-text="Synchronize storage location"
+            label-text="Synchronize files in this folder"
             :bucket-id="node.data.bucketId"
+            :mode="ButtonMode.ICON"
           />
           <Button
             v-if="permissionStore.isBucketActionAllowed(node.data.bucketId, getUserId, Permissions.READ)"

frontend/src/components/common/SyncButton.vue

@@ -4,6 +4,7 @@ import { ref } from 'vue';
 
 import { Button, Dialog, useToast } from '@/lib/primevue';
 import { useObjectStore, useBucketStore, useNavStore } from '@/store';
+import { ButtonMode } from '@/utils/enums';
 import { formatDateLong } from '@/utils/formatters';
 import { onDialogHide } from '@/utils/utils';
 
@@ -13,13 +14,18 @@ import type { Ref } from 'vue';
 type Props = {
   bucketId?: string;
   objectId?: string;
+  recursive: boolean;
   labelText?: string;
+  disabled?: boolean;
+  mode: ButtonMode;
 };
 
 const props = withDefaults(defineProps<Props>(), {
   bucketId: '',
   objectId: '',
-  labelText: ''
+  recursive: false,
+  labelText: '',
+  disabled: false
 });
 
 // State
@@ -40,8 +46,10 @@ const displaySyncDialog = ref(false);
 const onSubmit = () => {
   if (props.objectId) {
     objectStore.syncObject(props.objectId);
-  } else if (props.bucketId) {
+  } else if (props.bucketId && !props.recursive) {
     bucketStore.syncBucket(props.bucketId, false);
+  } else if (props.bucketId && props.recursive) {
+    bucketStore.syncBucket(props.bucketId, true);
   } else {
     toast.error('', 'Unable to synchronize');
   }
@@ -101,20 +109,28 @@ const onClick = () => {
     </h3>
 
     <span class="mr-2">Last sync date:</span>
-    <span v-if="lastSyncRequestedDate">
-      {{ lastSyncRequestedDate }}
-    </span>
-    <span v-else-if="lastSyncedDate">
-      {{ lastSyncedDate }}
-    </span>
-    <span v-else>(none)</span>
+    <strong>
+      <span v-if="lastSyncRequestedDate">
+        {{ lastSyncRequestedDate }}
+      </span>
+      <span v-else-if="lastSyncedDate">
+        {{ lastSyncedDate }}
+      </span>
+      <span v-else>(none)</span>
+    </strong>
 
     <ul class="mb-4 ml-1.5">
-      <li v-if="props.bucketId">
-        This will schedule a synchronization of the folder's contents with its source storage location
-        (&quot;bucket&quot;)
+      <!-- recursive bucket-->
+      <li v-if="props.bucketId && props.recursive">
+        This will schedule a <strong>Full</strong> synchronization of all files
+        and any sub-folders with the source storage location.
+      </li>
+      <!-- flat bucket -->
+      <li v-else-if="props.bucketId">
+        This will schedule a synchronization of the folder's contents with its source storage location.
       </li>
-      <li v-else>This will schedule a synchronization of the file</li>
+      <!-- object -->
+      <li v-else>This will schedule a synchronization of any new versions or metadata found in the storage location</li>
       <li>
         Use this if you are modifying it outside of BCBox, such as in another software application, and want to see
         those changes reflected in BCBox
@@ -136,12 +152,35 @@ const onClick = () => {
     />
   </Dialog>
 
-  <Button
+  <!-- <Button
     v-tooltip.bottom="{ value: labelText }"
     class="p-button-lg p-button-text"
     :aria-label="labelText"
     @click="onClick"
   >
   <span class="material-icons-outlined">sync</span>
+  </Button> -->
+
+
+  <Button
+    v-if="props.mode === ButtonMode.ICON"
+    v-tooltip.bottom="{ value: labelText }"
+    class="p-button-lg p-button-text p-button-primary btn-delete-text"
+    :disabled="props.disabled"
+    :aria-label="labelText"
+    @click="onClick"
+  >
+  <span class="material-icons-outlined">sync</span>
+  </Button>
+  <Button
+    v-else
+    v-tooltip.bottom="{ value: labelText }"
+    class="p-button-outlined btn-delete"
+    :disabled="props.disabled"
+    :aria-label="labelText"
+    @click="onClick"
+  >
+  <span class="material-icons-outlined mr-1 sync-icon">sync</span>
+    Sync
   </Button>
 </template>

frontend/src/components/object/DeletedObjectTable.vue

@@ -296,6 +296,7 @@ onUnmounted(() => {
           <SyncButton
             label-text="Synchronize file"
             :object-id="data.id"
+            :mode="ButtonMode.ICON"
           />
           <Button
             v-if="

frontend/src/components/object/ObjectTable.vue

@@ -354,6 +354,7 @@ const selectedFilters = (payload: any) => {
           <SyncButton
             label-text="Synchronize file"
             :object-id="data.id"
+            :mode="ButtonMode.ICON"
           />
           <Button
             v-if="