From 34cb6cc81ee9eb3acf8675dbad5f29d8431fe9cc Mon Sep 17 00:00:00 2001
From: Wilfred Asomani <devwilfredagyei@gmail.com>
Date: Fri, 12 Apr 2024 10:22:56 +0000
Subject: [PATCH] web/satellite: add file version actions

This change adds actions - preview, download and delete - to object
version rows. Multiple versions can now be selected for delete.

Issues: https://github.com/storj/storj/issues/6833
https://github.com/storj/storj/issues/6894

Change-Id: I8e6dd3ad03662769507857e58a4a82d3af58cb27
---
 .../src/components/BrowserRowActions.vue      |  19 ++--
 .../src/components/BrowserTableComponent.vue  |  87 +++++++++------
 .../components/dialogs/DeleteFileDialog.vue   |  24 ++--
 .../components/dialogs/FilePreviewDialog.vue  | 105 ++++++++++--------
 .../filePreviewComponents/FilePreviewItem.vue |  21 +++-
 .../src/store/modules/objectBrowserStore.ts   |  30 +++--
 6 files changed, 181 insertions(+), 105 deletions(-)

diff --git a/web/satellite/src/components/BrowserRowActions.vue b/web/satellite/src/components/BrowserRowActions.vue
index 9793752e93fe..2325e53f432b 100644
--- a/web/satellite/src/components/BrowserRowActions.vue
+++ b/web/satellite/src/components/BrowserRowActions.vue
@@ -5,7 +5,7 @@
     <div class="text-no-wrap" :class="alignClass">
         <v-btn
             v-if="file.type !== 'folder'"
-            variant="text"
+            :variant="isVersion ? 'outlined' : 'text'"
             color="default"
             size="small"
             class="mr-1 text-caption"
@@ -16,10 +16,16 @@
             @click="onDownloadClick"
         >
             <icon-download />
-            <!-- <v-tooltip activator="parent" location="start">Download</v-tooltip> -->
+            <v-tooltip
+                activator="parent"
+                location="top"
+            >
+                Download
+            </v-tooltip>
         </v-btn>
 
         <v-btn
+            v-if="!isVersion"
             variant="text"
             color="default"
             size="small"
@@ -33,7 +39,7 @@
         </v-btn>
 
         <v-btn
-            variant="text"
+            :variant="isVersion ? 'outlined' : 'text'"
             color="default"
             size="small"
             class="mr-1 text-caption"
@@ -74,7 +80,7 @@
                         </v-list-item>
                     </template>
 
-                    <v-list-item density="comfortable" link rounded="lg" @click="emit('shareClick')">
+                    <v-list-item v-if="!isVersion" density="comfortable" link rounded="lg" @click="emit('shareClick')">
                         <template #prepend>
                             <icon-share />
                         </template>
@@ -110,14 +116,13 @@ import {
     VProgressCircular,
     VFadeTransition,
     VIcon,
-    VBtn,
+    VBtn, VTooltip,
 } from 'vuetify/components';
 import { mdiDotsHorizontal } from '@mdi/js';
 
 import { BrowserObject, useObjectBrowserStore } from '@/store/modules/objectBrowserStore';
 import { useNotify } from '@/utils/hooks';
 import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames';
-import { useBucketsStore } from '@/store/modules/bucketsStore';
 
 import IconDownload from '@/components/icons/IconDownload.vue';
 import IconShare from '@/components/icons/IconShare.vue';
@@ -125,10 +130,10 @@ import IconPreview from '@/components/icons/IconPreview.vue';
 import IconTrash from '@/components/icons/IconTrash.vue';
 
 const obStore = useObjectBrowserStore();
-const bucketsStore = useBucketsStore();
 const notify = useNotify();
 
 const props = defineProps<{
+    isVersion?: boolean;
     file: BrowserObject;
     align: 'left' | 'right';
 }>();
diff --git a/web/satellite/src/components/BrowserTableComponent.vue b/web/satellite/src/components/BrowserTableComponent.vue
index 3f1184a17a46..58e7f9b8776f 100644
--- a/web/satellite/src/components/BrowserTableComponent.vue
+++ b/web/satellite/src/components/BrowserTableComponent.vue
@@ -21,12 +21,12 @@
         <v-data-table-server
             v-model="selectedFiles"
             v-model:options="options"
-            v-model:expanded="expandedKeys"
+            v-model:expanded="expandedFiles"
             :sort-by="sortBy"
             :headers="headers"
             :items="tableFiles"
             :search="search"
-            :item-value="(item: BrowserObjectWrapper) => item.browserObject.path + item.browserObject.Key"
+            :item-value="(item: BrowserObjectWrapper) => item.browserObject"
             :page="cursor.page"
             hover
             must-sort
@@ -39,18 +39,21 @@
             @update:page="onPageChange"
             @update:itemsPerPage="onLimitChange"
         >
-            <template #expanded-row="{ columns, internalItem: {key} }">
-                <template v-if="!versionsCache.get(key)?.length">
+            <!-- the key of the row is defined by :item-value="(item: BrowserObjectWrapper) => item.browserObject" above -->
+            <template #expanded-row="{ columns, internalItem: { key } }">
+                <template v-if="!versionsCache.get(key.path + key.Key)?.length">
                     <tr>
                         <td :colspan="columns.length">
                             <p class="text-center">No older versions stored</p>
                         </td>
                     </tr>
                 </template>
-                <tr v-for="file in versionsCache.get(key) as BrowserObject[]" v-else :key="file.VersionId" class="bg-altbg">
-                    <td />
+                <tr v-for="file in versionsCache.get(key.path + key.Key) as BrowserObject[]" v-else :key="file.VersionId" class="bg-altbg">
+                    <td class="v-data-table__td v-data-table-column--no-padding v-data-table-column--align-start">
+                        <v-checkbox-btn :model-value="selectedFiles.includes(file)" hide-details @update:modelValue="(selected) => toggleSelectObjectVersion(selected as boolean, file)" />
+                    </td>
                     <td>
-                        <v-list-item class="rounded-lg text-caption pl-1 ml-n1" link>
+                        <v-list-item class="rounded-lg text-caption pl-1 ml-n1" link @click="() => onFileClick(file)">
                             <template #prepend>
                                 <icon-curve-right />
                                 <icon-versioning-clock class="ml-4 mr-3" size="32" dotted />
@@ -73,7 +76,15 @@
                             {{ getFormattedDate(file) }}
                         </p>
                     </td>
-                    <td />
+                    <td>
+                        <browser-row-actions
+                            :file="file"
+                            is-version
+                            align="right"
+                            @preview-click="onFileClick(file)"
+                            @delete-file-click="onDeleteFileClick(file)"
+                        />
+                    </td>
                     <td />
                 </tr>
             </template>
@@ -140,7 +151,11 @@
             </template>
         </v-data-table-server>
 
-        <file-preview-dialog v-model="previewDialog" />
+        <file-preview-dialog
+            v-model="previewDialog"
+            v-model:current-file="fileToPreview"
+            :showing-versions="!!fileToPreview?.VersionId"
+        />
     </v-card>
 
     <v-snackbar
@@ -193,6 +208,7 @@ import { useRouter } from 'vue-router';
 import {
     VBtn,
     VCard,
+    VCheckboxBtn,
     VCol,
     VDataTableRow,
     VDataTableServer,
@@ -271,6 +287,7 @@ const search = ref<string>('');
 const previewDialog = ref<boolean>(false);
 const options = ref<TableOptions>();
 const fileToDelete = ref<BrowserObject | null>(null);
+const fileToPreview = ref<BrowserObject | null>(null);
 const isDeleteFileDialogShown = ref<boolean>(false);
 const fileToShare = ref<BrowserObject | null>(null);
 const isShareDialogShown = ref<boolean>(false);
@@ -315,9 +332,17 @@ const isPaginationEnabled = computed<boolean>(() => config.state.config.objectBr
 
 const versionsCache = computed<Map<string, BrowserObject[]>>(() => obStore.state.objectVersions);
 
-const expandedKeys = computed<string[]>({
-    get: () => obStore.state.versionsExpandedKeys,
-    set: (keys: string[]) => obStore.updateVersionsExpandedKeys(keys),
+const expandedFiles = computed<BrowserObject[]>({
+    get: () => {
+        const files = obStore.state.versionsExpandedKeys.map(name => {
+            const parts = name.split('/');
+            const key = parts.pop();
+            const path = parts.join('/') + (parts.length ? '/' : '');
+            return allFiles.value.find(f => f.browserObject.Key === key && f.browserObject.path === path)?.browserObject;
+        });
+        return files.filter(f => f !== undefined) as BrowserObject[];
+    },
+    set: (files: BrowserObject[]) => obStore.updateVersionsExpandedKeys(files.map(f => f.path + f.Key)),
 });
 
 /**
@@ -402,19 +427,9 @@ const tableFiles = computed<BrowserObjectWrapper[]>(() => {
 /**
  * Returns a list of path+keys for selected files in the table.
  */
-const selectedFiles: WritableComputedRef<string[]> = computed({
-    get: () => obStore.state.selectedFiles.map(f => {
-        return f.path + f.Key;
-    }),
-    set: (names: string[]) => {
-        const files = names.map(name => {
-            const parts = name.split('/');
-            const key = parts.pop();
-            const path = parts.join('/') + (parts.length ? '/' : '');
-            return allFiles.value.find(f => f.browserObject.Key === key && f.browserObject.path === path)?.browserObject;
-        });
-        obStore.updateSelectedFiles(files.filter(f => f !== undefined) as BrowserObject[]);
-    },
+const selectedFiles: WritableComputedRef<BrowserObject[]> = computed({
+    get: () => obStore.state.selectedFiles,
+    set: obStore.updateSelectedFiles,
 });
 
 /**
@@ -471,6 +486,15 @@ function onLimitChange(newLimit: number): void {
     obStore.setCursor({ page: options.value?.page ?? 1, limit: newLimit });
 }
 
+function toggleSelectObjectVersion(isSelected: boolean, version: BrowserObject) {
+    const selected = obStore.state.selectedFiles;
+    if (isSelected) {
+        obStore.updateSelectedFiles([...selected, version]);
+    } else {
+        obStore.updateSelectedFiles(selected.filter(f => f.VersionId !== version.VersionId));
+    }
+}
+
 /**
  * Returns the string form of the file's last modified date.
  */
@@ -522,6 +546,7 @@ function onFileClick(file: BrowserObject): void {
     }
 
     obStore.setObjectPathForModal((file.path ?? '') + file.Key);
+    fileToPreview.value = file;
     previewDialog.value = true;
     isFileGuideShown.value = false;
     dismissFileGuide();
@@ -593,14 +618,14 @@ 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;
+watch(expandedFiles, (objects, oldObjects) => {
+    const newObjects = objects.filter(obj => {
+        return !oldObjects?.some(oldObj => {
+            return oldObj.path + oldObj.Key === obj.path + obj.Key;
         });
     });
-    newKeys.forEach(key => {
-        obStore.listVersions(key);
+    newObjects.forEach(obj => {
+        obStore.listVersions(obj.path + obj.Key);
     });
 });
 
diff --git a/web/satellite/src/components/dialogs/DeleteFileDialog.vue b/web/satellite/src/components/dialogs/DeleteFileDialog.vue
index 114994467674..3d6112c99de5 100644
--- a/web/satellite/src/components/dialogs/DeleteFileDialog.vue
+++ b/web/satellite/src/components/dialogs/DeleteFileDialog.vue
@@ -109,21 +109,31 @@ const innerContent = ref<Component | null>(null);
 
 const filePath = computed<string>(() => bucketsStore.state.fileComponentPath);
 
-const fileCount = computed<number>(() => props.files.filter(file => file.type === 'file').length);
+const fileCount = computed<number>(() => props.files.filter(file => file.type === 'file' && !file.VersionId).length);
 
 const folderCount = computed<number>(() => props.files.filter(file => file.type === 'folder').length);
 
+const versionsCount = computed<number>(() => props.files.filter(file => !!file.VersionId).length);
+
 /**
  * types of objects to be deleted.
  */
 const fileTypes = computed<string>(() => {
-    if (fileCount.value > 0 && folderCount.value > 0) {
-        return `file${fileCount.value > 1 ? 's' : ''} and folder${folderCount.value > 1 ? 's' : ''}`;
-    } else if (folderCount.value > 0) {
-        return `folder${folderCount.value > 1 ? 's' : ''}`;
-    } else {
-        return `file${fileCount.value > 1 ? 's' : ''}`;
+    let result = '';
+
+    if (versionsCount.value > 0) {
+        result += `version${versionsCount.value > 1 ? 's' : ''}`;
+    }
+
+    if (fileCount.value > 0) {
+        result += `${result ? ' and' : ''} file${fileCount.value > 1 ? 's' : ''}`;
+    }
+
+    if (folderCount.value > 0) {
+        result += `${result ? ' and' : ''} folder${folderCount.value > 1 ? 's' : ''}`;
     }
+
+    return result;
 });
 
 const isFolder = computed<boolean>(() => {
diff --git a/web/satellite/src/components/dialogs/FilePreviewDialog.vue b/web/satellite/src/components/dialogs/FilePreviewDialog.vue
index f3143b74cadc..d03c2a64d3fb 100644
--- a/web/satellite/src/components/dialogs/FilePreviewDialog.vue
+++ b/web/satellite/src/components/dialogs/FilePreviewDialog.vue
@@ -17,6 +17,7 @@
             >
                 <v-toolbar-title class="text-subtitle-2">
                     {{ fileName }}
+                    <p v-if="showingVersions && currentFile"> Version ID: {{ currentFile.VersionId }} </p>
                 </v-toolbar-title>
                 <template #append>
                     <v-btn id="Download" :loading="isDownloading" icon size="small" color="white" @click="download">
@@ -29,7 +30,17 @@
                             Download
                         </v-tooltip>
                     </v-btn>
-                    <v-btn id="Share" icon size="small" color="white" @click="isShareDialogShown = true">
+                    <v-btn v-if="showingVersions" id="Delete" icon size="small" color="red" @click="onDeleteFileClick">
+                        <icon-trash />
+                        <v-tooltip
+                            activator="parent"
+                            location="bottom"
+                            theme="light"
+                        >
+                            Delete
+                        </v-tooltip>
+                    </v-btn>
+                    <v-btn v-if="!showingVersions" id="Share" icon size="small" color="white" @click="isShareDialogShown = true">
                         <icon-share size="22" />
                         <v-tooltip
                             activator="parent"
@@ -39,7 +50,7 @@
                             Share
                         </v-tooltip>
                     </v-btn>
-                    <v-btn id="Distribution" icon size="small" color="white" @click="isGeographicDistributionDialogShown = true">
+                    <v-btn v-if="!showingVersions" id="Distribution" icon size="small" color="white" @click="isGeographicDistributionDialogShown = true">
                         <icon-distribution size="22" />
                         <v-tooltip
                             activator="parent"
@@ -49,7 +60,7 @@
                             Geographic Distribution
                         </v-tooltip>
                     </v-btn>
-                    <v-btn icon size="small" color="white">
+                    <v-btn v-if="!showingVersions" icon size="small" color="white">
                         <img src="@/assets/icon-more.svg" width="22" alt="More">
                         <v-tooltip
                             activator="parent"
@@ -120,14 +131,20 @@
                     <!-- v-carousel will mount all items at the same time -->
                     <!-- so :active will tell file-preview-item if it is the current. -->
                     <!-- If it is, it'll load the preview. -->
-                    <file-preview-item :active="i === fileIndex" :file="file" :video-autoplay="videoAutoplay" @download="download" />
+                    <file-preview-item
+                        :active="i === fileIndex"
+                        :file="file"
+                        :video-autoplay="videoAutoplay"
+                        :showing-version="showingVersions"
+                        @download="download"
+                    />
                 </v-carousel-item>
             </v-carousel>
         </v-card>
     </v-dialog>
 
-    <share-dialog v-model="isShareDialogShown" :bucket-name="bucketName" :file="currentFile" />
-    <geographic-distribution-dialog v-model="isGeographicDistributionDialogShown" />
+    <share-dialog v-if="!showingVersions" v-model="isShareDialogShown" :bucket-name="bucketName" :file="currentFile" />
+    <geographic-distribution-dialog v-if="!showingVersions" v-model="isGeographicDistributionDialogShown" />
     <delete-file-dialog
         v-if="fileToDelete"
         v-model="isDeleteFileDialogShown"
@@ -137,7 +154,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, h, nextTick, ref, watch } from 'vue';
+import { computed, h, nextTick, ref, watch, watchEffect } from 'vue';
 import {
     VBtn,
     VCard,
@@ -172,10 +189,12 @@ const obStore = useObjectBrowserStore();
 const bucketsStore = useBucketsStore();
 const notify = useNotify();
 
-withDefaults(defineProps<{
+const props = withDefaults(defineProps<{
     videoAutoplay?: boolean
+    showingVersions?: boolean
 }>(), {
     videoAutoplay: false,
+    showingVersions: false,
 });
 
 const carousel = ref<VCarousel | null>(null);
@@ -188,18 +207,15 @@ const isDeleteFileDialogShown = ref<boolean>(false);
 const folderType = 'folder';
 
 const model = defineModel<boolean>({ required: true });
+const currentFile = defineModel<BrowserObject | null>('currentFile', { required: true });
 
 const constCarouselIndex = computed(() => carouselIndex.value);
 const carouselIndex = ref(0);
 
-/**
- * Retrieve the file object that the modal is set to from the store.
- */
-const currentFile = computed((): BrowserObject => {
-    return obStore.sortedFiles[fileIndex.value];
-});
-
 const files = computed((): BrowserObject[] => {
+    if (props.showingVersions) {
+        return obStore.state.objectVersions.get(filePath.value) ?? [];
+    }
     return obStore.sortedFiles;
 });
 
@@ -207,6 +223,11 @@ const files = computed((): BrowserObject[] => {
  * Retrieve the file index that the modal is set to from the store.
  */
 const fileIndex = computed((): number => {
+    if (props.showingVersions) {
+        return files.value.findIndex((file) => {
+            return file.path + file.Key === filePath.value && file.VersionId === currentFile.value?.VersionId;
+        });
+    }
     return files.value.findIndex(f => f.Key === filePath.value.split('/').pop());
 });
 
@@ -214,14 +235,15 @@ const fileIndex = computed((): number => {
  * Retrieve the name of the current file.
  */
 const fileName = computed((): string | undefined => {
-    return filePath.value.split('/').pop();
+    return currentFile.value?.Key;
 });
 
 /**
  * Retrieve the current filepath.
  */
 const filePath = computed((): string => {
-    return obStore.state.objectPathForModal;
+    if (!currentFile.value) return obStore.state.objectPathForModal;
+    return currentFile.value.path + currentFile.value.Key;
 });
 
 /**
@@ -242,7 +264,7 @@ const bucketName = computed((): string => {
  * Download the current opened file.
  */
 async function download(): Promise<void> {
-    if (isDownloading.value) {
+    if (isDownloading.value || !currentFile.value) {
         return;
     }
 
@@ -264,39 +286,39 @@ async function download(): Promise<void> {
  * Handles on previous click logic.
  */
 function onPrevious(): void {
+    if (files.value.length === 1) return;
     const currentIndex = fileIndex.value;
-    const sortedFilesLength = obStore.sortedFiles.length;
-
-    let newFile: BrowserObject;
-    if (currentIndex <= 0) {
-        newFile = obStore.sortedFiles[sortedFilesLength - 1];
-    } else {
-        newFile = obStore.sortedFiles[currentIndex - 1];
-        if (newFile.type === folderType) {
-            newFile = obStore.sortedFiles[sortedFilesLength - 1];
-        }
+    const filesLength = files.value.length;
+
+    let newFile = currentIndex <= 0 ? files.value[filesLength - 1] : files.value[currentIndex - 1];
+    if (newFile.type === folderType) {
+        newFile = files.value[filesLength - 1];
     }
-    setNewObjectPath(newFile.Key);
+    setNewObjectPath(newFile);
 }
 
 /**
  * Handles on next click logic.
  */
 function onNext(): void {
-    let newFile: BrowserObject | undefined = obStore.sortedFiles[fileIndex.value + 1];
+    if (files.value.length === 1) return;
+    const newIndex = fileIndex.value + 1;
+    const filesLength = files.value.length;
+    let newFile: BrowserObject | undefined = newIndex >= filesLength ? files.value[0] : files.value[newIndex];
     if (!newFile || newFile.type === folderType) {
-        newFile = obStore.sortedFiles.find(f => f.type !== folderType);
+        newFile = files.value.find(f => f.type !== folderType);
 
         if (!newFile) return;
     }
-    setNewObjectPath(newFile.Key);
+    setNewObjectPath(newFile);
 }
 
 /**
  * Sets new object path.
  */
-function setNewObjectPath(objectKey: string): void {
-    obStore.setObjectPathForModal(`${currentPath.value}${objectKey}`);
+function setNewObjectPath(file: BrowserObject): void {
+    obStore.setObjectPathForModal(`${currentPath.value}${file.Key}`);
+    currentFile.value = file;
 }
 
 /**
@@ -323,23 +345,14 @@ function onDeleteComplete(): void {
     model.value = false;
 }
 
-/**
- * Watch for changes on the filepath and changes the current carousel item accordingly.
- */
-watch(filePath, () => {
-    if (!filePath.value) return;
-
-    carouselIndex.value = fileIndex.value;
-});
-
-watch(model, async (shown) => {
-    if (!shown) {
+watchEffect(async () => {
+    if (!model.value) {
         return;
     }
 
     carouselIndex.value = fileIndex.value;
     await focusOnCarousel();
-}, { immediate: true });
+});
 
 watch(isShareDialogShown, async () => {
     if (isShareDialogShown.value) {
diff --git a/web/satellite/src/components/dialogs/filePreviewComponents/FilePreviewItem.vue b/web/satellite/src/components/dialogs/filePreviewComponents/FilePreviewItem.vue
index 38134c5dd541..2658c21a8301 100644
--- a/web/satellite/src/components/dialogs/filePreviewComponents/FilePreviewItem.vue
+++ b/web/satellite/src/components/dialogs/filePreviewComponents/FilePreviewItem.vue
@@ -77,8 +77,10 @@ const props = withDefaults(defineProps<{
     file: BrowserObject,
     active: boolean, // whether this item is visible
     videoAutoplay?: boolean
+    showingVersion?: boolean
 }>(), {
     videoAutoplay: false,
+    showingVersion: false,
 });
 
 const emit = defineEmits<{
@@ -92,12 +94,17 @@ const cachedObjectPreviewURLs = computed((): Map<string, PreviewCache> => {
     return obStore.state.cachedObjectPreviewURLs;
 });
 
+const cacheKey = computed(() => props.showingVersion ? props.file.VersionId ?? '' : encodedFilePath.value);
+
 /**
  * Returns object preview URL from cache.
  */
 const objectPreviewUrl = computed((): string => {
-    const cache = cachedObjectPreviewURLs.value.get(encodedFilePath.value);
+    const cache = cachedObjectPreviewURLs.value.get(cacheKey.value);
     const url = cache?.url || '';
+    if (props.showingVersion) {
+        return url;
+    }
     return `${url}?view=1`;
 });
 
@@ -141,7 +148,11 @@ async function fetchPreviewAndMapUrl(): Promise<void> {
 
     let url = '';
     try {
-        url = await generateObjectPreviewAndMapURL(bucketsStore.state.fileComponentBucketName, props.file.path + props.file.Key);
+        if (props.showingVersion) {
+            url = await obStore.getDownloadLink(props.file);
+        } else {
+            url = await generateObjectPreviewAndMapURL(bucketsStore.state.fileComponentBucketName, props.file.path + props.file.Key);
+        }
     } catch (error) {
         error.message = `Unable to get file preview and map URL. ${error.message}`;
         notify.notifyError(error, AnalyticsErrorEventSource.GALLERY_VIEW);
@@ -152,7 +163,7 @@ async function fetchPreviewAndMapUrl(): Promise<void> {
         isLoading.value = false;
         return;
     }
-    obStore.cacheObjectPreviewURL(encodedFilePath.value, { url, lastModified: props.file.LastModified.getTime() });
+    obStore.cacheObjectPreviewURL(cacheKey.value, { url, lastModified: props.file.LastModified.getTime() });
 
     isLoading.value = false;
 }
@@ -172,12 +183,12 @@ function processFilePath(): void {
  * Try to find current object path in cache.
  */
 function findCachedURL(): string | undefined {
-    const cache = cachedObjectPreviewURLs.value.get(encodedFilePath.value);
+    const cache = cachedObjectPreviewURLs.value.get(cacheKey.value);
 
     if (!cache) return undefined;
 
     if (cache.lastModified !== props.file.LastModified.getTime()) {
-        obStore.removeFromObjectPreviewCache(encodedFilePath.value);
+        obStore.removeFromObjectPreviewCache(cacheKey.value);
         return undefined;
     }
 
diff --git a/web/satellite/src/store/modules/objectBrowserStore.ts b/web/satellite/src/store/modules/objectBrowserStore.ts
index 8096c60eaf6b..dda9708f56c8 100644
--- a/web/satellite/src/store/modules/objectBrowserStore.ts
+++ b/web/satellite/src/store/modules/objectBrowserStore.ts
@@ -4,18 +4,18 @@
 import { computed, reactive, UnwrapNestedRefs } from 'vue';
 import { defineStore } from 'pinia';
 import {
-    S3Client,
+    _Object,
     CommonPrefix,
-    S3ClientConfig,
-    ListObjectsCommand,
-    ListObjectsV2Command,
     DeleteObjectCommand,
-    PutObjectCommand,
-    _Object,
     GetObjectCommand,
-    paginateListObjectsV2,
+    ListObjectsCommand,
+    ListObjectsV2Command,
     ListObjectsV2CommandInput,
     ListObjectVersionsCommand,
+    paginateListObjectsV2,
+    PutObjectCommand,
+    S3Client,
+    S3ClientConfig,
 } from '@aws-sdk/client-s3';
 import { getSignedUrl } from '@aws-sdk/s3-request-presigner';
 import { Progress, Upload } from '@aws-sdk/lib-storage';
@@ -693,6 +693,7 @@ export const useObjectBrowserStore = defineStore('objectBrowser', () => {
         await state.s3.send(new DeleteObjectCommand({
             Bucket: state.bucket,
             Key: path + file.Key,
+            VersionId: file['VersionId'] ?? undefined,
         }));
 
         state.uploading = state.uploading.filter(f => f.Key !== path + file.Key);
@@ -704,6 +705,11 @@ export const useObjectBrowserStore = defineStore('objectBrowser', () => {
                 await list();
             }
 
+            if (file['VersionId']) {
+                // versioned object
+                await listVersions(state.path + file.Key);
+            }
+
             removeFileFromToBeDeleted(file);
         }
     }
@@ -782,13 +788,18 @@ export const useObjectBrowserStore = defineStore('objectBrowser', () => {
         clearAllSelectedFiles();
     }
 
-    async function download(file: BrowserObject): Promise<void> {
+    async function getDownloadLink(file: BrowserObject): Promise<string> {
         assertIsInitialized(state);
 
-        const url = await getSignedUrl(state.s3, new GetObjectCommand({
+        return await getSignedUrl(state.s3, new GetObjectCommand({
             Bucket: state.bucket,
             Key: state.path + file.Key,
+            VersionId: file.VersionId,
         }));
+    }
+
+    async function download(file: BrowserObject): Promise<void> {
+        const url = await getDownloadLink(file);
         const downloadURL = function(data: string, fileName: string) {
             const a = document.createElement('a');
             a.href = data;
@@ -935,6 +946,7 @@ export const useObjectBrowserStore = defineStore('objectBrowser', () => {
         deleteObject,
         deleteFolder,
         deleteSelected,
+        getDownloadLink,
         download,
         updateSelectedFiles,
         updateShiftSelectedFiles,