From 180a0c76b8f1618970f512505b2114a61efb578c Mon Sep 17 00:00:00 2001
From: Yulia Cech <yulia.cech@elastic.co>
Date: Thu, 4 Feb 2021 12:14:34 +0100
Subject: [PATCH] Added new design

---
 .../components/phase_footer/phase_footer.tsx  |   6 +-
 .../components/phase_icon/index.ts            |   7 +
 .../components/phase_icon/phase_icon.scss     |  28 ++++
 .../components/phase_icon/phase_icon.tsx      |  31 ++++
 .../phases/delete_phase/delete_phase.scss     |  17 +-
 .../phases/delete_phase/delete_phase.tsx      |  63 ++++----
 .../edit_policy/components/phases/phase.scss  |  18 ++-
 .../edit_policy/components/phases/phase.tsx   | 151 +++++++-----------
 .../sections/edit_policy/edit_policy.tsx      |  16 +-
 9 files changed, 198 insertions(+), 139 deletions(-)
 create mode 100644 x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phase_icon/index.ts
 create mode 100644 x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phase_icon/phase_icon.scss
 create mode 100644 x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phase_icon/phase_icon.tsx

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 b7d71120928ac0..876da65a1bfb11 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
@@ -27,7 +27,7 @@ export const PhaseFooter: FunctionComponent<Props> = ({ phase }) => {
 
   if (phaseConfiguration === 'disabled' || phaseConfiguration === 'enabled') {
     return (
-      <EuiPanel className={'ilmPhaseFooter'}>
+      <EuiPanel className={'ilmPhaseFooter'} hasShadow={false}>
         <EuiText size={'s'}>&nbsp;</EuiText>
       </EuiPanel>
     );
@@ -35,7 +35,7 @@ export const PhaseFooter: FunctionComponent<Props> = ({ phase }) => {
 
   if (phaseConfiguration === 'forever') {
     return (
-      <EuiPanel color={'subdued'} className={'ilmPhaseFooter'}>
+      <EuiPanel color={'subdued'} className={'ilmPhaseFooter'} hasShadow={false}>
         <InfinityIcon size={'s'} />{' '}
         <EuiText size={'s'} grow={false} className={'eui-displayInlineBlock'}>
           <FormattedMessage
@@ -54,7 +54,7 @@ export const PhaseFooter: FunctionComponent<Props> = ({ phase }) => {
   }
 
   return (
-    <EuiPanel color={'subdued'} className={'ilmPhaseFooter'}>
+    <EuiPanel color={'subdued'} className={'ilmPhaseFooter'} hasShadow={false}>
       <EuiIcon type={'storage'} size={'s'} />{' '}
       <EuiText size={'s'} grow={false} className={'eui-displayInlineBlock'}>
         <FormattedMessage
diff --git a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phase_icon/index.ts b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phase_icon/index.ts
new file mode 100644
index 00000000000000..d900f55c4fe37d
--- /dev/null
+++ b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phase_icon/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 { PhaseIcon } from './phase_icon';
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
new file mode 100644
index 00000000000000..91c6c201585e06
--- /dev/null
+++ b/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;
+  }
+}
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
new file mode 100644
index 00000000000000..53d2ea2101cd39
--- /dev/null
+++ b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phase_icon/phase_icon.tsx
@@ -0,0 +1,31 @@
+/*
+ * 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 { 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>
+  );
+};
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 90c057d2512c81..aa92ce5dd839b4 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
@@ -1,4 +1,15 @@
-.euiPanel.ilmDeletePhase {
-  // border is only shown in v7 to compensate for panels not having background color
-  border-color: $euiColorDanger;
+.ilmDeletePhase {
+  .euiCommentEvent {
+    &__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 58c5eb9bd7f1d2..7ab9679a961d34 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
@@ -7,13 +7,13 @@
 import React, { FunctionComponent } from 'react';
 import { get } from 'lodash';
 import {
-  EuiPanel,
   EuiFlexItem,
   EuiFlexGroup,
   EuiTitle,
   EuiButtonEmpty,
   EuiSpacer,
   EuiText,
+  EuiComment,
 } from '@elastic/eui';
 
 import { FormattedMessage } from '@kbn/i18n/react';
@@ -26,6 +26,7 @@ import { usePhaseTimings } from '../../../form';
 
 import { MinAgeField, SnapshotPoliciesField } from '../shared_fields';
 import './delete_phase.scss';
+import { PhaseIcon } from '../../phase_icon';
 
 const formFieldPaths = {
   enabled: '_meta.delete.enabled',
@@ -42,44 +43,40 @@ export const DeletePhase: FunctionComponent = () => {
   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>
+    </EuiFlexGroup>
+  );
 
   return (
-    <EuiPanel color={'danger'} className={'ilmDeletePhase'} hasShadow={false}>
-      <EuiFlexGroup>
-        <EuiFlexItem>
-          <EuiTitle size={'s'}>
-            <h2>{i18nTexts.editPolicy.titles.delete}</h2>
-          </EuiTitle>
-        </EuiFlexItem>
-        <EuiFlexItem>
-          <EuiFlexGroup justifyContent="spaceBetween" alignItems="center" gutterSize={'xs'}>
-            <EuiFlexItem>
-              <MinAgeField phase={'delete'} />
-            </EuiFlexItem>
-            <EuiFlexItem grow={false}>
-              <EuiButtonEmpty
-                onClick={() => setDeletePhaseEnabled(false)}
-                iconType={'cross'}
-                color={'danger'}
-                size="xs"
-                iconSide="left"
-                data-test-subj={'disableDeletePhaseButton'}
-              >
-                <FormattedMessage
-                  id="xpack.indexLifecycleMgmt.editPolicy.deletePhase.removeDeletePhaseButtonLabel"
-                  defaultMessage="Disable"
-                />
-              </EuiButtonEmpty>
-            </EuiFlexItem>
-          </EuiFlexGroup>
-        </EuiFlexItem>
-      </EuiFlexGroup>
-      <EuiSpacer />
+    <EuiComment
+      username={phaseTitle}
+      actions={<MinAgeField phase={'delete'} />}
+      className="ilmDeletePhase"
+      timelineIcon={<PhaseIcon enabled={enabled} phase={'delete'} />}
+    >
       <EuiText color="subdued" size={'s'} style={{ maxWidth: '50%' }}>
         {i18nTexts.editPolicy.descriptions.delete}
       </EuiText>
       <EuiSpacer />
       <SnapshotPoliciesField />
-    </EuiPanel>
+    </EuiComment>
   );
 };
diff --git a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/phase.scss b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/phase.scss
index 89555eb246c88c..033dd145f539c8 100644
--- a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/phase.scss
+++ b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/phase.scss
@@ -1,6 +1,18 @@
-.ilmPhasePanel {
-  padding: 0;
-  .ilmPhasePanel__inner {
+.ilmPhase {
+  .euiCommentEvent {
+    &__header {
+      padding: $euiSize;
+      background-color: $euiColorEmptyShade;
+    }
+    &__body {
+      padding: 0;
+    }
+
+  }
+  &__inner {
     padding: $euiSize;
   }
+  .ilmSettingsButton {
+    color: $euiColorPrimary;
+  }
 }
diff --git a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/phase.tsx b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/phase.tsx
index 7391e5388ecd90..8fda097e5f1712 100644
--- a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/phase.tsx
+++ b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/phase.tsx
@@ -4,16 +4,16 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React, { FunctionComponent, useState } from 'react';
+import React, { FunctionComponent } from 'react';
 
 import {
   EuiFlexGroup,
   EuiFlexItem,
-  EuiPanel,
   EuiTitle,
-  EuiSpacer,
   EuiText,
-  EuiButtonEmpty,
+  EuiComment,
+  EuiAccordion,
+  EuiSpacer,
 } from '@elastic/eui';
 import { get } from 'lodash';
 import { FormattedMessage } from '@kbn/i18n/react';
@@ -22,12 +22,11 @@ import { ToggleField, UseField, useFormData } from '../../../../../shared_import
 import { i18nTexts } from '../../i18n_texts';
 import { FormInternal } from '../../types';
 
-import { ActiveHighlight } from '../active_highlight';
 import { MinAgeField } from './shared_fields';
 
-import { PhaseFooter } from '../phase_footer';
-
 import './phase.scss';
+import { PhaseIcon } from '../phase_icon';
+import { PhaseFooter } from '../phase_footer';
 
 interface Props {
   phase: 'hot' | 'warm' | 'cold';
@@ -42,90 +41,64 @@ export const Phase: FunctionComponent<Props> = ({ children, phase }) => {
   // hot phase is always enabled
   const enabled = get(formData, enabledPath) || phase === 'hot';
 
-  const [isShowingSettings, setShowingSettings] = useState<boolean>(false);
-  return (
-    <EuiFlexGroup>
+  const phaseTitle = (
+    <EuiFlexGroup alignItems="center" gutterSize={'s'} wrap>
+      {phase !== 'hot' && (
+        <EuiFlexItem grow={false}>
+          <UseField
+            path={enabledPath}
+            component={ToggleField}
+            componentProps={{
+              euiFieldProps: {
+                'data-test-subj': `enablePhaseSwitch-${phase}`,
+                showLabel: false,
+              },
+            }}
+          />
+        </EuiFlexItem>
+      )}
       <EuiFlexItem grow={false}>
-        <ActiveHighlight phase={phase} enabled={enabled} />
-      </EuiFlexItem>
-      <EuiFlexItem>
-        <EuiPanel hasShadow={enabled} className={'ilmPhasePanel'}>
-          <div className={'ilmPhasePanel__inner'}>
-            <EuiFlexGroup wrap>
-              <EuiFlexItem>
-                <EuiFlexGroup alignItems="center" gutterSize={'s'}>
-                  {phase !== 'hot' && (
-                    <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>
-                </EuiFlexGroup>
-              </EuiFlexItem>
-              {enabled && (
-                <EuiFlexItem>
-                  <EuiFlexGroup
-                    justifyContent="spaceBetween"
-                    alignItems="center"
-                    gutterSize={'xs'}
-                    wrap
-                  >
-                    <EuiFlexItem grow={true}>
-                      {phase !== 'hot' && <MinAgeField phase={phase} />}
-                    </EuiFlexItem>
-                    <EuiFlexItem grow={false}>
-                      <EuiButtonEmpty
-                        data-test-subj={`${phase}-settingsSwitch`}
-                        onClick={() => {
-                          setShowingSettings(!isShowingSettings);
-                        }}
-                        size="xs"
-                        iconType="controlsVertical"
-                        iconSide="left"
-                        aria-controls={`${phase}-phaseContent`}
-                      >
-                        <FormattedMessage
-                          id="xpack.indexLifecycleMgmt.editPolicy.phaseSettings.buttonLabel"
-                          defaultMessage="Settings"
-                        />
-                      </EuiButtonEmpty>
-                    </EuiFlexItem>
-                  </EuiFlexGroup>
-                </EuiFlexItem>
-              )}
-            </EuiFlexGroup>
-            <EuiSpacer />
-            <EuiText color="subdued" size={'s'} style={{ maxWidth: '50%' }}>
-              {i18nTexts.editPolicy.descriptions[phase]}
-            </EuiText>
-
-            {enabled && (
-              <div
-                style={isShowingSettings ? {} : { display: 'none' }}
-                id={`${phase}-phaseContent`}
-                aria-live="polite"
-              >
-                <EuiSpacer />
-                {children}
-              </div>
-            )}
-          </div>
-          <PhaseFooter phase={phase} />
-        </EuiPanel>
+        <EuiTitle size={'s'}>
+          <h2>{i18nTexts.editPolicy.titles[phase]}</h2>
+        </EuiTitle>
       </EuiFlexItem>
     </EuiFlexGroup>
   );
+
+  const minAge = phase !== 'hot' ? <MinAgeField phase={phase} /> : null;
+
+  return (
+    <EuiComment
+      username={phaseTitle}
+      actions={minAge}
+      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>
+
+        {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} />
+    </EuiComment>
+  );
 };
diff --git a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/edit_policy.tsx b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/edit_policy.tsx
index b1cf41773de3c5..16da2c872186e4 100644
--- a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/edit_policy.tsx
+++ b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/edit_policy.tsx
@@ -237,19 +237,19 @@ export const EditPolicy: React.FunctionComponent<Props> = ({ history }) => {
 
             <EuiSpacer size="l" />
 
-            <HotPhase />
+            <div>
+              <HotPhase />
 
-            <EuiSpacer />
+              <EuiSpacer />
 
-            <WarmPhase />
+              <WarmPhase />
 
-            <EuiSpacer />
+              <EuiSpacer />
 
-            <ColdPhase />
+              <ColdPhase />
 
-            <EuiSpacer />
-
-            <DeletePhase />
+              <DeletePhase />
+            </div>
 
             <EuiHorizontalRule />