[ResponseOps][Rules]Discard unsaved changes warning gets triggered un…

…necessarily when user clicks on cancel or x without making any changes (#200559)

Closes #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

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,
     };
   };
 

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();
+  });
 });

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}