[ILM] Refactor edit policy form to use EuiTimeline

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

@@ -7,9 +7,9 @@
   border-radius: 50%;
   background-color: $euiColorLightestShade;
   &--disabled {
-    margin-top: $euiSizeS;
     width: $euiSize;
     height: $euiSize;
+    margin: $euiSizeS 0;
   }
   &--delete {
     background-color: $euiColorLightShade;

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

@@ -14,7 +14,9 @@ import {
   EuiButtonEmpty,
   EuiSpacer,
   EuiText,
-  EuiComment,
+  EuiTimelineItem,
+  EuiHorizontalRule,
+  EuiSplitPanel,
 } from '@elastic/eui';
 
 import { FormattedMessage } from '@kbn/i18n-react';
@@ -26,8 +28,6 @@ import { PhaseIcon } from '../../phase_icon';
 import { MinAgeField, SnapshotPoliciesField } from '../shared_fields';
 import { PhaseErrorIndicator } from '../phase/phase_error_indicator';
 
-import './delete_phase.scss';
-
 const formFieldPaths = {
   enabled: globalFields.deleteEnabled.path,
 };
@@ -44,14 +44,14 @@ export const DeletePhase: FunctionComponent = () => {
     return null;
   }
   const phaseTitle = (
-    <EuiFlexGroup alignItems="center" gutterSize={'s'} wrap>
+    <EuiFlexGroup alignItems="center" gutterSize="s">
       <EuiFlexItem grow={false}>
         <EuiTitle size={'s'}>
           <h2>{i18nTexts.editPolicy.titles.delete}</h2>
         </EuiTitle>
       </EuiFlexItem>
 
-      <EuiFlexItem>
+      <EuiFlexItem grow={false}>
         <EuiButtonEmpty
           onClick={() => setDeletePhaseEnabled(false)}
           data-test-subj={'disableDeletePhaseButton'}
@@ -66,25 +66,31 @@ export const DeletePhase: FunctionComponent = () => {
       <EuiFlexItem grow={false}>
         <PhaseErrorIndicator phase={'delete'} />
       </EuiFlexItem>
+      <EuiFlexItem grow={true}>
+        <MinAgeField phase={'delete'} />
+      </EuiFlexItem>
     </EuiFlexGroup>
   );
 
   return (
-    <>
-      <EuiSpacer />
-      <EuiComment
-        data-test-subj="delete-phase"
-        username={phaseTitle}
-        actions={<MinAgeField phase={'delete'} />}
-        className="ilmDeletePhase ilmPhase"
-        timelineIcon={<PhaseIcon enabled={enabled} phase={'delete'} />}
-      >
-        <EuiText color="subdued" size={'s'} style={{ maxWidth: '50%' }}>
-          {i18nTexts.editPolicy.descriptions.delete}
-        </EuiText>
-        <EuiSpacer />
-        <SnapshotPoliciesField />
-      </EuiComment>
-    </>
+    <EuiTimelineItem
+      data-test-subj="delete-phase"
+      icon={<PhaseIcon enabled={enabled} phase="delete" />}
+      verticalAlign="top"
+    >
+      <EuiSplitPanel.Outer color="transparent" hasBorder grow>
+        <EuiSplitPanel.Inner color={enabled ? 'transparent' : 'subdued'}>
+          {phaseTitle}
+        </EuiSplitPanel.Inner>
+        <EuiHorizontalRule margin="none" />
+        <EuiSplitPanel.Inner>
+          <EuiText color="subdued" size={'s'} style={{ maxWidth: '50%' }}>
+            {i18nTexts.editPolicy.descriptions.delete}
+          </EuiText>
+          <EuiSpacer />
+          <SnapshotPoliciesField />
+        </EuiSplitPanel.Inner>
+      </EuiSplitPanel.Outer>
+    </EuiTimelineItem>
   );
 };

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

@@ -1,28 +1,11 @@
-.ilmPhase {
-  .euiCommentEvent {
-    &__header {
-      padding: $euiSize;
-    }
-    &__body {
-      padding: $euiSize;
-    }
-  }
+.ilmSettingsAccordion {
   .ilmSettingsButton {
     color: $euiColorPrimary;
     padding-top: $euiSizeS;
     padding-bottom: $euiSizeS;
   }
-  .euiCommentTimeline {
-    padding-top: $euiSize;
-    &::before {
-      height: calc(100% + #{$euiSizeXXL});
-    }
-  }
-  &--enabled {
-    .euiCommentEvent {
-      &__header {
-        background-color: $euiColorEmptyShade;
-      }
-    }
-  }
+}
+
+.ilmPhaseRequiredBadge {
+  max-width: 150px;
 }

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

@@ -12,10 +12,12 @@ import {
   EuiFlexItem,
   EuiTitle,
   EuiText,
-  EuiComment,
   EuiAccordion,
   EuiSpacer,
   EuiBadge,
+  EuiTimelineItem,
+  EuiSplitPanel,
+  EuiHorizontalRule,
 } from '@elastic/eui';
 import { get } from 'lodash';
 import { FormattedMessage } from '@kbn/i18n-react';
@@ -51,7 +53,7 @@ export const Phase: FunctionComponent<Props> = ({ children, topLevelSettings, ph
   const enabled = get(formData, enabledPath) || isHotPhase;
 
   const phaseTitle = (
-    <EuiFlexGroup alignItems="center" gutterSize={'s'} wrap>
+    <EuiFlexGroup alignItems="center" gutterSize="s">
       {!isHotPhase && (
         <EuiFlexItem grow={false}>
           <UseField
@@ -67,13 +69,13 @@ export const Phase: FunctionComponent<Props> = ({ children, topLevelSettings, ph
         </EuiFlexItem>
       )}
       <EuiFlexItem grow={false}>
-        <EuiTitle size={'s'}>
+        <EuiTitle size="s">
           <h2>{i18nTexts.editPolicy.titles[phase]}</h2>
         </EuiTitle>
       </EuiFlexItem>
       {isHotPhase && (
         <EuiFlexItem grow={false}>
-          <EuiBadge>
+          <EuiBadge className="ilmPhaseRequiredBadge">
             <FormattedMessage
               id="xpack.indexLifecycleMgmt.editPolicy.phaseTitle.requiredBadge"
               defaultMessage="Required"
@@ -84,59 +86,68 @@ export const Phase: FunctionComponent<Props> = ({ children, topLevelSettings, ph
       <EuiFlexItem grow={false}>
         <PhaseErrorIndicator phase={phase} />
       </EuiFlexItem>
+      {!isHotPhase && enabled && (
+        <EuiFlexItem grow={true}>
+          <MinAgeField phase={phase} />
+        </EuiFlexItem>
+      )}
     </EuiFlexGroup>
   );
 
-  // @ts-ignore
-  const minAge = !isHotPhase && enabled ? <MinAgeField phase={phase} /> : null;
-
   return (
-    <EuiComment
-      username={phaseTitle}
-      actions={minAge}
-      timelineIcon={<PhaseIcon enabled={enabled} phase={phase} />}
-      className={`ilmPhase ${enabled ? 'ilmPhase--enabled' : ''}`}
+    <EuiTimelineItem
+      icon={<PhaseIcon enabled={enabled} phase={phase} />}
+      verticalAlign="top"
       data-test-subj={`${phase}-phase`}
     >
-      <EuiText color="subdued" size={'s'} style={{ maxWidth: '50%' }}>
-        {i18nTexts.editPolicy.descriptions[phase]}
-      </EuiText>
+      <EuiSplitPanel.Outer color="transparent" hasBorder grow>
+        <EuiSplitPanel.Inner color={enabled ? 'transparent' : 'subdued'}>
+          {phaseTitle}
+        </EuiSplitPanel.Inner>
+        <EuiHorizontalRule margin="none" />
+        <EuiSplitPanel.Inner>
+          <EuiText color="subdued" size="s" style={{ maxWidth: '50%' }}>
+            {i18nTexts.editPolicy.descriptions[phase]}
+          </EuiText>
 
-      {enabled && (
-        <>
-          {!!topLevelSettings ? (
+          {enabled && (
             <>
-              <EuiSpacer />
-              {topLevelSettings}
-            </>
-          ) : (
-            <EuiSpacer size="m" />
-          )}
+              {!!topLevelSettings ? (
+                <>
+                  <EuiSpacer />
+                  {topLevelSettings}
+                </>
+              ) : (
+                <EuiSpacer size="m" />
+              )}
 
-          {children ? (
-            <EuiAccordion
-              id={`${phase}-settingsSwitch`}
-              buttonContent={
-                <FormattedMessage
-                  id="xpack.indexLifecycleMgmt.editPolicy.phaseSettings.buttonLabel"
-                  defaultMessage="Advanced settings"
-                />
-              }
-              buttonClassName="ilmSettingsButton"
-              extraAction={<PhaseFooter phase={phase} />}
-            >
-              <EuiSpacer />
-              {children}
-            </EuiAccordion>
-          ) : (
-            <EuiFlexGroup justifyContent="flexEnd">
-              <EuiFlexItem grow={false}>
-                <PhaseFooter phase={phase} />
-              </EuiFlexItem>
-            </EuiFlexGroup>
+              {children ? (
+                <EuiAccordion
+                  id={`${phase}-settingsSwitch`}
+                  className="ilmSettingsAccordion"
+                  buttonContent={
+                    <FormattedMessage
+                      id="xpack.indexLifecycleMgmt.editPolicy.phaseSettings.buttonLabel"
+                      defaultMessage="Advanced settings"
+                    />
+                  }
+                  buttonClassName="ilmSettingsButton"
+                  extraAction={<PhaseFooter phase={phase} />}
+                >
+                  <EuiSpacer />
+                  {children}
+                </EuiAccordion>
+              ) : (
+                <EuiFlexGroup justifyContent="flexEnd">
+                  <EuiFlexItem grow={false}>
+                    <PhaseFooter phase={phase} />
+                  </EuiFlexItem>
+                </EuiFlexGroup>
+              )}
+            </>
           )}
-        </>
-      )}
-    </EuiComment>
+        </EuiSplitPanel.Inner>
+      </EuiSplitPanel.Outer>
+    </EuiTimelineItem>
   );
 };

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

@@ -0,0 +1,7 @@
+// offset the vertical line and the phase icons to align with the phase toggle
+.ilm-phases-timeline [class*='euiTimelineItemIcon-top'] {
+  padding-top: $euiSize;
+}
+.ilm-phases-timeline [class*='euiTimelineItemIcon-top']::before {
+  top: $euiSizeL;
+}

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

@@ -12,6 +12,8 @@ import { get } from 'lodash';
 
 import { useHistory } from 'react-router-dom';
 
+import './edit_policy.scss';
+
 import {
   EuiButton,
   EuiButtonEmpty,
@@ -22,6 +24,7 @@ import {
   EuiSpacer,
   EuiSwitch,
   EuiPageHeader,
+  EuiTimeline,
 } from '@elastic/eui';
 
 import { TextField, useForm, useFormData, useKibana } from '../../../shared_imports';
@@ -235,27 +238,17 @@ export const EditPolicy: React.FunctionComponent = () => {
 
         <EuiSpacer size="l" />
 
-        <div>
+        <EuiTimeline className="ilm-phases-timeline">
           <HotPhase />
 
-          <EuiSpacer />
           <WarmPhase />
 
-          <EuiSpacer />
           <ColdPhase />
 
-          {isAllowedByLicense && (
-            <>
-              <EuiSpacer />
-              <FrozenPhase />
-            </>
-          )}
+          {isAllowedByLicense && <FrozenPhase />}
 
-          {/* We can't add the <EuiSpacer /> here as it breaks the layout
-              and makes the connecting line go further that it needs to.
-              There is an issue in EUI to fix this (https://github.com/elastic/eui/issues/4492) */}
           <DeletePhase />
-        </div>
+        </EuiTimeline>
 
         <EuiHorizontalRule />