From 0be8c6c2e8386f9ee48f62346c75417c22a10cdd Mon Sep 17 00:00:00 2001
From: Nick Zelei <2420177+nickzelei@users.noreply.github.com>
Date: Wed, 20 Nov 2024 16:24:54 -0800
Subject: [PATCH] NEOS-1628: Optimizes Bulk Set and Apply Default (#2968)

---
 .../components/DataGenConnectionCard.tsx      | 33 ++++++++++-----
 .../components/DataSyncConnectionCard.tsx     | 37 ++++++++++------
 .../components/useOnApplyDefaultClick.tsx     | 14 +++----
 .../useOnTransformerBulkUpdateClick.tsx       | 42 +++++++++++++++++++
 .../new/job/generate/single/schema/page.tsx   | 33 ++++++++++-----
 .../(mgmt)/[account]/new/job/schema/page.tsx  | 37 ++++++++++------
 .../ApplyDefaultTransformersButton.tsx        |  2 +-
 7 files changed, 142 insertions(+), 56 deletions(-)
 create mode 100644 frontend/apps/web/app/(mgmt)/[account]/jobs/[id]/source/components/useOnTransformerBulkUpdateClick.tsx

diff --git a/frontend/apps/web/app/(mgmt)/[account]/jobs/[id]/source/components/DataGenConnectionCard.tsx b/frontend/apps/web/app/(mgmt)/[account]/jobs/[id]/source/components/DataGenConnectionCard.tsx
index 5da58a8417..ece66a947a 100644
--- a/frontend/apps/web/app/(mgmt)/[account]/jobs/[id]/source/components/DataGenConnectionCard.tsx
+++ b/frontend/apps/web/app/(mgmt)/[account]/jobs/[id]/source/components/DataGenConnectionCard.tsx
@@ -70,6 +70,7 @@ import {
 import SchemaPageSkeleton from './SchemaPageSkeleton';
 import { useOnApplyDefaultClick } from './useOnApplyDefaultClick';
 import { useOnImportMappings } from './useOnImportMappings';
+import { useOnTransformerBulkUpdateClick } from './useOnTransformerBulkUpdateClick';
 import {
   getFilteredTransformersForBulkSet,
   getOnSelectedTableToggle,
@@ -290,24 +291,34 @@ export default function DataGenConnectionCard({ jobId }: Props): ReactElement {
     getMappings() {
       return form.getValues('mappings');
     },
-    setTransformer: onTransformerUpdate,
+    setMappings(mappings) {
+      form.setValue('mappings', mappings, {
+        shouldDirty: true,
+        shouldTouch: true,
+        shouldValidate: false,
+      });
+    },
     constraintHandler: schemaConstraintHandler,
     triggerUpdate() {
       form.trigger('mappings');
     },
   });
 
-  function onTransformerBulkUpdate(
-    indices: number[],
-    config: JobMappingTransformerForm
-  ): void {
-    indices.forEach((idx) => {
-      onTransformerUpdate(idx, config);
-    });
-    setTimeout(() => {
+  const { onClick: onTransformerBulkUpdate } = useOnTransformerBulkUpdateClick({
+    getMappings() {
+      return form.getValues('mappings');
+    },
+    setMappings(mappings) {
+      form.setValue('mappings', mappings, {
+        shouldDirty: true,
+        shouldTouch: true,
+        shouldValidate: false,
+      });
+    },
+    triggerUpdate() {
       form.trigger('mappings');
-    }, 0);
-  }
+    },
+  });
 
   if (isJobLoading || isSchemaDataMapLoading || isGetTransformersLoading) {
     return <SchemaPageSkeleton />;
diff --git a/frontend/apps/web/app/(mgmt)/[account]/jobs/[id]/source/components/DataSyncConnectionCard.tsx b/frontend/apps/web/app/(mgmt)/[account]/jobs/[id]/source/components/DataSyncConnectionCard.tsx
index 99d0f6544e..b7054b1346 100644
--- a/frontend/apps/web/app/(mgmt)/[account]/jobs/[id]/source/components/DataSyncConnectionCard.tsx
+++ b/frontend/apps/web/app/(mgmt)/[account]/jobs/[id]/source/components/DataSyncConnectionCard.tsx
@@ -96,6 +96,7 @@ import {
 import SchemaPageSkeleton from './SchemaPageSkeleton';
 import { useOnApplyDefaultClick } from './useOnApplyDefaultClick';
 import { useOnImportMappings } from './useOnImportMappings';
+import { useOnTransformerBulkUpdateClick } from './useOnTransformerBulkUpdateClick';
 import {
   getConnectionIdFromSource,
   getDestinationDetailsRecord,
@@ -520,13 +521,35 @@ export default function DataSyncConnectionCard({ jobId }: Props): ReactElement {
     getMappings() {
       return form.getValues('mappings');
     },
-    setTransformer: onTransformerUpdate,
+    setMappings(mappings) {
+      form.setValue('mappings', mappings, {
+        shouldDirty: true,
+        shouldTouch: true,
+        shouldValidate: false,
+      });
+    },
     constraintHandler: schemaConstraintHandler,
     triggerUpdate() {
       form.trigger('mappings');
     },
   });
 
+  const { onClick: onTransformerBulkUpdate } = useOnTransformerBulkUpdateClick({
+    getMappings() {
+      return form.getValues('mappings');
+    },
+    setMappings(mappings) {
+      form.setValue('mappings', mappings, {
+        shouldDirty: true,
+        shouldTouch: true,
+        shouldValidate: false,
+      });
+    },
+    triggerUpdate() {
+      form.trigger('mappings');
+    },
+  });
+
   if (
     isConnectionsLoading ||
     isSchemaDataMapLoading ||
@@ -569,18 +592,6 @@ export default function DataSyncConnectionCard({ jobId }: Props): ReactElement {
     );
   }
 
-  function onTransformerBulkUpdate(
-    indices: number[],
-    config: JobMappingTransformerForm
-  ): void {
-    indices.forEach((idx) => {
-      onTransformerUpdate(idx, config);
-    });
-    setTimeout(() => {
-      form.trigger('mappings');
-    }, 0);
-  }
-
   return (
     <Form {...form}>
       <form onSubmit={form.handleSubmit(onSubmit)}>
diff --git a/frontend/apps/web/app/(mgmt)/[account]/jobs/[id]/source/components/useOnApplyDefaultClick.tsx b/frontend/apps/web/app/(mgmt)/[account]/jobs/[id]/source/components/useOnApplyDefaultClick.tsx
index f4ee996af7..373d0a6c15 100644
--- a/frontend/apps/web/app/(mgmt)/[account]/jobs/[id]/source/components/useOnApplyDefaultClick.tsx
+++ b/frontend/apps/web/app/(mgmt)/[account]/jobs/[id]/source/components/useOnApplyDefaultClick.tsx
@@ -2,7 +2,6 @@ import { SchemaConstraintHandler } from '@/components/jobs/SchemaTable/schema-co
 import {
   convertJobMappingTransformerToForm,
   JobMappingFormValues,
-  JobMappingTransformerForm,
 } from '@/yup-validations/jobs';
 import {
   GenerateDefault,
@@ -13,7 +12,7 @@ import {
 
 interface Props {
   getMappings(): JobMappingFormValues[];
-  setTransformer(idx: number, transformer: JobMappingTransformerForm): void;
+  setMappings(mappings: JobMappingFormValues[]): void;
   triggerUpdate(): void;
   constraintHandler: SchemaConstraintHandler;
 }
@@ -26,16 +25,15 @@ interface UseOnApplyDefaultClickResponse {
 export function useOnApplyDefaultClick(
   props: Props
 ): UseOnApplyDefaultClickResponse {
-  const { getMappings, setTransformer, triggerUpdate, constraintHandler } =
-    props;
+  const { getMappings, triggerUpdate, constraintHandler, setMappings } = props;
 
   return {
     onClick(override) {
       const formMappings = getMappings();
-      formMappings.forEach((fm, idx) => {
+      const updatedMappings = formMappings.map((fm) => {
         // skips setting the default transformer if the user has already set the transformer
         if (fm.transformer.config.case && !override) {
-          return;
+          return fm;
         } else {
           const colkey = {
             schema: fm.schema,
@@ -45,9 +43,11 @@ export function useOnApplyDefaultClick(
           const isGenerated = constraintHandler.getIsGenerated(colkey);
           const identityType = constraintHandler.getIdentityType(colkey);
           const newJm = getDefaultJMTransformer(isGenerated && !identityType);
-          setTransformer(idx, convertJobMappingTransformerToForm(newJm));
+          fm.transformer = convertJobMappingTransformerToForm(newJm);
         }
+        return fm;
       });
+      setMappings(updatedMappings);
       setTimeout(() => {
         triggerUpdate();
       }, 0);
diff --git a/frontend/apps/web/app/(mgmt)/[account]/jobs/[id]/source/components/useOnTransformerBulkUpdateClick.tsx b/frontend/apps/web/app/(mgmt)/[account]/jobs/[id]/source/components/useOnTransformerBulkUpdateClick.tsx
new file mode 100644
index 0000000000..c50faf1c58
--- /dev/null
+++ b/frontend/apps/web/app/(mgmt)/[account]/jobs/[id]/source/components/useOnTransformerBulkUpdateClick.tsx
@@ -0,0 +1,42 @@
+import {
+  JobMappingFormValues,
+  JobMappingTransformerForm,
+} from '@/yup-validations/jobs';
+
+interface Props {
+  getMappings(): JobMappingFormValues[];
+  setMappings(mappings: JobMappingFormValues[]): void;
+  triggerUpdate(): void;
+}
+
+interface UseOnTransformerBulkUpdateClickResponse {
+  onClick(indices: number[], transformer: JobMappingTransformerForm): void;
+}
+
+// Hook that provides an onClick handler that will handle setting specified job mappings to a the provided transformer
+export function useOnTransformerBulkUpdateClick(
+  props: Props
+): UseOnTransformerBulkUpdateClickResponse {
+  const { getMappings, triggerUpdate, setMappings } = props;
+
+  return {
+    onClick(indices, transformer) {
+      if (indices.length === 0) {
+        return;
+      }
+
+      const formMappings = getMappings();
+
+      indices.forEach((idx) => {
+        if (formMappings[idx]) {
+          formMappings[idx].transformer = transformer;
+        }
+      });
+
+      setMappings(formMappings);
+      setTimeout(() => {
+        triggerUpdate();
+      }, 0);
+    },
+  };
+}
diff --git a/frontend/apps/web/app/(mgmt)/[account]/new/job/generate/single/schema/page.tsx b/frontend/apps/web/app/(mgmt)/[account]/new/job/generate/single/schema/page.tsx
index 479c01046c..3250733b17 100644
--- a/frontend/apps/web/app/(mgmt)/[account]/new/job/generate/single/schema/page.tsx
+++ b/frontend/apps/web/app/(mgmt)/[account]/new/job/generate/single/schema/page.tsx
@@ -3,6 +3,7 @@
 import FormPersist from '@/app/(mgmt)/FormPersist';
 import { useOnApplyDefaultClick } from '@/app/(mgmt)/[account]/jobs/[id]/source/components/useOnApplyDefaultClick';
 import { useOnImportMappings } from '@/app/(mgmt)/[account]/jobs/[id]/source/components/useOnImportMappings';
+import { useOnTransformerBulkUpdateClick } from '@/app/(mgmt)/[account]/jobs/[id]/source/components/useOnTransformerBulkUpdateClick';
 import {
   getFilteredTransformersForBulkSet,
   getOnSelectedTableToggle,
@@ -323,24 +324,34 @@ export default function Page({ searchParams }: PageProps): ReactElement {
     getMappings() {
       return form.getValues('mappings');
     },
-    setTransformer: onTransformerUpdate,
+    setMappings(mappings) {
+      form.setValue('mappings', mappings, {
+        shouldDirty: true,
+        shouldTouch: true,
+        shouldValidate: false,
+      });
+    },
     constraintHandler: schemaConstraintHandler,
     triggerUpdate() {
       form.trigger('mappings');
     },
   });
 
-  function onTransformerBulkUpdate(
-    indices: number[],
-    config: JobMappingTransformerForm
-  ): void {
-    indices.forEach((idx) => {
-      onTransformerUpdate(idx, config);
-    });
-    setTimeout(() => {
+  const { onClick: onTransformerBulkUpdate } = useOnTransformerBulkUpdateClick({
+    getMappings() {
+      return form.getValues('mappings');
+    },
+    setMappings(mappings) {
+      form.setValue('mappings', mappings, {
+        shouldDirty: true,
+        shouldTouch: true,
+        shouldValidate: false,
+      });
+    },
+    triggerUpdate() {
       form.trigger('mappings');
-    }, 0);
-  }
+    },
+  });
 
   return (
     <div className="flex flex-col gap-5">
diff --git a/frontend/apps/web/app/(mgmt)/[account]/new/job/schema/page.tsx b/frontend/apps/web/app/(mgmt)/[account]/new/job/schema/page.tsx
index d8eb1f0783..45e0ed34f4 100644
--- a/frontend/apps/web/app/(mgmt)/[account]/new/job/schema/page.tsx
+++ b/frontend/apps/web/app/(mgmt)/[account]/new/job/schema/page.tsx
@@ -57,6 +57,7 @@ import { toast } from 'sonner';
 import { useSessionStorage } from 'usehooks-ts';
 import { useOnApplyDefaultClick } from '../../../jobs/[id]/source/components/useOnApplyDefaultClick';
 import { useOnImportMappings } from '../../../jobs/[id]/source/components/useOnImportMappings';
+import { useOnTransformerBulkUpdateClick } from '../../../jobs/[id]/source/components/useOnTransformerBulkUpdateClick';
 import {
   getDestinationDetailsRecord,
   getFilteredTransformersForBulkSet,
@@ -419,13 +420,35 @@ export default function Page({ searchParams }: PageProps): ReactElement {
     getMappings() {
       return form.getValues('mappings');
     },
-    setTransformer: onTransformerUpdate,
+    setMappings(mappings) {
+      form.setValue('mappings', mappings, {
+        shouldDirty: true,
+        shouldTouch: true,
+        shouldValidate: false,
+      });
+    },
     constraintHandler: schemaConstraintHandler,
     triggerUpdate() {
       form.trigger('mappings');
     },
   });
 
+  const { onClick: onTransformerBulkUpdate } = useOnTransformerBulkUpdateClick({
+    getMappings() {
+      return form.getValues('mappings');
+    },
+    setMappings(mappings) {
+      form.setValue('mappings', mappings, {
+        shouldDirty: true,
+        shouldTouch: true,
+        shouldValidate: false,
+      });
+    },
+    triggerUpdate() {
+      form.trigger('mappings');
+    },
+  });
+
   if (isConnectionLoading || isSchemaMapLoading || isGetTransformersLoading) {
     return <SkeletonForm />;
   }
@@ -475,18 +498,6 @@ export default function Page({ searchParams }: PageProps): ReactElement {
     });
   }
 
-  function onTransformerBulkUpdate(
-    indices: number[],
-    config: JobMappingTransformerForm
-  ): void {
-    indices.forEach((idx) => {
-      onTransformerUpdate(idx, config);
-    });
-    setTimeout(() => {
-      form.trigger('mappings');
-    }, 0);
-  }
-
   return (
     <div className="flex flex-col gap-5">
       <FormPersist formKey={schemaFormKey} form={form} />
diff --git a/frontend/apps/web/components/jobs/SchemaTable/ApplyDefaultTransformersButton.tsx b/frontend/apps/web/components/jobs/SchemaTable/ApplyDefaultTransformersButton.tsx
index e61a91db2b..4eba6340cd 100644
--- a/frontend/apps/web/components/jobs/SchemaTable/ApplyDefaultTransformersButton.tsx
+++ b/frontend/apps/web/components/jobs/SchemaTable/ApplyDefaultTransformersButton.tsx
@@ -68,7 +68,7 @@ function FormBody(props: FormBodyProps): ReactElement {
                     isChecked={field.value}
                     onCheckedChange={field.onChange}
                     title="Override Mapped Transformers"
-                    description="Do you want to overwrite the Transformers you have already mapped."
+                    description="Do you want to overwrite the Transformers you have already mapped?"
                   />
                 </FormControl>
                 <FormMessage />