From ae8b1209a4671049fa25486d8a84f516a2b4bccf Mon Sep 17 00:00:00 2001
From: Csaky <Tim.Csaky@gov.bc.ca>
Date: Fri, 13 Dec 2024 15:32:43 -0800
Subject: [PATCH] Soft-delete/restore Feature

delete/restore versions from File details page
soft-delete and restore files
Deleted files view for each folder
Uses new COMS copyVersion feature
---
 frontend/src/assets/main.scss                 |   7 +
 .../components/object/DeleteObjectButton.vue  |  51 ++-
 .../components/object/ObjectFileDetails.vue   |  56 ++-
 frontend/src/components/object/ObjectList.vue |   8 +-
 .../components/object/ObjectListDeleted.vue   |  99 +++++
 .../components/object/ObjectProperties.vue    |   2 +-
 .../src/components/object/ObjectTable.vue     |   3 +-
 .../components/object/ObjectTableDeleted.vue  | 367 ++++++++++++++++++
 .../src/components/object/ObjectVersion.vue   |  54 +--
 .../components/object/RestoreObjectButton.vue | 106 +++++
 frontend/src/components/object/index.ts       |   3 +
 frontend/src/router/index.ts                  |   7 +
 frontend/src/services/objectService.ts        |  16 +
 frontend/src/store/objectStore.ts             |  56 ++-
 frontend/src/store/versionStore.ts            |   6 +-
 frontend/src/utils/constants.ts               |   1 +
 .../src/views/detail/DetailObjectsView.vue    |   2 +-
 .../src/views/list/ListObjectsDeletedView.vue |  74 ++++
 frontend/tests/unit/store/objectStore.spec.ts |   6 +-
 .../tests/unit/store/versionStore.spec.ts     |   3 +-
 20 files changed, 853 insertions(+), 74 deletions(-)
 create mode 100644 frontend/src/components/object/ObjectListDeleted.vue
 create mode 100644 frontend/src/components/object/ObjectTableDeleted.vue
 create mode 100644 frontend/src/components/object/RestoreObjectButton.vue
 create mode 100644 frontend/src/views/list/ListObjectsDeletedView.vue

diff --git a/frontend/src/assets/main.scss b/frontend/src/assets/main.scss
index f41b9182..797ef5bb 100644
--- a/frontend/src/assets/main.scss
+++ b/frontend/src/assets/main.scss
@@ -121,6 +121,10 @@ div:focus-visible {
   box-shadow: 0 6px 6px -1px rgb(145, 145, 145);
 }
 
+.p-tooltip{
+  max-width: 400px !important;
+}
+
 /* layout */
 .layout-main {
   margin: 1rem;
@@ -231,6 +235,9 @@ div:focus-visible {
       &.selected-row {
         background: $bcbox-highlight-background !important;
       }
+      &.deleted-row td:not(.action-buttons) {
+        opacity: 0.6 !important;
+      }
     }
   }
 
diff --git a/frontend/src/components/object/DeleteObjectButton.vue b/frontend/src/components/object/DeleteObjectButton.vue
index 2c8d9b5d..110086fe 100644
--- a/frontend/src/components/object/DeleteObjectButton.vue
+++ b/frontend/src/components/object/DeleteObjectButton.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { storeToRefs } from 'pinia';
-import { ref } from 'vue';
+import { computed, ref } from 'vue';
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
 
 import { Button, Dialog, useConfirm } from '@/lib/primevue';
@@ -14,10 +14,12 @@ type Props = {
   ids: Array<string>;
   mode: ButtonMode;
   versionId?: string; // Only use this when deleting a single object
+  hard?: boolean
 };
 
 const props = withDefaults(defineProps<Props>(), {
-  versionId: undefined
+  versionId: undefined,
+  hard: false
 });
 
 // Emits
@@ -36,20 +38,38 @@ const confirm = useConfirm();
 const confirmDelete = () => {
   focusedElement.value = document.activeElement;
   if (props.ids.length) {
-    const item = props.versionId ? 'version' : 'object';
+    const item = props.versionId ? 'version' : 'file';
     const msgContext = props.ids.length > 1 ? `the selected ${props.ids.length} ${item}s` : `this ${item}`;
+    const permText = props.hard || props.versionId  ? 'permanently ' : '';
     confirm.require({
-      message: `Please confirm that you want to delete ${msgContext}.`,
+      message: `Please confirm that you want to ${permText}delete ${msgContext}.`,
       header: `Delete ${props.ids.length > 1 ? item + 's' : item}`,
       acceptLabel: 'Confirm',
       rejectLabel: 'Cancel',
       accept: () => {
-        props.ids?.forEach((id: string) => {
+
+
+        // props.ids?.forEach((id: string) => {
+        //   objectStore
+        //     .deleteObject(id, props.versionId, props.hard)
+        //     .then(() => emit('on-deleted-success',
+        //       props.versionId, // version Id or undefined
+        //       props.versionId || false, // true or false
+        //       props.hard)) // if doing hard delete of object
+        //     .catch(() => {});
+        // });
+
+        for (const id of props.ids) {
           objectStore
-            .deleteObject(id, props.versionId)
-            .then(() => emit('on-deleted-success', props.versionId))
+            .deleteObject(id, props.versionId, props.hard)
+            .then(() => emit('on-deleted-success',
+              props.versionId, // version Id or undefined
+              props.versionId || false, // true or false
+              props.hard)) // if doing hard delete of object
             .catch(() => {});
-        });
+        };
+
+
       },
       onHide: () => onDialogHide(),
       reject: () => onDialogHide()
@@ -58,6 +78,13 @@ const confirmDelete = () => {
     displayNoFileDialog.value = true;
   }
 };
+const buttonLabel = computed(() => {
+  return props.hard ?
+    (props.versionId ?
+      'Permanently delete version' : (props.ids.length > 1 ?
+        'Permanently delete these files' : 'Permanently delete file')) :
+    (props.versionId ? 'Delete version' : 'Delete file' );
+});
 </script>
 
 <template>
@@ -78,20 +105,20 @@ const confirmDelete = () => {
 
   <Button
     v-if="props.mode === ButtonMode.ICON"
-    v-tooltip.bottom="props.versionId ? 'Delete version' : 'Delete file'"
+    v-tooltip.bottom="buttonLabel"
     class="p-button-lg p-button-text p-button-danger"
     :disabled="props.disabled"
-    :aria-label="props.versionId ? 'Delete version' : 'Delete file'"
+    :aria-label="buttonLabel"
     @click="confirmDelete()"
   >
     <font-awesome-icon icon="fa-solid fa-trash" />
   </Button>
   <Button
     v-else
-    v-tooltip.bottom="props.versionId ? 'Delete version' : 'Delete file'"
+    v-tooltip.bottom="buttonLabel"
     class="p-button-outlined p-button-danger"
     :disabled="props.disabled"
-    :aria-label="props.versionId ? 'Delete version' : 'Delete file'"
+    :aria-label="buttonLabel"
     @click="confirmDelete()"
   >
     <font-awesome-icon
diff --git a/frontend/src/components/object/ObjectFileDetails.vue b/frontend/src/components/object/ObjectFileDetails.vue
index 0d947d4c..498c2db4 100644
--- a/frontend/src/components/object/ObjectFileDetails.vue
+++ b/frontend/src/components/object/ObjectFileDetails.vue
@@ -51,29 +51,40 @@ const versionStore = useVersionStore();
 
 const { getUserId } = storeToRefs(useAuthStore());
 const { getObject } = storeToRefs(objectStore);
-const { getVersionsByObjectId, getLatestVersionIdByObjectId } = storeToRefs(versionStore);
+const { getIsDeleted, getLatestVersionIdByObjectId, getVersionsByObjectId } = storeToRefs(versionStore);
 
 // State
 const object: Ref<COMSObject | undefined> = ref(undefined);
 const bucketId: Ref<string> = ref('');
+const permissionsVisible: Ref<boolean> = ref(false);
 
+// version stuff
 const currentVersionId: Ref<string | undefined> = ref(props.versionId);
 const latestVersionId = computed(() => getLatestVersionIdByObjectId.value(props.objectId));
-const permissionsVisible: Ref<boolean> = ref(false);
+const isDeleted: Ref<boolean> = computed(() => getIsDeleted.value(props.objectId));
 
-async function onVersionsChanged() {
-  await Promise.all([
-    versionStore.fetchVersions({ objectId: props.objectId }),
-    metadataStore.fetchMetadata({ objectId: props.objectId }),
-    tagStore.fetchTagging({ objectId: props.objectId })
-  ]).then(async () => {
-    currentVersionId.value = latestVersionId.value;
+async function onVersionsChanged(changedVersionId: string | undefined, isVersion: boolean, hardDelete: boolean) {
+  // if doing hard delete or no versions left, redirect to object list
+  const otherVersions = getVersionsByObjectId.value(props.objectId)
+    .filter(v=>v.id !== changedVersionId);
 
+  if (hardDelete || (isVersion && otherVersions.length === 0)) {
+    router.push({ path: '/list/objects', query: { bucketId: bucketId.value }});
+  }
+  // else stay on page
+  else {
     await Promise.all([
-      versionStore.fetchMetadata({ objectId: props.objectId }),
-      versionStore.fetchTagging({ objectId: props.objectId })
-    ]);
-  });
+      versionStore.fetchVersions({ objectId: props.objectId }),
+      metadataStore.fetchMetadata({ objectId: props.objectId }),
+      tagStore.fetchTagging({ objectId: props.objectId })
+    ]).then(async () => {
+      currentVersionId.value = latestVersionId.value;
+      await Promise.all([
+        versionStore.fetchMetadata({ objectId: props.objectId }),
+        versionStore.fetchTagging({ objectId: props.objectId })
+      ]);
+    });
+  }
 }
 
 onMounted(async () => {
@@ -84,7 +95,7 @@ onMounted(async () => {
   object.value = getObject.value(props.objectId);
   bucketId.value = object.value ? object.value.bucketId : '';
   if (
-    head?.status !== 204 &&
+    (head?.status !== 204 && !isDeleted.value) &&
     (!object.value ||
       !permissionStore.isObjectActionAllowed(object.value.id, getUserId.value, Permissions.READ, object.value.bucketId))
   ) {
@@ -121,19 +132,21 @@ onMounted(async () => {
 
         <div class="action-buttons">
           <ShareButton
+            v-if="!isDeleted"
             :object-id="props.objectId"
             label-text="File"
           />
           <DownloadObjectButton
-            v-if="
-              object.public || permissionStore.isObjectActionAllowed(object.id, getUserId, Permissions.READ, bucketId)
-            "
+            v-if="(object.public ||
+              permissionStore.isObjectActionAllowed(object.id, getUserId, Permissions.READ, bucketId)) &&
+              !isDeleted"
             :mode="ButtonMode.ICON"
             :ids="[object.id]"
             :version-id="currentVersionId"
           />
           <Button
-            v-if="permissionStore.isObjectActionAllowed(object.id, getUserId, Permissions.MANAGE, bucketId)"
+            v-if="permissionStore.isObjectActionAllowed(object.id, getUserId, Permissions.MANAGE, bucketId) &&
+              !isDeleted"
             v-tooltip.bottom="'File permissions'"
             class="p-button-lg p-button-text"
             aria-label="File permissions"
@@ -145,8 +158,7 @@ onMounted(async () => {
             v-if="permissionStore.isObjectActionAllowed(object.id, getUserId, Permissions.DELETE, bucketId)"
             :mode="ButtonMode.ICON"
             :ids="[object.id]"
-            :version-id="currentVersionId"
-            :disabled="getVersionsByObjectId(object.id).length === 1"
+            :hard="isDeleted"
             @on-deleted-success="onVersionsChanged"
           />
         </div>
@@ -162,7 +174,7 @@ onMounted(async () => {
         <ObjectAccess :object-id="object.id" />
         <ObjectMetadata
           v-model:version-id="currentVersionId"
-          :editable="currentVersionId === latestVersionId"
+          :editable="!isDeleted && (currentVersionId === latestVersionId)"
           :object-id="object.id"
           @on-metadata-success="onVersionsChanged"
         />
@@ -182,10 +194,12 @@ onMounted(async () => {
           :bucket-id="bucketId"
           :object-id="object.id"
           @on-deleted-success="onVersionsChanged"
+          @on-restored-success="onVersionsChanged"
         />
         <ObjectTag
           v-model:version-id="currentVersionId"
           :object-id="object.id"
+          :editable="!isDeleted"
         />
       </div>
     </div>
diff --git a/frontend/src/components/object/ObjectList.vue b/frontend/src/components/object/ObjectList.vue
index cc00acb0..6a5b3a5c 100644
--- a/frontend/src/components/object/ObjectList.vue
+++ b/frontend/src/components/object/ObjectList.vue
@@ -11,7 +11,7 @@ import {
 } from '@/components/object';
 import { Button } from '@/lib/primevue';
 import { useAuthStore, useObjectStore, useNavStore, usePermissionStore } from '@/store';
-import { Permissions } from '@/utils/constants';
+import { Permissions, RouteNames } from '@/utils/constants';
 import { ButtonMode } from '@/utils/enums';
 import { onDialogHide } from '@/utils/utils';
 
@@ -94,14 +94,17 @@ const onDeletedSuccess = () => {
         Upload
       </Button>
       <DownloadObjectButton
+        v-if="selectedObjectIds.length > 0"
         :disabled="displayUpload"
         :ids="selectedObjectIds"
         :mode="ButtonMode.BUTTON"
       />
       <DeleteObjectButton
+        v-if="selectedObjectIds.length > 0"
         :disabled="displayUpload"
         :ids="selectedObjectIds"
         :mode="ButtonMode.BUTTON"
+        :hard="false"
         @on-deleted-success="onDeletedSuccess"
       />
     </div>
@@ -128,6 +131,9 @@ const onDeletedSuccess = () => {
         />
       </div>
     </div>
+    <router-link :to="{ name: RouteNames.LIST_OBJECTS_DELETED, query: { bucketId: props.bucketId } }">
+        Recycle Bin
+    </router-link>
   </div>
 </template>
 
diff --git a/frontend/src/components/object/ObjectListDeleted.vue b/frontend/src/components/object/ObjectListDeleted.vue
new file mode 100644
index 00000000..08d99dd8
--- /dev/null
+++ b/frontend/src/components/object/ObjectListDeleted.vue
@@ -0,0 +1,99 @@
+<script setup lang="ts">
+import { storeToRefs } from 'pinia';
+import { computed, ref } from 'vue';
+
+import {
+  DeleteObjectButton,
+  ObjectSidebar,
+  ObjectTableDeleted,
+} from '@/components/object';
+import { useObjectStore } from '@/store';
+import { RouteNames } from '@/utils/constants';
+import { ButtonMode } from '@/utils/enums';
+
+import type { Ref } from 'vue';
+
+// Props
+type Props = {
+  bucketId?: string;
+};
+
+const props = withDefaults(defineProps<Props>(), {
+  bucketId: undefined
+});
+
+//const navStore = useNavStore();
+const objectStore = useObjectStore();
+
+const { getSelectedObjects } = storeToRefs(objectStore);
+
+// State
+const objectInfoId: Ref<string | undefined> = ref(undefined);
+const objectTableKey = ref(0);
+
+const selectedObjectIds = computed(() => {
+  return getSelectedObjects.value.map((o) => o.id);
+});
+
+const showObjectInfo = async (objectId: string | undefined) => {
+  objectInfoId.value = objectId;
+};
+
+const closeObjectInfo = () => {
+  objectInfoId.value = undefined;
+};
+
+const onDeletedSuccess = () => {
+  objectTableKey.value += 1;
+};
+</script>
+
+<template>
+  <div>
+    <div class="head-actions">
+      <DeleteObjectButton
+        v-if="selectedObjectIds.length > 0"
+        :ids="selectedObjectIds"
+        :mode="ButtonMode.BUTTON"
+        :hard="true"
+        @on-deleted-success="onDeletedSuccess"
+      />
+    </div>
+
+    <div
+      class="flex mt-4"
+      :class="{ 'disable-overlay': false }"
+    >
+      <div class="flex-grow-1">
+        <ObjectTableDeleted
+          :key="objectTableKey"
+          :bucket-id="props.bucketId"
+          :object-info-id="objectInfoId"
+          @show-object-info="showObjectInfo"
+        />
+      </div>
+      <div
+        v-if="objectInfoId"
+        class="flex-shrink-1 w-4"
+      >
+        <ObjectSidebar
+          :object-id="objectInfoId"
+          @close-object-info="closeObjectInfo"
+        />
+      </div>
+    </div>
+    <router-link
+      class="deleted-files-link"
+      :to="{ name: RouteNames.LIST_OBJECTS, query: { bucketId: props.bucketId } }"
+    >
+      Back to folder
+    </router-link>
+  </div>
+</template>
+
+<style scoped>
+.disable-overlay {
+  pointer-events: none;
+  opacity: 0.4;
+}
+</style>
diff --git a/frontend/src/components/object/ObjectProperties.vue b/frontend/src/components/object/ObjectProperties.vue
index fb995b3e..f369a9e4 100644
--- a/frontend/src/components/object/ObjectProperties.vue
+++ b/frontend/src/components/object/ObjectProperties.vue
@@ -28,7 +28,7 @@ const { getUser } = storeToRefs(userStore);
 
 const object: Ref<COMSObject> = computed((): any => getObject.value(props.objectId));
 const bucket: Ref<Bucket | undefined> = computed(() => getBucket.value(object.value?.bucketId as string));
-const createdBy: Ref<string | undefined> = computed(() => getUser.value(object.value.createdBy)?.fullName);
+const createdBy: Ref<string | undefined> = computed(() => getUser.value(object.value?.createdBy)?.fullName);
 const updatedBy: Ref<string | undefined> = computed(() => getUser.value(object.value?.updatedBy)?.fullName);
 
 onMounted(() => {
diff --git a/frontend/src/components/object/ObjectTable.vue b/frontend/src/components/object/ObjectTable.vue
index 39a42b39..f789586b 100644
--- a/frontend/src/components/object/ObjectTable.vue
+++ b/frontend/src/components/object/ObjectTable.vue
@@ -254,7 +254,7 @@ const selectedFilters = (payload: any) => {
           v-if="!loading"
           class="flex justify-content-center"
         >
-          <h3>There are no objects associated with your account in this bucket.</h3>
+          <h4 class="py-5">There are no files associated with your account in this folder.</h4>
         </div>
       </template>
       <template #loading>
@@ -374,6 +374,7 @@ const selectedFilters = (payload: any) => {
               permissionStore.isObjectActionAllowed(data.id, getUserId, Permissions.DELETE, props.bucketId as string)
             "
             :mode="ButtonMode.ICON"
+            :hard="false"
             :ids="[data.id]"
             @on-deleted-success="onDeletedSuccess"
           />
diff --git a/frontend/src/components/object/ObjectTableDeleted.vue b/frontend/src/components/object/ObjectTableDeleted.vue
new file mode 100644
index 00000000..0def8fd0
--- /dev/null
+++ b/frontend/src/components/object/ObjectTableDeleted.vue
@@ -0,0 +1,367 @@
+<script setup lang="ts">
+import { storeToRefs } from 'pinia';
+import { onUnmounted, onMounted, ref } from 'vue';
+
+import { Spinner } from '@/components/layout';
+import {
+  DeleteObjectButton,
+  ObjectPermission,
+} from '@/components/object';
+import { SyncButton } from '@/components/common';
+import { Button, Column, DataTable, Dialog, InputText, useToast } from '@/lib/primevue';
+import { useAuthStore, useObjectStore, useNavStore, usePermissionStore } from '@/store';
+import { Permissions, RouteNames } from '@/utils/constants';
+import { onDialogHide } from '@/utils/utils';
+import { ButtonMode } from '@/utils/enums';
+import { formatDateLong } from '@/utils/formatters';
+import { objectService } from '@/services';
+
+import type { Ref } from 'vue';
+import type { COMSObject } from '@/types';
+
+type COMSObjectDataSource = {
+  lastUpdatedDate?: string;
+} & COMSObject;
+
+type DataTableObjectSource = {
+  [key: string]: any;
+};
+
+type DataTableFilter = {
+  [key: string]: { value: any; matchMode: string };
+};
+// Props
+type Props = {
+  bucketId?: string;
+  objectInfoId?: string;
+};
+
+const props = withDefaults(defineProps<Props>(), {
+  bucketId: undefined,
+  objectInfoId: undefined
+});
+
+// Emits
+const emit = defineEmits(['show-object-info']);
+
+// Store
+const objectStore = useObjectStore();
+const permissionStore = usePermissionStore();
+const { getUserId } = storeToRefs(useAuthStore());
+const { focusedElement } = storeToRefs(useNavStore());
+
+// State
+const permissionsVisible = ref(false);
+const permissionsObjectId = ref('');
+const permissionsObjectName: Ref<string | undefined> = ref('');
+const tableData: Ref<Array<COMSObjectDataSource>> = ref([]);
+const lazyDataTable = ref();
+const loading: Ref<boolean> = ref(false);
+const lazyParams: Ref<DataTableObjectSource> = ref({});
+const totalRecords: Ref<number> = ref(0);
+const first: Ref<number> = ref(0);
+const filters: Ref<DataTableFilter> = ref({
+  name: { value: undefined, matchMode: 'contains' }
+});
+
+// Actions
+const toast = useToast();
+const onDeletedSuccess = () => {
+  toast.success('File deleted');
+  loadLazyData();
+};
+
+const showInfo = (id: string) => {
+  emit('show-object-info', id);
+  focusedElement.value = document.activeElement;
+};
+
+async function showPermissions(objectId: string) {
+  await permissionStore.fetchObjectPermissions({ objectId });
+
+  permissionsVisible.value = true;
+  permissionsObjectId.value = objectId;
+  permissionsObjectName.value = objectStore.getObject(objectId)?.name;
+  focusedElement.value = document.activeElement;
+}
+
+onMounted(() => {
+  loading.value = true;
+  lazyParams.value = {
+    first: 0,
+    rows: lazyDataTable.value.rows,
+    sortField: 'updatedAt',
+    page: lazyDataTable.value.page,
+    sortOrder: 'desc',
+    filters: filters
+  };
+  loadLazyData();
+});
+
+const loadLazyData = (event?: any) => {
+  lazyParams.value = { ...lazyParams.value, first: event?.first || first.value, page: event?.page || 0 };
+  objectService
+    .searchObjects(
+      {
+        bucketId: props.bucketId ? [props.bucketId] : undefined,
+        deleteMarker: true,
+        latest: true,
+        page: lazyParams.value?.page ? ++lazyParams.value.page : 1,
+        name: lazyParams.value?.filters?.name.value ? lazyParams.value?.filters?.name.value : undefined,
+        limit: lazyParams.value.rows,
+        sort: lazyParams.value.sortField,
+        order: lazyParams.value.sortOrder === 1 ? 'asc' : 'desc',
+      }
+    )
+    .then((r: any) => {
+      tableData.value = r.data.map((item: any) => ({
+        ...item,
+        updatedAt: item.updatedAt === null ? item.createdAt : item.updatedAt
+      }));
+      totalRecords.value = +r?.headers['x-total-rows'];
+      // add objects to store
+      objectStore.setObjects(r.data);
+      loading.value = false;
+      return r.data;
+    })
+    // add object permissions to store
+    .then((objects: Array<COMSObjectDataSource>) => {
+      if (objects.length > 0) {
+        permissionStore.fetchObjectPermissions({ objectId: objects.map((o: COMSObject) => o.id) });
+      }
+    });
+};
+
+const onPage = (event?: any) => {
+  lazyParams.value = event;
+  loadLazyData(event);
+};
+
+const onSort = (event?: any) => {
+  lazyParams.value = event;
+  loadLazyData(event);
+};
+
+const onFilter = (event?: any) => {
+  lazyParams.value.filters = filters;
+  // Seems to be a bug as current page is not being reset when filter trigger
+  lazyDataTable.value.resetPage();
+  loadLazyData(event);
+};
+
+// Clear selections when navigating away
+onUnmounted(() => {
+  objectStore.setSelectedObjects([]);
+});
+
+</script>
+
+<template>
+  <div class="object-table">
+    <DataTable
+      ref="lazyDataTable"
+      v-model:value="tableData"
+      v-model:selection="objectStore.selectedObjects"
+      v-model:filters="filters"
+      lazy
+      paginator
+      :loading="loading"
+      :total-records="totalRecords"
+      data-key="id"
+      class="p-datatable-sm"
+      responsive-layout="scroll"
+      :rows="10"
+      :rows-per-page-options="[10, 20, 50]"
+      sort-field="updatedAt"
+      :sort-order="-1"
+      :global-filter-fields="['name']"
+      :first="first"
+      update:filters
+      update:page
+      @page="onPage($event)"
+      @sort="onSort($event)"
+      @filter="onFilter($event)"
+    >
+      <template #header>
+        <div class="flex justify-content-end">
+          <span class="ml-4">
+            <InputText
+              v-model="filters.name.value"
+              class="pr-6"
+              placeholder="Search File Names"
+              @keyup.enter="loadLazyData"
+            />
+            <Button
+              v-show="filters.name.value"
+              v-tooltip.bottom="'Clear'"
+              class="overlap"
+              icon="pi pi-times"
+              outlined
+              aria-label="Clear"
+              @click="
+                () => {
+                  filters.name.value = undefined;
+                }
+              "
+            />
+          </span>
+          <Button
+            v-tooltip.bottom="'Search'"
+            class="ml-2"
+            icon="pi pi-search"
+            outlined
+            rounded
+            aria-label="Filter"
+            @click="onFilter()"
+          />
+        </div>
+      </template>
+      <template #empty>
+        <div
+          v-if="!loading"
+          class="flex justify-content-center"
+        >
+          <h4 class="py-5">There are no deleted files in this folder</h4>
+        </div>
+      </template>
+      <template #loading>
+        <Spinner />
+      </template>
+      <Column
+        selection-mode="multiple"
+        header-style="width: 3rem"
+      />
+      <Column
+        field="name"
+        sortable
+        header="Name"
+        header-style="min-width: 25%"
+        body-class="truncate"
+      >
+        <template #body="{ data }">
+          <div>
+            <router-link :to="{ name: RouteNames.DETAIL_OBJECTS, query: { objectId: data.id } }">
+              <span v-tooltip.bottom="'View file details'">
+                {{ data.name }}
+              </span>
+            </router-link>
+          </div>
+        </template>
+      </Column>
+      <!-- <Column
+        field="id"
+        sortable
+        header="Object ID"
+        style="width: 150px"
+      >
+        <template #body="{ data }">
+          <div
+            v-tooltip.bottom="{ value: data.id }"
+            :data-objectId="data.id"
+          >
+            {{ formatShortUuid(data.id) }}
+          </div>
+        </template>
+      </Column> -->
+      <Column
+        field="updatedAt"
+        header="Updated date"
+        style="width: 300px"
+        sortable
+      >
+        <template #body="{ data }">
+          {{ formatDateLong(data.updatedAt) }}
+        </template>
+      </Column>
+      <Column
+        header="Actions"
+        header-style="min-width: 270px"
+        header-class="header-right"
+        body-class="action-buttons"
+      >
+        <template #body="{ data }">
+          <Button
+            v-if="
+              permissionStore.isObjectActionAllowed(data.id, getUserId, Permissions.MANAGE, props.bucketId as string)
+            "
+            id="file_permissions"
+            v-tooltip.bottom="'File permissions'"
+            class="p-button-lg p-button-text"
+            aria-label="File permissions"
+            @click="showPermissions(data.id)"
+          >
+            <font-awesome-icon icon="fa-solid fa-users" />
+          </Button>
+          <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="'File details'"
+            class="p-button-lg p-button-rounded p-button-text"
+            aria-label="File details"
+            @click="showInfo(data.id)"
+          >
+            <font-awesome-icon icon="fa-solid fa-circle-info" />
+          </Button>
+          <DeleteObjectButton
+            v-if="
+              permissionStore.isObjectActionAllowed(data.id, getUserId, Permissions.DELETE, props.bucketId as string)
+            "
+            :hard="true"
+            :mode="ButtonMode.ICON"
+            :ids="[data.id]"
+            @on-deleted-success="onDeletedSuccess"
+          />
+        </template>
+      </Column>
+    </DataTable>
+
+    <!-- eslint-disable vue/no-v-model-argument -->
+    <Dialog
+      id="permissions_dialog"
+      v-model:visible="permissionsVisible"
+      :draggable="false"
+      :modal="true"
+      class="bcbox-info-dialog"
+      aria-labelledby="permissions_label"
+      aria-describedby="permissions_desc"
+      @after-hide="onDialogHide"
+    >
+      <!-- eslint-enable vue/no-v-model-argument -->
+      <template #header>
+        <font-awesome-icon
+          icon="fas fa-users"
+          fixed-width
+        />
+        <span
+          id="permissions_label"
+          class="p-dialog-title"
+        >
+          File Permissions
+        </span>
+      </template>
+
+      <h3
+        id="permissions_desc"
+        class="bcbox-info-dialog-subhead"
+      >
+        {{ permissionsObjectName }}
+      </h3>
+
+      <ObjectPermission :object-id="permissionsObjectId" />
+    </Dialog>
+  </div>
+</template>
+<style lang="scss" scoped>
+.overlap {
+  position: absolute;
+  right: 3.4rem;
+  width: 2.5rem;
+  height: 2.4rem;
+}
+</style>
diff --git a/frontend/src/components/object/ObjectVersion.vue b/frontend/src/components/object/ObjectVersion.vue
index 398a0b25..f94de7f7 100644
--- a/frontend/src/components/object/ObjectVersion.vue
+++ b/frontend/src/components/object/ObjectVersion.vue
@@ -2,8 +2,8 @@
 import { storeToRefs } from 'pinia';
 import { watch, computed } from 'vue';
 
-import { DeleteObjectButton, DownloadObjectButton } from '@/components/object';
-import { Button, Column, DataTable } from '@/lib/primevue';
+import { DeleteObjectButton, DownloadObjectButton, RestoreObjectButton } from '@/components/object';
+import { Column, DataTable } from '@/lib/primevue';
 import { useAppStore, useAuthStore, usePermissionStore, useUserStore, useVersionStore } from '@/store';
 import { Permissions } from '@/utils/constants';
 import { ButtonMode } from '@/utils/enums';
@@ -25,7 +25,7 @@ type Props = {
 const props = withDefaults(defineProps<Props>(), {});
 
 // Emits
-const emit = defineEmits(['on-deleted-success']);
+const emit = defineEmits(['on-deleted-success', 'on-restored-success']);
 
 // Store
 const permissionStore = usePermissionStore();
@@ -34,30 +34,39 @@ const versionStore = useVersionStore();
 // getters
 const { getUserId } = storeToRefs(useAuthStore());
 const { getUser } = storeToRefs(userStore);
-const { getVersionsByObjectId } = storeToRefs(versionStore);
+const { getIsDeleted, getVersionsByObjectId } = storeToRefs(versionStore);
 
 // State
 const versionId = defineModel<string>('versionId');
 const versions: Ref<Array<Version>> = computed(() => getVersionsByObjectId.value(props.objectId));
+// object is currently deleted (ie lastet versionis a dm)
+const isDeleted: Ref<boolean> = computed(() => getIsDeleted.value(props.objectId));
+// version table data
 const tableData: Ref<Array<VersionDataSource>> = computed(() => {
-  return versions.value.map((v: Version, index, arr) => ({
-    ...v,
-    createdByName: getUser.value(v.createdBy)?.fullName,
-    versionNumber: arr.length - index
-  }));
-});
+  return versions.value
+    .filter(v => !v.deleteMarker)
+    .map((v: Version, index, arr) => ({
+      ...v,
+      createdByName: getUser.value(v.createdBy)?.fullName,
+      versionNumber: arr.length - index,
+      isDeleted:  isDeleted.value,
 
+    }));
+});
 // Highlight row for currently selected version
-const rowClass = (data: any) => [{ 'selected-row': data.id === versionId.value }];
+const rowClass = (data: any) => [{ 'selected-row': data.id === versionId.value, 'deleted-row': data.isDeleted }];
 
-async function onDeletedSuccess() {
-  emit('on-deleted-success');
+// re-emit up to File Details component
+async function onDeletedSuccess(versionId: string | undefined, isVersion: boolean, hard: boolean) {
+  emit('on-deleted-success', versionId, isVersion, hard);
+}
+async function onRestoredSuccess(versionId: string | undefined) {
+  emit('on-restored-success', versionId, true, false);
 }
 
 const onVersionClick = (e: any) => {
   versionId.value = e.data.id;
 };
-
 watch(props, () => {
   userStore.fetchUsers({ userId: versions.value.map((x: Version) => x.createdBy) });
 });
@@ -142,12 +151,6 @@ watch(props, () => {
               :ids="[props.objectId]"
               :version-id="data.id"
             />
-            <Button
-              v-tooltip.bottom="'Version details'"
-              class="p-button-lg p-button-rounded p-button-text"
-            >
-              <font-awesome-icon icon="fa-solid fa-circle-info" />
-            </Button>
             <DeleteObjectButton
               v-if="
                 permissionStore.isObjectActionAllowed(
@@ -155,14 +158,21 @@ watch(props, () => {
                   getUserId,
                   Permissions.DELETE,
                   props.bucketId as string
-                )
+                ) && !isDeleted
               "
               :mode="ButtonMode.ICON"
               :ids="[props.objectId]"
               :version-id="data.id"
-              :disabled="tableData.length === 1"
+              :hard="false"
               @on-deleted-success="onDeletedSuccess"
             />
+            <RestoreObjectButton
+              v-if="isDeleted"
+              :mode="ButtonMode.ICON"
+              :ids="[props.objectId]"
+              :version-id="data.id"
+              @on-restored-success="onRestoredSuccess"
+            />
           </template>
         </Column>
       </DataTable>
diff --git a/frontend/src/components/object/RestoreObjectButton.vue b/frontend/src/components/object/RestoreObjectButton.vue
new file mode 100644
index 00000000..2124ac1d
--- /dev/null
+++ b/frontend/src/components/object/RestoreObjectButton.vue
@@ -0,0 +1,106 @@
+<script setup lang="ts">
+import { storeToRefs } from 'pinia';
+import { ref } from 'vue';
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
+
+import { Button, Dialog, useConfirm } from '@/lib/primevue';
+import { useNavStore, useObjectStore } from '@/store';
+import { ButtonMode } from '@/utils/enums';
+import { onDialogHide } from '@/utils/utils';
+
+// Props
+type Props = {
+  disabled?: boolean;
+  ids: Array<string>;
+  mode: ButtonMode;
+  versionId?: string; // Only use this when deleting a single object
+};
+
+const props = withDefaults(defineProps<Props>(), {
+  versionId: undefined
+});
+
+// Emits
+const emit = defineEmits(['on-restored-success', 'on-restored-error']);
+
+// Store
+const objectStore = useObjectStore();
+const { focusedElement } = storeToRefs(useNavStore());
+
+// State
+const displayNoFileDialog = ref(false);
+
+// Actions
+const confirm = useConfirm();
+
+const confirmRestore = () => {
+  focusedElement.value = document.activeElement;
+  if (props.ids.length) {
+    const item = props.versionId ? 'version' : 'object';
+    const msgContext = props.ids.length > 1 ? `the selected ${props.ids.length} ${item}s` : `this ${item}`;
+    confirm.require({
+      message: `Please confirm that you want to restore ${msgContext}.`,
+      header: `Restore ${props.ids.length > 1 ? item + 's' : item}`,
+      acceptLabel: 'Confirm',
+      rejectLabel: 'Cancel',
+      accept: () => {
+        props.ids?.forEach((id: string) => {
+          objectStore
+            .restoreObject(id, props.versionId)
+            .then(() => {
+              // versionsId, hard
+              emit('on-restored-success', props.versionId, true, false);
+            })
+            .catch(() => {});
+        });
+      },
+      onHide: () => onDialogHide(),
+      reject: () => onDialogHide()
+    });
+  } else {
+    displayNoFileDialog.value = true;
+  }
+};
+</script>
+
+<template>
+  <Dialog
+    v-model:visible="displayNoFileDialog"
+    header="No File Selected"
+    :modal="true"
+  >
+    <p>Please select at least one file from the list to restore.</p>
+    <template #footer>
+      <Button
+        label="Ok"
+        autofocus
+        @click="displayNoFileDialog = false"
+      />
+    </template>
+  </Dialog>
+
+  <Button
+    v-if="props.mode === ButtonMode.ICON"
+    v-tooltip.bottom="props.versionId ? 'Restore this version' : 'Restore latest version'"
+    class="p-button-lg p-button-text p-button-success"
+    :disabled="props.disabled"
+    :aria-label="props.versionId ? 'Restore this version' : 'Restore latest version'"
+    @click="confirmRestore()"
+  >
+    <font-awesome-icon icon="fa-solid fa-trash-restore" />
+  </Button>
+  <Button
+    v-else
+    v-tooltip.bottom="props.versionId ? 'Restore this version' : 'Restore latest version'"
+    class="p-button-outlined p-button-success"
+    :disabled="props.disabled"
+    :aria-label="props.versionId ? 'Restore this version' : 'Restore latest version'"
+    @click="confirmRestore()"
+  >
+    <font-awesome-icon
+      icon="fa-solid fa-trash-restore"
+      class="mr-1"
+    />
+    Restore
+  </Button>
+</template>
diff --git a/frontend/src/components/object/index.ts b/frontend/src/components/object/index.ts
index f0781066..b65f7c00 100644
--- a/frontend/src/components/object/index.ts
+++ b/frontend/src/components/object/index.ts
@@ -1,9 +1,11 @@
 export { default as DeleteObjectButton } from './DeleteObjectButton.vue';
 export { default as DownloadObjectButton } from './DownloadObjectButton.vue';
+export { default as RestoreObjectButton } from './RestoreObjectButton.vue';
 export { default as ObjectAccess } from './ObjectAccess.vue';
 export { default as ObjectFileDetails } from './ObjectFileDetails.vue';
 export { default as ObjectFilters } from './ObjectFilters.vue';
 export { default as ObjectList } from './ObjectList.vue';
+export { default as ObjectListDeleted } from './ObjectListDeleted.vue';
 export { default as ObjectMetadata } from './ObjectMetadata.vue';
 export { default as ObjectMetadataTagForm } from './ObjectMetadataTagForm.vue';
 export { default as ObjectPermission } from './ObjectPermission.vue';
@@ -12,6 +14,7 @@ export { default as ObjectProperties } from './ObjectProperties.vue';
 export { default as ObjectPublicToggle } from './ObjectPublicToggle.vue';
 export { default as ObjectSidebar } from './ObjectSidebar.vue';
 export { default as ObjectTable } from './ObjectTable.vue';
+export { default as ObjectTableDeleted } from './ObjectTableDeleted.vue';
 export { default as ObjectTag } from './ObjectTag.vue';
 export { default as ObjectUpload } from './ObjectUpload.vue';
 export { default as ObjectUploadBasic } from './ObjectUploadBasic.vue';
diff --git a/frontend/src/router/index.ts b/frontend/src/router/index.ts
index b25368c2..0dfc215a 100644
--- a/frontend/src/router/index.ts
+++ b/frontend/src/router/index.ts
@@ -58,6 +58,13 @@ const routes: Array<RouteRecordRaw> = [
         name: RouteNames.LIST_OBJECTS,
         component: () => import('@/views/list/ListObjectsView.vue'),
         meta: { requiresAuth: true, breadcrumb: '__listObjectsDynamic', title: 'My Objects' },
+        props: createProps,
+      },
+      {
+        path: 'deleted',
+        name: RouteNames.LIST_OBJECTS_DELETED,
+        component: () => import('@/views/list/ListObjectsDeletedView.vue'),
+        meta: { requiresAuth: true, breadcrumb: '__listObjectsDeletedDynamic', title: 'My Deleted Objects' },
         props: createProps
       }
     ]
diff --git a/frontend/src/services/objectService.ts b/frontend/src/services/objectService.ts
index bd831c00..31f3e14b 100644
--- a/frontend/src/services/objectService.ts
+++ b/frontend/src/services/objectService.ts
@@ -148,6 +148,22 @@ export default {
     return comsAxios().head(`${PATH}/${objectId}`);
   },
 
+  /**
+   * @function copyObjectVersion
+   * Copies a previous version of an object and places on top of the version 'stack'.
+   * If no version is provided to copy, the latest existing version will be copied.
+   * @param {string} objectId The id for the object to get
+   * @param {string} versionId An optional versionId
+   * @returns {Promise} An axios response
+   */
+  copyObjectVersion(objectId: string, versionId: string) {
+    return comsAxios().put(`${PATH}/${objectId}/version`,  undefined, {
+      params: {
+        versionId: versionId
+      }
+    });
+  },
+
   /**
    * @function listObjectVersion
    * Returns the object version history
diff --git a/frontend/src/store/objectStore.ts b/frontend/src/store/objectStore.ts
index 6c40322a..b059fa7b 100644
--- a/frontend/src/store/objectStore.ts
+++ b/frontend/src/store/objectStore.ts
@@ -3,7 +3,7 @@ import { computed, ref } from 'vue';
 
 import { useToast } from '@/lib/primevue';
 import { objectService } from '@/services';
-import { useAppStore, useAuthStore, usePermissionStore } from '@/store';
+import { useAppStore, useAuthStore, usePermissionStore, useVersionStore } from '@/store';
 import { partition } from '@/utils/utils';
 
 import type { AxiosRequestConfig } from 'axios';
@@ -22,6 +22,7 @@ export const useObjectStore = defineStore('object', () => {
   // Store
   const appStore = useAppStore();
   const permissionStore = usePermissionStore();
+  const versionStore = useVersionStore();
   const { getUserId } = storeToRefs(useAuthStore());
 
   // State
@@ -87,14 +88,30 @@ export const useObjectStore = defineStore('object', () => {
     }
   }
 
-  async function deleteObject(objectId: string, versionId?: string) {
+  async function deleteObject(objectId: string, versionId?: string, hard = false) {
     const bucketId = getters.getObject.value(objectId)?.bucketId;
-
     try {
       appStore.beginIndeterminateLoading();
-      await objectService.deleteObject(objectId, versionId);
+
+
+
+      if(!versionId) {
+        if(hard) {
+          // await versionStore.fetchVersions({ objectId: objectId });
+          const versions = await versionStore.getVersionsByObjectId(objectId);
+          for (const v of versions) {
+            await objectService.deleteObject(objectId, v.id);
+          }
+        } else{
+          await objectService.deleteObject(objectId, versionId);
+        }
+        toast.success('File deleted');
+      }
+      else{
+        await objectService.deleteObject(objectId, versionId);
+        toast.success('Version deleted');
+      }
       removeSelectedObject(objectId);
-      toast.success('Object deleted');
     } catch (error: any) {
       toast.error('deleting object.');
       throw error;
@@ -104,6 +121,28 @@ export const useObjectStore = defineStore('object', () => {
     }
   }
 
+  async function restoreObject(objectId: string, versionId?: string) {
+    const bucketId = getters.getObject.value(objectId)?.bucketId;
+    try {
+      appStore.beginIndeterminateLoading();
+      // if restoring a specific version.. copy and make latest
+      if(versionId) {
+        await objectService.copyObjectVersion(objectId, versionId);
+      }
+      const versions = await versionStore.getVersionsByObjectId(objectId);
+      versions
+        .filter(v => v.deleteMarker)
+        .forEach(v => objectService.deleteObject(objectId, v.id));
+      toast.success('File restored');
+    } catch (error: any) {
+      toast.error('restoring file');
+      throw error;
+    } finally {
+      fetchObjects({ bucketId: bucketId, userId: getUserId.value, bucketPerms: true });
+      appStore.endIndeterminateLoading();
+    }
+  }
+
   async function getObjectUrl(objectId: string, versionId?: string) {
     try {
       appStore.beginIndeterminateLoading();
@@ -155,8 +194,8 @@ export const useObjectStore = defineStore('object', () => {
 
                 // Added to allow deletion of objects before versioning implementation
                 // TODO: Verify if needed after versioning implemented
-                deleteMarker: false,
-                latest: true
+                // deleteMarker: false,
+                // latest: true
               },
               headers
             )
@@ -197,7 +236,7 @@ export const useObjectStore = defineStore('object', () => {
       // Return full response as data will always be No Content
       return await objectService.headObject(objectId);
     } catch (error: any) {
-      toast.error('Fetching head', error);
+      // toast.error('Fetching head', error);
     } finally {
       appStore.endIndeterminateLoading();
     }
@@ -284,6 +323,7 @@ export const useObjectStore = defineStore('object', () => {
     // Actions
     createObject,
     deleteObject,
+    restoreObject,
     getObjectUrl,
     fetchObjects,
     headObject,
diff --git a/frontend/src/store/versionStore.ts b/frontend/src/store/versionStore.ts
index 0876ed1d..8ce2f0b6 100644
--- a/frontend/src/store/versionStore.ts
+++ b/frontend/src/store/versionStore.ts
@@ -39,6 +39,9 @@ export const useVersionStore = defineStore('version', () => {
     getVersionsByObjectId: computed(
       () => (objectId: string) => state.versions.value.filter((x: Version) => x.objectId === objectId)
     ),
+    getIsDeleted: computed(() => (objectId: string) => state.versions.value.find((x: Version) =>
+      ((x.objectId === objectId) && (x.isLatest) && (x.deleteMarker))) ? true : false
+    ),
     getLatestVersionIdByObjectId: computed(
       () => (objectId: string) => state.versions.value.find((x: Version) => x.objectId === objectId && x.isLatest)?.id
     ),
@@ -94,7 +97,8 @@ export const useVersionStore = defineStore('version', () => {
       appStore.beginIndeterminateLoading();
       state.versions.value = (await objectService.listObjectVersion(params.objectId)).data;
     } catch (error: any) {
-      toast.error('Fetching versions', error);
+      // toast.error('Fetching versions', error);
+      state.versions.value = [];
     } finally {
       appStore.endIndeterminateLoading();
     }
diff --git a/frontend/src/utils/constants.ts b/frontend/src/utils/constants.ts
index 8d1ab0ad..b2668021 100644
--- a/frontend/src/utils/constants.ts
+++ b/frontend/src/utils/constants.ts
@@ -46,6 +46,7 @@ export const RouteNames = Object.freeze({
   INVITE: 'invite',
   LIST_BUCKETS: 'listBuckets',
   LIST_OBJECTS: 'listObjects',
+  LIST_OBJECTS_DELETED: 'listObjectsDeleted',
   LOGIN: 'login',
   LOGOUT: 'logout'
 });
diff --git a/frontend/src/views/detail/DetailObjectsView.vue b/frontend/src/views/detail/DetailObjectsView.vue
index 9ef1560d..4db40ed6 100644
--- a/frontend/src/views/detail/DetailObjectsView.vue
+++ b/frontend/src/views/detail/DetailObjectsView.vue
@@ -49,7 +49,7 @@ onBeforeMount(async () => {
         :version-id="versionId"
       />
       <div v-else>
-        <h3 class="font-bold">No object or version provided</h3>
+        <h3 class="font-bold">File not found</h3>
       </div>
     </div>
     <div v-else>
diff --git a/frontend/src/views/list/ListObjectsDeletedView.vue b/frontend/src/views/list/ListObjectsDeletedView.vue
new file mode 100644
index 00000000..4c32eed4
--- /dev/null
+++ b/frontend/src/views/list/ListObjectsDeletedView.vue
@@ -0,0 +1,74 @@
+<script setup lang="ts">
+import { storeToRefs } from 'pinia';
+import { onBeforeMount, onErrorCaptured, ref } from 'vue';
+import { useRouter } from 'vue-router';
+
+import { ObjectListDeleted } from '@/components/object';
+import { useToast } from '@/lib/primevue';
+import { useAuthStore, useBucketStore } from '@/store';
+import { RouteNames } from '@/utils/constants';
+
+import type { Ref } from 'vue';
+import type { Bucket } from '@/types';
+
+// Props
+type Props = {
+  bucketId?: string;
+};
+
+const props = withDefaults(defineProps<Props>(), {
+  bucketId: undefined
+});
+
+// Store
+const bucketStore = useBucketStore();
+const { getUserId } = storeToRefs(useAuthStore());
+
+// State
+const ready: Ref<boolean> = ref(false);
+const bucket: Ref<Bucket | undefined> = ref(undefined);
+
+onErrorCaptured((e: Error) => {
+  const toast = useToast();
+  toast.error('Loading folder', e.message);
+});
+
+onBeforeMount(async () => {
+  const router = useRouter();
+
+  // fetch buckets (which is already scoped by cur user's permissions) and populates bucket and permissions in store
+  const bucketResponse = await bucketStore.fetchBuckets({
+    bucketId: props.bucketId,
+    userId: getUserId.value,
+    objectPerms: true
+  });
+  if (bucketResponse?.length) {
+    bucket.value = bucketResponse[0];
+    ready.value = true;
+  } else {
+    router.replace({ name: RouteNames.FORBIDDEN });
+  }
+});
+</script>
+
+<template>
+  <div v-if="ready">
+    <h2
+      v-if="bucket"
+      class="mb-3 flex overflow-hidden"
+    >
+      <font-awesome-icon
+        icon="fa-solid fa-folder"
+        class="mr-2 mt-2"
+      />
+      <span class="wrap-block w-11">{{ bucket.bucketName }}  - Deleted Files</span>
+    </h2>
+    <ObjectListDeleted :bucket-id="props.bucketId" />
+  </div>
+</template>
+
+<style scoped lang="scss">
+h2 svg {
+  color: $bcbox-primary;
+}
+</style>
diff --git a/frontend/tests/unit/store/objectStore.spec.ts b/frontend/tests/unit/store/objectStore.spec.ts
index 25351022..5109d69a 100644
--- a/frontend/tests/unit/store/objectStore.spec.ts
+++ b/frontend/tests/unit/store/objectStore.spec.ts
@@ -189,8 +189,7 @@ describe('Object Store', () => {
         {
           bucketId: ['000'],
           objectId: ['000'],
-          deleteMarker: false,
-          latest: true
+          tagset: undefined
         },
         {}
       );
@@ -216,8 +215,7 @@ describe('Object Store', () => {
         {
           bucketId: ['000'],
           objectId: ['000'],
-          deleteMarker: false,
-          latest: true
+          tagset: undefined
         },
         {}
       );
diff --git a/frontend/tests/unit/store/versionStore.spec.ts b/frontend/tests/unit/store/versionStore.spec.ts
index 7c7668fc..1004b8b2 100644
--- a/frontend/tests/unit/store/versionStore.spec.ts
+++ b/frontend/tests/unit/store/versionStore.spec.ts
@@ -163,8 +163,7 @@ describe('Version Store', () => {
       expect(beginIndeterminateLoadingSpy).toHaveBeenCalledTimes(1);
       expect(getVersionsSpy).toHaveBeenCalledTimes(1);
       expect(getVersionsSpy).toHaveBeenCalledWith('000');
-      expect(mockToast).toHaveBeenCalledTimes(1);
-      expect(mockToast).toHaveBeenCalledWith('Fetching versions', new Error());
+      expect(mockToast).toHaveBeenCalledTimes(0);
       expect(endIndeterminateLoadingSpy).toHaveBeenCalledTimes(1);
       expect(versionStore.getTagging).toStrictEqual([]);
     });