[ILM] Surfacing policy error state

x-pack/plugins/index_lifecycle_management/__jest__/client_integration/edit_policy/edit_policy.helpers.tsx

@@ -197,7 +197,9 @@ export const setup = async (arg?: { appServicesContext: Partial<AppServicesConte
     createFormSetValueAction(`${phase}-selectedNodeAttrs`);
 
   const setReplicas = (phase: Phases) => async (value: string) => {
-    await createFormToggleAction(`${phase}-setReplicasSwitch`)(true);
+    if (!exists(`${phase}-selectedReplicaCount`)) {
+      await createFormToggleAction(`${phase}-setReplicasSwitch`)(true);
+    }
     await createFormSetValueAction(`${phase}-selectedReplicaCount`)(value);
   };
 
@@ -248,8 +250,11 @@ export const setup = async (arg?: { appServicesContext: Partial<AppServicesConte
   return {
     ...testBed,
     actions: {
+      saveAsNewPolicy: createFormToggleAction('saveAsNewSwitch'),
+      setPolicyName: createFormSetValueAction('policyNameField'),
       setWaitForSnapshotPolicy,
       savePolicy,
+      hasGlobalErrorCallout: () => exists('policyFormErrorsCallout'),
       timeline: {
         hasHotPhase: () => exists('ilmTimelineHotPhase'),
         hasWarmPhase: () => exists('ilmTimelineWarmPhase'),
@@ -262,6 +267,7 @@ export const setup = async (arg?: { appServicesContext: Partial<AppServicesConte
         setMaxAge,
         toggleRollover,
         toggleDefaultRollover,
+        hasErrorIndicator: () => exists('phaseErrorIndicator-hot'),
         ...createForceMergeActions('hot'),
         ...createIndexPriorityActions('hot'),
         ...createShrinkActions('hot'),
@@ -275,6 +281,7 @@ export const setup = async (arg?: { appServicesContext: Partial<AppServicesConte
         setDataAllocation: setDataAllocation('warm'),
         setSelectedNodeAttribute: setSelectedNodeAttribute('warm'),
         setReplicas: setReplicas('warm'),
+        hasErrorIndicator: () => exists('phaseErrorIndicator-warm'),
         ...createShrinkActions('warm'),
         ...createForceMergeActions('warm'),
         setReadonly: setReadonly('warm'),
@@ -289,6 +296,7 @@ export const setup = async (arg?: { appServicesContext: Partial<AppServicesConte
         setReplicas: setReplicas('cold'),
         setFreeze,
         freezeExists,
+        hasErrorIndicator: () => exists('phaseErrorIndicator-cold'),
         ...createIndexPriorityActions('cold'),
         ...createSearchableSnapshotActions('cold'),
       },

x-pack/plugins/index_lifecycle_management/__jest__/client_integration/edit_policy/edit_policy.test.ts

@@ -29,6 +29,7 @@ window.scrollTo = jest.fn();
 describe('<EditPolicy />', () => {
   let testBed: EditPolicyTestBed;
   const { server, httpRequestsMockHelpers } = setupEnvironment();
+
   afterAll(() => {
     server.restore();
   });
@@ -844,4 +845,132 @@ describe('<EditPolicy />', () => {
       expect(actions.timeline.hasDeletePhase()).toBe(true);
     });
   });
+
+  describe('policy error notifications', () => {
+    beforeAll(() => {
+      jest.useFakeTimers();
+    });
+
+    afterAll(() => {
+      jest.useRealTimers();
+    });
+    beforeEach(async () => {
+      httpRequestsMockHelpers.setLoadPolicies([getDefaultHotPhasePolicy('my_policy')]);
+      httpRequestsMockHelpers.setListNodes({
+        nodesByRoles: {},
+        nodesByAttributes: { test: ['123'] },
+        isUsingDeprecatedDataRoleConfig: false,
+      });
+      httpRequestsMockHelpers.setLoadSnapshotPolicies([]);
+
+      await act(async () => {
+        testBed = await setup();
+      });
+
+      const { component } = testBed;
+      component.update();
+    });
+
+    // For new we rely on a setTimeout to ensure that error messages have time to populate
+    // the form object before we look at the form object. See:
+    // x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/form/form_errors_context.tsx
+    // for where this logic lives.
+    const runTimers = async () => {
+      const { component } = testBed;
+      await act(async () => {
+        jest.runAllTimers();
+      });
+      component.update();
+    };
+
+    test('shows phase error indicators correctly', async () => {
+      // This test simulates a user configuring a policy phase by phase. The flow is the following:
+      // 0. Start with policy with no validation issues present
+      // 1. Configure hot, introducing a validation error
+      // 2. Configure warm, introducing a validation error
+      // 3. Configure cold, introducing a validation error
+      // 4. Fix validation error in hot
+      // 5. Fix validation error in warm
+      // 6. Fix validation error in cold
+      // We assert against each of these progressive states.
+
+      const { actions } = testBed;
+
+      // 0. No validation issues
+      expect(actions.hasGlobalErrorCallout()).toBe(false);
+      expect(actions.hot.hasErrorIndicator()).toBe(false);
+      expect(actions.warm.hasErrorIndicator()).toBe(false);
+      expect(actions.cold.hasErrorIndicator()).toBe(false);
+
+      // 1. Hot phase validation issue
+      await actions.hot.toggleForceMerge(true);
+      await actions.hot.setForcemergeSegmentsCount('-22');
+      await runTimers();
+      expect(actions.hasGlobalErrorCallout()).toBe(true);
+      expect(actions.hot.hasErrorIndicator()).toBe(true);
+      expect(actions.warm.hasErrorIndicator()).toBe(false);
+      expect(actions.cold.hasErrorIndicator()).toBe(false);
+
+      // 2. Warm phase validation issue
+      await actions.warm.enable(true);
+      await actions.warm.toggleForceMerge(true);
+      await actions.warm.setForcemergeSegmentsCount('-22');
+      await runTimers();
+      expect(actions.hasGlobalErrorCallout()).toBe(true);
+      expect(actions.hot.hasErrorIndicator()).toBe(true);
+      expect(actions.warm.hasErrorIndicator()).toBe(true);
+      expect(actions.cold.hasErrorIndicator()).toBe(false);
+
+      // 3. Cold phase validation issue
+      await actions.cold.enable(true);
+      await actions.cold.setReplicas('-33');
+      await runTimers();
+      expect(actions.hasGlobalErrorCallout()).toBe(true);
+      expect(actions.hot.hasErrorIndicator()).toBe(true);
+      expect(actions.warm.hasErrorIndicator()).toBe(true);
+      expect(actions.cold.hasErrorIndicator()).toBe(true);
+
+      // 4. Fix validation issue in hot
+      await actions.hot.setForcemergeSegmentsCount('1');
+      await runTimers();
+      expect(actions.hasGlobalErrorCallout()).toBe(true);
+      expect(actions.hot.hasErrorIndicator()).toBe(false);
+      expect(actions.warm.hasErrorIndicator()).toBe(true);
+      expect(actions.cold.hasErrorIndicator()).toBe(true);
+
+      // 5. Fix validation issue in warm
+      await actions.warm.setForcemergeSegmentsCount('1');
+      await runTimers();
+      expect(actions.hasGlobalErrorCallout()).toBe(true);
+      expect(actions.hot.hasErrorIndicator()).toBe(false);
+      expect(actions.warm.hasErrorIndicator()).toBe(false);
+      expect(actions.cold.hasErrorIndicator()).toBe(true);
+
+      // 6. Fix validation issue in cold
+      await actions.cold.setReplicas('1');
+      await runTimers();
+      expect(actions.hasGlobalErrorCallout()).toBe(false);
+      expect(actions.hot.hasErrorIndicator()).toBe(false);
+      expect(actions.warm.hasErrorIndicator()).toBe(false);
+      expect(actions.cold.hasErrorIndicator()).toBe(false);
+    });
+
+    test('global error callout should show if there are any form errors', async () => {
+      const { actions } = testBed;
+
+      expect(actions.hasGlobalErrorCallout()).toBe(false);
+      expect(actions.hot.hasErrorIndicator()).toBe(false);
+      expect(actions.warm.hasErrorIndicator()).toBe(false);
+      expect(actions.cold.hasErrorIndicator()).toBe(false);
+
+      await actions.saveAsNewPolicy(true);
+      await actions.setPolicyName('');
+      await runTimers();
+
+      expect(actions.hasGlobalErrorCallout()).toBe(true);
+      expect(actions.hot.hasErrorIndicator()).toBe(false);
+      expect(actions.warm.hasErrorIndicator()).toBe(false);
+      expect(actions.cold.hasErrorIndicator()).toBe(false);
+    });
+  });
 });

x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/form_errors_callout.tsx

@@ -0,0 +1,43 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React, { FunctionComponent } from 'react';
+import { i18n } from '@kbn/i18n';
+import { EuiCallOut, EuiSpacer } from '@elastic/eui';
+
+import { useFormErrorsContext } from '../form';
+
+const i18nTexts = {
+  callout: {
+    title: i18n.translate('xpack.indexLifecycleMgmt.policyErrorCalloutTitle', {
+      defaultMessage: 'This policy contains errors',
+    }),
+    body: i18n.translate('xpack.indexLifecycleMgmt.policyErrorCalloutDescription', {
+      defaultMessage: 'Please fix all errors before saving the policy.',
+    }),
+  },
+};
+
+export const FormErrorsCallout: FunctionComponent = () => {
+  const { hasErrors } = useFormErrorsContext();
+
+  if (!hasErrors) {
+    return null;
+  }
+
+  return (
+    <>
+      <EuiCallOut
+        data-test-subj="policyFormErrorsCallout"
+        color="danger"
+        title={i18nTexts.callout.title}
+      >
+        {i18nTexts.callout.body}
+      </EuiCallOut>
+      <EuiSpacer />
+    </>
+  );
+};

x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/index.ts

@@ -5,13 +5,13 @@
  */
 
 export { ActiveBadge } from './active_badge';
-export { ErrableFormRow } from './form_errors';
 export { LearnMoreLink } from './learn_more_link';
 export { OptionalLabel } from './optional_label';
 export { PolicyJsonFlyout } from './policy_json_flyout';
 export { DescribedFormRow, ToggleFieldWithDescribedFormRow } from './described_form_row';
 export { FieldLoadingError } from './field_loading_error';
 export { ActiveHighlight } from './active_highlight';
 export { Timeline } from './timeline';
+export { FormErrorsCallout } from './form_errors_callout';
 
 export * from './phases';

x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/cold_phase/cold_phase.tsx

@@ -23,6 +23,7 @@ import {
   IndexPriorityField,
   ReplicasField,
 } from '../shared_fields';
+
 import { Phase } from '../phase';
 
 const i18nTexts = {

x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/hot_phase/hot_phase.tsx

@@ -37,8 +37,8 @@ import {
   ReadonlyField,
   ShrinkField,
 } from '../shared_fields';
-
 import { Phase } from '../phase';
+
 import { maxSizeStoredUnits, maxAgeUnits } from './constants';
 
 export const HotPhase: FunctionComponent = () => {

x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/phase/index.ts

@@ -0,0 +1,7 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+export { Phase } from './phase';

x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/phase.tsx → x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/phase/phase.tsx

@@ -18,11 +18,13 @@ import {
 import { get } from 'lodash';
 import { FormattedMessage } from '@kbn/i18n/react';
 
-import { ToggleField, UseField, useFormData } from '../../../../../shared_imports';
-import { i18nTexts } from '../../i18n_texts';
+import { ToggleField, UseField, useFormData } from '../../../../../../shared_imports';
+import { i18nTexts } from '../../../i18n_texts';
 
-import { ActiveHighlight } from '../active_highlight';
-import { MinAgeField } from './shared_fields';
+import { ActiveHighlight } from '../../active_highlight';
+import { MinAgeField } from '../shared_fields';
+
+import { PhaseErrorIndicator } from './phase_error_indicator';
 
 interface Props {
   phase: 'hot' | 'warm' | 'cold';
@@ -63,9 +65,16 @@ export const Phase: FunctionComponent<Props> = ({ children, phase }) => {
                   </EuiFlexItem>
                 )}
                 <EuiFlexItem grow={false}>
-                  <EuiTitle size={'s'}>
-                    <h2>{i18nTexts.editPolicy.titles[phase]}</h2>
-                  </EuiTitle>
+                  <EuiFlexGroup alignItems="center" gutterSize="s" responsive={false}>
+                    <EuiFlexItem>
+                      <EuiTitle size="s">
+                        <h2>{i18nTexts.editPolicy.titles[phase]}</h2>
+                      </EuiTitle>
+                    </EuiFlexItem>
+                    <EuiFlexItem grow={false}>
+                      <PhaseErrorIndicator phase={phase} />
+                    </EuiFlexItem>
+                  </EuiFlexGroup>
                 </EuiFlexItem>
               </EuiFlexGroup>
             </EuiFlexItem>
@@ -74,7 +83,7 @@ export const Phase: FunctionComponent<Props> = ({ children, phase }) => {
                 <EuiFlexGroup
                   justifyContent="spaceBetween"
                   alignItems="center"
-                  gutterSize={'xs'}
+                  gutterSize="xs"
                   wrap
                 >
                   <EuiFlexItem grow={true}>
@@ -102,7 +111,7 @@ export const Phase: FunctionComponent<Props> = ({ children, phase }) => {
             )}
           </EuiFlexGroup>
           <EuiSpacer />
-          <EuiText color="subdued" size={'s'} style={{ maxWidth: '50%' }}>
+          <EuiText color="subdued" size="s" style={{ maxWidth: '50%' }}>
             {i18nTexts.editPolicy.descriptions[phase]}
           </EuiText>