[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

@@ -6,85 +6,9 @@
  */
 
 import React, { FunctionComponent } from 'react';
-import { get } from 'lodash';
-import {
-  EuiFlexItem,
-  EuiFlexGroup,
-  EuiTitle,
-  EuiButtonEmpty,
-  EuiSpacer,
-  EuiText,
-  EuiComment,
-} from '@elastic/eui';
-
-import { FormattedMessage } from '@kbn/i18n-react';
-
-import { useFormData } from '../../../../../../shared_imports';
-import { i18nTexts } from '../../../i18n_texts';
-import { usePhaseTimings, globalFields } from '../../../form';
-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,
-};
+import { Phase } from '../phase';
+import { SnapshotPoliciesField } from '../shared_fields';
 
 export const DeletePhase: FunctionComponent = () => {
-  const { setDeletePhaseEnabled } = usePhaseTimings();
-  const [formData] = useFormData({
-    watch: formFieldPaths.enabled,
-  });
-
-  const enabled = get(formData, formFieldPaths.enabled);
-
-  if (!enabled) {
-    return null;
-  }
-  const phaseTitle = (
-    <EuiFlexGroup alignItems="center" gutterSize={'s'} wrap>
-      <EuiFlexItem grow={false}>
-        <EuiTitle size={'s'}>
-          <h2>{i18nTexts.editPolicy.titles.delete}</h2>
-        </EuiTitle>
-      </EuiFlexItem>
-
-      <EuiFlexItem>
-        <EuiButtonEmpty
-          onClick={() => setDeletePhaseEnabled(false)}
-          data-test-subj={'disableDeletePhaseButton'}
-        >
-          <FormattedMessage
-            id="xpack.indexLifecycleMgmt.editPolicy.deletePhase.removeDeletePhaseButtonLabel"
-            defaultMessage="Remove"
-          />
-        </EuiButtonEmpty>
-      </EuiFlexItem>
-
-      <EuiFlexItem grow={false}>
-        <PhaseErrorIndicator 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>
-    </>
-  );
+  return <Phase phase="delete" topLevelSettings={<SnapshotPoliciesField />} />;
 };

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

@@ -1,28 +1,7 @@
-.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;
-      }
-    }
-  }
 }

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

@@ -10,30 +10,28 @@ import React, { FunctionComponent } from 'react';
 import {
   EuiFlexGroup,
   EuiFlexItem,
-  EuiTitle,
   EuiText,
-  EuiComment,
   EuiAccordion,
   EuiSpacer,
-  EuiBadge,
+  EuiTimelineItem,
+  EuiSplitPanel,
+  EuiHorizontalRule,
 } from '@elastic/eui';
 import { get } from 'lodash';
 import { FormattedMessage } from '@kbn/i18n-react';
 
-import { PhaseExceptDelete } from '../../../../../../../common/types';
-import { ToggleField, useFormData } from '../../../../../../shared_imports';
+import { Phase as PhaseType } from '../../../../../../../common/types';
+import { useFormData } from '../../../../../../shared_imports';
 import { i18nTexts } from '../../../i18n_texts';
 import { FormInternal } from '../../../types';
-import { UseField } from '../../../form';
-import { MinAgeField } from '../shared_fields';
 import { PhaseIcon } from '../../phase_icon';
 import { PhaseFooter } from '../../phase_footer';
-import { PhaseErrorIndicator } from './phase_error_indicator';
 
 import './phase.scss';
+import { PhaseTitle } from './phase_title';
 
 interface Props {
-  phase: PhaseExceptDelete;
+  phase: PhaseType;
   /**
    * Settings that should always be visible on the phase when it is enabled.
    */
@@ -47,96 +45,71 @@ export const Phase: FunctionComponent<Props> = ({ children, topLevelSettings, ph
   });
 
   const isHotPhase = phase === 'hot';
+  const isDeletePhase = phase === 'delete';
   // hot phase is always enabled
   const enabled = get(formData, enabledPath) || isHotPhase;
 
-  const phaseTitle = (
-    <EuiFlexGroup alignItems="center" gutterSize={'s'} wrap>
-      {!isHotPhase && (
-        <EuiFlexItem grow={false}>
-          <UseField
-            path={enabledPath}
-            component={ToggleField}
-            componentProps={{
-              euiFieldProps: {
-                'data-test-subj': `enablePhaseSwitch-${phase}`,
-                showLabel: false,
-              },
-            }}
-          />
-        </EuiFlexItem>
-      )}
-      <EuiFlexItem grow={false}>
-        <EuiTitle size={'s'}>
-          <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>
-  );
-
-  // @ts-ignore
-  const minAge = !isHotPhase && enabled ? <MinAgeField phase={phase} /> : null;
+  // delete phase is hidden when disabled
+  if (isDeletePhase && !enabled) {
+    return 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 phase={phase} />
+        </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={!isDeletePhase && <PhaseFooter phase={phase} />}
+                >
+                  <EuiSpacer />
+                  {children}
+                </EuiAccordion>
+              ) : (
+                !isDeletePhase && (
+                  <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/components/phases/phase/phase_title.scss

@@ -0,0 +1,8 @@
+
+.ilmPhaseRequiredBadge {
+  max-width: 150px;
+}
+
+.ilmPhaseTitle {
+  min-width: 100px;
+}