Upgrade EUI to 14.2.0 (#46075) (#46160)

* Upgraded EUI to 14.2.0 * Remove form row + button shim * Uncomment compressed prop from EuiComboBoxes * Fix and/or simplify prepend/append usages * Update two test files to correctly call EuiRange's onChange prop
elastic · Sep 19, 2019 · 159fee4 · 159fee4
1 parent 2d50a92
commit 159fee4
Show file tree

Hide file tree

Showing 31 changed files with 275 additions and 475 deletions.
diff --git a/package.json b/package.json
@@ -104,7 +104,7 @@
     "@babel/register": "^7.5.5",
     "@elastic/charts": "^12.0.2",
     "@elastic/datemath": "5.0.2",
-    "@elastic/eui": "14.0.0",
+    "@elastic/eui": "14.2.0",
     "@elastic/filesaver": "1.1.2",
     "@elastic/good": "8.1.1-kibana2",
     "@elastic/numeral": "2.3.3",

diff --git a/.../search/search_bar/components/saved_query_management/saved_query_management_component.tsx b/.../search/search_bar/components/saved_query_management/saved_query_management_component.tsx
@@ -113,7 +113,6 @@ export const SavedQueryManagementComponent: FunctionComponent<Props> = ({
 
   const savedQueryPopoverButton = (
     <EuiButtonEmpty
-      className="euiFormControlLayout__prepend"
       iconType="arrowDown"
       iconSide="right"
       onClick={() => {
@@ -164,7 +163,6 @@ export const SavedQueryManagementComponent: FunctionComponent<Props> = ({
     <Fragment>
       <EuiPopover
         id="savedQueryPopover"
-        anchorClassName="euiFormControlLayout__prepend"
         button={savedQueryPopoverButton}
         isOpen={isOpen}
         closePopover={() => {

diff --git a/src/legacy/core_plugins/kibana/public/index.scss b/src/legacy/core_plugins/kibana/public/index.scss
@@ -1,11 +1,5 @@
 @import 'src/legacy/ui/public/styles/styling_constants';
 
-// Temporary shim to help with EuiFormRow spacing
-// Will move to EUI
-.euiFormRow + .euiButton {
-  margin-top: $euiSize;
-}
-
 // Public UI styles
 @import 'src/legacy/ui/public/index';
 

diff --git a/...ana/public/management/sections/settings/components/field/__snapshots__/field.test.js.snap b/...ana/public/management/sections/settings/components/field/__snapshots__/field.test.js.snap
diff --git a/src/legacy/ui/public/vis/editors/default/components/agg_select.tsx b/src/legacy/ui/public/vis/editors/default/components/agg_select.tsx
@@ -142,7 +142,7 @@ function DefaultEditorAggSelect({
         isClearable={false}
         isInvalid={showValidation ? !isValid : false}
         fullWidth={true}
-        // compressed
+        compressed
       />
     </EuiFormRow>
   );

diff --git a/src/legacy/ui/public/vis/editors/default/controls/extended_bounds.tsx b/src/legacy/ui/public/vis/editors/default/controls/extended_bounds.tsx
@@ -19,7 +19,7 @@
 
 import React, { useEffect, ChangeEvent } from 'react';
 
-import { EuiFieldNumber, EuiFlexGroup, EuiFlexItem, EuiFormRow, EuiText } from '@elastic/eui';
+import { EuiFieldNumber, EuiFlexGroup, EuiFlexItem, EuiFormRow } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { isUndefined } from 'lodash';
 import { AggParamEditorProps } from '..';
@@ -95,11 +95,7 @@ function ExtendedBoundsParamEditor({
               fullWidth={true}
               isInvalid={showValidation ? !isValid : false}
               aria-label={minLabel}
-              prepend={
-                <EuiText size="xs">
-                  <strong>{minLabel}</strong>
-                </EuiText>
-              }
+              prepend={minLabel}
               compressed
             />
           </EuiFlexItem>
@@ -111,11 +107,7 @@ function ExtendedBoundsParamEditor({
               fullWidth={true}
               isInvalid={showValidation ? !isValid : false}
               aria-label={maxLabel}
-              prepend={
-                <EuiText size="xs">
-                  <strong>{maxLabel}</strong>
-                </EuiText>
-              }
+              prepend={maxLabel}
               compressed
             />
           </EuiFlexItem>

diff --git a/src/legacy/ui/public/vis/editors/default/controls/field.tsx b/src/legacy/ui/public/vis/editors/default/controls/field.tsx
@@ -110,7 +110,7 @@ function FieldParamEditor({
       compressed
     >
       <EuiComboBox
-        // compressed
+        compressed
         placeholder={i18n.translate('common.ui.aggTypes.field.selectFieldPlaceholder', {
           defaultMessage: 'Select a field',
         })}

diff --git a/src/legacy/ui/public/vis/editors/default/controls/time_interval.tsx b/src/legacy/ui/public/vis/editors/default/controls/time_interval.tsx
@@ -131,7 +131,7 @@ function TimeIntervalParamEditor({
       })}
     >
       <EuiComboBox
-        // compressed
+        compressed
         fullWidth={true}
         data-test-subj="visEditorInterval"
         isInvalid={showValidation ? !isValid : false}

diff --git a/src/plugins/es_ui_shared/public/components/cron_editor/cron_daily.js b/src/plugins/es_ui_shared/public/components/cron_editor/cron_daily.js
@@ -22,29 +22,14 @@ import PropTypes from 'prop-types';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { i18n } from '@kbn/i18n';
 
-import {
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiFormRow,
-  EuiSelect,
-  EuiText,
-} from '@elastic/eui';
+import { EuiFlexGroup, EuiFlexItem, EuiFormRow, EuiSelect } from '@elastic/eui';
 
-export const CronDaily = ({
-  minute,
-  minuteOptions,
-  hour,
-  hourOptions,
-  onChange,
-}) => (
+export const CronDaily = ({ minute, minuteOptions, hour, hourOptions, onChange }) => (
   <Fragment>
     <EuiFormRow
-      label={(
-        <FormattedMessage
-          id="esUi.cronEditor.cronDaily.fieldTimeLabel"
-          defaultMessage="Time"
-        />
-      )}
+      label={
+        <FormattedMessage id="esUi.cronEditor.cronDaily.fieldTimeLabel" defaultMessage="Time" />
+      }
       fullWidth
       data-test-subj="cronFrequencyConfiguration"
     >
@@ -54,20 +39,13 @@ export const CronDaily = ({
             options={hourOptions}
             value={hour}
             aria-label={i18n.translate('esUi.cronEditor.cronDaily.hourSelectLabel', {
-              defaultMessage: 'Hour'
+              defaultMessage: 'Hour',
             })}
             onChange={e => onChange({ hour: e.target.value })}
             fullWidth
-            prepend={(
-              <EuiText size="xs">
-                <strong>
-                  <FormattedMessage
-                    id="esUi.cronEditor.cronDaily.fieldHour.textAtLabel"
-                    defaultMessage="At"
-                  />
-                </strong>
-              </EuiText>
-            )}
+            prepend={i18n.translate('esUi.cronEditor.cronDaily.fieldHour.textAtLabel', {
+              defaultMessage: 'At',
+            })}
             data-test-subj="cronFrequencyDailyHourSelect"
           />
         </EuiFlexItem>
@@ -77,17 +55,11 @@ export const CronDaily = ({
             options={minuteOptions}
             value={minute}
             aria-label={i18n.translate('esUi.cronEditor.cronDaily.minuteSelectLabel', {
-              defaultMessage: 'Minute'
+              defaultMessage: 'Minute',
             })}
             onChange={e => onChange({ minute: e.target.value })}
             fullWidth
-            prepend={(
-              <EuiText size="xs">
-                <strong>
-                  :
-                </strong>
-              </EuiText>
-            )}
+            prepend=":"
             data-test-subj="cronFrequencyDailyMinuteSelect"
           />
         </EuiFlexItem>

diff --git a/src/plugins/es_ui_shared/public/components/cron_editor/cron_editor.js b/src/plugins/es_ui_shared/public/components/cron_editor/cron_editor.js
@@ -21,12 +21,9 @@ import React, { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { padLeft } from 'lodash';
 import { FormattedMessage } from '@kbn/i18n/react';
+import { i18n } from '@kbn/i18n';
 
-import {
-  EuiSelect,
-  EuiText,
-  EuiFormRow,
-} from '@elastic/eui';
+import { EuiSelect, EuiFormRow } from '@elastic/eui';
 
 import {
   getOrdinalValue,
@@ -81,25 +78,32 @@ const MONTH_OPTIONS = makeSequence(1, 12).map(value => ({
   text: getMonthName(value - 1),
 }));
 
-const UNITS = [{
-  value: MINUTE,
-  text: 'minute',
-}, {
-  value: HOUR,
-  text: 'hour',
-}, {
-  value: DAY,
-  text: 'day',
-}, {
-  value: WEEK,
-  text: 'week',
-}, {
-  value: MONTH,
-  text: 'month',
-}, {
-  value: YEAR,
-  text: 'year',
-}];
+const UNITS = [
+  {
+    value: MINUTE,
+    text: 'minute',
+  },
+  {
+    value: HOUR,
+    text: 'hour',
+  },
+  {
+    value: DAY,
+    text: 'day',
+  },
+  {
+    value: WEEK,
+    text: 'week',
+  },
+  {
+    value: MONTH,
+    text: 'month',
+  },
+  {
+    value: YEAR,
+    text: 'year',
+  },
+];
 
 const frequencyToFieldsMap = {
   [MINUTE]: {},
@@ -185,7 +189,7 @@ export class CronEditor extends Component {
     frequency: PropTypes.string.isRequired,
     cronExpression: PropTypes.string.isRequired,
     onChange: PropTypes.func.isRequired,
-  }
+  };
 
   static getDerivedStateFromProps(props) {
     const { cronExpression } = props;
@@ -209,12 +213,15 @@ export class CronEditor extends Component {
 
     // Update fields which aren't editable with acceptable baseline values.
     const editableFields = Object.keys(frequencyToFieldsMap[frequency]);
-    const inheritedFields = editableFields.reduce((baselineFields, field) => {
-      if (fieldToPreferredValueMap[field] != null) {
-        baselineFields[field] = fieldToPreferredValueMap[field];
-      }
-      return baselineFields;
-    }, { ...frequencyToBaselineFieldsMap[frequency] });
+    const inheritedFields = editableFields.reduce(
+      (baselineFields, field) => {
+        if (fieldToPreferredValueMap[field] != null) {
+          baselineFields[field] = fieldToPreferredValueMap[field];
+        }
+        return baselineFields;
+      },
+      { ...frequencyToBaselineFieldsMap[frequency] }
+    );
 
     const newCronExpression = cronPartsToExpression(inheritedFields);
 
@@ -231,17 +238,20 @@ export class CronEditor extends Component {
     const editableFields = Object.keys(frequencyToFieldsMap[frequency]);
     const newFieldToPreferredValueMap = {};
 
-    const editedFields = editableFields.reduce((accumFields, field) => {
-      if (fields[field] !== undefined) {
-        accumFields[field] = fields[field];
-        // Once the user touches a field, we want to persist its value as the user changes
-        // the cron frequency.
-        newFieldToPreferredValueMap[field] = fields[field];
-      } else {
-        accumFields[field] = this.state[field];
-      }
-      return accumFields;
-    }, { ...frequencyToBaselineFieldsMap[frequency] });
+    const editedFields = editableFields.reduce(
+      (accumFields, field) => {
+        if (fields[field] !== undefined) {
+          accumFields[field] = fields[field];
+          // Once the user touches a field, we want to persist its value as the user changes
+          // the cron frequency.
+          newFieldToPreferredValueMap[field] = fields[field];
+        } else {
+          accumFields[field] = this.state[field];
+        }
+        return accumFields;
+      },
+      { ...frequencyToBaselineFieldsMap[frequency] }
+    );
 
     const newCronExpression = cronPartsToExpression(editedFields);
 
@@ -251,20 +261,14 @@ export class CronEditor extends Component {
       fieldToPreferredValueMap: {
         ...fieldToPreferredValueMap,
         ...newFieldToPreferredValueMap,
-      }
+      },
     });
   };
 
   renderForm() {
     const { frequency } = this.props;
 
-    const {
-      minute,
-      hour,
-      day,
-      date,
-      month,
-    } = this.state;
+    const { minute, hour, day, date, month } = this.state;
 
     switch (frequency) {
       case MINUTE:
@@ -342,29 +346,19 @@ export class CronEditor extends Component {
     return (
       <Fragment>
         <EuiFormRow
-          label={(
-            <FormattedMessage
-              id="esUi.cronEditor.fieldFrequencyLabel"
-              defaultMessage="Frequency"
-            />
-          )}
+          label={
+            <FormattedMessage id="esUi.cronEditor.fieldFrequencyLabel" defaultMessage="Frequency" />
+          }
           fullWidth
         >
           <EuiSelect
             options={UNITS}
             value={frequency}
             onChange={e => this.onChangeFrequency(e.target.value)}
             fullWidth
-            prepend={(
-              <EuiText size="xs">
-                <strong>
-                  <FormattedMessage
-                    id="esUi.cronEditor.textEveryLabel"
-                    defaultMessage="Every"
-                  />
-                </strong>
-              </EuiText>
-            )}
+            prepend={i18n.translate('esUi.cronEditor.textEveryLabel', {
+              defaultMessage: 'Every',
+            })}
             data-test-subj="cronFrequencySelect"
           />
         </EuiFormRow>