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 ; 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 (
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 (
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 ; } @@ -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 (
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?" />