Merge pull request #142 from bcgov/SC3171

Sc3171
bcgov · Nov 1, 2023 · 6f20a26 · 6f20a26
2 parents 3a68ba9 + 860bb72
commit 6f20a26
Show file tree

Hide file tree

Showing 8 changed files with 46 additions and 5 deletions.
diff --git a/frontend/src/assets/main.scss b/frontend/src/assets/main.scss
@@ -180,3 +180,7 @@ td .wrap-block {
     cursor: pointer;
   }
 }
+.p-input-icon-clear-right {
+  position: absolute !important;
+  right: 0rem;
+}
diff --git a/frontend/src/components/bucket/BucketTable.vue b/frontend/src/components/bucket/BucketTable.vue
@@ -126,6 +126,7 @@ async function deleteBucket(bucketId: string) {
         <template #body="{ data }">
           <Button
             v-if="permissionStore.isBucketActionAllowed(data.bucketId, getUserId, Permissions.UPDATE)"
+            v-tooltip.bottom="'Configure bucket'"
             class="p-button-lg p-button-text"
             aria-label="Configure bucket"
             @click="showBucketConfig(data)"
@@ -134,15 +135,20 @@ async function deleteBucket(bucketId: string) {
           </Button>
           <Button
             v-if="permissionStore.isBucketActionAllowed(data.bucketId, getUserId, Permissions.MANAGE)"
+            v-tooltip.bottom="'Bucket permissions'"
             class="p-button-lg p-button-text"
             aria-label="Bucket permissions"
             @click="showPermissions(data.bucketId, data.bucketName)"
           >
             <font-awesome-icon icon="fa-solid fa-users" />
           </Button>
-          <SyncButton :bucket-id="data.bucketId" />
+          <SyncButton
+            label-text="Synchronize bucket"
+            :bucket-id="data.bucketId"
+          />
           <Button
             v-if="permissionStore.isBucketActionAllowed(data.bucketId, getUserId, Permissions.READ)"
+            v-tooltip.bottom="'Bucket details'"
             class="p-button-lg p-button-rounded p-button-text"
             aria-label="Bucket details"
             @click="showSidebarInfo(data.bucketId)"
@@ -151,6 +157,7 @@ async function deleteBucket(bucketId: string) {
           </Button>
           <Button
             v-if="permissionStore.isBucketActionAllowed(data.bucketId, getUserId, Permissions.DELETE)"
+            v-tooltip.bottom="'Delete bucket'"
             class="p-button-lg p-button-text p-button-danger"
             aria-label="Delete bucket"
             @click="confirmDeleteBucket(data.bucketId)"

diff --git a/frontend/src/components/common/SyncButton.vue b/frontend/src/components/common/SyncButton.vue
@@ -11,11 +11,13 @@ import type { Ref } from 'vue';
 type Props = {
   bucketId?: string;
   objectId?: string;
+  labelText?: string;
 };
 
 const props = withDefaults(defineProps<Props>(), {
   bucketId: '',
-  objectId: ''
+  objectId: '',
+  labelText:''
 });
 
 // State
@@ -107,8 +109,9 @@ const onClick = () => {
   </Dialog>
 
   <Button
+    v-tooltip.bottom="{ value: labelText }"
     class="p-button-lg p-button-text"
-    aria-label="Synchronize bucket"
+    :aria-label="labelText"
     @click="onClick"
   >
     <font-awesome-icon icon="fa-solid fa-sync" />

diff --git a/frontend/src/components/object/DeleteObjectButton.vue b/frontend/src/components/object/DeleteObjectButton.vue
@@ -72,6 +72,7 @@ const confirmDelete = () => {
 
   <Button
     v-if="props.mode === ButtonMode.ICON"
+    v-tooltip.bottom="'Delete object'"
     class="p-button-lg p-button-text p-button-danger"
     :disabled="props.disabled"
     aria-label="Delete object"
@@ -81,6 +82,7 @@ const confirmDelete = () => {
   </Button>
   <Button
     v-else
+    v-tooltip.bottom="'Delete object'"
     class="p-button-outlined p-button-danger"
     :disabled="props.disabled"
     aria-label="Delete object"

diff --git a/frontend/src/components/object/DownloadObjectButton.vue b/frontend/src/components/object/DownloadObjectButton.vue
@@ -55,6 +55,7 @@ const download = () => {
 
   <Button
     v-if="props.mode === ButtonMode.ICON"
+    v-tooltip.bottom="'Download object'"
     class="p-button-lg p-button-text"
     :disabled="props.disabled"
     aria-label="Download object"

diff --git a/frontend/src/components/object/ObjectFileDetails.vue b/frontend/src/components/object/ObjectFileDetails.vue
@@ -165,7 +165,9 @@ watch([props, getObjects], async () => {
           />
           <Button
             v-if="permissionStore.isObjectActionAllowed(props.objectId, getUserId, Permissions.MANAGE, bucketId)"
+            v-tooltip.bottom="'Object permissions'"
             class="p-button-lg p-button-text"
+            aria-label="Object permissions"
             @click="showPermissions(props.objectId)"
           >
             <font-awesome-icon icon="fa-solid fa-users" />

diff --git a/frontend/src/components/object/ObjectTable.vue b/frontend/src/components/object/ObjectTable.vue
@@ -125,11 +125,22 @@ const filters = ref({
             <i class="pi pi-search" />
             <InputText
               v-model="filters['global'].value"
+              class="searchInput"
               placeholder="Search File Names"
             />
+            <Button
+              v-show="filters['global'].value !== null"
+              v-tooltip.bottom="'Clear'"
+              class="ml-2 p-input-icon-clear-right"
+              icon="pi pi-times"
+              outlined
+              aria-label="Clear"
+              @click="filters['global'].value = null"
+            />
           </span>
 
           <Button
+            v-tooltip.bottom="'Refresh'"
             class="ml-2"
             icon="pi pi-refresh"
             outlined
@@ -225,20 +236,25 @@ const filters = ref({
             v-if="
               permissionStore.isObjectActionAllowed(data.id, getUserId, Permissions.MANAGE, props.bucketId as string)
             "
+            v-tooltip.bottom="'Object permissions'"
             class="p-button-lg p-button-text"
             aria-label="Object permissions"
             @click="showPermissions(data.id)"
           >
             <font-awesome-icon icon="fa-solid fa-users" />
           </Button>
-          <SyncButton :object-id="data.id" />
+          <SyncButton
+            label-text="Synchronize file"
+            :object-id="data.id"
+          />
           <Button
             v-if="
               data.public ||
               permissionStore.isObjectActionAllowed(data.id, getUserId, Permissions.READ, props.bucketId as string)
             "
+            v-tooltip.bottom="'Object details'"
             class="p-button-lg p-button-rounded p-button-text"
-            aria-label="Synchronize bucket"
+            aria-label="Object details"
             @click="showInfo(data.id)"
           >
             <font-awesome-icon icon="fa-solid fa-circle-info" />
@@ -279,3 +295,8 @@ const filters = ref({
     </Dialog>
   </div>
 </template>
+<style lang="scss" scoped>
+:deep(.searchInput.p-inputtext) {
+  padding-right: 2.5rem;
+}
+</style>
diff --git a/frontend/src/components/object/share/ShareObjectButton.vue b/frontend/src/components/object/share/ShareObjectButton.vue
@@ -89,6 +89,7 @@ onMounted(() => {
   </Dialog>
 
   <Button
+    v-tooltip.bottom="'Share object'"
     class="p-button-lg p-button-text"
     aria-label="Share object"
     @click="displayShareDialog = true"