From 3eb42fb0fec17d5ddfb1ab4d94186780ba4cc767 Mon Sep 17 00:00:00 2001
From: Norris Ng <103449568+norrisng-bc@users.noreply.github.com>
Date: Thu, 26 Oct 2023 16:08:45 -0700
Subject: [PATCH 1/8] Add public toggle InputSwitch to permissions modal

---
 .../components/object/ObjectPermission.vue    | 30 +++++++++++++++++--
 1 file changed, 27 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/object/ObjectPermission.vue b/frontend/src/components/object/ObjectPermission.vue
index 0ce5f9bf..e00f7add 100644
--- a/frontend/src/components/object/ObjectPermission.vue
+++ b/frontend/src/components/object/ObjectPermission.vue
@@ -5,12 +5,12 @@ import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
 
 import ObjectPermissionAddUser from '@/components/object/ObjectPermissionAddUser.vue';
 import { useAlert } from '@/composables/useAlert';
-import { Button, Checkbox, Column, DataTable } from '@/lib/primevue';
-import { usePermissionStore } from '@/store';
+import {Button, Checkbox, Column, DataTable, InputSwitch} from '@/lib/primevue';
+import { useAuthStore, useObjectStore, usePermissionStore } from '@/store';
 import { Permissions } from '@/utils/constants';
 
 import type { Ref } from 'vue';
-import type { UserPermissions } from '@/types';
+import type { COMSObject, UserPermissions } from '@/types';
 
 // Props
 type Props = {
@@ -20,11 +20,14 @@ type Props = {
 const props = withDefaults(defineProps<Props>(), {});
 
 // Store
+const objectStore = useObjectStore();
 const permissionStore = usePermissionStore();
 const { getMappedObjectToUserPermissions } = storeToRefs(permissionStore);
+const { getUserId } = storeToRefs(useAuthStore());
 
 // State
 const showSearchUsers: Ref<boolean> = ref(false);
+const object: Ref<COMSObject|undefined> = ref(undefined);
 
 // Actions
 const removeManageAlert = useAlert('Warning', 'Cannot remove last user with MANAGE permission.');
@@ -70,13 +73,34 @@ const updateObjectPermission = (value: boolean, userId: string, permCode: string
   }
 };
 
+const togglePublic = async (objectId: string, isPublic: boolean) => {
+  await objectStore.togglePublic(objectId, isPublic);
+};
+
 onBeforeMount(() => {
   permissionStore.mapObjectToUserPermissions(props.objectId);
+  object.value = objectStore.findObjectById(props.objectId);
 });
 </script>
 
 <template>
   <div>
+    <div>
+      <h3>Public</h3>
+      <ul>
+        <li>This option toggles the file to be publicly available and accessible to anyone</li>
+        <li>To instead set explicit permissions, add users and use the options below</li>
+      </ul>
+      <InputSwitch
+        v-if="object"
+        v-model="object.public"
+        :disabled="!(
+          usePermissionStore().isUserElevatedRights() &&
+          permissionStore.isObjectActionAllowed(
+            objectId, getUserId, Permissions.MANAGE, object.bucketId as string))"
+        @change="togglePublic(objectId, object.public)"
+      />
+    </div>
     <div v-if="!showSearchUsers">
       <Button
         class="mt-1 mb-4"

From feb36ffd656d19fb331be63dd4ad325fbd01caef Mon Sep 17 00:00:00 2001
From: Norris Ng <103449568+norrisng-bc@users.noreply.github.com>
Date: Thu, 26 Oct 2023 17:06:12 -0700
Subject: [PATCH 2/8] Adjust spacing around InputSwitch and description text

---
 .../components/object/ObjectPermission.vue    | 35 +++++++++++--------
 1 file changed, 20 insertions(+), 15 deletions(-)

diff --git a/frontend/src/components/object/ObjectPermission.vue b/frontend/src/components/object/ObjectPermission.vue
index e00f7add..65d6a3e3 100644
--- a/frontend/src/components/object/ObjectPermission.vue
+++ b/frontend/src/components/object/ObjectPermission.vue
@@ -85,22 +85,27 @@ onBeforeMount(() => {
 
 <template>
   <div>
-    <div>
-      <h3>Public</h3>
-      <ul>
-        <li>This option toggles the file to be publicly available and accessible to anyone</li>
-        <li>To instead set explicit permissions, add users and use the options below</li>
-      </ul>
-      <InputSwitch
-        v-if="object"
-        v-model="object.public"
-        :disabled="!(
-          usePermissionStore().isUserElevatedRights() &&
-          permissionStore.isObjectActionAllowed(
-            objectId, getUserId, Permissions.MANAGE, object.bucketId as string))"
-        @change="togglePublic(objectId, object.public)"
-      />
+    <div class="flex flex-row gap-6 pb-3">
+      <div>
+        <h3>Public</h3>
+        <ul>
+          <li>This option toggles the file to be publicly available and accessible to anyone</li>
+          <li>To instead set explicit permissions, add users and use the options below</li>
+        </ul>
+      </div>
+      <div>
+        <InputSwitch
+          v-if="object"
+          v-model="object.public"
+          :disabled="!(
+            usePermissionStore().isUserElevatedRights() &&
+            permissionStore.isObjectActionAllowed(
+              objectId, getUserId, Permissions.MANAGE, object.bucketId as string))"
+          @change="togglePublic(objectId, object.public)"
+        />
+      </div>
     </div>
+
     <div v-if="!showSearchUsers">
       <Button
         class="mt-1 mb-4"

From e96e5dc2f816e50ab47549de043070ef706d85e5 Mon Sep 17 00:00:00 2001
From: Norris Ng <103449568+norrisng-bc@users.noreply.github.com>
Date: Mon, 30 Oct 2023 17:50:44 -0700
Subject: [PATCH 3/8] Widen user search dropdown to fill width, and edit its
 text hint

The updated dropdown hint is longer than before, so it doesn't fully display. The dropdown was therefore widened so that it shows the entire hint, filling the whitespace between it and the "Add" button.
---
 frontend/src/assets/primevue.scss            |  4 ++
 frontend/src/components/form/SearchUsers.vue | 54 +++++++++++---------
 2 files changed, 33 insertions(+), 25 deletions(-)

diff --git a/frontend/src/assets/primevue.scss b/frontend/src/assets/primevue.scss
index 0bb076b9..bdede903 100644
--- a/frontend/src/assets/primevue.scss
+++ b/frontend/src/assets/primevue.scss
@@ -74,6 +74,10 @@
   }
 }
 
+.p-dropdown.usersearch {
+  width: 100% !important
+}
+
 .p-checkbox,
 .p-radiobutton {
   &.p-checkbox-checked,
diff --git a/frontend/src/components/form/SearchUsers.vue b/frontend/src/components/form/SearchUsers.vue
index b16a8e74..9738c630 100644
--- a/frontend/src/components/form/SearchUsers.vue
+++ b/frontend/src/components/form/SearchUsers.vue
@@ -98,7 +98,7 @@ const onReset = () => {
 
 watch(selectedIDP, () => {
   if (selectedIDP.value?.searchable) {
-    userSearchPlaceholder.value = `Enter an existing ${selectedIDP.value?.name} user's name or email address`;
+    userSearchPlaceholder.value = `Enter the full name or email address of an existing ${selectedIDP.value?.name}`;
   } else {
     userSearchPlaceholder.value = `Enter an existing user's ${selectedIDP.value?.name} email address`;
   }
@@ -144,30 +144,34 @@ onMounted(() => {
       />
     </div>
 
-    <Dropdown
-      v-model="userSearchInput"
-      :options="userSearch"
-      :option-label="(option) => getUserDropdownLabel(option)"
-      editable
-      :placeholder="userSearchPlaceholder"
-      class="mt-1 mb-4"
-      :class="invalidSelectedUser ? 'p-invalid' : ''"
-      @input="onInput"
-      @change="onChange"
-    />
-    <Button
-      label="Add"
-      class="mt-1 mb-4 ml-3"
-      icon="pi pi-check"
-      :disabled="!selectedUser"
-      @click="onAdd"
-    />
-    <Button
-      label="Cancel"
-      class="p-button-outlined mt-1 mb-4 ml-3"
-      icon="pi pi-times"
-      @click="onCancel"
-    />
+    <div class="flex">
+      <div class="flex flex-auto">
+        <Dropdown
+          v-model="userSearchInput"
+          :options="userSearch"
+          :option-label="(option) => getUserDropdownLabel(option)"
+          editable
+          :placeholder="userSearchPlaceholder"
+          class="mt-1 mb-4 usersearch"
+          :class="invalidSelectedUser ? 'p-invalid' : ''"
+          @input="onInput"
+          @change="onChange"
+        />
+      </div>
+      <Button
+        label="Add"
+        class="mt-1 mb-4 ml-3"
+        icon="pi pi-check"
+        :disabled="!selectedUser"
+        @click="onAdd"
+      />
+      <Button
+        label="Cancel"
+        class="p-button-outlined mt-1 mb-4 ml-3"
+        icon="pi pi-times"
+        @click="onCancel"
+      />
+    </div>
   </div>
 </template>
 

From ba97e669b472ea956c2b8de3a589686af6a9698b Mon Sep 17 00:00:00 2001
From: Norris Ng <103449568+norrisng-bc@users.noreply.github.com>
Date: Tue, 31 Oct 2023 13:54:37 -0700
Subject: [PATCH 4/8] Add "User Permissions" heading in permissions modal

Added "User Permissions" heading in the permissions modal, right above the "Add user" button.
Also: tweak spacing for "Public" heading and corresponding toggle
---
 frontend/src/components/object/ObjectPermission.vue | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/object/ObjectPermission.vue b/frontend/src/components/object/ObjectPermission.vue
index 65d6a3e3..a77ba29f 100644
--- a/frontend/src/components/object/ObjectPermission.vue
+++ b/frontend/src/components/object/ObjectPermission.vue
@@ -87,13 +87,13 @@ onBeforeMount(() => {
   <div>
     <div class="flex flex-row gap-6 pb-3">
       <div>
-        <h3>Public</h3>
+        <h3 class="pb-1">Public</h3>
         <ul>
           <li>This option toggles the file to be publicly available and accessible to anyone</li>
           <li>To instead set explicit permissions, add users and use the options below</li>
         </ul>
       </div>
-      <div>
+      <div class="ml-4">
         <InputSwitch
           v-if="object"
           v-model="object.public"
@@ -106,6 +106,10 @@ onBeforeMount(() => {
       </div>
     </div>
 
+    <div class="mt-1 mb-2">
+      <h3>User Permissions</h3>
+    </div>
+
     <div v-if="!showSearchUsers">
       <Button
         class="mt-1 mb-4"

From d7581aac53d40193cae780cb98220177fe95615f Mon Sep 17 00:00:00 2001
From: Kyle Morel <kyle.1.morel@gov.bc.ca>
Date: Thu, 2 Nov 2023 16:03:22 -0700
Subject: [PATCH 5/8] Shift object InputSwitch to its own component for reuse

---
 .../components/object/ObjectPermission.vue    | 24 ++++-----
 .../components/object/ObjectPublicToggle.vue  | 53 +++++++++++++++++++
 .../src/components/object/ObjectTable.vue     | 29 +++++-----
 frontend/src/components/object/index.ts       |  1 +
 frontend/src/store/objectStore.ts             |  2 +
 5 files changed, 79 insertions(+), 30 deletions(-)
 create mode 100644 frontend/src/components/object/ObjectPublicToggle.vue

diff --git a/frontend/src/components/object/ObjectPermission.vue b/frontend/src/components/object/ObjectPermission.vue
index a77ba29f..59de571a 100644
--- a/frontend/src/components/object/ObjectPermission.vue
+++ b/frontend/src/components/object/ObjectPermission.vue
@@ -3,9 +3,9 @@ import { storeToRefs } from 'pinia';
 import { onBeforeMount, ref } from 'vue';
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
 
-import ObjectPermissionAddUser from '@/components/object/ObjectPermissionAddUser.vue';
+import { ObjectPermissionAddUser, ObjectPublicToggle } from '@/components/object';
 import { useAlert } from '@/composables/useAlert';
-import {Button, Checkbox, Column, DataTable, InputSwitch} from '@/lib/primevue';
+import { Button, Checkbox, Column, DataTable } from '@/lib/primevue';
 import { useAuthStore, useObjectStore, usePermissionStore } from '@/store';
 import { Permissions } from '@/utils/constants';
 
@@ -27,7 +27,7 @@ const { getUserId } = storeToRefs(useAuthStore());
 
 // State
 const showSearchUsers: Ref<boolean> = ref(false);
-const object: Ref<COMSObject|undefined> = ref(undefined);
+const object: Ref<COMSObject | undefined> = ref(undefined);
 
 // Actions
 const removeManageAlert = useAlert('Warning', 'Cannot remove last user with MANAGE permission.');
@@ -73,10 +73,6 @@ const updateObjectPermission = (value: boolean, userId: string, permCode: string
   }
 };
 
-const togglePublic = async (objectId: string, isPublic: boolean) => {
-  await objectStore.togglePublic(objectId, isPublic);
-};
-
 onBeforeMount(() => {
   permissionStore.mapObjectToUserPermissions(props.objectId);
   object.value = objectStore.findObjectById(props.objectId);
@@ -94,14 +90,12 @@ onBeforeMount(() => {
         </ul>
       </div>
       <div class="ml-4">
-        <InputSwitch
-          v-if="object"
-          v-model="object.public"
-          :disabled="!(
-            usePermissionStore().isUserElevatedRights() &&
-            permissionStore.isObjectActionAllowed(
-              objectId, getUserId, Permissions.MANAGE, object.bucketId as string))"
-          @change="togglePublic(objectId, object.public)"
+        <ObjectPublicToggle
+          v-if="object && getUserId"
+          :bucket-id="object.bucketId"
+          :object-id="object.id"
+          :object-public="object.public"
+          :user-id="getUserId"
         />
       </div>
     </div>
diff --git a/frontend/src/components/object/ObjectPublicToggle.vue b/frontend/src/components/object/ObjectPublicToggle.vue
new file mode 100644
index 00000000..637451bd
--- /dev/null
+++ b/frontend/src/components/object/ObjectPublicToggle.vue
@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import { ref, watch } from 'vue';
+
+import { InputSwitch } from '@/lib/primevue';
+import { useObjectStore, usePermissionStore } from '@/store';
+import { Permissions } from '@/utils/constants';
+
+import type { Ref } from 'vue';
+
+// Props
+type Props = {
+  bucketId: string;
+  objectId: string;
+  objectPublic: boolean;
+  userId: string;
+};
+
+const props = withDefaults(defineProps<Props>(), {});
+
+// Store
+const objectStore = useObjectStore();
+const permissionStore = usePermissionStore();
+
+// State
+const isPublic: Ref<boolean> = ref(props.objectPublic);
+
+// Actions
+const togglePublic = async (isPublic: boolean) => {
+  await objectStore.togglePublic(props.objectId, isPublic);
+};
+
+watch(props, () => {
+  isPublic.value = props.objectPublic;
+});
+</script>
+
+<template>
+  <InputSwitch
+    v-model="isPublic"
+    :disabled="
+      !(
+        usePermissionStore().isUserElevatedRights() &&
+        permissionStore.isObjectActionAllowed(
+          props.objectId,
+          props.userId,
+          Permissions.MANAGE,
+          props.bucketId as string
+        )
+      )
+    "
+    @change="togglePublic(isPublic)"
+  />
+</template>
diff --git a/frontend/src/components/object/ObjectTable.vue b/frontend/src/components/object/ObjectTable.vue
index d617d517..4ea3dec7 100644
--- a/frontend/src/components/object/ObjectTable.vue
+++ b/frontend/src/components/object/ObjectTable.vue
@@ -3,10 +3,16 @@ import { storeToRefs } from 'pinia';
 import { onUnmounted, ref, watch } from 'vue';
 
 import { Spinner } from '@/components/layout';
-import { DeleteObjectButton, DownloadObjectButton, ObjectFilters, ObjectPermission } from '@/components/object';
+import {
+  DeleteObjectButton,
+  DownloadObjectButton,
+  ObjectFilters,
+  ObjectPermission,
+  ObjectPublicToggle
+} from '@/components/object';
 import { SyncButton } from '@/components/common';
 import { ShareObjectButton } from '@/components/object/share';
-import { Button, Column, DataTable, Dialog, FilterMatchMode, InputText, InputSwitch, useToast } from '@/lib/primevue';
+import { Button, Column, DataTable, Dialog, FilterMatchMode, InputText, useToast } from '@/lib/primevue';
 import { useAuthStore, useAppStore, useObjectStore, usePermissionStore } from '@/store';
 import { Permissions } from '@/utils/constants';
 import { ButtonMode } from '@/utils/enums';
@@ -64,10 +70,6 @@ const showPermissions = async (objectId: string) => {
   permissionsObjectName.value = objectStore.findObjectById(objectId)?.name;
 };
 
-const togglePublic = async (objectId: string, isPublic: boolean) => {
-  await objectStore.togglePublic(objectId, isPublic);
-};
-
 function onDeletedSuccess() {
   toast.success('File deleted');
 }
@@ -204,15 +206,12 @@ const filters = ref({
         header="Public"
       >
         <template #body="{ data }">
-          <InputSwitch
-            v-model="data.public"
-            :disabled="
-              !(
-                usePermissionStore().isUserElevatedRights() &&
-                permissionStore.isObjectActionAllowed(data.id, getUserId, Permissions.MANAGE, props.bucketId as string)
-              )
-            "
-            @change="togglePublic(data.id, data.public)"
+          <ObjectPublicToggle
+            v-if="props.bucketId && getUserId"
+            :bucket-id="props.bucketId"
+            :object-id="data.id"
+            :object-public="data.public"
+            :user-id="getUserId"
           />
         </template>
       </Column>
diff --git a/frontend/src/components/object/index.ts b/frontend/src/components/object/index.ts
index aacbe0bd..f0781066 100644
--- a/frontend/src/components/object/index.ts
+++ b/frontend/src/components/object/index.ts
@@ -9,6 +9,7 @@ export { default as ObjectMetadataTagForm } from './ObjectMetadataTagForm.vue';
 export { default as ObjectPermission } from './ObjectPermission.vue';
 export { default as ObjectPermissionAddUser } from './ObjectPermissionAddUser.vue';
 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 ObjectTag } from './ObjectTag.vue';
diff --git a/frontend/src/store/objectStore.ts b/frontend/src/store/objectStore.ts
index 937ff2e3..2664e74e 100644
--- a/frontend/src/store/objectStore.ts
+++ b/frontend/src/store/objectStore.ts
@@ -208,6 +208,8 @@ export const useObjectStore = defineStore('object', () => {
     try {
       appStore.beginIndeterminateLoading();
       await objectService.togglePublic(objectId, isPublic);
+      const obj = findObjectById(objectId);
+      if (obj) obj.public = isPublic;
     } catch (error: any) {
       toast.error('Changing public state', error);
     } finally {

From 3883500dd25ce1adf5b9e6e564b077a9758d915c Mon Sep 17 00:00:00 2001
From: Norris Ng <103449568+norrisng-bc@users.noreply.github.com>
Date: Thu, 2 Nov 2023 16:42:01 -0700
Subject: [PATCH 6/8] Resolve /app gitignore incorrectly ignoring
 package-lock.json

---
 app/.gitignore | 2 --
 1 file changed, 2 deletions(-)

diff --git a/app/.gitignore b/app/.gitignore
index c161af95..af47744e 100644
--- a/app/.gitignore
+++ b/app/.gitignore
@@ -9,8 +9,6 @@ dist
 files
 **/e2e/videos
 node_modules
-# Ignore only top-level package-lock.json
-/package-lock.json
 
 # Ignore Helm subcharts
 charts/**/charts

From 8738585856ece8560e0b14372e41e41a8801cae3 Mon Sep 17 00:00:00 2001
From: Norris Ng <103449568+norrisng-bc@users.noreply.github.com>
Date: Mon, 6 Nov 2023 09:57:39 -0800
Subject: [PATCH 7/8] Move div classes into child elements instead

---
 .../components/object/ObjectPermission.vue    | 21 ++++++++-----------
 1 file changed, 9 insertions(+), 12 deletions(-)

diff --git a/frontend/src/components/object/ObjectPermission.vue b/frontend/src/components/object/ObjectPermission.vue
index 59de571a..999f9448 100644
--- a/frontend/src/components/object/ObjectPermission.vue
+++ b/frontend/src/components/object/ObjectPermission.vue
@@ -89,20 +89,17 @@ onBeforeMount(() => {
           <li>To instead set explicit permissions, add users and use the options below</li>
         </ul>
       </div>
-      <div class="ml-4">
-        <ObjectPublicToggle
-          v-if="object && getUserId"
-          :bucket-id="object.bucketId"
-          :object-id="object.id"
-          :object-public="object.public"
-          :user-id="getUserId"
-        />
-      </div>
+      <ObjectPublicToggle
+        v-if="object && getUserId"
+        class="ml-4"
+        :bucket-id="object.bucketId"
+        :object-id="object.id"
+        :object-public="object.public"
+        :user-id="getUserId"
+      />
     </div>
 
-    <div class="mt-1 mb-2">
-      <h3>User Permissions</h3>
-    </div>
+    <h3 class="mt-1 mb-2">User Permissions</h3>
 
     <div v-if="!showSearchUsers">
       <Button

From f6922507059bc104af128765eaf0a8a758f983f2 Mon Sep 17 00:00:00 2001
From: Norris Ng <103449568+norrisng-bc@users.noreply.github.com>
Date: Mon, 6 Nov 2023 14:38:18 -0800
Subject: [PATCH 8/8] Move style for user search dropdown to scoped style

In 60c2bad, the user search dropdown was widened to fill the width of the modal - this was achieved using !important in the Primevue stylesheet.
This has been moved to a locally scoped style inside SearchUsers.vue instead, eliminating the need for !important.
---
 frontend/src/assets/primevue.scss            | 4 ----
 frontend/src/components/form/SearchUsers.vue | 4 ++--
 2 files changed, 2 insertions(+), 6 deletions(-)

diff --git a/frontend/src/assets/primevue.scss b/frontend/src/assets/primevue.scss
index bdede903..0bb076b9 100644
--- a/frontend/src/assets/primevue.scss
+++ b/frontend/src/assets/primevue.scss
@@ -74,10 +74,6 @@
   }
 }
 
-.p-dropdown.usersearch {
-  width: 100% !important
-}
-
 .p-checkbox,
 .p-radiobutton {
   &.p-checkbox-checked,
diff --git a/frontend/src/components/form/SearchUsers.vue b/frontend/src/components/form/SearchUsers.vue
index 9738c630..7301b94f 100644
--- a/frontend/src/components/form/SearchUsers.vue
+++ b/frontend/src/components/form/SearchUsers.vue
@@ -152,7 +152,7 @@ onMounted(() => {
           :option-label="(option) => getUserDropdownLabel(option)"
           editable
           :placeholder="userSearchPlaceholder"
-          class="mt-1 mb-4 usersearch"
+          class="mt-1 mb-4"
           :class="invalidSelectedUser ? 'p-invalid' : ''"
           @input="onInput"
           @change="onChange"
@@ -177,6 +177,6 @@ onMounted(() => {
 
 <style lang="scss" scoped>
 .p-dropdown {
-  width: 60%;
+  width: 100%;
 }
 </style>