From 70637cb65a501a29967f56fd6401928e7bd7c0ab Mon Sep 17 00:00:00 2001
From: Kyle Morel <kmorel@parcsystems.ca>
Date: Tue, 4 Apr 2023 11:10:14 -0700
Subject: [PATCH 1/3] Pushing to get more recent code on another machine

---
 .../components/bucket/BucketConfigForm.vue    | 42 +++++++++++++------
 frontend/src/components/form/TextInput.vue    |  6 +--
 2 files changed, 32 insertions(+), 16 deletions(-)

diff --git a/frontend/src/components/bucket/BucketConfigForm.vue b/frontend/src/components/bucket/BucketConfigForm.vue
index e81a0cc3..4ac32847 100644
--- a/frontend/src/components/bucket/BucketConfigForm.vue
+++ b/frontend/src/components/bucket/BucketConfigForm.vue
@@ -27,7 +27,7 @@ const bucketStore = useBucketStore();
 const { getUserId } = storeToRefs(useAuthStore());
 
 // Default form values
-const initialValues = {
+const initialValues: any = {
   bucketName: props.bucket?.bucketName,
   bucket: props.bucket?.bucket,
   endpoint: props.bucket?.endpoint,
@@ -50,18 +50,35 @@ const schema = object({
 const toast = useToast();
 
 const onSubmit = async (values: any) => {
+
+  const differential = (left: any, right: any) => {
+    let diff: any = {};
+    for (const [key, value] of Object.entries(left)) {
+      if(!Object.prototype.hasOwnProperty.call(right, key) ||
+        (Object.prototype.hasOwnProperty.call(right, key) && right[key] !== value)) {
+        diff[key] = value;
+      }
+    }
+
+    return diff;
+  };
+
   try {
     const formBucket = {
       bucketName: values.bucketName,
       bucket: values.bucket,
       endpoint: values.endpoint,
-      accessKeyId: values.accessKeyId !== 'REDACTED' ? values.accessKeyId : undefined,
-      secretAccessKey:
-        values.secretAccessKey !== 'REDACTED' ? values.secretAccessKey : undefined,
+      accessKeyId: values.accessKeyId,
+      secretAccessKey: values.secretAccessKey,
       key: values.key ? values.key : '/',
-      active: true
     } as Bucket;
 
+    const d = differential(formBucket, initialValues);
+    console.log(values);
+    console.log(d);
+    return;
+
+
     props.bucket ?
       await bucketStore.updateBucket(props.bucket?.bucketId, formBucket) :
       await bucketStore.createBucket(formBucket);
@@ -106,37 +123,37 @@ const onCancel = () => {
         name="bucketName"
         label="Bucket name *"
         placeholder="My Documents"
-        helptext="Your custom display name for the bucket."
+        help-text="Your custom display name for the bucket."
       />
       <TextInput
         name="bucket"
         label="Bucket *"
         placeholder="bucket0123456789"
-        helptext="Your storage provider's bucket identifier."
+        help-text="Your storage provider's bucket identifier."
       />
       <TextInput
         name="endpoint"
         label="Endpoint *"
         placeholder="https://example.com/"
-        helptext="The URL of the object storage server."
+        help-text="The URL of the object storage server."
       />
       <Password
         name="accessKeyId"
         label="Access key identifier / Username *"
         placeholder="username"
-        helptext="User/Account identifier or username."
+        help-text="User/Account identifier or username."
       />
       <Password
         name="secretAccessKey"
         label="Secret access key *"
         placeholder="password"
-        helptext="A password used to access the bucket."
+        help-text="A password used to access the bucket."
       />
       <TextInput
         name="key"
         label="Key"
         placeholder="directory"
-        helptext="An optional path prefix within a bucket. The path will be created if it doesn't already exist."
+        help-text="An optional path prefix within a bucket. The path will be created if it doesn't already exist."
       />
       <Button
         class="mt-2"
@@ -148,8 +165,7 @@ const onCancel = () => {
       <Button
         class="p-button-text mt-2"
         label="Cancel"
-        icon="pi pi
-        -times"
+        icon="pi pi-times"
         @click="onCancel"
       />
     </Form>
diff --git a/frontend/src/components/form/TextInput.vue b/frontend/src/components/form/TextInput.vue
index b8d9a865..0b15f614 100644
--- a/frontend/src/components/form/TextInput.vue
+++ b/frontend/src/components/form/TextInput.vue
@@ -6,14 +6,14 @@ import { InputText } from '@/lib/primevue';
 
 // Props
 type Props = {
-  helptext?: string;
+  helpText?: string;
   label?: string;
   name: string;
   placeholder?: string;
 };
 
 const props = withDefaults(defineProps<Props>(), {
-  helptext: '',
+  helpText: '',
   type: 'text',
   label: '',
   placeholder: ''
@@ -32,7 +32,7 @@ const { errorMessage, value } = useField<string>(toRef(props, 'name'));
       :placeholder="placeholder"
       :class="{ 'p-invalid': errorMessage }"
     />
-    <small id="`${name}-help`">{{ helptext }}</small>
+    <small id="`${name}-help`">{{ helpText }}</small>
     <ErrorMessage
       :name="name"
     />

From 96bf9a68c3a3c9e82d91adf80a62151fc9c7be81 Mon Sep 17 00:00:00 2001
From: Kyle Morel <kmorel@parcsystems.ca>
Date: Wed, 5 Apr 2023 12:07:42 -0700
Subject: [PATCH 2/3] Only submit form differential

---
 .../components/bucket/BucketConfigForm.vue    | 22 ++-----------------
 frontend/src/utils/utils.ts                   | 19 ++++++++++++++++
 2 files changed, 21 insertions(+), 20 deletions(-)

diff --git a/frontend/src/components/bucket/BucketConfigForm.vue b/frontend/src/components/bucket/BucketConfigForm.vue
index 4ac32847..0bb0d8b2 100644
--- a/frontend/src/components/bucket/BucketConfigForm.vue
+++ b/frontend/src/components/bucket/BucketConfigForm.vue
@@ -7,6 +7,7 @@ import Password from '@/components/form/Password.vue';
 import TextInput from '@/components/form/TextInput.vue';
 import { Button, useToast } from '@/lib/primevue';
 import { useAuthStore, useBucketStore } from '@/store';
+import { differential } from '@/utils/utils';
 
 import type { Bucket } from '@/types';
 
@@ -50,19 +51,6 @@ const schema = object({
 const toast = useToast();
 
 const onSubmit = async (values: any) => {
-
-  const differential = (left: any, right: any) => {
-    let diff: any = {};
-    for (const [key, value] of Object.entries(left)) {
-      if(!Object.prototype.hasOwnProperty.call(right, key) ||
-        (Object.prototype.hasOwnProperty.call(right, key) && right[key] !== value)) {
-        diff[key] = value;
-      }
-    }
-
-    return diff;
-  };
-
   try {
     const formBucket = {
       bucketName: values.bucketName,
@@ -73,14 +61,8 @@ const onSubmit = async (values: any) => {
       key: values.key ? values.key : '/',
     } as Bucket;
 
-    const d = differential(formBucket, initialValues);
-    console.log(values);
-    console.log(d);
-    return;
-
-
     props.bucket ?
-      await bucketStore.updateBucket(props.bucket?.bucketId, formBucket) :
+      await bucketStore.updateBucket(props.bucket?.bucketId, differential(formBucket, initialValues)) :
       await bucketStore.createBucket(formBucket);
 
     await bucketStore.fetchBuckets({ userId: getUserId.value, objectPerms: true });
diff --git a/frontend/src/utils/utils.ts b/frontend/src/utils/utils.ts
index accc97df..d5800936 100644
--- a/frontend/src/utils/utils.ts
+++ b/frontend/src/utils/utils.ts
@@ -1,3 +1,22 @@
+/**
+ * @function differential
+ * Create a key/value differential from source against comparer
+ * @param {object} source Source object
+ * @param {object} comparer The object to be compared against
+ * @returns {object} Object containing the non-matching key/value pairs in the source object
+ */
+export function differential(source: any, comparer: any) {
+  const diff: any = {};
+  for (const [key, value] of Object.entries(source)) {
+    if (!Object.prototype.hasOwnProperty.call(comparer, key) ||
+      (Object.prototype.hasOwnProperty.call(comparer, key) && comparer[key] !== value)) {
+      diff[key] = value;
+    }
+  }
+
+  return diff;
+}
+
 /**
  * @function isDebugMode
  * Checks if the app is currently running in debug mode

From 6bfdb08b9269a9e7e7962b200979de4b0240e5fd Mon Sep 17 00:00:00 2001
From: Kyle Morel <kmorel@parcsystems.ca>
Date: Wed, 5 Apr 2023 13:33:17 -0700
Subject: [PATCH 3/3] More concise differential. Add BucketForm Type.

---
 .../components/bucket/BucketConfigForm.vue    | 33 ++++++++++++-------
 frontend/src/types/Bucket.ts                  |  8 ++---
 frontend/src/utils/utils.ts                   | 14 +++-----
 3 files changed, 29 insertions(+), 26 deletions(-)

diff --git a/frontend/src/components/bucket/BucketConfigForm.vue b/frontend/src/components/bucket/BucketConfigForm.vue
index 0bb0d8b2..40067c23 100644
--- a/frontend/src/components/bucket/BucketConfigForm.vue
+++ b/frontend/src/components/bucket/BucketConfigForm.vue
@@ -11,6 +11,15 @@ import { differential } from '@/utils/utils';
 
 import type { Bucket } from '@/types';
 
+export type BucketForm = {
+  accessKeyId?: string;
+  bucket?: string;
+  bucketName?: string;
+  endpoint?: string;
+  key?: string;
+  secretAccessKey?: string;
+};
+
 // Props
 type Props = {
   bucket?: Bucket;
@@ -28,23 +37,23 @@ const bucketStore = useBucketStore();
 const { getUserId } = storeToRefs(useAuthStore());
 
 // Default form values
-const initialValues: any = {
-  bucketName: props.bucket?.bucketName,
+const initialValues: BucketForm = {
+  accessKeyId: props.bucket?.accessKeyId,
   bucket: props.bucket?.bucket,
+  bucketName: props.bucket?.bucketName,
   endpoint: props.bucket?.endpoint,
-  accessKeyId: props.bucket?.accessKeyId,
-  secretAccessKey: props.bucket?.secretAccessKey,
-  key: props.bucket?.key
+  key: props.bucket?.key,
+  secretAccessKey: props.bucket?.secretAccessKey
 };
 
 // Form validation schema
 const schema = object({
-  bucketName: string().max(255).required().label('Bucket name'),
+  accessKeyId: string().max(255).required().label('Access Key ID'),
   bucket: string().max(255).required().label('Bucket'),
+  bucketName: string().max(255).required().label('Bucket name'),
   endpoint: string().max(255).required().label('Endpoint'),
-  accessKeyId: string().max(255).required().label('Access Key ID'),
-  secretAccessKey: string().max(255).required().label('Secret Access Key'),
-  key: string().max(255).label('Key')
+  key: string().max(255).label('Key'),
+  secretAccessKey: string().max(255).required().label('Secret Access Key')
 });
 
 // Actions
@@ -53,12 +62,12 @@ const toast = useToast();
 const onSubmit = async (values: any) => {
   try {
     const formBucket = {
-      bucketName: values.bucketName,
+      accessKeyId: values.accessKeyId,
       bucket: values.bucket,
+      bucketName: values.bucketName,
       endpoint: values.endpoint,
-      accessKeyId: values.accessKeyId,
-      secretAccessKey: values.secretAccessKey,
       key: values.key ? values.key : '/',
+      secretAccessKey: values.secretAccessKey,
     } as Bucket;
 
     props.bucket ?
diff --git a/frontend/src/types/Bucket.ts b/frontend/src/types/Bucket.ts
index 88fe2d4d..9057a75e 100644
--- a/frontend/src/types/Bucket.ts
+++ b/frontend/src/types/Bucket.ts
@@ -1,13 +1,13 @@
 import type { IAudit } from '@/interfaces';
 
 export type Bucket = {
-  bucketId: string;
-  bucketName: string;
+  active: boolean;
   accessKeyId: string;
   bucket: string;
+  bucketId: string;
+  bucketName: string;
   endpoint: string;
   key: string;
-  secretAccessKey: string;
   region: string;
-  active: boolean;
+  secretAccessKey: string;
 } & IAudit;
diff --git a/frontend/src/utils/utils.ts b/frontend/src/utils/utils.ts
index d5800936..2cb476a8 100644
--- a/frontend/src/utils/utils.ts
+++ b/frontend/src/utils/utils.ts
@@ -5,16 +5,10 @@
  * @param {object} comparer The object to be compared against
  * @returns {object} Object containing the non-matching key/value pairs in the source object
  */
-export function differential(source: any, comparer: any) {
-  const diff: any = {};
-  for (const [key, value] of Object.entries(source)) {
-    if (!Object.prototype.hasOwnProperty.call(comparer, key) ||
-      (Object.prototype.hasOwnProperty.call(comparer, key) && comparer[key] !== value)) {
-      diff[key] = value;
-    }
-  }
-
-  return diff;
+export function differential(source: any, comparer: any): any {
+  return Object.fromEntries(Object.entries(source)
+    .filter(([key, value]) => comparer[key] !== value)
+  );
 }
 
 /**