From f6485a50fd4f32d54a7fcd057de0588cadf64ff6 Mon Sep 17 00:00:00 2001
From: Norris Ng <103449568+norrisng-bc@users.noreply.github.com>
Date: Tue, 14 May 2024 17:54:26 -0700
Subject: [PATCH] Display confirmation dialog and toasts on toggling file to
 public

Toasts are also displayed when toggling file to private
---
 .../components/object/ObjectPermission.vue    |  1 +
 .../components/object/ObjectPublicToggle.vue  | 35 +++++++++++++++++--
 .../src/components/object/ObjectTable.vue     |  5 ++-
 3 files changed, 35 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/object/ObjectPermission.vue b/frontend/src/components/object/ObjectPermission.vue
index 04495538..f215b7ba 100644
--- a/frontend/src/components/object/ObjectPermission.vue
+++ b/frontend/src/components/object/ObjectPermission.vue
@@ -66,6 +66,7 @@ onBeforeMount(() => {
         class="ml-4"
         :bucket-id="object.bucketId"
         :object-id="object.id"
+        :object-name="object.name"
         :object-public="object.public"
         :user-id="getUserId"
       />
diff --git a/frontend/src/components/object/ObjectPublicToggle.vue b/frontend/src/components/object/ObjectPublicToggle.vue
index 637451bd..4e5089ec 100644
--- a/frontend/src/components/object/ObjectPublicToggle.vue
+++ b/frontend/src/components/object/ObjectPublicToggle.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { ref, watch } from 'vue';
 
-import { InputSwitch } from '@/lib/primevue';
+import { InputSwitch, useConfirm, useToast } from '@/lib/primevue';
 import { useObjectStore, usePermissionStore } from '@/store';
 import { Permissions } from '@/utils/constants';
 
@@ -11,6 +11,7 @@ import type { Ref } from 'vue';
 type Props = {
   bucketId: string;
   objectId: string;
+  objectName: string;
   objectPublic: boolean;
   userId: string;
 };
@@ -25,8 +26,36 @@ const permissionStore = usePermissionStore();
 const isPublic: Ref<boolean> = ref(props.objectPublic);
 
 // Actions
-const togglePublic = async (isPublic: boolean) => {
-  await objectStore.togglePublic(props.objectId, isPublic);
+const toast = useToast();
+const confirm = useConfirm();
+
+const togglePublic = async (setPublicValue: boolean) => {
+  if (setPublicValue) {
+    confirm.require({
+      message:
+        'Please confirm that you want to set the file(s) to public. ' +
+        'This allows the share link to be accessible by anyone, even without credentials.',
+      header: 'Confirm set to public',
+      acceptLabel: 'Confirm',
+      rejectLabel: 'Cancel',
+      accept: () => {
+        objectStore
+          .togglePublic(props.objectId, true)
+          .then(() => {
+            toast.success(`"${props.objectName}" set to public`);
+          })
+          .catch((e) => toast.error(e));
+      },
+      reject: () => (isPublic.value = false),
+      onHide: () => (isPublic.value = false)
+    });
+  } else
+    objectStore
+      .togglePublic(props.objectId, false)
+      .then(() => {
+        toast.success(`"${props.objectName}" is no longer public`);
+      })
+      .catch((e) => toast.error(e));
 };
 
 watch(props, () => {
diff --git a/frontend/src/components/object/ObjectTable.vue b/frontend/src/components/object/ObjectTable.vue
index 10aa0246..caf16c3c 100644
--- a/frontend/src/components/object/ObjectTable.vue
+++ b/frontend/src/components/object/ObjectTable.vue
@@ -262,9 +262,7 @@ const selectedFilters = (payload: any) => {
       >
         <template #body="{ data }">
           <div>
-            <router-link
-              :to="{ name: RouteNames.DETAIL_OBJECTS, query: { objectId: data.id } }"
-            >
+            <router-link :to="{ name: RouteNames.DETAIL_OBJECTS, query: { objectId: data.id } }">
               <span v-tooltip.bottom="'View file details'">
                 {{ data.name }}
               </span>
@@ -307,6 +305,7 @@ const selectedFilters = (payload: any) => {
             v-if="props.bucketId && getUserId"
             :bucket-id="props.bucketId"
             :object-id="data.id"
+            :object-name="data.name"
             :object-public="data.public"
             :user-id="getUserId"
           />