Public Folders

.github/workflows/unit-tests.yaml

@@ -135,24 +135,24 @@ jobs:
           threshold_alert: 50
           threshold_warning: 80
 
-  test-coverage:
-    name: Publish to Code Climate
-    needs:
-      - test-app
-      - test-frontend
-    if: needs.test-app.outputs.HAS_CC_SECRETS == 'true'
-    runs-on: ubuntu-latest
-    timeout-minutes: 10
-    steps:
-      - name: Checkout Repository
-        uses: actions/checkout@v4
-      - name: Restore Coverage Results
-        uses: actions/download-artifact@v4
-      - name: Publish code coverage
-        uses: paambaati/codeclimate-action@v5
-        env:
-          CC_TEST_REPORTER_ID: ${{ secrets.CC_TEST_REPORTER_ID }}
-        with:
-          coverageLocations: |
-            ${{ github.workspace }}/**/lcov.info:lcov
-          prefix: ${{ github.workplace }}
+  # test-coverage:
+  #   name: Publish to Code Climate
+  #   needs:
+  #     - test-app
+  #     - test-frontend
+  #   if: needs.test-app.outputs.HAS_CC_SECRETS == 'true'
+  #   runs-on: ubuntu-latest
+  #   timeout-minutes: 10
+  #   steps:
+  #     - name: Checkout Repository
+  #       uses: actions/checkout@v4
+  #     - name: Restore Coverage Results
+  #       uses: actions/download-artifact@v4
+  #     - name: Publish code coverage
+  #       uses: paambaati/codeclimate-action@v5
+  #       env:
+  #         CC_TEST_REPORTER_ID: ${{ secrets.CC_TEST_REPORTER_ID }}
+  #       with:
+  #         coverageLocations: |
+  #           ${{ github.workspace }}/**/lcov.info:lcov
+  #         prefix: ${{ github.workplace }}

app/.eslintrc.js

@@ -31,7 +31,7 @@ module.exports = {
     'max-len': ['warn', { code: 120, comments: 120, ignoreUrls: true }],
     'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'warn',
     'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'warn',
-    quotes: ['error', 'single'],
+    quotes: ['error', 'single', { avoidEscape: true }],
     semi: ['error', 'always']
   },
   overrides: [

frontend/.eslintrc.js

@@ -33,7 +33,7 @@ module.exports = {
     'max-len': ['warn', { code: 120, comments: 120, ignoreUrls: true }],
     'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'warn',
     'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'warn',
-    quotes: ['error', 'single'],
+    quotes: ['error', 'single', { avoidEscape: true }],
     semi: ['error', 'always'],
     'vue/component-tags-order': [
       'error',

frontend/src/assets/main.scss

@@ -251,11 +251,26 @@ div:focus-visible {
 }
 .p-tag {
   background-color: $bcbox-primary;
-  font-size: 1rem;
+  font-size: .8rem;
   padding: 0.25rem 0.75rem;
   font-weight: 400;
 }
 
+.p-tag-danger {
+  background-color: #fef1d8;
+  outline-style: solid;
+  outline-color: #f8bb47;
+  outline-width: thin;
+
+  .p-tag-value {
+    color: #474543;
+  }
+
+  .p-tag-icon {
+    color: #474543
+  }
+}
+
 /* datatable */
 .p-datatable,
 .p-treetable {
@@ -312,6 +327,7 @@ div:focus-visible {
   }
   .action-buttons {
     text-align: right;
+    white-space: nowrap;
     // width: 150px;
   }
 
@@ -338,7 +354,8 @@ div:focus-visible {
 .bcbox-info-dialog {
   width: 800px;
   .p-dialog-header {
-    padding-bottom: 0;
+    padding: 1rem 1.5rem;
+    border-bottom: 1px solid #dee2e6;
 
     .svg-inline--fa,
     span[class^="material-icons-"] {
@@ -352,12 +369,15 @@ div:focus-visible {
       @extend h2;
     }
   }
-
+  .p-dialog-content{
+        padding-top: .5rem;
+  }
   .bcbox-info-dialog-subhead {
+    font-size: 120%;
     font-weight: normal;
-    margin-bottom: 1.5rem;
-    padding-left: 2.6rem;
+    padding-left: .3rem;
     @extend .wrap-block;
+
   }
 }
 

frontend/src/components/bucket/BucketChildConfig.vue

@@ -92,17 +92,23 @@ const onCancel = () => {
         Add subfolder
       </span>
     </template>
+
     <h3
       id="subfolder_desc"
-      class="bcbox-info-dialog-subhead mb-0"
+      class="bcbox-info-dialog-subhead"
     >
+      Adding a subfolder below:
+      <br />
+      <font-awesome-icon
+        icon="fa-solid fa-folder"
+        class="mr-2 mt-2"
+      />
       {{ props.parentBucket.bucketName }}
     </h3>
-    <ul class="mt-0 pl-3">
-      <li>Sets a subfolder to appear within a folder</li>
-    </ul>
+
     <Form
       id="add-subfolder"
+      class="mt-4"
       aria-label="Add subfolder"
       :validation-schema="schema"
       role="form"
@@ -117,19 +123,18 @@ const onCancel = () => {
       </Message>
       <TextInput
         name="subKey"
-        label="Path"
-        placeholder="my-documents"
+        label="Path:"
+        placeholder="eg: 2024/January/my-documents"
         :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).`"
+          but it can't be changed after it is set. Folder levels are supported using '/' between levels.`"
         class="child-input"
         focus-trap
       />
       <TextInput
         name="bucketName"
-        label="Folder display name *"
-        placeholder="My Documents"
+        label="Folder display name: *"
+        placeholder="eg: 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"
       />

frontend/src/components/bucket/BucketConfigForm.vue

@@ -1,7 +1,9 @@
 <script setup lang="ts">
+import { onBeforeMount, ref } from 'vue';
 import { storeToRefs } from 'pinia';
 import { Form } from 'vee-validate';
 import { object, string } from 'yup';
+import { differenceInSeconds } from 'date-fns';
 
 import Password from '@/components/form/Password.vue';
 import TextInput from '@/components/form/TextInput.vue';
@@ -12,6 +14,7 @@ import { useAuthStore, useBucketStore } from '@/store';
 import { ButtonMode } from '@/utils/enums';
 import { differential, getBucketPath, joinPath } from '@/utils/utils';
 
+import type { Ref } from 'vue';
 import type { Bucket } from '@/types';
 
 export type BucketForm = {
@@ -25,7 +28,7 @@ export type BucketForm = {
 
 // Props
 type Props = {
-  bucket?: Bucket;
+  bucket?: Bucket & { isRoot?: boolean };
 };
 
 const props = withDefaults(defineProps<Props>(), {
@@ -90,9 +93,10 @@ const onSubmit = async (values: any) => {
 
     // If added a new configuration, do a recursive sync of this bucket
     if (!props.bucket) {
-      await bucketStore.syncBucket(bucketModel.bucketId, true)
+      await bucketStore
+        .syncBucket(bucketModel.bucketId, true)
         .then(() => toast.info('Sync in progress', ''))
-        .catch(error => toast.error('Unable to sync with storage location', error, { life: 0 }));
+        .catch((error) => toast.error('Unable to sync with storage location', error, { life: 0 }));
     }
 
     // refresh bucket list
@@ -120,6 +124,39 @@ const onSubmit = async (values: any) => {
 const onCancel = () => {
   emit('cancel-bucket-config');
 };
+
+// disable some form fields if configuring a subfolder
+const timeToNextManual: Ref<number> = ref(0);
+const syncButtonDisabled = ref(true);
+
+const updateSyncButtonStatus = async () => {
+  if (props.bucket) {
+    const manualMinimum = 1800; // 30 minutes
+    const now = new Date();
+    // if sync in progress, show status
+    const syncQueueSize: Ref<number> = ref(0);
+    syncQueueSize.value = await bucketStore.syncBucketStatus(props.bucket.bucketId);
+    if (syncQueueSize.value > 0) {
+      const word = syncQueueSize.value > 1 ? 'files' : 'file';
+      toast.info('Sync in progress.', `${syncQueueSize.value} ${word} remaining.`, { life: 0 });
+      timeToNextManual.value = manualMinimum;
+    } else {
+      const lastSyncDate = new Date(props.bucket.lastSyncRequestedDate as string);
+      const sinceLastSyncDate = differenceInSeconds(now, lastSyncDate);
+      // if havent synced for 30 minutes, enable button
+      if (sinceLastSyncDate > manualMinimum) {
+        syncButtonDisabled.value = false;
+      }
+      // else show time until minimum has passed since last
+      else {
+        timeToNextManual.value = Math.ceil((manualMinimum - sinceLastSyncDate) / 60);
+      }
+    }
+  }
+};
+onBeforeMount(async () => {
+  updateSyncButtonStatus();
+});
 </script>
 
 <template>
@@ -132,33 +169,37 @@ const onCancel = () => {
       <TextInput
         name="bucketName"
         label="Folder name *"
-        placeholder="My Documents"
+        placeholder="eg: 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."
+          shown in BCBox as a folder."
         focus-trap
       />
       <TextInput
+        :disabled="props.bucket && !props.bucket.isRoot"
         name="bucket"
         label="Bucket *"
-        placeholder="bucket0123456789"
-        :help-text="'The name of the bucket given to you. For example: \'yxwgj\'.'"
+        placeholder="eg: mybucket"
+        :help-text="'The name of the object storage bucket. For example: \'yxwgj\'.'"
       />
       <TextInput
+        :disabled="props.bucket && !props.bucket.isRoot"
         name="endpoint"
         label="Endpoint *"
-        placeholder="https://example.com"
+        placeholder="eg: https://nrs.objectstore.gov.bc.ca"
         help-text="The URL of your object storage namespace without the bucket identifier/name."
       />
       <Password
+        :disabled="props.bucket && !props.bucket.isRoot"
         name="accessKeyId"
-        label="Access key identifier / User account *"
-        placeholder="username"
+        label="Access key ID *"
+        placeholder=""
         help-text="User/Account identifier or username."
       />
       <Password
+        :disabled="props.bucket && !props.bucket.isRoot"
         name="secretAccessKey"
         label="Secret access key *"
-        placeholder="password"
+        placeholder=""
         help-text="A password used to access the bucket."
       />
       <TextInput
@@ -170,27 +211,36 @@ const onCancel = () => {
           This will default to the root '/' if not provided."
         :disabled="!!props.bucket"
       />
-      <Button
-        class="p-button mt-2 mr-1"
-        label="Apply"
-        type="submit"
-        icon="pi pi-check"
-      />
-      <Button
-        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"
-      />
+      <div class="flex flex-row">
+        <Button
+          class="flex p-button mt-2 mr-2"
+          label="Apply"
+          type="submit"
+          icon="pi pi-check"
+        />
+        <Button
+          class="flex p-button-outlined mt-2 mr-2"
+          label="Cancel"
+          icon="pi pi-times"
+          @click="onCancel"
+        />
+        <span
+          v-tooltip.left="
+            syncButtonDisabled
+              ? `Sync will be available in ${timeToNextManual} minutes`
+              : 'Sync all files and sub-folders with storage'
+          "
+          class="flex ml-auto mt-2"
+        >
+          <SyncButton
+            v-if="props.bucket"
+            :disabled="syncButtonDisabled"
+            :bucket-id="bucket?.bucketId"
+            :mode="ButtonMode.BUTTON"
+            :recursive="true"
+          />
+        </span>
+      </div>
     </Form>
   </div>
 </template>