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}