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();
+
+ 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();
+
+ 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) => {
setIsCancelModalOpen(false)}
onConfirm={onCancel}
+ data-test-subj="ruleFormCancelModal"
buttonColor="danger"
defaultFocusedButton="confirm"
title={RULE_FORM_CANCEL_MODAL_TITLE}