Upgrade EUI to v14.9.0 (elastic#49678)

* eui to 14.9.0 * euiswitch updtates * misc snapshot * x-pack functional fixes * more euiswitch functional test fixes * label-less switches for spaces management * more euiswitch fixes * telemetry form a11y * snapshot update * label updates * more switch updates * lint
chrisronline · Nov 14, 2019 · faf77b2 · faf77b2
1 parent 8bbb602
commit faf77b2
Show file tree

Hide file tree

Showing 62 changed files with 542 additions and 435 deletions.
diff --git a/package.json b/package.json
@@ -109,7 +109,7 @@
  "@elastic/charts": "^14.0.0",
  "@elastic/datemath": "5.0.2",
  "@elastic/ems-client": "1.0.5",
- "@elastic/eui": "14.8.0",
+ "@elastic/eui": "14.9.0",
  "@elastic/filesaver": "1.1.2",
  "@elastic/good": "8.1.1-kibana2",
  "@elastic/numeral": "2.3.3",

diff --git a/src/legacy/core_plugins/data/public/filter/filter_bar/filter_editor/index.tsx b/src/legacy/core_plugins/data/public/filter/filter_bar/filter_editor/index.tsx
@@ -30,6 +30,7 @@ import {
  EuiPopoverTitle,
  EuiSpacer,
  EuiSwitch,
+ EuiSwitchEvent,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage, InjectedIntl, injectI18n } from '@kbn/i18n/react';
@@ -431,7 +432,7 @@ class FilterEditorUI extends Component<Props, State> {
  this.setState({ selectedOperator, params });
  };
 
- private onCustomLabelSwitchChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+ private onCustomLabelSwitchChange = (event: EuiSwitchEvent) => {
  const useCustomLabel = event.target.checked;
  const customLabel = event.target.checked ? '' : null;
  this.setState({ useCustomLabel, customLabel });

diff --git a/...egacy/core_plugins/input_control_vis/public/components/editor/list_control_editor.test.js b/...egacy/core_plugins/input_control_vis/public/components/editor/list_control_editor.test.js
@@ -236,7 +236,7 @@ test('handleCheckboxOptionChange - multiselect', async () => {
  component.update();
 
  const checkbox = findTestSubject(component, 'listControlMultiselectInput');
- checkbox.simulate('change', { target: { checked: true } });
+ checkbox.simulate('click');
  sinon.assert.notCalled(handleFieldNameChange);
  sinon.assert.notCalled(handleIndexPatternChange);
  sinon.assert.notCalled(handleNumberOptionChange);
@@ -247,7 +247,9 @@ test('handleCheckboxOptionChange - multiselect', async () => {
  expectedControlIndex,
  expectedOptionName,
  sinon.match((evt) => {
- if (evt.target.checked === true) {
+ // Synthetic `evt.target.checked` does not get altered by EuiSwitch,
+ // but its aria attribute is correctly updated
+ if (evt.target.getAttribute('aria-checked') === 'true') {
  return true;
  }
  return false;

diff --git a/src/legacy/core_plugins/input_control_vis/public/components/editor/options_tab.test.js b/src/legacy/core_plugins/input_control_vis/public/components/editor/options_tab.test.js
@@ -47,26 +47,26 @@ describe('OptionsTab', () => {
 
  it('should update updateFiltersOnChange', () => {
  const component = mountWithIntl(<OptionsTab {...props} />);
- const checkbox = component.find('[data-test-subj="inputControlEditorUpdateFiltersOnChangeCheckbox"] input[type="checkbox"]');
- checkbox.simulate('change', { target: { checked: true } });
+ const checkbox = component.find('[data-test-subj="inputControlEditorUpdateFiltersOnChangeCheckbox"] button');
+ checkbox.simulate('click');
 
  expect(props.setValue).toHaveBeenCalledTimes(1);
  expect(props.setValue).toHaveBeenCalledWith('updateFiltersOnChange', true);
  });
 
  it('should update useTimeFilter', () => {
  const component = mountWithIntl(<OptionsTab {...props} />);
- const checkbox = component.find('[data-test-subj="inputControlEditorUseTimeFilterCheckbox"] input[type="checkbox"]');
- checkbox.simulate('change', { target: { checked: true } });
+ const checkbox = component.find('[data-test-subj="inputControlEditorUseTimeFilterCheckbox"] button');
+ checkbox.simulate('click');
 
  expect(props.setValue).toHaveBeenCalledTimes(1);
  expect(props.setValue).toHaveBeenCalledWith('useTimeFilter', true);
  });
 
  it('should update pinFilters', () => {
  const component = mountWithIntl(<OptionsTab {...props} />);
- const checkbox = component.find('[data-test-subj="inputControlEditorPinFiltersCheckbox"] input[type="checkbox"]');
- checkbox.simulate('change', { target: { checked: true } });
+ const checkbox = component.find('[data-test-subj="inputControlEditorPinFiltersCheckbox"] button');
+ checkbox.simulate('click');
 
  expect(props.setValue).toHaveBeenCalledTimes(1);
  expect(props.setValue).toHaveBeenCalledWith('pinFilters', true);

diff --git a/...re_plugins/kibana/public/discover/components/field_chooser/discover_field_search.test.tsx b/...re_plugins/kibana/public/discover/components/field_chooser/discover_field_search.test.tsx
@@ -121,7 +121,7 @@ describe('DiscoverFieldSearch', () => {
  // @ts-ignore
  (aggregtableButtonGroup.props() as EuiButtonGroupProps).onChange('aggregatable-true', null);
  });
- missingSwitch.simulate('change', { target: { value: false } });
+ missingSwitch.simulate('click');
  expect(onChange).toBeCalledTimes(2);
  });
 

diff --git a/...cy/core_plugins/kibana/public/discover/components/field_chooser/discover_field_search.tsx b/...cy/core_plugins/kibana/public/discover/components/field_chooser/discover_field_search.tsx
@@ -29,6 +29,7 @@ import {
  EuiPopoverTitle,
  EuiSelect,
  EuiSwitch,
+ EuiSwitchEvent,
  EuiForm,
  EuiFormRow,
  EuiButtonGroup,
@@ -154,7 +155,7 @@ export function DiscoverFieldSearch({ onChange, value, types }: Props) {
  setActiveFiltersCount(activeFiltersCount + diff);
  };
 
- const handleMissingChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+ const handleMissingChange = (e: EuiSwitchEvent) => {
  const missingValue = e.target.checked;
  handleValueChange('missing', missingValue);
  };

diff --git a/...legacy/core_plugins/telemetry/public/components/__snapshots__/telemetry_form.test.js.snap b/...legacy/core_plugins/telemetry/public/components/__snapshots__/telemetry_form.test.js.snap
diff --git a/src/legacy/core_plugins/telemetry/public/components/telemetry_form.js b/src/legacy/core_plugins/telemetry/public/components/telemetry_form.js
@@ -33,6 +33,7 @@ import { getConfigTelemetryDesc, PRIVACY_STATEMENT_URL } from '../../common/cons
 import { OptInExampleFlyout } from './opt_in_details_component';
 import { Field } from 'ui/management';
 import { FormattedMessage } from '@kbn/i18n/react';
+import { i18n } from '@kbn/i18n';
 
 const SEARCH_TERMS = ['telemetry', 'usage', 'data', 'usage data'];
 
@@ -117,6 +118,7 @@ export class TelemetryForm extends Component {
  value: telemetryOptInProvider.getOptIn() || false,
  description: this.renderDescription(),
  defVal: false,
+ ariaName: i18n.translate('telemetry.provideUsageStatisticsLabel', { defaultMessage: 'Provide usage statistics' })
  }}
  save={this.toggleOptIn}
  clear={this.toggleOptIn}

diff --git a/src/legacy/ui/public/vis/editors/default/controls/auto_precision.tsx b/src/legacy/ui/public/vis/editors/default/controls/auto_precision.tsx
@@ -23,7 +23,7 @@ import { EuiSwitch, EuiFormRow } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { AggParamEditorProps } from '..';
 
-function AutoPrecisionParamEditor({ value, setValue }: AggParamEditorProps<boolean>) {
+function AutoPrecisionParamEditor({ value = false, setValue }: AggParamEditorProps<boolean>) {
  const label = i18n.translate('common.ui.aggTypes.changePrecisionLabel', {
  defaultMessage: 'Change precision on map zoom',
  });

diff --git a/src/legacy/ui/public/vis/editors/default/controls/switch.tsx b/src/legacy/ui/public/vis/editors/default/controls/switch.tsx
@@ -30,7 +30,7 @@ interface SwitchParamEditorProps extends AggParamEditorProps<boolean> {
 }
 
 function SwitchParamEditor({
- value,
+ value = false,
  setValue,
  dataTestSubj,
  displayToolTip,

diff --git a/src/legacy/ui/public/vis/editors/default/controls/use_geocentroid.tsx b/src/legacy/ui/public/vis/editors/default/controls/use_geocentroid.tsx
@@ -23,7 +23,7 @@ import { EuiSwitch, EuiFormRow } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { AggParamEditorProps } from '..';
 
-function UseGeocentroidParamEditor({ value, setValue }: AggParamEditorProps<boolean>) {
+function UseGeocentroidParamEditor({ value = false, setValue }: AggParamEditorProps<boolean>) {
  const label = i18n.translate('common.ui.aggTypes.placeMarkersOffGridLabel', {
  defaultMessage: 'Place markers off grid (use geocentroid)',
  });

diff --git a/src/plugins/embeddable/public/tests/customize_panel_modal.test.tsx b/src/plugins/embeddable/public/tests/customize_panel_modal.test.tsx
@@ -173,7 +173,7 @@ test('Can set title to an empty string', async () => {
  );
 
  const inputField = findTestSubject(component, 'customizePanelHideTitle');
- inputField.simulate('change');
+ inputField.simulate('click');
 
  findTestSubject(component, 'saveNewTitleButton').simulate('click');
  expect(inputField.props().value).toBeUndefined();

diff --git a/src/plugins/es_ui_shared/static/forms/components/fields/toggle_field.tsx b/src/plugins/es_ui_shared/static/forms/components/fields/toggle_field.tsx
@@ -18,7 +18,7 @@
  */
 
 import React from 'react';
-import { EuiFormRow, EuiSwitch } from '@elastic/eui';
+import { EuiFormRow, EuiSwitch, EuiSwitchEvent } from '@elastic/eui';
 
 import { FieldHook } from '../../hook_form_lib';
 import { getFieldValidityAndErrorMessage } from '../helpers';
@@ -33,6 +33,14 @@ interface Props {
 export const ToggleField = ({ field, euiFieldProps = {}, ...rest }: Props) => {
  const { isInvalid, errorMessage } = getFieldValidityAndErrorMessage(field);
 
+ // Shim for sufficient overlap between EuiSwitchEvent and FieldHook[onChange] event
+ const onChange = (e: EuiSwitchEvent) => {
+ const event = ({ ...e, value: `${e.target.checked}` } as unknown) as React.ChangeEvent<{
+ value: string;
+ }>;
+ field.onChange(event);
+ };
+
  return (
  <EuiFormRow
  helpText={field.helpText}
@@ -45,7 +53,7 @@ export const ToggleField = ({ field, euiFieldProps = {}, ...rest }: Props) => {
  <EuiSwitch
  label={field.label}
  checked={field.value as boolean}
- onChange={field.onChange}
+ onChange={onChange}
  data-test-subj="input"
  {...euiFieldProps}
  />

diff --git a/src/plugins/kibana_react/public/saved_objects/saved_object_save_modal.tsx b/src/plugins/kibana_react/public/saved_objects/saved_object_save_modal.tsx
@@ -32,6 +32,7 @@ import {
  EuiOverlayMask,
  EuiSpacer,
  EuiSwitch,
+ EuiSwitchEvent,
  EuiTextArea,
 } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
@@ -227,7 +228,7 @@ export class SavedObjectSaveModal extends React.Component<Props, State> {
  });
  };
 
- private onCopyOnSaveChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+ private onCopyOnSaveChange = (event: EuiSwitchEvent) => {
  this.setState({
  copyOnSave: event.target.checked,
  });

diff --git a/test/functional/apps/visualize/input_control_vis/input_control_options.js b/test/functional/apps/visualize/input_control_vis/input_control_options.js
@@ -133,13 +133,13 @@ export default function ({ getService, getPageObjects }) {
  describe('updateFiltersOnChange is true', () => {
  before(async () => {
  await PageObjects.visualize.clickVisEditorTab('options');
- await PageObjects.visualize.checkCheckbox('inputControlEditorUpdateFiltersOnChangeCheckbox');
+ await PageObjects.visualize.checkSwitch('inputControlEditorUpdateFiltersOnChangeCheckbox');
  await PageObjects.visualize.clickGo();
  });
 
  after(async () => {
  await PageObjects.visualize.clickVisEditorTab('options');
- await PageObjects.visualize.uncheckCheckbox('inputControlEditorUpdateFiltersOnChangeCheckbox');
+ await PageObjects.visualize.uncheckSwitch('inputControlEditorUpdateFiltersOnChangeCheckbox');
  await PageObjects.visualize.clickGo();
  });
 

diff --git a/test/functional/page_objects/dashboard_page.js b/test/functional/page_objects/dashboard_page.js
@@ -347,7 +347,7 @@ export function DashboardPageProvider({ getService, getPageObjects }) {
 
  async clickSave() {
  log.debug('DashboardPage.clickSave');
- await testSubjects.clickWhenNotDisabled('confirmSaveSavedObjectButton');
+ await testSubjects.click('confirmSaveSavedObjectButton');
  }
 
  async pressEnterKey() {
@@ -543,19 +543,21 @@ export function DashboardPageProvider({ getService, getPageObjects }) {
  async setSaveAsNewCheckBox(checked) {
  log.debug('saveAsNewCheckbox: ' + checked);
  const saveAsNewCheckbox = await testSubjects.find('saveAsNewCheckbox');
- const isAlreadyChecked = (await saveAsNewCheckbox.getAttribute('checked') === 'true');
+ const isAlreadyChecked = (await saveAsNewCheckbox.getAttribute('aria-checked') === 'true');
  if (isAlreadyChecked !== checked) {
  log.debug('Flipping save as new checkbox');
+ const saveAsNewCheckbox = await testSubjects.find('saveAsNewCheckbox');
  await retry.try(() => saveAsNewCheckbox.click());
  }
  }
 
  async setStoreTimeWithDashboard(checked) {
  log.debug('Storing time with dashboard: ' + checked);
  const storeTimeCheckbox = await testSubjects.find('storeTimeWithDashboard');
- const isAlreadyChecked = (await storeTimeCheckbox.getAttribute('checked') === 'true');
+ const isAlreadyChecked = (await storeTimeCheckbox.getAttribute('aria-checked') === 'true');
  if (isAlreadyChecked !== checked) {
  log.debug('Flipping store time checkbox');
+ const storeTimeCheckbox = await testSubjects.find('storeTimeWithDashboard');
  await retry.try(() => storeTimeCheckbox.click());
  }
  }

diff --git a/test/functional/page_objects/visualize_page.js b/test/functional/page_objects/visualize_page.js
@@ -372,6 +372,28 @@ export function VisualizePageProvider({ getService, getPageObjects, updateBaseli
  }
  }
 
+ async isSwitchChecked(selector) {
+ const checkbox = await testSubjects.find(selector);
+ const isChecked = await checkbox.getAttribute('aria-checked');
+ return isChecked === 'true';
+ }
+
+ async checkSwitch(selector) {
+ const isChecked = await this.isSwitchChecked(selector);
+ if (!isChecked) {
+ log.debug(`checking switch ${selector}`);
+ await testSubjects.click(selector);
+ }
+ }
+
+ async uncheckSwitch(selector) {
+ const isChecked = await this.isSwitchChecked(selector);
+ if (isChecked) {
+ log.debug(`unchecking switch ${selector}`);
+ await testSubjects.click(selector);
+ }
+ }
+
  async setSelectByOptionText(selectId, optionText) {
  const selectField = await find.byCssSelector(`#${selectId}`);
  const options = await find.allByCssSelector(`#${selectId} > option`);
@@ -1009,7 +1031,7 @@ export function VisualizePageProvider({ getService, getPageObjects, updateBaseli
 
  async setIsFilteredByCollarCheckbox(value = true) {
  await retry.try(async () => {
- const isChecked = await this.isChecked('isFilteredByCollarCheckbox');
+ const isChecked = await this.isSwitchChecked('isFilteredByCollarCheckbox');
  if (isChecked !== value) {
  await testSubjects.click('isFilteredByCollarCheckbox');
  throw new Error('isFilteredByCollar not set correctly');

diff --git a/test/functional/services/saved_query_management_component.ts b/test/functional/services/saved_query_management_component.ts
@@ -118,15 +118,17 @@ export function SavedQueryManagementComponentProvider({ getService }: FtrProvide
  await testSubjects.setValue('saveQueryFormDescription', description);
 
  const currentIncludeFiltersValue =
- (await testSubjects.getAttribute('saveQueryFormIncludeFiltersOption', 'checked')) ===
+ (await testSubjects.getAttribute('saveQueryFormIncludeFiltersOption', 'aria-checked')) ===
  'true';
  if (currentIncludeFiltersValue !== includeFilters) {
  await testSubjects.click('saveQueryFormIncludeFiltersOption');
  }
 
  const currentIncludeTimeFilterValue =
- (await testSubjects.getAttribute('saveQueryFormIncludeTimeFilterOption', 'checked')) ===
- 'true';
+ (await testSubjects.getAttribute(
+ 'saveQueryFormIncludeTimeFilterOption',
+ 'aria-checked'
+ )) === 'true';
  if (currentIncludeTimeFilterValue !== includeTimeFilter) {
  await testSubjects.click('saveQueryFormIncludeTimeFilterOption');
  }

diff --git a/test/interpreter_functional/plugins/kbn_tp_run_pipeline/package.json b/test/interpreter_functional/plugins/kbn_tp_run_pipeline/package.json
@@ -7,7 +7,7 @@
  },
  "license": "Apache-2.0",
  "dependencies": {
- "@elastic/eui": "14.8.0",
+ "@elastic/eui": "14.9.0",
  "react": "^16.8.0",
  "react-dom": "^16.8.0"
  }

diff --git a/test/plugin_functional/plugins/kbn_tp_custom_visualizations/package.json b/test/plugin_functional/plugins/kbn_tp_custom_visualizations/package.json
@@ -7,7 +7,7 @@
  },
  "license": "Apache-2.0",
  "dependencies": {
- "@elastic/eui": "14.8.0",
+ "@elastic/eui": "14.9.0",
  "react": "^16.8.0"
  }
 }
diff --git a/test/plugin_functional/plugins/kbn_tp_embeddable_explorer/package.json b/test/plugin_functional/plugins/kbn_tp_embeddable_explorer/package.json
@@ -8,7 +8,7 @@
  },
  "license": "Apache-2.0",
  "dependencies": {
- "@elastic/eui": "14.8.0",
+ "@elastic/eui": "14.9.0",
  "react": "^16.8.0"
  },
  "scripts": {

diff --git a/test/plugin_functional/plugins/kbn_tp_sample_panel_action/package.json b/test/plugin_functional/plugins/kbn_tp_sample_panel_action/package.json
@@ -8,7 +8,7 @@
  },
  "license": "Apache-2.0",
  "dependencies": {
- "@elastic/eui": "14.8.0",
+ "@elastic/eui": "14.9.0",
  "react": "^16.8.0"
  },
  "scripts": {