diff --git a/src/components/CheckForm/CheckForm.tsx b/src/components/CheckForm/CheckForm.tsx index 32fbd00ac..91ec8086b 100644 --- a/src/components/CheckForm/CheckForm.tsx +++ b/src/components/CheckForm/CheckForm.tsx @@ -21,6 +21,7 @@ import { toFormValues } from 'components/CheckEditor/checkFormTransformations'; import { CheckJobName } from 'components/CheckEditor/FormComponents/CheckJobName'; import { ChooseCheckType } from 'components/CheckEditor/FormComponents/ChooseCheckType'; import { ProbeOptions } from 'components/CheckEditor/ProbeOptions'; +import { checkHasChanges } from 'components/CheckForm/checkForm.utils'; import { DNSCheckLayout } from 'components/CheckForm/FormLayouts/CheckDNSLayout'; import { GRPCCheckLayout } from 'components/CheckForm/FormLayouts/CheckGrpcLayout'; import { HttpCheckLayout } from 'components/CheckForm/FormLayouts/CheckHttpLayout'; @@ -93,9 +94,10 @@ export const CheckForm = ({ check, disabled }: CheckFormProps) => { (checkType === CheckType.Browser && isOverBrowserLimit) || ([CheckType.MULTI_HTTP, CheckType.Scripted].includes(checkType) && isOverScriptedLimit); const isDisabled = disabled || !canWriteChecks || getLimitDisabled({ isExistingCheck, isLoading, overLimit }); + const defaultValues = toFormValues(initialCheck, checkType); const formMethods = useForm({ - defaultValues: toFormValues(initialCheck, checkType), + defaultValues, shouldFocusError: false, // we manage focus manually resolver: zodResolver(schema), }); @@ -158,9 +160,7 @@ export const CheckForm = ({ check, disabled }: CheckFormProps) => { ); - const { isDirty, isSubmitSuccessful } = formMethods.formState; - // since we navigate on submit, we need this to not trigger the confirmation modal - const hasUnsavedChanges = isDirty && !isSubmitSuccessful; + const hasUnsavedChanges = checkHasChanges(defaultValues, formMethods.getValues()); const navModel = useMemo(() => { return isExistingCheck ? createNavModel( diff --git a/src/components/CheckForm/checkForm.utils.ts b/src/components/CheckForm/checkForm.utils.ts index c517620c6..01262eb88 100644 --- a/src/components/CheckForm/checkForm.utils.ts +++ b/src/components/CheckForm/checkForm.utils.ts @@ -5,6 +5,10 @@ import { PROBES_FILTER_ID } from 'components/CheckEditor/CheckProbes/ProbesFilte import { SCRIPT_TEXTAREA_ID } from 'components/CheckEditor/FormComponents/ScriptedCheckScript'; import { CHECK_FORM_ERROR_EVENT } from 'components/constants'; +export function checkHasChanges(existing: CheckFormValues, incoming: CheckFormValues) { + return JSON.stringify(existing) !== JSON.stringify(incoming); +} + export function flattenKeys(errs: FieldErrors) { const build: string[] = [];