From 02c93e25fd19607077eacc07348c620b166026c6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Georgiana-Andreea=20Onolea=C8=9B=C4=83?=
 <georgiana.onoleata@elastic.co>
Date: Wed, 20 Nov 2024 11:37:27 +0200
Subject: [PATCH] [ResponseOps][Rules]Discard unsaved changes warning gets
 triggered unnecessarily when user clicks on cancel or x without making any
 changes (#200559)

Closes https://github.com/elastic/kibana/issues/153606

## Summary

- the "Discard unsaved changes" warning was triggered unnecessarily when
the user clicked on "Cancel" or "X" on the edit rule form without making
any changes. The problem was caused by the "touched" property of
"useRuleFormState" being set to true by default when the page was
opened.
- updated the logic so that "touched" is only set to true if actual
changes are made


https://github.com/user-attachments/assets/b20b5c94-5d53-42cd-a7cf-5f951a1ed43e
---
 .../rule_form_state_reducer.ts                |  7 ++-
 .../rule_form/rule_page/rule_page.test.tsx    | 58 +++++++++++++++++++
 .../src/rule_form/rule_page/rule_page.tsx     |  1 +
 3 files changed, 64 insertions(+), 2 deletions(-)

diff --git a/packages/kbn-alerts-ui-shared/src/rule_form/rule_form_state/rule_form_state_reducer.ts b/packages/kbn-alerts-ui-shared/src/rule_form/rule_form_state/rule_form_state_reducer.ts
index d79ae00988875..2419a1b7f44ac 100644
--- a/packages/kbn-alerts-ui-shared/src/rule_form/rule_form_state/rule_form_state_reducer.ts
+++ b/packages/kbn-alerts-ui-shared/src/rule_form/rule_form_state/rule_form_state_reducer.ts
@@ -8,7 +8,7 @@
  */
 
 import { RuleActionParams } from '@kbn/alerting-types';
-import { isEmpty, omit } from 'lodash';
+import { isEmpty, omit, isEqual } from 'lodash';
 import { RuleFormActionsErrors, RuleFormParamsErrors, RuleUiAction } from '../../common';
 import { RuleFormData, RuleFormState } from '../types';
 import { validateRuleBase, validateRuleParams } from '../validation';
@@ -119,6 +119,7 @@ const getUpdateWithValidation =
       selectedRuleTypeModel,
       multiConsumerSelection,
       selectedRuleType,
+      formData: originalFormData,
     } = ruleFormState;
 
     const formData = updater();
@@ -149,12 +150,14 @@ const getUpdateWithValidation =
       }
     }
 
+    const touched = !isEqual(originalFormData, formData);
+
     return {
       ...ruleFormState,
       formData,
       baseErrors,
       paramsErrors,
-      touched: true,
+      touched,
     };
   };
 
diff --git a/packages/kbn-alerts-ui-shared/src/rule_form/rule_page/rule_page.test.tsx b/packages/kbn-alerts-ui-shared/src/rule_form/rule_page/rule_page.test.tsx
index ac07c580fbd49..9523dad2a8a6f 100644
--- a/packages/kbn-alerts-ui-shared/src/rule_form/rule_page/rule_page.test.tsx
+++ b/packages/kbn-alerts-ui-shared/src/rule_form/rule_page/rule_page.test.tsx
@@ -125,4 +125,62 @@ describe('rulePage', () => {
     fireEvent.click(screen.getByTestId('rulePageReturnButton'));
     expect(onCancel).toHaveBeenCalled();
   });
+
+  test('should display discard changes modal only if changes are made in the form', () => {
+    useRuleFormState.mockReturnValue({
+      plugins: {
+        application: {
+          navigateToUrl,
+          capabilities: {
+            actions: {
+              show: true,
+              save: true,
+              execute: true,
+            },
+          },
+        },
+      },
+      baseErrors: {},
+      paramsErrors: {},
+      touched: true,
+      formData: formDataMock,
+      connectors: [],
+      connectorTypes: [],
+      aadTemplateFields: [],
+    });
+
+    render(<RulePage onCancel={onCancel} onSave={onSave} />);
+
+    fireEvent.click(screen.getByTestId('rulePageFooterCancelButton'));
+    expect(screen.getByTestId('ruleFormCancelModal')).toBeInTheDocument();
+  });
+
+  test('should not display discard changes modal id no changes are made in the form', () => {
+    useRuleFormState.mockReturnValue({
+      plugins: {
+        application: {
+          navigateToUrl,
+          capabilities: {
+            actions: {
+              show: true,
+              save: true,
+              execute: true,
+            },
+          },
+        },
+      },
+      baseErrors: {},
+      paramsErrors: {},
+      touched: false,
+      formData: formDataMock,
+      connectors: [],
+      connectorTypes: [],
+      aadTemplateFields: [],
+    });
+
+    render(<RulePage onCancel={onCancel} onSave={onSave} />);
+
+    fireEvent.click(screen.getByTestId('rulePageFooterCancelButton'));
+    expect(screen.queryByTestId('ruleFormCancelModal')).not.toBeInTheDocument();
+  });
 });
diff --git a/packages/kbn-alerts-ui-shared/src/rule_form/rule_page/rule_page.tsx b/packages/kbn-alerts-ui-shared/src/rule_form/rule_page/rule_page.tsx
index 68ff6d5db6b19..bdb2838bc9963 100644
--- a/packages/kbn-alerts-ui-shared/src/rule_form/rule_page/rule_page.tsx
+++ b/packages/kbn-alerts-ui-shared/src/rule_form/rule_page/rule_page.tsx
@@ -217,6 +217,7 @@ export const RulePage = (props: RulePageProps) => {
         <EuiConfirmModal
           onCancel={() => setIsCancelModalOpen(false)}
           onConfirm={onCancel}
+          data-test-subj="ruleFormCancelModal"
           buttonColor="danger"
           defaultFocusedButton="confirm"
           title={RULE_FORM_CANCEL_MODAL_TITLE}