Upgrade EUI to v14.9.0

package.json

@@ -109,7 +109,7 @@
     "@elastic/charts": "^13.5.12",
     "@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",

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 { FieldFilter, Filter } from '@kbn/es-query';
 import { i18n } from '@kbn/i18n';
@@ -429,7 +430,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 });

src/legacy/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;

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);

src/legacy/core_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);
   });
 

src/legacy/core_plugins/kibana/public/discover/components/field_chooser/discover_field_search.tsx

@@ -29,6 +29,7 @@ import {
   EuiPopoverTitle,
   EuiSelect,
   EuiSwitch,
+  EuiSwitchEvent,
   EuiForm,
   EuiFormRow,
   EuiButtonGroup,
@@ -153,7 +154,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);
   };

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',
   });

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,

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)',
   });

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();

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}
       />

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,
     });

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();
       });
 

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());
       }
     }

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`);

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');
       }

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"
   }

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"
   }
 }

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": {

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": {

test/plugin_functional/plugins/kbn_tp_visualize_embedding/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"
   }