From 4d20183e1394e89f4c4775e31bf05d808f905770 Mon Sep 17 00:00:00 2001
From: Wilfred Asomani <devwilfredagyei@gmail.com>
Date: Tue, 16 Apr 2024 17:44:43 +0000
Subject: [PATCH] web/satellite: list object versions

This change implements UI functionality to view a list of an object's versions.

Issue: https://github.com/storj/storj/issues/6833

Change-Id: I88c98b3c070e50e9424720550cc6681e9219baa6
---
 .../components/BrowserSnackbarComponent.vue   |   4 +-
 .../src/components/BrowserTableComponent.vue  | 109 +++++++++++++++---
 .../src/components/icons/IconCurveRight.vue   |  12 ++
 .../src/components/icons/IconFingerPrint.vue  |  19 +++
 .../components/icons/IconVersioningClock.vue  |  10 +-
 .../src/store/modules/objectBrowserStore.ts   |  50 ++++++++
 web/satellite/src/views/Bucket.vue            |  36 +++++-
 7 files changed, 213 insertions(+), 27 deletions(-)
 create mode 100644 web/satellite/src/components/icons/IconCurveRight.vue
 create mode 100644 web/satellite/src/components/icons/IconFingerPrint.vue

diff --git a/web/satellite/src/components/BrowserSnackbarComponent.vue b/web/satellite/src/components/BrowserSnackbarComponent.vue
index 38870ddfdd4e..532569dc02b3 100644
--- a/web/satellite/src/components/BrowserSnackbarComponent.vue
+++ b/web/satellite/src/components/BrowserSnackbarComponent.vue
@@ -3,9 +3,9 @@
 
 <template>
     <v-snackbar
-        v-model="isObjectsUploadModal"
+        :model-value="isObjectsUploadModal"
         vertical
-        :timeout="4000"
+        :timeout="-1"
         color="default"
         elevation="24"
         rounded="lg"
diff --git a/web/satellite/src/components/BrowserTableComponent.vue b/web/satellite/src/components/BrowserTableComponent.vue
index 457d5daa976a..443220a1aa79 100644
--- a/web/satellite/src/components/BrowserTableComponent.vue
+++ b/web/satellite/src/components/BrowserTableComponent.vue
@@ -21,6 +21,7 @@
         <v-data-table-server
             v-model="selectedFiles"
             v-model:options="options"
+            v-model:expanded="expandedKeys"
             :sort-by="sortBy"
             :headers="headers"
             :items="tableFiles"
@@ -34,9 +35,42 @@
             :loading="isFetching || loading"
             :items-length="isPaginationEnabled ? totalObjectCount : allFiles.length"
             :items-per-page-options="isPaginationEnabled ? tableSizeOptions(totalObjectCount, true) : undefined"
+            :show-expand="showObjectVersions"
             @update:page="onPageChange"
             @update:itemsPerPage="onLimitChange"
         >
+            <template #expanded-row="{ internalItem: {key} }">
+                <tr v-for="file in versionsCache.get(key) as BrowserObject[]" :key="file.VersionId" class="bg-altbg">
+                    <td />
+                    <td>
+                        <v-list-item class="rounded-lg text-caption pl-1 ml-n1" link>
+                            <template #prepend>
+                                <icon-curve-right />
+                                <icon-versioning-clock class="ml-4 mr-3" size="32" dotted />
+                            </template>
+                            {{ file.Key }}
+                        </v-list-item>
+                    </td>
+                    <td>
+                        <p class="text-caption">
+                            {{ getFormattedSize(file) }}
+                        </p>
+                    </td>
+                    <td>
+                        <p class="text-caption">
+                            {{ getFileInfo(file).typeInfo.title }}
+                        </p>
+                    </td>
+                    <td>
+                        <p class="text-caption">
+                            {{ getFormattedDate(file) }}
+                        </p>
+                    </td>
+                    <td />
+                    <td />
+                </tr>
+            </template>
+
             <template #no-data>
                 <p class="text-body-2 cursor-pointer py-14 rounded-xlg my-4" @click="emit('uploadClick')">
                     {{ search ? 'No data found' : 'Drag and drop files or folders here, or click to upload files.' }}
@@ -44,6 +78,7 @@
             </template>
             <template #item="{ props: rowProps }">
                 <v-data-table-row v-bind="rowProps">
+                    <template v-if="rowProps.item.raw.browserObject.type === 'folder'" #item.data-table-expand />
                     <template #item.name="{ item }: ItemSlotProps">
                         <v-btn
                             class="rounded-lg w-100 px-1 ml-n1 justify-start font-weight-bold"
@@ -146,18 +181,19 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, watch, WritableComputedRef } from 'vue';
+import { computed, ref, watch, WritableComputedRef } from 'vue';
 import { useRouter } from 'vue-router';
 import {
+    VBtn,
     VCard,
     VCol,
+    VDataTableRow,
+    VDataTableServer,
+    VListItem,
     VRow,
+    VSnackbar,
     VTextField,
-    VBtn,
     VTooltip,
-    VDataTableServer,
-    VDataTableRow,
-    VSnackbar,
 } from 'vuetify/components';
 import { mdiMagnify } from '@mdi/js';
 
@@ -169,7 +205,6 @@ import {
 } from '@/store/modules/objectBrowserStore';
 import { useProjectsStore } from '@/store/modules/projectsStore';
 import { useNotify } from '@/utils/hooks';
-import { SHORT_MONTHS_NAMES } from '@/utils/constants/date';
 import { Size } from '@/utils/bytesSize';
 import { AnalyticsErrorEventSource, AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
 import { useBucketsStore } from '@/store/modules/bucketsStore';
@@ -180,12 +215,16 @@ import { useAnalyticsStore } from '@/store/modules/analyticsStore';
 import { useUsersStore } from '@/store/modules/usersStore';
 import { ROUTES } from '@/router';
 import { Time } from '@/utils/time';
+import { Versioning } from '@/types/versioning';
+import { BucketMetadata } from '@/types/buckets';
 
 import BrowserRowActions from '@/components/BrowserRowActions.vue';
 import FilePreviewDialog from '@/components/dialogs/FilePreviewDialog.vue';
 import DeleteFileDialog from '@/components/dialogs/DeleteFileDialog.vue';
 import ShareDialog from '@/components/dialogs/ShareDialog.vue';
 import IconTrash from '@/components/icons/IconTrash.vue';
+import IconCurveRight from '@/components/icons/IconCurveRight.vue';
+import IconVersioningClock from '@/components/icons/IconVersioningClock.vue';
 
 type SortKey = 'name' | 'type' | 'size' | 'date';
 
@@ -203,6 +242,7 @@ type ItemSlotProps = { item: BrowserObjectWrapper };
 const props = defineProps<{
     forceEmpty?: boolean;
     loading?: boolean;
+    bucket: BucketMetadata;
 }>();
 
 const emit = defineEmits<{
@@ -255,10 +295,24 @@ const bucketName = computed<string>(() => bucketsStore.state.fileComponentBucket
 const filePath = computed<string>(() => bucketsStore.state.fileComponentPath);
 
 /**
- * Returns total object count from store.
+ * Whether versioning has been enabled for current project and versions should be shown.
  */
+const showObjectVersions = computed(() => {
+    if (!projectsStore.versioningUIEnabled) {
+        return false;
+    }
+    return obStore.state.showObjectVersions && props.bucket && props.bucket?.versioning !== Versioning.NotSupported;
+});
+
 const isPaginationEnabled = computed<boolean>(() => config.state.config.objectBrowserPaginationEnabled);
 
+const versionsCache = computed<Map<string, BrowserObject[]>>(() => obStore.state.objectVersions);
+
+const expandedKeys = computed<string[]>({
+    get: () => obStore.state.versionsExpandedKeys,
+    set: (keys: string[]) => obStore.updateVersionsExpandedKeys(keys),
+});
+
 /**
  * Returns total object count from store.
  */
@@ -277,13 +331,12 @@ const allFiles = computed<BrowserObjectWrapper[]>(() => {
 
     const objects = isPaginationEnabled.value ? obStore.displayedObjects : obStore.state.files;
     return objects.map<BrowserObjectWrapper>(file => {
-        const lowerName = file.Key.toLowerCase();
-        const dotIdx = lowerName.lastIndexOf('.');
-        const ext = dotIdx === -1 ? '' : file.Key.slice(dotIdx + 1);
+
+        const { name, ext, typeInfo } = getFileInfo(file);
         return {
             browserObject: file,
-            typeInfo: getFileTypeInfo(ext, file.type),
-            lowerName,
+            typeInfo,
+            lowerName : name,
             ext,
         };
     });
@@ -432,15 +485,17 @@ function getFormattedSize(file: BrowserObject): string {
 /**
  * Returns the title and icon representing a file's type.
  */
-function getFileTypeInfo(ext: string, type: BrowserObject['type']): BrowserObjectTypeInfo {
-    if (!type) return FILE_INFO;
-    if (type === 'folder') return FOLDER_INFO;
+function getFileInfo(file: BrowserObject): { name: string; ext: string; typeInfo: BrowserObjectTypeInfo } {
+    const name = file.Key.toLowerCase();
+    if (!file.type) return { name, ext: '', typeInfo: FILE_INFO };
+    if (file.type === 'folder') return { name, ext: '', typeInfo: FOLDER_INFO };
 
-    ext = ext.toLowerCase();
+    const dotIdx = name.lastIndexOf('.');
+    const ext = dotIdx === -1 ? '' : file.Key.slice(dotIdx + 1).toLowerCase();
     for (const [exts, info] of EXTENSION_INFOS.entries()) {
-        if (exts.indexOf(ext) !== -1) return info;
+        if (exts.indexOf(ext) !== -1) return { name, ext, typeInfo: info };
     }
-    return FILE_INFO;
+    return { name, ext, typeInfo: FILE_INFO };
 }
 
 /**
@@ -530,6 +585,24 @@ async function dismissFileGuide() {
 watch(filePath, fetchFiles, { immediate: true });
 watch(() => props.forceEmpty, v => !v && fetchFiles());
 
+// watch which table rows are expanded and fetch their versions.
+watch(expandedKeys, (keys, oldKeys) => {
+    const newKeys = keys.filter(key => {
+        return !oldKeys?.some(oldKey => {
+            return oldKey === key;
+        });
+    });
+    newKeys.forEach(key => {
+        obStore.listVersions(key);
+    });
+});
+
+watch(() => obStore.state.showObjectVersions, showObjectVersions => {
+    if (!showObjectVersions) {
+        obStore.updateVersionsExpandedKeys([]);
+    }
+});
+
 if (!userStore.noticeDismissal.fileGuide) {
     const unwatch = watch(firstFile, () => {
         isFileGuideShown.value = true;
diff --git a/web/satellite/src/components/icons/IconCurveRight.vue b/web/satellite/src/components/icons/IconCurveRight.vue
new file mode 100644
index 000000000000..4cbc2103c459
--- /dev/null
+++ b/web/satellite/src/components/icons/IconCurveRight.vue
@@ -0,0 +1,12 @@
+// Copyright (C) 2024 Storj Labs, Inc.
+// See LICENSE for copying information.
+
+<template>
+    <svg
+        xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+        stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-corner-down-right"
+    >
+        <polyline points="15 10 20 15 15 20" />
+        <path d="M4 4v7a4 4 0 0 0 4 4h12" />
+    </svg>
+</template>
diff --git a/web/satellite/src/components/icons/IconFingerPrint.vue b/web/satellite/src/components/icons/IconFingerPrint.vue
new file mode 100644
index 000000000000..b0942bbee740
--- /dev/null
+++ b/web/satellite/src/components/icons/IconFingerPrint.vue
@@ -0,0 +1,19 @@
+// Copyright (C) 2024 Storj Labs, Inc.
+// See LICENSE for copying information.
+
+<template>
+    <svg :width="size" :height="size" viewBox="0 0 19 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path
+            d="M9.02199 9.30523C9.46652 9.30523 9.82893 9.6568 9.84634 10.097L9.84699 10.1302V17.175C9.84699 17.6306 9.47763 18 9.02199 18C8.57747 18 8.21506 17.6484 8.19765 17.2082L8.19699 17.175V10.1302C8.19699 9.67459 8.56636 9.30523 9.02199 9.30523ZM9.02199 6.13985C11.1645 6.13985 12.9054 7.85932 12.94 9.99357L12.9405 10.0584V15.008C12.9405 15.4636 12.5711 15.833 12.1155 15.833C11.671 15.833 11.3086 15.4814 11.2912 15.0412L11.2905 15.008V10.0584C11.2905 8.8055 10.2749 7.78985 9.02199 7.78985C7.78499 7.78985 6.77923 8.77995 6.75396 10.0109L6.75348 10.0584V15.008C6.75348 15.4636 6.38411 15.833 5.92848 15.833C5.48395 15.833 5.12155 15.4814 5.10413 15.0412L5.10348 15.008V10.0584C5.10348 7.89423 6.85786 6.13985 9.02199 6.13985ZM9.02199 3.04986C12.7605 3.04986 15.7983 6.05023 15.8587 9.77437L15.8596 9.88744V13.8958C15.8596 14.3515 15.4902 14.7208 15.0346 14.7208C14.5901 14.7208 14.2276 14.3693 14.2102 13.929L14.2096 13.8958V9.88744C14.2096 7.02242 11.887 4.69986 9.02199 4.69986C6.18562 4.69986 3.88092 6.9762 3.83511 9.80165L3.83441 9.88744V13.8958C3.83441 14.3515 3.46505 14.7208 3.00941 14.7208C2.56489 14.7208 2.20248 14.3693 2.18507 13.929L2.18441 13.8958V9.88744C2.18441 6.11115 5.2457 3.04986 9.02199 3.04986ZM9.02199 0C12.9984 0 16.4375 2.19523 17.9656 5.72562C18.1466 6.14377 17.9543 6.62946 17.5362 6.81045C17.118 6.99144 16.6323 6.79919 16.4513 6.38104C15.188 3.46232 12.3488 1.65 9.02199 1.65C5.69608 1.65 2.85526 3.46171 1.58145 6.38308C1.39933 6.80073 0.913122 6.99168 0.495464 6.80957C0.0778064 6.62745 -0.11314 6.14124 0.0689727 5.72359C1.60829 2.19332 5.04749 0 9.02199 0Z"
+            fill="currentColor"
+        />
+    </svg>
+</template>
+
+<script setup lang="ts">
+withDefaults(defineProps<{
+    size?: number | string;
+}>(), {
+    size: 19,
+});
+</script>
diff --git a/web/satellite/src/components/icons/IconVersioningClock.vue b/web/satellite/src/components/icons/IconVersioningClock.vue
index e1f35ee84a5e..6da9d7660c43 100644
--- a/web/satellite/src/components/icons/IconVersioningClock.vue
+++ b/web/satellite/src/components/icons/IconVersioningClock.vue
@@ -3,12 +3,18 @@
 
 <template>
     <svg :width="size" :height="size" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <g clip-path="url(#clip0_5125_630)">
+        <g v-if="!dotted" clip-path="url(#clip0_5125_630)">
             <path d="M18 0.375H6C2.8934 0.375 0.375 2.8934 0.375 6V18C0.375 21.1066 2.8934 23.625 6 23.625H18C21.1066 23.625 23.625 21.1066 23.625 18V6C23.625 2.8934 21.1066 0.375 18 0.375Z" fill="white" stroke="black" stroke-opacity="0.2" stroke-width="0.75" />
             <path d="M6 12C6 13.1867 6.35189 14.3467 7.01118 15.3334C7.67047 16.3201 8.60754 17.0892 9.7039 17.5433C10.8003 17.9974 12.0067 18.1162 13.1705 17.8847C14.3344 17.6532 15.4035 17.0818 16.2426 16.2426C17.0818 15.4035 17.6532 14.3344 17.8847 13.1705C18.1162 12.0067 17.9974 10.8003 17.5433 9.7039C17.0892 8.60754 16.3201 7.67047 15.3334 7.01118C14.3467 6.35189 13.1867 6 12 6C10.3226 6.00631 8.71265 6.66082 7.50667 7.82667L6 9.33333" stroke="black" stroke-linecap="round" stroke-linejoin="round" />
             <path d="M6 6.85718V9.33336H8.57143" stroke="black" stroke-linecap="round" stroke-linejoin="round" />
             <path d="M12 8.57141V12L15.4286 11.9999" stroke="black" stroke-linecap="round" stroke-linejoin="round" />
         </g>
+        <g v-else clip-path="url(#clip0_5112_641)">
+            <path d="M18 0.375H6C2.8934 0.375 0.375 2.8934 0.375 6V18C0.375 21.1066 2.8934 23.625 6 23.625H18C21.1066 23.625 23.625 21.1066 23.625 18V6C23.625 2.8934 21.1066 0.375 18 0.375Z" stroke="currentColor" stroke-opacity="0.2" stroke-width="0.75" stroke-dasharray="1.5 1.5" />
+            <path d="M6.75 12C6.75 13.0384 7.05791 14.0534 7.63478 14.9167C8.21166 15.7801 9.0316 16.453 9.99091 16.8504C10.9502 17.2477 12.0058 17.3517 13.0242 17.1491C14.0426 16.9466 14.9781 16.4465 15.7123 15.7123C16.4465 14.9781 16.9466 14.0426 17.1491 13.0242C17.3517 12.0058 17.2477 10.9502 16.8504 9.99091C16.453 9.0316 15.7801 8.21166 14.9167 7.63478C14.0534 7.05791 13.0384 6.75 12 6.75C10.5323 6.75552 9.12357 7.32821 8.06833 8.34833L6.75 9.66667" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" />
+            <path d="M6.75 7.5V9.66666H9" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" />
+            <path d="M12 9V12L15 12" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" />
+        </g>
         <defs>
             <clipPath id="clip0_5125_630">
                 <rect width="24" height="24" fill="white" />
@@ -20,7 +26,9 @@
 <script setup lang="ts">
 withDefaults(defineProps<{
     size?: number | string;
+    dotted?: boolean;
 }>(), {
     size: 24,
+    dotted: false,
 });
 </script>
diff --git a/web/satellite/src/store/modules/objectBrowserStore.ts b/web/satellite/src/store/modules/objectBrowserStore.ts
index b6cb310dd77b..3c27d7a1b0c8 100644
--- a/web/satellite/src/store/modules/objectBrowserStore.ts
+++ b/web/satellite/src/store/modules/objectBrowserStore.ts
@@ -15,6 +15,7 @@ import {
     GetObjectCommand,
     paginateListObjectsV2,
     ListObjectsV2CommandInput,
+    ListObjectVersionsCommand,
 } from '@aws-sdk/client-s3';
 import { getSignedUrl } from '@aws-sdk/s3-request-presigner';
 import { Progress, Upload } from '@aws-sdk/lib-storage';
@@ -30,6 +31,7 @@ const listCache = new Map();
 
 export type BrowserObject = {
     Key: string;
+    VersionId?: string;
     Size: number;
     LastModified: Date;
     type?: 'file' | 'folder';
@@ -101,6 +103,10 @@ export class FilesState {
     objectPathForModal = '';
     objectsCount = 0;
     cachedObjectPreviewURLs: Map<string, PreviewCache> = new Map<string, PreviewCache>();
+    showObjectVersions: boolean = true;
+    objectVersions: Map<string, BrowserObject[]> = new Map<string, BrowserObject[]>();
+    // object keys for which we have expanded versions list.
+    versionsExpandedKeys: string[] = [];
 }
 
 type InitializedFilesState = FilesState & {
@@ -250,6 +256,10 @@ export const useObjectBrowserStore = defineStore('objectBrowser', () => {
         state.files = files;
     }
 
+    function updateVersionsExpandedKeys(keys: string[]): void {
+        state.versionsExpandedKeys = keys;
+    }
+
     async function list(path = state.path): Promise<void> {
         if (listCache.has(path)) {
             updateFiles(path, listCache.get(path));
@@ -268,6 +278,33 @@ export const useObjectBrowserStore = defineStore('objectBrowser', () => {
         processFetchedObjects(path, Contents, CommonPrefixes);
     }
 
+    async function listVersions(objectKey: string): Promise<void> {
+        assertIsInitialized(state);
+        const response = await state.s3.send(new ListObjectVersionsCommand({
+            Bucket: state.bucket,
+            Delimiter: '/',
+            Prefix: objectKey,
+        }));
+        const Key = objectKey.substring(objectKey.lastIndexOf('/') + 1);
+        const path = objectKey.substring(0, objectKey.lastIndexOf('/') + 1);
+
+        const { Versions } = response;
+        const versions = Versions ?? [];
+
+        const makeFileRelative = (file) => ({
+            ...file,
+            Key,
+            path,
+            type: 'file',
+        });
+
+        const files: BrowserObject[] = [
+            ...versions.map(makeFileRelative),
+        ];
+
+        state.objectVersions.set(objectKey, files);
+    }
+
     async function initList(path = state.path): Promise<void> {
         assertIsInitialized(state);
 
@@ -598,6 +635,9 @@ export const useObjectBrowserStore = defineStore('objectBrowser', () => {
             } else {
                 await list();
             }
+            if (state.versionsExpandedKeys.includes(item.Key)) {
+                listVersions(item.Key);
+            }
 
             const uploadedFiles = state.files.filter(f => f.type === 'file');
             if (uploadedFiles.length === 1 && !key.includes('/') && state.openModalOnFirstUpload) {
@@ -834,6 +874,10 @@ export const useObjectBrowserStore = defineStore('objectBrowser', () => {
         state.uploading = [];
     }
 
+    function toggleShowObjectVersions(): void {
+        state.showObjectVersions = !state.showObjectVersions;
+    }
+
     function clear(): void {
         state.s3 = null;
         state.accessKey = null;
@@ -858,6 +902,9 @@ export const useObjectBrowserStore = defineStore('objectBrowser', () => {
         state.openModalOnFirstUpload = false;
         state.objectPathForModal = '';
         state.cachedObjectPreviewURLs = new Map<string, PreviewCache>();
+        state.showObjectVersions = true;
+        state.objectVersions = new Map<string, BrowserObject[]>();
+        state.versionsExpandedKeys = [];
     }
 
     return {
@@ -871,8 +918,10 @@ export const useObjectBrowserStore = defineStore('objectBrowser', () => {
         list,
         initList,
         listByToken,
+        listVersions,
         back,
         setCursor,
+        updateVersionsExpandedKeys,
         sort,
         getObjectCount,
         upload,
@@ -897,6 +946,7 @@ export const useObjectBrowserStore = defineStore('objectBrowser', () => {
         cacheObjectPreviewURL,
         removeFromObjectPreviewCache,
         clearUploading,
+        toggleShowObjectVersions,
         clear,
     };
 });
diff --git a/web/satellite/src/views/Bucket.vue b/web/satellite/src/views/Bucket.vue
index 55d7ad16f0bc..01df30125de4 100644
--- a/web/satellite/src/views/Bucket.vue
+++ b/web/satellite/src/views/Bucket.vue
@@ -94,24 +94,42 @@
                     </template>
                     <v-list class="pa-2">
                         <v-list-item
-                            v-if="versioningUIEnabled && bucket && bucket.versioning !== Versioning.NotSupported"
+                            v-if="versioningUIEnabled"
                             density="comfortable"
                             link
                             rounded="lg"
                             @click="onToggleVersioning"
                         >
                             <template #prepend>
-                                <IconVersioning v-if="bucket.versioning !== Versioning.Enabled" />
+                                <IconVersioning v-if="bucket?.versioning !== Versioning.Enabled" />
                                 <IconPause v-else />
                             </template>
                             <v-list-item-title
                                 class="pl-2 text-body-2 font-weight-medium"
                             >
                                 {{
-                                    bucket.versioning !== Versioning.Enabled ? 'Enable Versioning' : 'Suspend Versioning'
+                                    bucket?.versioning !== Versioning.Enabled ? 'Enable Versioning' : 'Suspend Versioning'
                                 }}
                             </v-list-item-title>
                         </v-list-item>
+
+                        <v-list-item
+                            v-if="versioningUIEnabled"
+                            density="comfortable"
+                            link
+                            rounded="lg"
+                            @click="obStore.toggleShowObjectVersions()"
+                        >
+                            <template #prepend>
+                                <icon-finger-print />
+                            </template>
+                            <v-list-item-title
+                                class="pl-2 text-body-2 font-weight-medium"
+                            >
+                                {{ showObjectVersions ? "Hide" : "Show" }} Versions
+                            </v-list-item-title>
+                        </v-list-item>
+
                         <v-list-item
                             density="comfortable"
                             link
@@ -190,7 +208,7 @@
         </v-col>
 
         <browser-card-view-component v-if="isCardView" :force-empty="!isInitialized" @upload-click="buttonFileUpload" />
-        <browser-table-component v-else :loading="isFetching" :force-empty="!isInitialized" @upload-click="buttonFileUpload" />
+        <browser-table-component v-else :bucket="bucket" :loading="isFetching" :force-empty="!isInitialized" @upload-click="buttonFileUpload" />
     </v-container>
 
     <browser-new-folder-dialog v-model="isNewFolderDialogOpen" />
@@ -253,6 +271,7 @@ import IconVersioning from '@/components/icons/IconVersioning.vue';
 import IconShare from '@/components/icons/IconShare.vue';
 import IconTrash from '@/components/icons/IconTrash.vue';
 import ToggleVersioningDialog from '@/components/dialogs/ToggleVersioningDialog.vue';
+import IconFingerPrint from '@/components/icons/IconFingerPrint.vue';
 
 const bucketsStore = useBucketsStore();
 const obStore = useObjectBrowserStore();
@@ -280,9 +299,14 @@ const isDeleteBucketDialogShown = ref<boolean>(false);
 const bucketToToggleVersioning = ref<BucketMetadata | null>(null);
 
 /**
- * Whether versioning has been enabled for current project.
+ * Whether versioning has been enabled for current project and allowed for this bucket specifically.
+ */
+const versioningUIEnabled = computed(() => projectsStore.versioningUIEnabled && bucket.value && bucket.value.versioning !== Versioning.NotSupported);
+
+/**
+ * Whether object versions should be shown.
  */
-const versioningUIEnabled = computed(() => projectsStore.versioningUIEnabled);
+const showObjectVersions = computed(() => obStore.state.showObjectVersions);
 
 /**
  * Returns the name of the selected bucket.