Phases redesign

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

@@ -248,6 +248,27 @@ export const setup = async (arg?: { appServicesContext: Partial<AppServicesConte
     };
   };
 
+  const createToggleDeletePhaseActions = () => {
+    const enablePhase = async () => {
+      await act(async () => {
+        find('enableDeletePhaseLink').simulate('click');
+      });
+      component.update();
+    };
+
+    const disablePhase = async () => {
+      await act(async () => {
+        find('disableDeletePhaseButton').simulate('click');
+      });
+      component.update();
+    };
+
+    return {
+      enablePhase,
+      disablePhase,
+    };
+  };
+
   return {
     ...testBed,
     actions: {
@@ -303,7 +324,7 @@ export const setup = async (arg?: { appServicesContext: Partial<AppServicesConte
         ...createSearchableSnapshotActions('cold'),
       },
       delete: {
-        enable: enable('delete'),
+        ...createToggleDeletePhaseActions(),
         setMinAgeValue: setMinAgeValue('delete'),
         setMinAgeUnits: setMinAgeUnits('delete'),
       },

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

@@ -61,7 +61,7 @@ describe('<EditPolicy />', () => {
       // Set max docs to test whether we keep the unknown fields in that object after serializing
       await actions.hot.setMaxDocs('1000');
       // Remove the delete phase to ensure that we also correctly remove data
-      await actions.delete.enable(false);
+      await actions.delete.disablePhase();
       await actions.savePolicy();
 
       const latestRequest = server.requests[server.requests.length - 1];
@@ -839,7 +839,7 @@ describe('<EditPolicy />', () => {
       expect(actions.timeline.hasColdPhase()).toBe(true);
       expect(actions.timeline.hasDeletePhase()).toBe(false);
 
-      await actions.delete.enable(true);
+      await actions.delete.enablePhase();
       expect(actions.timeline.hasHotPhase()).toBe(true);
       expect(actions.timeline.hasWarmPhase()).toBe(true);
       expect(actions.timeline.hasColdPhase()).toBe(true);

x-pack/plugins/index_lifecycle_management/__jest__/components/edit_policy.test.tsx

@@ -99,6 +99,13 @@ const activatePhase = async (rendered: ReactWrapper, phase: string) => {
   });
   rendered.update();
 };
+const activateDeletePhase = async (rendered: ReactWrapper) => {
+  const testSubject = `enableDeletePhaseLink`;
+  await act(async () => {
+    await findTestSubject(rendered, testSubject).simulate('click');
+  });
+  rendered.update();
+};
 const openNodeAttributesSection = async (rendered: ReactWrapper, phase: string) => {
   const getControls = () => findTestSubject(rendered, `${phase}-dataTierAllocationControls`);
   await act(async () => {
@@ -813,7 +820,7 @@ describe('edit policy', () => {
       const rendered = mountWithIntl(component);
       await noRollover(rendered);
       await setPolicyName(rendered, 'mypolicy');
-      await activatePhase(rendered, 'delete');
+      await activateDeletePhase(rendered);
       await setPhaseAfter(rendered, 'delete', '0');
       waitForFormLibValidation(rendered);
       expectedErrorMessages(rendered, []);
@@ -822,7 +829,7 @@ describe('edit policy', () => {
       const rendered = mountWithIntl(component);
       await noRollover(rendered);
       await setPolicyName(rendered, 'mypolicy');
-      await activatePhase(rendered, 'delete');
+      await activateDeletePhase(rendered);
       await setPhaseAfter(rendered, 'delete', '-1');
       waitForFormLibValidation(rendered);
       expectedErrorMessages(rendered, [i18nTexts.editPolicy.errors.nonNegativeNumberRequired]);

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

@@ -5,14 +5,12 @@
  * 2.0.
  */
 
-export { ActiveBadge } from './active_badge';
 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 { PhaseFooter } from './phase_footer';
 export * from './phases';

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

@@ -5,4 +5,4 @@
  * 2.0.
  */
 
-export { ActiveHighlight } from './active_highlight';
+export { InfinityIcon } from './infinity_icon';

x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/active_highlight/active_highlight.tsx → x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/infinity_icon/infinity_icon.tsx

@@ -6,13 +6,9 @@
  */
 
 import React, { FunctionComponent } from 'react';
+import { EuiIcon, EuiIconProps } from '@elastic/eui';
+import { InfinityIconSvg } from './infinity_icon.svg';
 
-import './active_highlight.scss';
-
-interface Props {
-  phase: 'hot' | 'warm' | 'cold';
-  enabled: boolean;
-}
-export const ActiveHighlight: FunctionComponent<Props> = ({ phase, enabled }) => {
-  return <div className={`ilmActivePhaseHighlight ${phase}Phase ${enabled ? 'active' : ''} `} />;
-};
+export const InfinityIcon: FunctionComponent<Omit<EuiIconProps, 'type'>> = (props) => (
+  <EuiIcon type={InfinityIconSvg} {...props} />
+);

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

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

x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phase_footer/phase_footer.scss

@@ -0,0 +1,7 @@
+.euiPanel.ilmPhaseFooter {
+  padding-top: $euiSizeS;
+  padding-bottom: $euiSizeS;
+  border: none;
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}

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

@@ -0,0 +1,74 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React, { FunctionComponent } from 'react';
+
+import { FormattedMessage } from '@kbn/i18n/react';
+
+import { EuiIcon, EuiText, EuiLink, EuiPanel } from '@elastic/eui';
+
+import { usePhaseTimings } from '../../form';
+
+import { InfinityIcon } from '../infinity_icon';
+
+import './phase_footer.scss';
+
+interface Props {
+  phase: 'hot' | 'warm' | 'cold';
+}
+
+export const PhaseFooter: FunctionComponent<Props> = ({ phase }) => {
+  const phaseTimings = usePhaseTimings();
+  const phaseConfiguration = phaseTimings[phase];
+  const setValue = phaseTimings.setDeletePhaseEnabled;
+
+  if (phaseConfiguration === 'disabled' || phaseConfiguration === 'enabled') {
+    return (
+      <EuiPanel className={'ilmPhaseFooter'} hasShadow={false}>
+        <EuiText size={'s'}>&nbsp;</EuiText>
+      </EuiPanel>
+    );
+  }
+
+  if (phaseConfiguration === 'forever') {
+    return (
+      <EuiPanel color={'subdued'} className={'ilmPhaseFooter'} hasShadow={false}>
+        <InfinityIcon size={'s'} />{' '}
+        <EuiText size={'s'} grow={false} className={'eui-displayInlineBlock'}>
+          <FormattedMessage
+            id="xpack.indexLifecycleMgmt.editPolicy.phaseTiming.foreverTimingDescription"
+            defaultMessage="Data will remain in this phase forever."
+          />{' '}
+          <EuiLink onClick={() => setValue(true)} data-test-subj={'enableDeletePhaseLink'}>
+            <FormattedMessage
+              id="xpack.indexLifecycleMgmt.editPolicy.deletePhase.enablePhaseButtonLabel"
+              defaultMessage="Enable data deletion"
+            />
+          </EuiLink>
+        </EuiText>
+      </EuiPanel>
+    );
+  }
+
+  return (
+    <EuiPanel color={'subdued'} className={'ilmPhaseFooter'} hasShadow={false}>
+      <EuiIcon type={'storage'} size={'s'} />{' '}
+      <EuiText size={'s'} grow={false} className={'eui-displayInlineBlock'}>
+        <FormattedMessage
+          id="xpack.indexLifecycleMgmt.editPolicy.phaseTiming.beforeDeleteDescription"
+          defaultMessage="Data will be deleted after this phase."
+        />{' '}
+        <EuiLink onClick={() => setValue(false)} data-test-subj={'disableDeletePhaseLink'}>
+          <FormattedMessage
+            id="xpack.indexLifecycleMgmt.editPolicy.deletePhase.disablePhaseButtonLabel"
+            defaultMessage="Disable data deletion"
+          />
+        </EuiLink>
+      </EuiText>
+    </EuiPanel>
+  );
+};

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

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

x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phase_icon/phase_icon.scss

@@ -0,0 +1,28 @@
+.ilmPhaseIcon {
+  width: 32px;
+  height: 32px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 50%;
+  background-color: $euiColorLightestShade;
+  &--delete {
+    background-color: $euiColorLightShade;
+  }
+  &__inner--hot {
+    fill: $euiColorVis9_behindText;
+  }
+  &__inner--warm {
+    fill: $euiColorVis5_behindText;
+  }
+  &__inner--cold {
+    fill: $euiColorVis1_behindText;
+  }
+  &__inner--delete {
+    fill: $euiColorDarkShade;
+  }
+
+  &__inner--disabled {
+    fill: $euiColorMediumShade;
+  }
+}

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

@@ -0,0 +1,32 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React, { FunctionComponent } from 'react';
+import { EuiIcon } from '@elastic/eui';
+import { Phases } from '../../../../../../common/types';
+import './phase_icon.scss';
+interface Props {
+  enabled: boolean;
+  phase: string & keyof Phases;
+}
+export const PhaseIcon: FunctionComponent<Props> = ({ enabled, phase }) => {
+  return (
+    <div
+      className={`ilmPhaseIcon ilmPhaseIcon--${phase} ${enabled ? '' : 'ilmPhaseIcon--disabled'}`}
+    >
+      {enabled ? (
+        <EuiIcon
+          className={`ilmPhaseIcon__inner--${phase}`}
+          type={phase === 'delete' ? 'trash' : 'checkInCircleFilled'}
+          size={phase === 'delete' ? 'm' : 'l'}
+        />
+      ) : (
+        <EuiIcon className="ilmPhaseIcon__inner--disabled" type={'dot'} size={'l'} />
+      )}
+    </div>
+  );
+};

x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/delete_phase/delete_phase.scss

@@ -0,0 +1,15 @@
+.ilmDeletePhase {
+  .euiCommentEvent {
+    &__header {
+      padding: $euiSize;
+      background-color: $euiColorEmptyShade;
+
+    }
+    &__body {
+      padding: $euiSize;
+      background-color: $euiColorLightestShade;
+
+    }
+
+  }
+}