From ad70c1b9344c525ee39da6cca11fc4a020f6bfab Mon Sep 17 00:00:00 2001
From: Yulia Cech <yulia.cech@elastic.co>
Date: Mon, 8 Feb 2021 14:17:36 +0100
Subject: [PATCH] Added changes for phase blocks

---
 .../edit_policy/edit_policy.helpers.tsx       |   2 +-
 .../edit_policy/edit_policy.test.ts           |   6 +-
 .../__jest__/components/edit_policy.test.tsx  |  28 ++++-
 .../components/phase_footer/phase_footer.scss |   7 --
 .../components/phase_footer/phase_footer.tsx  | 113 ++++++++++--------
 .../components/phase_icon/phase_icon.scss     |   9 +-
 .../components/phase_icon/phase_icon.tsx      |   2 +-
 .../phases/delete_phase/delete_phase.scss     |   3 -
 .../phases/delete_phase/delete_phase.tsx      |   3 +-
 .../components/phases/phase/phase.scss        |  13 +-
 .../components/phases/phase/phase.tsx         |  70 ++++++-----
 .../form/phase_timings_context.tsx            |  22 ++--
 .../sections/edit_policy/form/schema.ts       |   2 +-
 13 files changed, 168 insertions(+), 112 deletions(-)
 delete mode 100644 x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phase_footer/phase_footer.scss

diff --git a/x-pack/plugins/index_lifecycle_management/__jest__/client_integration/edit_policy/edit_policy.helpers.tsx b/x-pack/plugins/index_lifecycle_management/__jest__/client_integration/edit_policy/edit_policy.helpers.tsx
index f498131bbfbd1b..dc375f63700484 100644
--- a/x-pack/plugins/index_lifecycle_management/__jest__/client_integration/edit_policy/edit_policy.helpers.tsx
+++ b/x-pack/plugins/index_lifecycle_management/__jest__/client_integration/edit_policy/edit_policy.helpers.tsx
@@ -251,7 +251,7 @@ export const setup = async (arg?: { appServicesContext: Partial<AppServicesConte
   const createToggleDeletePhaseActions = () => {
     const enablePhase = async () => {
       await act(async () => {
-        find('enableDeletePhaseLink').simulate('click');
+        find('enableDeletePhaseButton').simulate('click');
       });
       component.update();
     };
diff --git a/x-pack/plugins/index_lifecycle_management/__jest__/client_integration/edit_policy/edit_policy.test.ts b/x-pack/plugins/index_lifecycle_management/__jest__/client_integration/edit_policy/edit_policy.test.ts
index be51f6d85cd994..f2266741ec7d1a 100644
--- a/x-pack/plugins/index_lifecycle_management/__jest__/client_integration/edit_policy/edit_policy.test.ts
+++ b/x-pack/plugins/index_lifecycle_management/__jest__/client_integration/edit_policy/edit_policy.test.ts
@@ -89,7 +89,7 @@ describe('<EditPolicy />', () => {
                 unknown_setting: true,
               },
             },
-            min_age: '0ms',
+            min_age: '0d',
           },
         },
       });
@@ -255,7 +255,7 @@ describe('<EditPolicy />', () => {
                 "priority": 50,
               },
             },
-            "min_age": "0ms",
+            "min_age": "0d",
           }
         `);
       });
@@ -310,7 +310,7 @@ describe('<EditPolicy />', () => {
                     "number_of_shards": 123,
                   },
                 },
-                "min_age": "0ms",
+                "min_age": "0d",
               },
             },
           }
diff --git a/x-pack/plugins/index_lifecycle_management/__jest__/components/edit_policy.test.tsx b/x-pack/plugins/index_lifecycle_management/__jest__/components/edit_policy.test.tsx
index 175de461e3fd54..7c199e2ced7651 100644
--- a/x-pack/plugins/index_lifecycle_management/__jest__/components/edit_policy.test.tsx
+++ b/x-pack/plugins/index_lifecycle_management/__jest__/components/edit_policy.test.tsx
@@ -100,7 +100,7 @@ const activatePhase = async (rendered: ReactWrapper, phase: string) => {
   rendered.update();
 };
 const activateDeletePhase = async (rendered: ReactWrapper) => {
-  const testSubject = `enableDeletePhaseLink`;
+  const testSubject = `enableDeletePhaseButton`;
   await act(async () => {
     await findTestSubject(rendered, testSubject).simulate('click');
   });
@@ -461,6 +461,11 @@ describe('edit policy', () => {
       waitForFormLibValidation(rendered);
       expectedErrorMessages(rendered, [i18nTexts.editPolicy.errors.nonNegativeNumberRequired]);
     });
+
+    test("doesn't show min age input", async () => {
+      const rendered = mountWithIntl(component);
+      expect(findTestSubject(rendered, 'hot-selectedMinimumAge').exists()).toBeFalsy();
+    });
   });
   describe('warm phase', () => {
     beforeEach(() => {
@@ -677,6 +682,13 @@ describe('edit policy', () => {
       expect(rendered.find('.euiLoadingSpinner').exists()).toBeFalsy();
       expect(findTestSubject(rendered, 'defaultAllocationNotice').exists()).toBeFalsy();
     });
+
+    test('shows min age input only when enabled', async () => {
+      const rendered = mountWithIntl(component);
+      expect(findTestSubject(rendered, 'warm-selectedMinimumAge').exists()).toBeFalsy();
+      await activatePhase(rendered, 'warm');
+      expect(findTestSubject(rendered, 'warm-selectedMinimumAge').exists()).toBeTruthy();
+    });
   });
   describe('cold phase', () => {
     beforeEach(() => {
@@ -814,6 +826,13 @@ describe('edit policy', () => {
       expect(rendered.find('.euiLoadingSpinner').exists()).toBeFalsy();
       expect(findTestSubject(rendered, 'defaultAllocationNotice').exists()).toBeFalsy();
     });
+
+    test('shows min age input only when enabled', async () => {
+      const rendered = mountWithIntl(component);
+      expect(findTestSubject(rendered, 'cold-selectedMinimumAge').exists()).toBeFalsy();
+      await activatePhase(rendered, 'cold');
+      expect(findTestSubject(rendered, 'cold-selectedMinimumAge').exists()).toBeTruthy();
+    });
   });
   describe('delete phase', () => {
     test('should allow 0 for phase timing', async () => {
@@ -834,6 +853,13 @@ describe('edit policy', () => {
       waitForFormLibValidation(rendered);
       expectedErrorMessages(rendered, [i18nTexts.editPolicy.errors.nonNegativeNumberRequired]);
     });
+
+    test('is hidden when disabled', async () => {
+      const rendered = mountWithIntl(component);
+      expect(findTestSubject(rendered, 'delete-phaseContent').exists()).toBeFalsy();
+      await activateDeletePhase(rendered);
+      expect(findTestSubject(rendered, 'delete-phaseContent').exists()).toBeTruthy();
+    });
   });
   describe('not on cloud', () => {
     beforeEach(() => {
diff --git a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phase_footer/phase_footer.scss b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phase_footer/phase_footer.scss
deleted file mode 100644
index 2701ccfb0ee299..00000000000000
--- a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phase_footer/phase_footer.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-.euiPanel.ilmPhaseFooter {
-  padding-top: $euiSizeS;
-  padding-bottom: $euiSizeS;
-  border: none;
-  border-top-left-radius: 0;
-  border-top-right-radius: 0;
-}
diff --git a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phase_footer/phase_footer.tsx b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phase_footer/phase_footer.tsx
index 880a354b4b0ffe..82f0725bfe7d0f 100644
--- a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phase_footer/phase_footer.tsx
+++ b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phase_footer/phase_footer.tsx
@@ -7,69 +7,88 @@
 
 import React, { FunctionComponent } from 'react';
 
-import { FormattedMessage } from '@kbn/i18n/react';
+import { i18n } from '@kbn/i18n';
 
-import { EuiIcon, EuiText, EuiLink, EuiPanel } from '@elastic/eui';
+import { EuiText, EuiButtonGroup, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 
 import { PhasesExceptDelete } from '../../../../../../common/types';
 
 import { usePhaseTimings } from '../../form';
 
-import { InfinityIcon } from '../infinity_icon';
-import './phase_footer.scss';
+import { InfinityIconSvg } from '../infinity_icon/infinity_icon.svg';
 
 interface Props {
   phase: PhasesExceptDelete;
 }
 
 export const PhaseFooter: FunctionComponent<Props> = ({ phase }) => {
-  const phaseTimings = usePhaseTimings();
-  const phaseConfiguration = phaseTimings[phase];
-  const setValue = phaseTimings.setDeletePhaseEnabled;
+  const {
+    isDeletePhaseEnabled,
+    setDeletePhaseEnabled: setValue,
+    [phase]: phaseConfiguration,
+  } = usePhaseTimings();
 
-  if (phaseConfiguration === 'disabled' || phaseConfiguration === 'enabled') {
-    return (
-      <EuiPanel className={'ilmPhaseFooter'} hasShadow={false}>
-        <EuiText size={'s'}>&nbsp;</EuiText>
-      </EuiPanel>
-    );
+  if (!phaseConfiguration.isFinalDataPhase) {
+    return null;
   }
 
-  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="Set delete age"
-            />
-          </EuiLink>
-        </EuiText>
-      </EuiPanel>
-    );
-  }
+  const phaseDescription = isDeletePhaseEnabled
+    ? i18n.translate('xpack.indexLifecycleMgmt.editPolicy.phaseTiming.beforeDeleteDescription', {
+        defaultMessage: 'Data will be deleted after this phase',
+      })
+    : i18n.translate('xpack.indexLifecycleMgmt.editPolicy.phaseTiming.foreverTimingDescription', {
+        defaultMessage: 'Data will remain in this phase forever',
+      });
+
+  const selectedButton = isDeletePhaseEnabled
+    ? 'ilmEnableDeletePhaseButton'
+    : 'ilmDisableDeletePhaseButton';
+
+  const buttons = [
+    {
+      id: `ilmDisableDeletePhaseButton`,
+      label: i18n.translate(
+        'xpack.indexLifecycleMgmt.editPolicy.deletePhase.disablePhaseButtonLabel',
+        {
+          defaultMessage: 'Keep data in this phase forever',
+        }
+      ),
+      iconType: InfinityIconSvg,
+    },
+    {
+      id: `ilmEnableDeletePhaseButton`,
+      label: i18n.translate(
+        'xpack.indexLifecycleMgmt.editPolicy.deletePhase.enablePhaseButtonLabel',
+        {
+          defaultMessage: 'Delete data after this phase',
+        }
+      ),
+      iconType: 'trash',
+      'data-test-subj': 'enableDeletePhaseButton',
+    },
+  ];
 
   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="Keep data"
-          />
-        </EuiLink>
-      </EuiText>
-    </EuiPanel>
+    <EuiFlexGroup alignItems="center" gutterSize="s" wrap>
+      <EuiFlexItem grow={false}>
+        <EuiText size="s" color="subdued">
+          {phaseDescription}
+        </EuiText>
+      </EuiFlexItem>
+      <EuiFlexItem grow={false}>
+        <EuiButtonGroup
+          legend={i18n.translate(
+            'xpack.indexLifecycleMgmt.editPolicy.deletePhase.buttonGroupLegend',
+            { defaultMessage: 'Enable or disable delete phase' }
+          )}
+          options={buttons}
+          idSelected={selectedButton}
+          onChange={(id) => {
+            setValue(id === 'ilmEnableDeletePhaseButton');
+          }}
+          isIconOnly={true}
+        />
+      </EuiFlexItem>
+    </EuiFlexGroup>
   );
 };
diff --git a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phase_icon/phase_icon.scss b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phase_icon/phase_icon.scss
index 91c6c201585e06..7bbfea669c2af6 100644
--- a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phase_icon/phase_icon.scss
+++ b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phase_icon/phase_icon.scss
@@ -1,11 +1,16 @@
 .ilmPhaseIcon {
-  width: 32px;
-  height: 32px;
+  width: $euiSizeXL;
+  height: $euiSizeXL;
   display: flex;
   justify-content: center;
   align-items: center;
   border-radius: 50%;
   background-color: $euiColorLightestShade;
+  &--disabled {
+    margin-top: calc(#{$euiSizeS} - 2px);
+    width: $euiSize;
+    height: $euiSize;
+  }
   &--delete {
     background-color: $euiColorLightShade;
   }
diff --git a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phase_icon/phase_icon.tsx b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phase_icon/phase_icon.tsx
index 9d613bfe26de2c..8c0a0bcca1d76b 100644
--- a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phase_icon/phase_icon.tsx
+++ b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phase_icon/phase_icon.tsx
@@ -25,7 +25,7 @@ export const PhaseIcon: FunctionComponent<Props> = ({ enabled, phase }) => {
           size={phase === 'delete' ? 'm' : 'l'}
         />
       ) : (
-        <EuiIcon className="ilmPhaseIcon__inner--disabled" type={'dot'} size={'l'} />
+        <EuiIcon className="ilmPhaseIcon__inner--disabled" type={'dot'} size={'s'} />
       )}
     </div>
   );
diff --git a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/delete_phase/delete_phase.scss b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/delete_phase/delete_phase.scss
index aa92ce5dd839b4..8bdb687df2d8f8 100644
--- a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/delete_phase/delete_phase.scss
+++ b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/delete_phase/delete_phase.scss
@@ -3,13 +3,10 @@
     &__header {
       padding: $euiSize;
       background-color: $euiColorEmptyShade;
-
     }
     &__body {
       padding: $euiSize;
       background-color: $euiColorLightestShade;
-
     }
-
   }
 }
diff --git a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/delete_phase/delete_phase.tsx b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/delete_phase/delete_phase.tsx
index d6d761c8877f26..c65699ca126907 100644
--- a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/delete_phase/delete_phase.tsx
+++ b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/delete_phase/delete_phase.tsx
@@ -73,9 +73,10 @@ export const DeletePhase: FunctionComponent = () => {
 
   return (
     <EuiComment
+      data-test-subj="delete-phaseContent"
       username={phaseTitle}
       actions={<MinAgeField phase={'delete'} />}
-      className="ilmDeletePhase"
+      className="ilmDeletePhase ilmPhase"
       timelineIcon={<PhaseIcon enabled={enabled} phase={'delete'} />}
     >
       <EuiText color="subdued" size={'s'} style={{ maxWidth: '50%' }}>
diff --git a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/phase/phase.scss b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/phase/phase.scss
index 033dd145f539c8..ba23300eab4354 100644
--- a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/phase/phase.scss
+++ b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/phase/phase.scss
@@ -5,14 +5,17 @@
       background-color: $euiColorEmptyShade;
     }
     &__body {
-      padding: 0;
+      padding: $euiSize;
     }
-
-  }
-  &__inner {
-    padding: $euiSize;
   }
   .ilmSettingsButton {
     color: $euiColorPrimary;
+    padding: $euiSizeS;
+  }
+  .euiCommentTimeline {
+    padding-top: $euiSize;
+    &::before {
+      height: calc(100% + #{$euiSizeXXL});
+    }
   }
 }
diff --git a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/phase/phase.tsx b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/phase/phase.tsx
index 3f74536f0ae105..e130b74a765659 100644
--- a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/phase/phase.tsx
+++ b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/phase/phase.tsx
@@ -15,12 +15,15 @@ import {
   EuiComment,
   EuiAccordion,
   EuiSpacer,
+  EuiBadge,
 } from '@elastic/eui';
 import { get } from 'lodash';
 import { FormattedMessage } from '@kbn/i18n/react';
 
+import { PhasesExceptDelete } from '../../../../../../../common/types';
 import { ToggleField, useFormData } from '../../../../../../shared_imports';
 import { i18nTexts } from '../../../i18n_texts';
+
 import { FormInternal } from '../../../types';
 
 import { UseField } from '../../../form';
@@ -28,13 +31,12 @@ import { UseField } from '../../../form';
 import { PhaseErrorIndicator } from './phase_error_indicator';
 
 import { MinAgeField } from '../shared_fields';
-
 import { PhaseIcon } from '../../phase_icon';
 import { PhaseFooter } from '../../phase_footer';
 import './phase.scss';
 
 interface Props {
-  phase: 'hot' | 'warm' | 'cold';
+  phase: PhasesExceptDelete;
 }
 
 export const Phase: FunctionComponent<Props> = ({ children, phase }) => {
@@ -43,12 +45,13 @@ export const Phase: FunctionComponent<Props> = ({ children, phase }) => {
     watch: [enabledPath],
   });
 
+  const isHotPhase = phase === 'hot';
   // hot phase is always enabled
-  const enabled = get(formData, enabledPath) || phase === 'hot';
+  const enabled = get(formData, enabledPath) || isHotPhase;
 
   const phaseTitle = (
     <EuiFlexGroup alignItems="center" gutterSize={'s'} wrap>
-      {phase !== 'hot' && (
+      {!isHotPhase && (
         <EuiFlexItem grow={false}>
           <UseField
             path={enabledPath}
@@ -67,13 +70,24 @@ export const Phase: FunctionComponent<Props> = ({ children, phase }) => {
           <h2>{i18nTexts.editPolicy.titles[phase]}</h2>
         </EuiTitle>
       </EuiFlexItem>
+      {isHotPhase && (
+        <EuiFlexItem grow={false}>
+          <EuiBadge>
+            <FormattedMessage
+              id="xpack.indexLifecycleMgmt.editPolicy.phaseTitle.requiredBadge"
+              defaultMessage="Required"
+            />
+          </EuiBadge>
+        </EuiFlexItem>
+      )}
       <EuiFlexItem grow={false}>
         <PhaseErrorIndicator phase={phase} />
       </EuiFlexItem>
     </EuiFlexGroup>
   );
 
-  const minAge = phase !== 'hot' ? <MinAgeField phase={phase} /> : null;
+  // @ts-ignore
+  const minAge = !isHotPhase && enabled ? <MinAgeField phase={phase} /> : null;
 
   return (
     <EuiComment
@@ -82,31 +96,29 @@ export const Phase: FunctionComponent<Props> = ({ children, phase }) => {
       timelineIcon={<PhaseIcon enabled={enabled} phase={phase} />}
       className={'ilmPhase'}
     >
-      <div className="ilmPhase__inner">
-        <EuiText color="subdued" size={'s'} style={{ maxWidth: '50%' }}>
-          {i18nTexts.editPolicy.descriptions[phase]}
-        </EuiText>
+      <EuiText color="subdued" size={'s'} style={{ maxWidth: '50%' }}>
+        {i18nTexts.editPolicy.descriptions[phase]}
+      </EuiText>
 
-        {enabled && (
-          <>
-            <EuiSpacer size="m" />
-            <EuiAccordion
-              id={`${phase}-settingsSwitch`}
-              buttonContent={
-                <FormattedMessage
-                  id="xpack.indexLifecycleMgmt.editPolicy.phaseSettings.buttonLabel"
-                  defaultMessage="Advanced settings"
-                />
-              }
-              buttonClassName="ilmSettingsButton"
-            >
-              <EuiSpacer />
-              {children}
-            </EuiAccordion>
-          </>
-        )}
-      </div>
-      <PhaseFooter phase={phase} />
+      {enabled && (
+        <>
+          <EuiSpacer size="m" />
+          <EuiAccordion
+            id={`${phase}-settingsSwitch`}
+            buttonContent={
+              <FormattedMessage
+                id="xpack.indexLifecycleMgmt.editPolicy.phaseSettings.buttonLabel"
+                defaultMessage="Advanced settings"
+              />
+            }
+            buttonClassName="ilmSettingsButton"
+            extraAction={<PhaseFooter phase={phase} />}
+          >
+            <EuiSpacer />
+            {children}
+          </EuiAccordion>
+        </>
+      )}
     </EuiComment>
   );
 };
diff --git a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/form/phase_timings_context.tsx b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/form/phase_timings_context.tsx
index 796cab1b4046ad..92cc8eeead91af 100644
--- a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/form/phase_timings_context.tsx
+++ b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/form/phase_timings_context.tsx
@@ -10,7 +10,12 @@ import { useFormData } from '../../../../shared_imports';
 import { FormInternal } from '../types';
 import { UseField } from './index';
 
-export type PhaseTimingConfiguration = 'forever' | 'last' | 'disabled' | 'enabled';
+export interface PhaseTimingConfiguration {
+  /**
+   * Whether this is the final, non-delete, phase.
+   */
+  isFinalDataPhase: boolean;
+}
 
 const getPhaseTimingConfiguration = (
   formData: FormInternal
@@ -21,23 +26,17 @@ const getPhaseTimingConfiguration = (
 } => {
   const isWarmPhaseEnabled = formData?._meta?.warm?.enabled;
   const isColdPhaseEnabled = formData?._meta?.cold?.enabled;
-  if (formData?._meta?.delete?.enabled) {
-    return {
-      hot: !isWarmPhaseEnabled && !isColdPhaseEnabled ? 'last' : 'enabled',
-      warm: isWarmPhaseEnabled ? (isColdPhaseEnabled ? 'enabled' : 'last') : 'disabled',
-      cold: isColdPhaseEnabled ? 'last' : 'disabled',
-    };
-  }
   return {
-    hot: !isWarmPhaseEnabled && !isColdPhaseEnabled ? 'forever' : 'enabled',
-    warm: isWarmPhaseEnabled ? (isColdPhaseEnabled ? 'enabled' : 'forever') : 'disabled',
-    cold: isColdPhaseEnabled ? 'forever' : 'disabled',
+    hot: { isFinalDataPhase: !isWarmPhaseEnabled && !isColdPhaseEnabled },
+    warm: { isFinalDataPhase: isWarmPhaseEnabled && !isColdPhaseEnabled },
+    cold: { isFinalDataPhase: isColdPhaseEnabled },
   };
 };
 export interface PhaseTimings {
   hot: PhaseTimingConfiguration;
   warm: PhaseTimingConfiguration;
   cold: PhaseTimingConfiguration;
+  isDeletePhaseEnabled: boolean;
   setDeletePhaseEnabled: (enabled: boolean) => void;
 }
 
@@ -55,6 +54,7 @@ export const PhaseTimingsProvider: FunctionComponent = ({ children }) => {
           <PhaseTimingsContext.Provider
             value={{
               ...getPhaseTimingConfiguration(formData),
+              isDeletePhaseEnabled: formData?._meta?.delete?.enabled,
               setDeletePhaseEnabled: field.setValue,
             }}
           >
diff --git a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/form/schema.ts b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/form/schema.ts
index 89d7368cc1b9c4..600a660657863c 100644
--- a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/form/schema.ts
+++ b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/form/schema.ts
@@ -70,7 +70,7 @@ export const schema: FormSchema<FormInternal> = {
         ),
       },
       minAgeUnit: {
-        defaultValue: 'ms',
+        defaultValue: 'd',
       },
       bestCompression: {
         label: i18nTexts.editPolicy.bestCompressionFieldLabel,