From f0797759f43e9320e3ed9eb0b1d5a1aa548ad0f1 Mon Sep 17 00:00:00 2001
From: Ignacio Rivas <rivasign@gmail.com>
Date: Fri, 30 Jul 2021 08:10:13 +0300
Subject: [PATCH] [ILM] Adjust alignment of field errors + timeline icon
 (#104084)

* adjust alignment of field errors + timeline icon

* Use options popover instead of two continuous inputs

* Set max row size

* Reduce error callout size to s

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
---
 .../helpers/actions/rollover_actions.ts       | 52 ++++++++++----
 .../hot_phase/components/max_age_field.tsx    | 40 +++++------
 .../components/max_document_count_field.tsx   |  4 +-
 .../components/max_index_size_field.tsx       | 34 ++++------
 .../max_primary_shard_size_field.tsx          | 40 +++++------
 .../hot_phase/components/unit_field.tsx       | 68 +++++++++++++++++++
 .../components/phases/hot_phase/hot_phase.tsx |  1 +
 .../components/timeline/timeline.scss         |  1 +
 8 files changed, 162 insertions(+), 78 deletions(-)
 create mode 100644 x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/hot_phase/components/unit_field.tsx

diff --git a/x-pack/plugins/index_lifecycle_management/__jest__/client_integration/helpers/actions/rollover_actions.ts b/x-pack/plugins/index_lifecycle_management/__jest__/client_integration/helpers/actions/rollover_actions.ts
index 6d05f3d63f5773..798b74e40055fd 100644
--- a/x-pack/plugins/index_lifecycle_management/__jest__/client_integration/helpers/actions/rollover_actions.ts
+++ b/x-pack/plugins/index_lifecycle_management/__jest__/client_integration/helpers/actions/rollover_actions.ts
@@ -15,39 +15,65 @@ const createSetPrimaryShardSizeAction = (testBed: TestBed) => async (
   units?: string
 ) => {
   const { find, component } = testBed;
+
   await act(async () => {
     find('hot-selectedMaxPrimaryShardSize').simulate('change', { target: { value } });
-    if (units) {
-      find('hot-selectedMaxPrimaryShardSize.select').simulate('change', {
-        target: { value: units },
-      });
-    }
   });
   component.update();
+
+  if (units) {
+    act(() => {
+      find('hot-selectedMaxPrimaryShardSize.show-filters-button').simulate('click');
+    });
+    component.update();
+
+    act(() => {
+      find(`hot-selectedMaxPrimaryShardSize.filter-option-${units}`).simulate('click');
+    });
+    component.update();
+  }
 };
 
 const createSetMaxAgeAction = (testBed: TestBed) => async (value: string, units?: string) => {
   const { find, component } = testBed;
+
   await act(async () => {
     find('hot-selectedMaxAge').simulate('change', { target: { value } });
-    if (units) {
-      find('hot-selectedMaxAgeUnits.select').simulate('change', { target: { value: units } });
-    }
   });
   component.update();
+
+  if (units) {
+    act(() => {
+      find('hot-selectedMaxAgeUnits.show-filters-button').simulate('click');
+    });
+    component.update();
+
+    act(() => {
+      find(`hot-selectedMaxAgeUnits.filter-option-${units}`).simulate('click');
+    });
+    component.update();
+  }
 };
 
 const createSetMaxSizeAction = (testBed: TestBed) => async (value: string, units?: string) => {
   const { find, component } = testBed;
+
   await act(async () => {
     find('hot-selectedMaxSizeStored').simulate('change', { target: { value } });
-    if (units) {
-      find('hot-selectedMaxSizeStoredUnits.select').simulate('change', {
-        target: { value: units },
-      });
-    }
   });
   component.update();
+
+  if (units) {
+    act(() => {
+      find('hot-selectedMaxSizeStoredUnits.show-filters-button').simulate('click');
+    });
+    component.update();
+
+    act(() => {
+      find(`hot-selectedMaxSizeStoredUnits.filter-option-${units}`).simulate('click');
+    });
+    component.update();
+  }
 };
 
 export const createRolloverActions = (testBed: TestBed) => {
diff --git a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/hot_phase/components/max_age_field.tsx b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/hot_phase/components/max_age_field.tsx
index 2d3704e252ac8c..7fbdaf344b8fae 100644
--- a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/hot_phase/components/max_age_field.tsx
+++ b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/hot_phase/components/max_age_field.tsx
@@ -9,16 +9,17 @@ import React, { FunctionComponent } from 'react';
 import { i18n } from '@kbn/i18n';
 import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 
-import { NumericField, SelectField } from '../../../../../../../shared_imports';
+import { NumericField } from '../../../../../../../shared_imports';
 import { UseField } from '../../../../form';
 import { ROLLOVER_FORM_PATHS } from '../../../../constants';
+import { UnitField } from './unit_field';
 
 import { maxAgeUnits } from '../constants';
 
 export const MaxAgeField: FunctionComponent = () => {
   return (
-    <EuiFlexGroup alignItems="flexEnd" gutterSize="s">
-      <EuiFlexItem style={{ maxWidth: 188 }}>
+    <EuiFlexGroup alignItems="flexStart" gutterSize="s">
+      <EuiFlexItem style={{ maxWidth: 400 }}>
         <UseField
           path={ROLLOVER_FORM_PATHS.maxAge}
           component={NumericField}
@@ -26,26 +27,21 @@ export const MaxAgeField: FunctionComponent = () => {
             euiFieldProps: {
               'data-test-subj': `hot-selectedMaxAge`,
               min: 1,
-            },
-          }}
-        />
-      </EuiFlexItem>
-      <EuiFlexItem style={{ maxWidth: 188 }}>
-        <UseField
-          key="_meta.hot.customRollover.maxAgeUnit"
-          path="_meta.hot.customRollover.maxAgeUnit"
-          component={SelectField}
-          componentProps={{
-            'data-test-subj': `hot-selectedMaxAgeUnits`,
-            hasEmptyLabelSpace: true,
-            euiFieldProps: {
-              'aria-label': i18n.translate(
-                'xpack.indexLifecycleMgmt.hotPhase.maximumAgeUnitsAriaLabel',
-                {
-                  defaultMessage: 'Maximum age units',
-                }
+              append: (
+                <UnitField
+                  path="_meta.hot.customRollover.maxAgeUnit"
+                  options={maxAgeUnits}
+                  euiFieldProps={{
+                    'data-test-subj': 'hot-selectedMaxAgeUnits',
+                    'aria-label': i18n.translate(
+                      'xpack.indexLifecycleMgmt.hotPhase.maximumAgeUnitsAriaLabel',
+                      {
+                        defaultMessage: 'Maximum age units',
+                      }
+                    ),
+                  }}
+                />
               ),
-              options: maxAgeUnits,
             },
           }}
         />
diff --git a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/hot_phase/components/max_document_count_field.tsx b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/hot_phase/components/max_document_count_field.tsx
index c6f8abef3f2c2f..e847d773e2a88e 100644
--- a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/hot_phase/components/max_document_count_field.tsx
+++ b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/hot_phase/components/max_document_count_field.tsx
@@ -14,8 +14,8 @@ import { ROLLOVER_FORM_PATHS } from '../../../../constants';
 
 export const MaxDocumentCountField: FunctionComponent = () => {
   return (
-    <EuiFlexGroup alignItems="flexEnd" gutterSize="s">
-      <EuiFlexItem style={{ maxWidth: 188 }}>
+    <EuiFlexGroup alignItems="flexStart" gutterSize="s">
+      <EuiFlexItem style={{ maxWidth: 400 }}>
         <UseField
           path={ROLLOVER_FORM_PATHS.maxDocs}
           component={NumericField}
diff --git a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/hot_phase/components/max_index_size_field.tsx b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/hot_phase/components/max_index_size_field.tsx
index 195acf35c1357e..e4e700a84118c1 100644
--- a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/hot_phase/components/max_index_size_field.tsx
+++ b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/hot_phase/components/max_index_size_field.tsx
@@ -9,9 +9,10 @@ import React, { FunctionComponent } from 'react';
 import { i18n } from '@kbn/i18n';
 import { EuiFlexGroup, EuiFlexItem, EuiIconTip } from '@elastic/eui';
 
-import { NumericField, SelectField } from '../../../../../../../shared_imports';
+import { NumericField } from '../../../../../../../shared_imports';
 import { UseField } from '../../../../form';
 import { ROLLOVER_FORM_PATHS } from '../../../../constants';
+import { UnitField } from './unit_field';
 
 import { maxSizeStoredUnits } from '../constants';
 
@@ -32,14 +33,15 @@ const i18nTexts = {
 
 export const MaxIndexSizeField: FunctionComponent = () => {
   return (
-    <EuiFlexGroup alignItems="flexEnd" gutterSize="s">
-      <EuiFlexItem style={{ maxWidth: 188 }}>
+    <EuiFlexGroup alignItems="flexStart" gutterSize="s">
+      <EuiFlexItem style={{ maxWidth: 400 }}>
         <UseField
           path={ROLLOVER_FORM_PATHS.maxSize}
           component={NumericField}
           componentProps={{
             euiFieldProps: {
               'data-test-subj': 'hot-selectedMaxSizeStored',
+              min: 1,
               prepend: (
                 <EuiIconTip
                   type="alert"
@@ -47,22 +49,16 @@ export const MaxIndexSizeField: FunctionComponent = () => {
                   content={i18nTexts.deprecationMessage}
                 />
               ),
-              min: 1,
-            },
-          }}
-        />
-      </EuiFlexItem>
-      <EuiFlexItem style={{ maxWidth: 188 }}>
-        <UseField
-          key="_meta.hot.customRollover.maxStorageSizeUnit"
-          path="_meta.hot.customRollover.maxStorageSizeUnit"
-          component={SelectField}
-          componentProps={{
-            'data-test-subj': `hot-selectedMaxSizeStoredUnits`,
-            hasEmptyLabelSpace: true,
-            euiFieldProps: {
-              options: maxSizeStoredUnits,
-              'aria-label': i18nTexts.maxSizeUnit.ariaLabel,
+              append: (
+                <UnitField
+                  path="_meta.hot.customRollover.maxStorageSizeUnit"
+                  options={maxSizeStoredUnits}
+                  euiFieldProps={{
+                    'data-test-subj': 'hot-selectedMaxSizeStoredUnits',
+                    'aria-label': i18nTexts.maxSizeUnit.ariaLabel,
+                  }}
+                />
+              ),
             },
           }}
         />
diff --git a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/hot_phase/components/max_primary_shard_size_field.tsx b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/hot_phase/components/max_primary_shard_size_field.tsx
index eed23bd48a0fa1..d9c7ed5a24b99c 100644
--- a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/hot_phase/components/max_primary_shard_size_field.tsx
+++ b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/hot_phase/components/max_primary_shard_size_field.tsx
@@ -9,16 +9,17 @@ import React, { FunctionComponent } from 'react';
 import { i18n } from '@kbn/i18n';
 import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 
-import { NumericField, SelectField } from '../../../../../../../shared_imports';
+import { NumericField } from '../../../../../../../shared_imports';
 import { UseField } from '../../../../form';
 import { ROLLOVER_FORM_PATHS } from '../../../../constants';
+import { UnitField } from './unit_field';
 
 import { maxSizeStoredUnits } from '../constants';
 
 export const MaxPrimaryShardSizeField: FunctionComponent = () => {
   return (
-    <EuiFlexGroup alignItems="flexEnd" gutterSize="s">
-      <EuiFlexItem style={{ maxWidth: 188 }}>
+    <EuiFlexGroup alignItems="flexStart" gutterSize="s">
+      <EuiFlexItem style={{ maxWidth: 400 }}>
         <UseField
           path={ROLLOVER_FORM_PATHS.maxPrimaryShardSize}
           component={NumericField}
@@ -26,25 +27,20 @@ export const MaxPrimaryShardSizeField: FunctionComponent = () => {
             euiFieldProps: {
               'data-test-subj': 'hot-selectedMaxPrimaryShardSize',
               min: 1,
-            },
-          }}
-        />
-      </EuiFlexItem>
-      <EuiFlexItem style={{ maxWidth: 188 }}>
-        <UseField
-          key="_meta.hot.customRollover.maxPrimaryShardSizeUnit"
-          path="_meta.hot.customRollover.maxPrimaryShardSizeUnit"
-          component={SelectField}
-          componentProps={{
-            'data-test-subj': `hot-selectedMaxPrimaryShardSizeUnits`,
-            hasEmptyLabelSpace: true,
-            euiFieldProps: {
-              options: maxSizeStoredUnits,
-              'aria-label': i18n.translate(
-                'xpack.indexLifecycleMgmt.hotPhase.maximumPrimaryShardSizeAriaLabel',
-                {
-                  defaultMessage: 'Maximum primary shard size units',
-                }
+              append: (
+                <UnitField
+                  path="_meta.hot.customRollover.maxPrimaryShardSizeUnit"
+                  options={maxSizeStoredUnits}
+                  euiFieldProps={{
+                    'data-test-subj': 'hot-selectedMaxPrimaryShardSizeUnits',
+                    'aria-label': i18n.translate(
+                      'xpack.indexLifecycleMgmt.hotPhase.maximumPrimaryShardSizeAriaLabel',
+                      {
+                        defaultMessage: 'Maximum primary shard size units',
+                      }
+                    ),
+                  }}
+                />
               ),
             },
           }}
diff --git a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/hot_phase/components/unit_field.tsx b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/hot_phase/components/unit_field.tsx
new file mode 100644
index 00000000000000..2ef8917d539892
--- /dev/null
+++ b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/hot_phase/components/unit_field.tsx
@@ -0,0 +1,68 @@
+/*
+ * 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, useState } from 'react';
+import { EuiFilterSelectItem, EuiPopover, EuiButtonEmpty } from '@elastic/eui';
+
+import { UseField } from '../../../../form';
+
+interface Props {
+  path: string;
+  euiFieldProps?: Record<string, any>;
+  options: Array<{
+    value: string;
+    text: string;
+  }>;
+}
+
+export const UnitField: FunctionComponent<Props> = ({ path, options, euiFieldProps }) => {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <UseField key={path} path={path}>
+      {(field) => {
+        const onSelect = (option: string) => {
+          field.setValue(option);
+          setOpen(false);
+        };
+
+        return (
+          <EuiPopover
+            button={
+              <EuiButtonEmpty
+                size="xs"
+                color="text"
+                iconSide="right"
+                iconType="arrowDown"
+                onClick={() => setOpen((x) => !x)}
+                data-test-subj="show-filters-button"
+              >
+                {options.find((x) => x.value === field.value)?.text}
+              </EuiButtonEmpty>
+            }
+            ownFocus
+            panelPaddingSize="none"
+            isOpen={open}
+            closePopover={() => setOpen(false)}
+            {...euiFieldProps}
+          >
+            {options.map((item) => (
+              <EuiFilterSelectItem
+                key={item.value}
+                checked={field.value === item.value ? 'on' : undefined}
+                onClick={() => onSelect(item.value)}
+                data-test-subj={`filter-option-${item.value}`}
+              >
+                {item.text}
+              </EuiFilterSelectItem>
+            ))}
+          </EuiPopover>
+        );
+      }}
+    </UseField>
+  );
+};
diff --git a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/hot_phase/hot_phase.tsx b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/hot_phase/hot_phase.tsx
index 3c30c6d3a678fc..d6a36b99c20aa8 100644
--- a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/hot_phase/hot_phase.tsx
+++ b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/hot_phase/hot_phase.tsx
@@ -135,6 +135,7 @@ export const HotPhase: FunctionComponent = () => {
                 {showEmptyRolloverFieldsError && (
                   <>
                     <EuiCallOut
+                      size="s"
                       title={i18nTexts.editPolicy.errors.rollOverConfigurationCallout.title}
                       data-test-subj="rolloverSettingsRequired"
                       color="danger"
diff --git a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/timeline/timeline.scss b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/timeline/timeline.scss
index 983ef0ab20f699..a69f244a25aea2 100644
--- a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/timeline/timeline.scss
+++ b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/timeline/timeline.scss
@@ -10,6 +10,7 @@ $ilmTimelineBarHeight: $euiSizeS;
     */
     display: inline-block;
     width: 100%;
+    margin-top: $euiSizeS;
 
     &__phase:first-child {
       padding-left: 0;