From 75ff7238d0dfc8f1668f5838b0468f46aea636b0 Mon Sep 17 00:00:00 2001
From: Wilson Wong <wilwong89@gmail.com>
Date: Tue, 17 Oct 2023 14:19:09 -0700
Subject: [PATCH 1/7] fix:(SC-3376) Handle delete success/fail toasts on a per
 object basis

objectStore.ts now uses Promise.allSettled instead of Promise.all and
returns an array of objects for each promise with their status.

DeleteObjectButton.vue waits for the array and displays a toast based
on each success or fail.
---
 frontend/src/components/object/DeleteObjectButton.vue | 11 +++++++++--
 frontend/src/store/objectStore.ts                     |  4 +++-
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/object/DeleteObjectButton.vue b/frontend/src/components/object/DeleteObjectButton.vue
index 6bbf268a..7809260f 100644
--- a/frontend/src/components/object/DeleteObjectButton.vue
+++ b/frontend/src/components/object/DeleteObjectButton.vue
@@ -42,8 +42,15 @@ const confirmDelete = () => {
       rejectLabel: 'Cancel',
       accept: async () => {
         try {
-          await objectStore.deleteObjects(props.ids, props.versionId);
-          emit('on-deleted-success', props.versionId);
+          const res = await objectStore.deleteObjects(props.ids, props.versionId);
+          res?.forEach((ele, index)=>{
+            if (ele.status === 'fulfilled') {
+              emit('on-deleted-success', props.ids[index]);
+            } else {
+              toast.error(`Error deleting ${props.ids[index]}`);
+              emit('on-deleted-error');
+            }
+          });
         } catch (error: any) {
           toast.error(`Error deleting one or more ${item}s`);
           emit('on-deleted-error');
diff --git a/frontend/src/store/objectStore.ts b/frontend/src/store/objectStore.ts
index 9b5d8ff1..e1642072 100644
--- a/frontend/src/store/objectStore.ts
+++ b/frontend/src/store/objectStore.ts
@@ -81,7 +81,9 @@ export const useObjectStore = defineStore('object', () => {
 
     try {
       appStore.beginIndeterminateLoading();
-      await Promise.all(
+      // Promise.allSettled returns array with an object per promise
+      // check MDN for details
+      return await Promise.allSettled(
         objectIds.map(async (id) => {
           await objectService.deleteObject(id, versionId);
         })

From 9eb75fe5ddd3c79d87c367e4da2a61dce863d712 Mon Sep 17 00:00:00 2001
From: Wilson Wong <wilwong89@gmail.com>
Date: Thu, 19 Oct 2023 11:19:26 -0700
Subject: [PATCH 2/7] Resolving merge conflict

---
 .../components/object/DeleteObjectButton.vue  | 25 +++++--------------
 frontend/src/store/objectStore.ts             |  4 +--
 2 files changed, 7 insertions(+), 22 deletions(-)

diff --git a/frontend/src/components/object/DeleteObjectButton.vue b/frontend/src/components/object/DeleteObjectButton.vue
index 7809260f..f7b6acd0 100644
--- a/frontend/src/components/object/DeleteObjectButton.vue
+++ b/frontend/src/components/object/DeleteObjectButton.vue
@@ -37,19 +37,14 @@ const confirmDelete = () => {
     const msgContext = props.ids.length > 1 ? `the selected ${props.ids.length} ${item}s` : `this ${item}`;
     confirm.require({
       message: `Please confirm that you want to delete ${msgContext}.`,
-      header: `Delete ${props.ids.length > 1 ? item + 's' : item }`,
+      header: `Delete ${props.ids.length > 1 ? item + 's' : item}`,
       acceptLabel: 'Confirm',
       rejectLabel: 'Cancel',
       accept: async () => {
         try {
-          const res = await objectStore.deleteObjects(props.ids, props.versionId);
-          res?.forEach((ele, index)=>{
-            if (ele.status === 'fulfilled') {
-              emit('on-deleted-success', props.ids[index]);
-            } else {
-              toast.error(`Error deleting ${props.ids[index]}`);
-              emit('on-deleted-error');
-            }
+          props.ids?.forEach(async (ele) => {
+            const res = await objectStore.deleteObjects([ele], props.versionId);
+            if (res) emit('on-deleted-success', props.versionId);
           });
         } catch (error: any) {
           toast.error(`Error deleting one or more ${item}s`);
@@ -64,18 +59,10 @@ const confirmDelete = () => {
 </script>
 
 <template>
-  <Dialog
-    v-model:visible="displayNoFileDialog"
-    header="No File Selected"
-    :modal="true"
-  >
+  <Dialog v-model:visible="displayNoFileDialog" header="No File Selected" :modal="true">
     <p>Please select at least one file from the list to delete.</p>
     <template #footer>
-      <Button
-        label="Ok"
-        autofocus
-        @click="displayNoFileDialog = false"
-      />
+      <Button label="Ok" autofocus @click="displayNoFileDialog = false" />
     </template>
   </Dialog>
 
diff --git a/frontend/src/store/objectStore.ts b/frontend/src/store/objectStore.ts
index e1642072..727a63d0 100644
--- a/frontend/src/store/objectStore.ts
+++ b/frontend/src/store/objectStore.ts
@@ -81,9 +81,7 @@ export const useObjectStore = defineStore('object', () => {
 
     try {
       appStore.beginIndeterminateLoading();
-      // Promise.allSettled returns array with an object per promise
-      // check MDN for details
-      return await Promise.allSettled(
+      return await Promise.all(
         objectIds.map(async (id) => {
           await objectService.deleteObject(id, versionId);
         })

From a8759d377ce4327da7b722f82f6dc93e11905c6f Mon Sep 17 00:00:00 2001
From: Csaky <Tim.Csaky@gov.bc.ca>
Date: Thu, 19 Oct 2023 13:12:59 -0700
Subject: [PATCH 3/7] Chnage promise chaining

---
 .../src/components/object/DeleteObjectButton.vue | 16 ++++++++--------
 .../src/components/object/ObjectFileDetails.vue  |  5 +----
 frontend/src/components/object/ObjectList.vue    | 10 +---------
 frontend/src/components/object/ObjectVersion.vue |  4 +---
 frontend/src/store/objectStore.ts                | 10 ++++------
 5 files changed, 15 insertions(+), 30 deletions(-)

diff --git a/frontend/src/components/object/DeleteObjectButton.vue b/frontend/src/components/object/DeleteObjectButton.vue
index f7b6acd0..81a51ba1 100644
--- a/frontend/src/components/object/DeleteObjectButton.vue
+++ b/frontend/src/components/object/DeleteObjectButton.vue
@@ -41,14 +41,14 @@ const confirmDelete = () => {
       acceptLabel: 'Confirm',
       rejectLabel: 'Cancel',
       accept: async () => {
-        try {
-          props.ids?.forEach(async (ele) => {
-            const res = await objectStore.deleteObjects([ele], props.versionId);
-            if (res) emit('on-deleted-success', props.versionId);
-          });
-        } catch (error: any) {
-          toast.error(`Error deleting one or more ${item}s`);
-          emit('on-deleted-error');
+        for( const id of props.ids){
+          try {
+            await objectStore.deleteObjects([id], props.versionId);
+            emit('on-deleted-success', props.versionId);
+          }
+          catch{
+            // intentionally left blank
+          }
         }
       }
     });
diff --git a/frontend/src/components/object/ObjectFileDetails.vue b/frontend/src/components/object/ObjectFileDetails.vue
index 8c12e337..807ab46c 100644
--- a/frontend/src/components/object/ObjectFileDetails.vue
+++ b/frontend/src/components/object/ObjectFileDetails.vue
@@ -15,7 +15,7 @@ import {
   ObjectVersion
 } from '@/components/object';
 import { ShareObjectButton } from '@/components/object/share';
-import { Button, Dialog, Divider, useToast } from '@/lib/primevue';
+import { Button, Dialog, Divider } from '@/lib/primevue';
 import {
   useAuthStore,
   useMetadataStore,
@@ -60,7 +60,6 @@ const version: Ref<Version | undefined> = ref(undefined);
 
 // Actions
 const router = useRouter();
-const toast = useToast();
 
 const showPermissions = async (objectId: string) => {
   permissionsVisible.value = true;
@@ -69,8 +68,6 @@ const showPermissions = async (objectId: string) => {
 };
 
 async function onDeletedSuccess(versionId: string) {
-  toast.success('File deleted');
-
   await Promise.all([
     objectStore.fetchObjects({objectId: props.objectId, userId: getUserId.value, bucketPerms: true}),
     versionStore.fetchVersions({ objectId: props.objectId })
diff --git a/frontend/src/components/object/ObjectList.vue b/frontend/src/components/object/ObjectList.vue
index 05aa720a..3cf9caf9 100644
--- a/frontend/src/components/object/ObjectList.vue
+++ b/frontend/src/components/object/ObjectList.vue
@@ -9,7 +9,7 @@ import {
   ObjectTable,
   ObjectUpload
 } from '@/components/object';
-import { Button, useToast } from '@/lib/primevue';
+import { Button } from '@/lib/primevue';
 import {
   useAuthStore,
   useBucketStore,
@@ -47,9 +47,6 @@ const selectedObjectIds = computed(() => {
   return getSelectedObjects.value.map((o) => o.id);
 });
 
-// Actions
-const toast = useToast();
-
 const showObjectInfo = async (objectId: string | undefined) => {
   objectInfoId.value = objectId;
 };
@@ -75,10 +72,6 @@ const closeUpload = () => {
 //   }
 // };
 
-function onDeletedSuccess() {
-  toast.success('File deleted');
-}
-
 onMounted(async () => {
   // Removed for now
   // updateBreadcrumb();
@@ -123,7 +116,6 @@ onMounted(async () => {
         :disabled="displayUpload"
         :ids="selectedObjectIds"
         :mode="ButtonMode.BUTTON"
-        @on-deleted-success="onDeletedSuccess"
       />
     </div>
 
diff --git a/frontend/src/components/object/ObjectVersion.vue b/frontend/src/components/object/ObjectVersion.vue
index a81aa911..2d84e283 100644
--- a/frontend/src/components/object/ObjectVersion.vue
+++ b/frontend/src/components/object/ObjectVersion.vue
@@ -7,7 +7,7 @@ import {
   DeleteObjectButton,
   DownloadObjectButton
 } from '@/components/object';
-import { Button, Column, DataTable, useToast } from '@/lib/primevue';
+import { Button, Column, DataTable } from '@/lib/primevue';
 import { useAppStore, useAuthStore, usePermissionStore, useUserStore, useVersionStore } from '@/store';
 import { Permissions, RouteNames } from '@/utils/constants';
 import { ButtonMode } from '@/utils/enums';
@@ -42,13 +42,11 @@ const tableData: Ref<Array<VersionDataSource>> = ref([]);
 
 // Actions
 const router = useRouter();
-const toast = useToast();
 
 // Highlight row for currently selected version
 const rowClass = (data: any) => [{ 'selected-row': data.id === props.versionId }];
 
 async function onDeletedSuccess(versionId: string) {
-  toast.success('File deleted');
   await versionStore.fetchVersions({ objectId: props.objectId });
 
   // Navigate to new latest version if deleting active version
diff --git a/frontend/src/store/objectStore.ts b/frontend/src/store/objectStore.ts
index 727a63d0..79298a49 100644
--- a/frontend/src/store/objectStore.ts
+++ b/frontend/src/store/objectStore.ts
@@ -81,14 +81,12 @@ export const useObjectStore = defineStore('object', () => {
 
     try {
       appStore.beginIndeterminateLoading();
-      return await Promise.all(
-        objectIds.map(async (id) => {
-          await objectService.deleteObject(id, versionId);
-        })
-      );
+      await objectService.deleteObject(objectIds[0], versionId);
+      toast.success('Object deleted');
     }
     catch (error: any) {
-      toast.error('Deleting object', error);
+      toast.error('deleting object.');
+      throw error;
     }
     finally {
       fetchObjects({ bucketId: bucketId, userId: getUserId.value, bucketPerms: true });

From be1f13182b6313d045810ee2c9ce46cc693e67dc Mon Sep 17 00:00:00 2001
From: Wilson Wong <wilwong89@gmail.com>
Date: Tue, 24 Oct 2023 17:04:38 -0700
Subject: [PATCH 4/7] Fix ObjectTable reactivity to store

---
 .../components/object/DeleteObjectButton.vue    | 17 ++++++++++++-----
 frontend/src/components/object/ObjectTable.vue  | 10 +++++-----
 frontend/src/store/objectStore.ts               | 16 ++++++++++++----
 frontend/tests/unit/store/objectStore.spec.ts   | 10 +++++-----
 4 files changed, 34 insertions(+), 19 deletions(-)

diff --git a/frontend/src/components/object/DeleteObjectButton.vue b/frontend/src/components/object/DeleteObjectButton.vue
index 81a51ba1..6c7cccd0 100644
--- a/frontend/src/components/object/DeleteObjectButton.vue
+++ b/frontend/src/components/object/DeleteObjectButton.vue
@@ -2,7 +2,7 @@
 import { ref } from 'vue';
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
 
-import { Button, Dialog, useConfirm, useToast } from '@/lib/primevue';
+import { Button, Dialog, useConfirm } from '@/lib/primevue';
 import { useObjectStore } from '@/store/objectStore';
 import { ButtonMode } from '@/utils/enums';
 
@@ -29,7 +29,6 @@ const displayNoFileDialog = ref(false);
 
 // Actions
 const confirm = useConfirm();
-const toast = useToast();
 
 const confirmDelete = () => {
   if (props.ids.length) {
@@ -43,7 +42,7 @@ const confirmDelete = () => {
       accept: async () => {
         for( const id of props.ids){
           try {
-            await objectStore.deleteObjects([id], props.versionId);
+            await objectStore.deleteObject(id, props.versionId);
             emit('on-deleted-success', props.versionId);
           }
           catch{
@@ -59,10 +58,18 @@ const confirmDelete = () => {
 </script>
 
 <template>
-  <Dialog v-model:visible="displayNoFileDialog" header="No File Selected" :modal="true">
+  <Dialog
+    v-model:visible="displayNoFileDialog"
+    header="No File Selected"
+    :modal="true"
+  >
     <p>Please select at least one file from the list to delete.</p>
     <template #footer>
-      <Button label="Ok" autofocus @click="displayNoFileDialog = false" />
+      <Button
+        label="Ok"
+        autofocus
+        @click="displayNoFileDialog = false"
+      />
     </template>
   </Dialog>
 
diff --git a/frontend/src/components/object/ObjectTable.vue b/frontend/src/components/object/ObjectTable.vue
index 5fe88263..8740ce63 100644
--- a/frontend/src/components/object/ObjectTable.vue
+++ b/frontend/src/components/object/ObjectTable.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { storeToRefs } from 'pinia';
-import { ref, watch } from 'vue';
+import { onUnmounted, ref, watch } from 'vue';
 
 import { Spinner } from '@/components/layout';
 import {
@@ -48,7 +48,6 @@ const { getUserId } = storeToRefs(useAuthStore());
 const permissionsVisible = ref(false);
 const permissionsObjectId = ref('');
 const permissionsObjectName: Ref<string | undefined> = ref('');
-const selectedObjects: Ref<Array<COMSObject>> = ref([]);
 const tableData: Ref<Array<COMSObjectDataSource>> = ref([]);
 
 // Actions
@@ -89,8 +88,9 @@ watch( getObjects, async () => {
   });
 });
 
-watch( selectedObjects, () => {
-  objectStore.setSelectedObjects(selectedObjects.value);
+// Clear selections when navigating away
+onUnmounted(() => {
+  objectStore.setSelectedObjects([]);
 });
 
 // Datatable filter(s)
@@ -105,7 +105,7 @@ const filters = ref({
 <template>
   <div>
     <DataTable
-      v-model:selection="selectedObjects"
+      v-model:selection="objectStore.selectedObjects"
       v-model:filters="filters"
       :loading="useAppStore().getIsLoading"
       :value="tableData"
diff --git a/frontend/src/store/objectStore.ts b/frontend/src/store/objectStore.ts
index 79298a49..51ffcaa3 100644
--- a/frontend/src/store/objectStore.ts
+++ b/frontend/src/store/objectStore.ts
@@ -76,12 +76,13 @@ export const useObjectStore = defineStore('object', () => {
     }
   }
 
-  async function deleteObjects(objectIds: Array<string>, versionId?: string) {
-    const bucketId = findObjectById(objectIds[0])?.bucketId;
+  async function deleteObject(objectId: string, versionId?: string) {
+    const bucketId = findObjectById(objectId)?.bucketId;
 
     try {
       appStore.beginIndeterminateLoading();
-      await objectService.deleteObject(objectIds[0], versionId);
+      await objectService.deleteObject(objectId, versionId);
+      removeSelectedObject(objectId);
       toast.success('Object deleted');
     }
     catch (error: any) {
@@ -202,6 +203,12 @@ export const useObjectStore = defineStore('object', () => {
     state.selectedObjects.value = selected;
   }
 
+  function removeSelectedObject(removeSelected: string) {
+    state.selectedObjects.value = state.selectedObjects.value.filter((object) => {
+      return object.id != removeSelected;
+    });
+  }
+
   async function togglePublic(objectId: string, isPublic: boolean) {
     try {
       appStore.beginIndeterminateLoading();
@@ -271,11 +278,12 @@ export const useObjectStore = defineStore('object', () => {
 
     // Actions
     createObject,
-    deleteObjects,
+    deleteObject,
     downloadObject,
     fetchObjects,
     findObjectById,
     headObject,
+    removeSelectedObject,
     setSelectedObjects,
     syncObject,
     togglePublic,
diff --git a/frontend/tests/unit/store/objectStore.spec.ts b/frontend/tests/unit/store/objectStore.spec.ts
index 436613cd..6639f9d4 100644
--- a/frontend/tests/unit/store/objectStore.spec.ts
+++ b/frontend/tests/unit/store/objectStore.spec.ts
@@ -118,18 +118,18 @@ describe('Object Store', () => {
   });
 
 
-  describe('deleteObjects', () => {
+  describe('deleteObject', () => {
     // TODO: Figure out why we can't mock fetchObjects here
     // TODO: Figure out why endIndeterminateLoadingSpy is only being called twice
-    it('deletes the objects', async () => {
+    it('deletes the object', async () => {
       objectStore.objects = [obj, obj2];
 
-      fetchObjectsSpy.mockImplementation(vi.fn());
+      deleteObjectSpy.mockImplementation(vi.fn());
 
-      await objectStore.deleteObjects([obj.id, obj2.id]);
+      await objectStore.deleteObject(obj.id);
 
       expect(beginIndeterminateLoadingSpy).toHaveBeenCalledTimes(3);
-      expect(deleteObjectSpy).toHaveBeenCalledTimes(2);
+      expect(deleteObjectSpy).toHaveBeenCalledTimes(1);
       expect(endIndeterminateLoadingSpy).toHaveBeenCalledTimes(2);
     });
   });

From 8f3299c74102b8d31ef53586580a3c236a26333f Mon Sep 17 00:00:00 2001
From: Wilson Wong <wilwong89@gmail.com>
Date: Tue, 24 Oct 2023 17:12:54 -0700
Subject: [PATCH 5/7] Fix tests

---
 frontend/tests/unit/store/objectStore.spec.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/tests/unit/store/objectStore.spec.ts b/frontend/tests/unit/store/objectStore.spec.ts
index 6639f9d4..ead50166 100644
--- a/frontend/tests/unit/store/objectStore.spec.ts
+++ b/frontend/tests/unit/store/objectStore.spec.ts
@@ -70,7 +70,7 @@ describe('Object Store', () => {
 
   let createObjectSpy: SpyInstance;
   let deleteObjectSpy: SpyInstance;
-  let fetchObjectsSpy: SpyInstance;
+  // let fetchObjectsSpy: SpyInstance;
   let getObjectSpy: SpyInstance;
   let searchObjectsSpy: SpyInstance;
 
@@ -85,7 +85,7 @@ describe('Object Store', () => {
 
     createObjectSpy = vi.spyOn(objectService, 'createObject');
     deleteObjectSpy = vi.spyOn(objectService, 'deleteObject');
-    fetchObjectsSpy = vi.spyOn(objectStore, 'fetchObjects');
+    // fetchObjectsSpy = vi.spyOn(objectStore, 'fetchObjects');
     getObjectSpy = vi.spyOn(objectService, 'getObject');
     searchObjectsSpy = vi.spyOn(objectService, 'searchObjects');
   });

From f8d9f4e2d3db6b0440df71f998c6223a47dbb76e Mon Sep 17 00:00:00 2001
From: Wilson Wong <wilwong89@gmail.com>
Date: Wed, 25 Oct 2023 12:06:14 -0700
Subject: [PATCH 6/7] Rework for loop into forEach, use promise instead of try
 catch

---
 .../src/components/object/DeleteObjectButton.vue   | 14 +++++---------
 1 file changed, 5 insertions(+), 9 deletions(-)

diff --git a/frontend/src/components/object/DeleteObjectButton.vue b/frontend/src/components/object/DeleteObjectButton.vue
index 6c7cccd0..e693ae61 100644
--- a/frontend/src/components/object/DeleteObjectButton.vue
+++ b/frontend/src/components/object/DeleteObjectButton.vue
@@ -40,15 +40,11 @@ const confirmDelete = () => {
       acceptLabel: 'Confirm',
       rejectLabel: 'Cancel',
       accept: async () => {
-        for( const id of props.ids){
-          try {
-            await objectStore.deleteObject(id, props.versionId);
-            emit('on-deleted-success', props.versionId);
-          }
-          catch{
-            // intentionally left blank
-          }
-        }
+        props.ids?.forEach((id: string) => {
+          objectStore.deleteObject(id, props.versionId)
+            .then(() => emit('on-deleted-success', props.versionId))
+            .catch(() => { });
+        });
       }
     });
   } else {

From 5e1374d772690e4067a4850304331f2757e8a960 Mon Sep 17 00:00:00 2001
From: Wilson Wong <wilwong89@gmail.com>
Date: Wed, 25 Oct 2023 12:14:09 -0700
Subject: [PATCH 7/7] Remove unnecessary async

---
 frontend/src/components/object/DeleteObjectButton.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/components/object/DeleteObjectButton.vue b/frontend/src/components/object/DeleteObjectButton.vue
index e693ae61..0f02b5db 100644
--- a/frontend/src/components/object/DeleteObjectButton.vue
+++ b/frontend/src/components/object/DeleteObjectButton.vue
@@ -39,7 +39,7 @@ const confirmDelete = () => {
       header: `Delete ${props.ids.length > 1 ? item + 's' : item}`,
       acceptLabel: 'Confirm',
       rejectLabel: 'Cancel',
-      accept: async () => {
+      accept: () => {
         props.ids?.forEach((id: string) => {
           objectStore.deleteObject(id, props.versionId)
             .then(() => emit('on-deleted-success', props.versionId))