fix: change dirty strategy in check form

grafana · Jan 6, 2025 · 4ad984d · 4ad984d
1 parent e287f10
commit 4ad984d
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 4 deletions.
diff --git 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<CheckFormValues>({
-    defaultValues: toFormValues(initialCheck, checkType),
+    defaultValues,
     shouldFocusError: false, // we manage focus manually
     resolver: zodResolver(schema),
   });
@@ -158,9 +160,7 @@ export const CheckForm = ({ check, disabled }: CheckFormProps) => {
     </Stack>
   );
 
-  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
@@ -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<CheckFormValues>) {
   const build: string[] = [];