Fix stale duplicate validation for automation scripts (#2402)

avivtur · cursoragent · web-flow · commit 2432aa64f330 · 2026-05-13T16:18:38.000Z
The duplicate script validation used useWatch values inside the validate
closure, which are stale within the same event handler (React state hasn't
re-rendered yet). Replaced with getValues() which reads directly from
react-hook-form's internal store.

Also added deps to re-validate sibling scripts when any name changes, and
trigger all script names on guestType/scriptType change so stale errors
clear when the conflict resolves.

Resolves: MTV-4945

Signed-off-by: Aviv Turgeman &lt;aturgema@redhat.com&gt;
Co-authored-by: Cursor &lt;cursoragent@cursor.com&gt;
diff --git a/src/plans/create/steps/customization-scripts/NewScriptsFields.tsx b/src/plans/create/steps/customization-scripts/NewScriptsFields.tsx
@@ -10,6 +10,7 @@ import { useForkliftTranslation } from '@utils/i18n';
 
 import { useCreatePlanFormContext } from '../../hooks/useCreatePlanFormContext';
 
+import { useScriptFieldValidation } from './hooks/useScriptFieldValidation';
 import {
   CustomScriptsFieldId,
   DefaultScript,
@@ -20,11 +21,10 @@ import {
   ScriptTypeLabels,
 } from './constants';
 import ScriptContentField from './ScriptContentField';
-import { validateUniqueScriptKey } from './utils';
 
 const NewScriptsFields: FC = () => {
   const { t } = useForkliftTranslation();
-  const { control, setValue, trigger } = useCreatePlanFormContext();
+  const { control, getValues, setValue, trigger } = useCreatePlanFormContext();
 
   const {
     append,
@@ -36,22 +36,13 @@ const NewScriptsFields: FC = () => {
   });
 
   const watchedScripts = useWatch({ control, name: CustomScriptsFieldId.Scripts });
-
   const getScriptFieldId = (index: number, field: string): string =>
     `${CustomScriptsFieldId.Scripts}.${index}.${field}`;
-
-  const handleAddScript = (): void => {
-    append({ ...DefaultScript });
-  };
-
-  const handleRemoveScript = (index: number): void => {
-    if (scripts.length > 1) {
-      remove(index);
-      return;
-    }
-
-    setValue(CustomScriptsFieldId.Scripts, [DefaultScript]);
-  };
+  const { nameDeps, triggerAllNames, validateName } = useScriptFieldValidation(
+    CustomScriptsFieldId.Scripts,
+    trigger,
+    () => getValues(CustomScriptsFieldId.Scripts),
+  );
 
   return (
     <div className="pf-v6-u-ml-lg">
@@ -64,7 +55,6 @@ const NewScriptsFields: FC = () => {
         fieldRows={scripts.map((fieldRow, index) => {
           const guestType = watchedScripts?.[index]?.guestType ?? GuestType.Linux;
           const isWindows = guestType === GuestType.Windows;
-
           return {
             ...fieldRow,
             additionalOptions: (
@@ -85,14 +75,7 @@ const NewScriptsFields: FC = () => {
                 key="name"
                 name={getScriptFieldId(index, 'name')}
                 control={control}
-                rules={{
-                  validate: (value) =>
-                    validateUniqueScriptKey(
-                      { ...watchedScripts?.[index], name: value },
-                      index,
-                      watchedScripts ?? [],
-                    ),
-                }}
+                rules={{ deps: nameDeps(scripts.length), validate: validateName(index) }}
                 render={({ field, fieldState: { error } }) => (
                   <>
                     <TextInput
@@ -115,12 +98,10 @@ const NewScriptsFields: FC = () => {
                     value={GuestTypeLabels[guestTypeField.value as GuestType]}
                     onSelect={async (_event, value) => {
                       guestTypeField.onChange(value);
-
                       if (value === GuestType.Windows) {
                         setValue(getScriptFieldId(index, 'scriptType'), ScriptType.Firstboot);
                       }
-
-                      await trigger(getScriptFieldId(index, 'name'));
+                      await triggerAllNames(scripts.length);
                     }}
                     testId={`script-guest-type-${index}`}
                   >
@@ -144,7 +125,7 @@ const NewScriptsFields: FC = () => {
                     value={ScriptTypeLabels[scriptTypeField.value as ScriptType]}
                     onSelect={async (_event, value) => {
                       scriptTypeField.onChange(value);
-                      await trigger(getScriptFieldId(index, 'name'));
+                      await triggerAllNames(scripts.length);
                     }}
                     testId={`script-type-${index}`}
                   >
@@ -172,10 +153,18 @@ const NewScriptsFields: FC = () => {
         })}
         addButton={{
           label: t('Add script'),
-          onClick: handleAddScript,
+          onClick: () => {
+            append({ ...DefaultScript });
+          },
         }}
         removeButton={{
-          onClick: handleRemoveScript,
+          onClick: (index) => {
+            if (scripts.length > 1) {
+              remove(index);
+            } else {
+              setValue(CustomScriptsFieldId.Scripts, [DefaultScript]);
+            }
+          },
         }}
       />
     </div>
diff --git a/src/plans/create/steps/customization-scripts/hooks/useScriptFieldValidation.ts b/src/plans/create/steps/customization-scripts/hooks/useScriptFieldValidation.ts
@@ -0,0 +1,34 @@
+import type { CustomScript } from '../types';
+import { validateUniqueScriptKey } from '../utils';
+
+type TriggerFn = (name?: string | string[]) => Promise<boolean>;
+type GetScriptsFn = () => CustomScript[];
+
+type ScriptFieldValidation = {
+  nameDeps: (fieldCount: number) => string[];
+  triggerAllNames: (fieldCount: number) => Promise<boolean>;
+  validateName: (index: number) => (value: string) => string | undefined;
+};
+
+export const useScriptFieldValidation = (
+  prefix: string,
+  trigger: TriggerFn,
+  getScripts: GetScriptsFn,
+): ScriptFieldValidation => {
+  const buildNameField = (index: number): string => `${prefix}.${index}.name`;
+
+  const nameDeps = (fieldCount: number): string[] =>
+    Array.from({ length: fieldCount }, (_, i) => buildNameField(i));
+
+  const triggerAllNames = async (fieldCount: number): Promise<boolean> =>
+    trigger(nameDeps(fieldCount));
+
+  const validateName =
+    (index: number) =>
+    (value: string): string | undefined => {
+      const allScripts = getScripts();
+      return validateUniqueScriptKey({ ...allScripts[index], name: value }, index, allScripts);
+    };
+
+  return { nameDeps, triggerAllNames, validateName };
+};
diff --git a/src/plans/details/tabs/Automation/components/ScriptEdit/ScriptEditTable.tsx b/src/plans/details/tabs/Automation/components/ScriptEdit/ScriptEditTable.tsx
@@ -8,9 +8,9 @@ import {
   ScriptType,
   ScriptTypeLabels,
 } from 'src/plans/create/steps/customization-scripts/constants';
+import { useScriptFieldValidation } from 'src/plans/create/steps/customization-scripts/hooks/useScriptFieldValidation';
 import ScriptContentField from 'src/plans/create/steps/customization-scripts/ScriptContentField';
 import type { CustomScript } from 'src/plans/create/steps/customization-scripts/types';
-import { validateUniqueScriptKey } from 'src/plans/create/steps/customization-scripts/utils';
 
 import Select from '@components/common/Select';
 import FieldBuilderTable from '@components/FieldBuilderTable/FieldBuilderTable';
@@ -27,11 +27,20 @@ type ScriptEditTableProps = {
   remove: (index: number) => void;
 };
 
+const SCRIPTS_FIELD = 'scripts';
+
 const ScriptEditTable: FC<ScriptEditTableProps> = ({ append, fields, remove }) => {
   const { t } = useForkliftTranslation();
-  const { control, setValue, trigger } = useFormContext<{ scripts: CustomScript[] }>();
+  const { control, getValues, setValue, trigger } = useFormContext<{ scripts: CustomScript[] }>();
 
-  const watchedScripts = useWatch({ control, name: 'scripts' });
+  const watchedScripts = useWatch({ control, name: SCRIPTS_FIELD });
+  const triggerByName = async (name?: string | string[]): Promise<boolean> =>
+    trigger(name as Parameters<typeof trigger>[0]);
+  const { nameDeps, triggerAllNames, validateName } = useScriptFieldValidation(
+    SCRIPTS_FIELD,
+    triggerByName,
+    () => getValues(SCRIPTS_FIELD),
+  );
 
   return (
     <FieldBuilderTable
@@ -62,12 +71,8 @@ const ScriptEditTable: FC<ScriptEditTableProps> = ({ append, fields, remove }) =
               control={control}
               name={`scripts.${index}.name`}
               rules={{
-                validate: (value) =>
-                  validateUniqueScriptKey(
-                    { ...watchedScripts?.[index], name: value },
-                    index,
-                    watchedScripts ?? [],
-                  ),
+                deps: nameDeps(fields.length) as `scripts.${number}.name`[],
+                validate: validateName(index),
               }}
               render={({ field, fieldState: { error } }) => (
                 <>
@@ -96,7 +101,7 @@ const ScriptEditTable: FC<ScriptEditTableProps> = ({ append, fields, remove }) =
                       setValue(`scripts.${index}.scriptType`, ScriptType.Firstboot);
                     }
 
-                    await trigger(`scripts.${index}.name`);
+                    await triggerAllNames(fields.length);
                   }}
                   testId={`script-guest-type-select-${index}`}
                 >
@@ -120,7 +125,7 @@ const ScriptEditTable: FC<ScriptEditTableProps> = ({ append, fields, remove }) =
                   value={ScriptTypeLabels[scriptTypeField.value]}
                   onSelect={async (_event, value) => {
                     scriptTypeField.onChange(value);
-                    await trigger(`scripts.${index}.name`);
+                    await triggerAllNames(fields.length);
                   }}
                   testId={`script-type-select-${index}`}
                 >
