From 096dda6f3460eee926661c7271a397d874e739a5 Mon Sep 17 00:00:00 2001 From: Chandler Prall Date: Thu, 5 Mar 2020 12:27:52 -0700 Subject: [PATCH] Upgrade EUI to v20.0.2 (#59199) * Updated EUI to 20.0.1; updated typescript usage * snapshots * Upgrade to eui 20.0.2, fix one more type * PR feedback * Update EUI icon usage to the correct types * Updated with master --- package.json | 2 +- packages/kbn-ui-shared-deps/package.json | 2 +- .../public/components/editor/field_select.tsx | 8 +- .../public/components/vis/list_control.tsx | 2 +- .../public/input_control_vis_type.ts | 2 +- .../public/components/agg_select.tsx | 4 +- .../public/components/controls/field.test.tsx | 2 +- .../public/components/controls/field.tsx | 4 +- .../components/controls/time_interval.tsx | 6 +- .../public/components/timelion_interval.tsx | 4 +- .../__snapshots__/icon_select.test.js.snap | 1 + .../splits/__snapshots__/terms.test.js.snap | 1 + .../vis_type_vislib/public/heatmap.ts | 2 +- .../field/__snapshots__/field.test.tsx.snap | 12 - .../components/field/field.test.tsx | 6 +- .../management_app/components/field/field.tsx | 15 +- .../filter_editor/generic_combo_box.tsx | 6 +- .../index_pattern_select.tsx | 2 +- .../components/fields/combobox_field.tsx | 4 +- .../static/forms/helpers/de_serializers.ts | 6 +- .../min_selectable_selection.ts | 4 +- .../static/forms/helpers/serializers.ts | 4 +- .../inspector_panel.test.tsx.snap | 32 +- .../plugins/kbn_tp_run_pipeline/package.json | 2 +- .../kbn_tp_custom_visualizations/package.json | 2 +- .../self_changing_vis/self_changing_vis.js | 2 +- .../kbn_tp_embeddable_explorer/package.json | 2 +- .../kbn_tp_sample_panel_action/package.json | 2 +- typings/@elastic/eui/index.d.ts | 1 - .../public/components/inputs/code_editor.tsx | 2 - .../asset_manager/asset_manager.tsx | 3 +- .../components/asset_manager/asset_modal.tsx | 2 +- .../custom_element_modal.tsx | 5 +- .../keyboard_shortcuts_doc.stories.storyshot | 2096 +++++++++-------- .../components/field_manager/field_editor.tsx | 13 +- .../dimension_panel/field_select.tsx | 8 +- .../create_analytics_form.tsx | 12 +- .../hooks/use_create_analytics_form/state.ts | 6 +- .../__snapshots__/overrides.test.js.snap | 3 + .../__snapshots__/editor.test.tsx.snap | 4 + .../components/custom_url_editor/editor.tsx | 10 +- .../ml_job_editor/ml_job_editor.tsx | 4 +- .../common/components/job_groups_input.tsx | 12 +- .../time_field/time_field_select.tsx | 11 +- .../calendars/calendars_selection.tsx | 6 +- .../components/groups/groups_input.tsx | 12 +- .../advanced_detector_modal.tsx | 30 +- .../components/agg_select/agg_select.tsx | 10 +- .../categorization_field_select.tsx | 8 +- .../influencers/influencers_select.tsx | 8 +- .../split_field/split_field_select.tsx | 8 +- .../summary_count_field_select.tsx | 8 +- .../entity_control/entity_control.tsx | 12 +- .../report_info_button.test.tsx.snap | 96 +- .../components/edit_data_provider/helpers.tsx | 14 +- .../components/edit_data_provider/index.tsx | 12 +- .../timeline/search_super_select/index.tsx | 8 +- .../detection_engine/rules/all/columns.tsx | 2 +- .../components/import_rule_modal/index.tsx | 4 +- .../detection_engine/rules/details/index.tsx | 2 +- .../aggregation_dropdown/dropdown.tsx | 6 +- .../components/step_define/common.ts | 6 +- .../ping_list/__tests__/ping_list.test.tsx | 4 +- x-pack/package.json | 2 +- .../add_log_column_popover.tsx | 8 +- .../top_categories/datasets_selector.tsx | 4 +- .../remote_cluster_form.test.js.snap | 4 +- .../role_combo_box/role_combo_box_option.tsx | 4 +- .../json_rule_editor.test.tsx | 22 +- .../cluster_privileges.test.tsx.snap | 1 + .../elasticsearch_privileges.test.tsx.snap | 1 + .../index_privilege_form.test.tsx.snap | 2 + .../privileges/es/index_privilege_form.tsx | 10 +- .../space_selector.tsx | 8 +- .../policy_form/steps/step_settings.tsx | 10 +- .../type_settings/hdfs_settings.tsx | 17 +- .../steps/step_logistics.tsx | 10 +- .../steps/step_review.tsx | 10 +- .../steps/step_settings.tsx | 10 +- .../policy_details/tabs/tab_history.tsx | 17 +- .../type_details/default_details.tsx | 17 +- .../customize_space_avatar.test.tsx.snap | 9 +- .../customize_space_avatar.tsx | 7 +- .../builtin_action_types/webhook.tsx | 2 - .../threshold/expression.tsx | 6 +- .../common/expression_items/of.test.tsx | 56 +- .../json_watch_edit_simulate.tsx | 1 - .../action_fields/webhook_action_fields.tsx | 1 - .../threshold_watch_edit.tsx | 4 +- x-pack/typings/@elastic/eui/index.d.ts | 1 - yarn.lock | 16 +- 91 files changed, 1436 insertions(+), 1413 deletions(-) diff --git a/package.json b/package.json index 2c401724c72cd..9f12f04223103 100644 --- a/package.json +++ b/package.json @@ -120,7 +120,7 @@ "@elastic/charts": "^17.1.1", "@elastic/datemath": "5.0.2", "@elastic/ems-client": "7.6.0", - "@elastic/eui": "19.0.0", + "@elastic/eui": "20.0.2", "@elastic/filesaver": "1.1.2", "@elastic/good": "8.1.1-kibana2", "@elastic/numeral": "2.4.0", diff --git a/packages/kbn-ui-shared-deps/package.json b/packages/kbn-ui-shared-deps/package.json index e9ad227b235fa..65fd837ad17c2 100644 --- a/packages/kbn-ui-shared-deps/package.json +++ b/packages/kbn-ui-shared-deps/package.json @@ -11,7 +11,7 @@ "devDependencies": { "@elastic/charts": "^17.1.1", "abortcontroller-polyfill": "^1.4.0", - "@elastic/eui": "19.0.0", + "@elastic/eui": "20.0.2", "@kbn/babel-preset": "1.0.0", "@kbn/dev-utils": "1.0.0", "@kbn/i18n": "1.0.0", diff --git a/src/legacy/core_plugins/input_control_vis/public/components/editor/field_select.tsx b/src/legacy/core_plugins/input_control_vis/public/components/editor/field_select.tsx index bde2f09ab0a47..68cca9bf6c4f2 100644 --- a/src/legacy/core_plugins/input_control_vis/public/components/editor/field_select.tsx +++ b/src/legacy/core_plugins/input_control_vis/public/components/editor/field_select.tsx @@ -22,13 +22,13 @@ import React, { Component } from 'react'; import { InjectedIntlProps } from 'react-intl'; import { injectI18n, FormattedMessage } from '@kbn/i18n/react'; -import { EuiFormRow, EuiComboBox, EuiComboBoxOptionProps } from '@elastic/eui'; +import { EuiFormRow, EuiComboBox, EuiComboBoxOptionOption } from '@elastic/eui'; import { IIndexPattern, IFieldType } from '../../../../../../plugins/data/public'; interface FieldSelectUiState { isLoading: boolean; - fields: Array>; + fields: Array>; indexPatternId: string; } @@ -105,7 +105,7 @@ class FieldSelectUi extends Component { } const fieldsByTypeMap = new Map(); - const fields: Array> = []; + const fields: Array> = []; indexPattern.fields .filter(this.props.filterField ?? (() => true)) .forEach((field: IFieldType) => { @@ -135,7 +135,7 @@ class FieldSelectUi extends Component { }); }, 300); - onChange = (selectedOptions: Array>) => { + onChange = (selectedOptions: Array>) => { this.props.onChange(_.get(selectedOptions, '0.value')); }; diff --git a/src/legacy/core_plugins/input_control_vis/public/components/vis/list_control.tsx b/src/legacy/core_plugins/input_control_vis/public/components/vis/list_control.tsx index d01cef15ea41b..6ded66917a3fd 100644 --- a/src/legacy/core_plugins/input_control_vis/public/components/vis/list_control.tsx +++ b/src/legacy/core_plugins/input_control_vis/public/components/vis/list_control.tsx @@ -76,7 +76,7 @@ class ListControlUi extends PureComponent { + setTextInputRef = (ref: HTMLInputElement | null) => { this.textInput = ref; }; diff --git a/src/legacy/core_plugins/input_control_vis/public/input_control_vis_type.ts b/src/legacy/core_plugins/input_control_vis/public/input_control_vis_type.ts index 9473ea5a20b35..1bdff06b3a59f 100644 --- a/src/legacy/core_plugins/input_control_vis/public/input_control_vis_type.ts +++ b/src/legacy/core_plugins/input_control_vis/public/input_control_vis_type.ts @@ -34,7 +34,7 @@ export function createInputControlVisTypeDefinition(deps: InputControlVisDepende title: i18n.translate('inputControl.register.controlsTitle', { defaultMessage: 'Controls', }), - icon: 'visControls', + icon: 'controlsHorizontal', description: i18n.translate('inputControl.register.controlsDescription', { defaultMessage: 'Create interactive controls for easy dashboard manipulation.', }), diff --git a/src/legacy/core_plugins/vis_default_editor/public/components/agg_select.tsx b/src/legacy/core_plugins/vis_default_editor/public/components/agg_select.tsx index 9a408c2d98b22..4d969a2d8ec6c 100644 --- a/src/legacy/core_plugins/vis_default_editor/public/components/agg_select.tsx +++ b/src/legacy/core_plugins/vis_default_editor/public/components/agg_select.tsx @@ -19,7 +19,7 @@ import { get, has } from 'lodash'; import React, { useEffect, useCallback, useState } from 'react'; -import { EuiComboBox, EuiComboBoxOptionProps, EuiFormRow, EuiLink, EuiText } from '@elastic/eui'; +import { EuiComboBox, EuiComboBoxOptionOption, EuiFormRow, EuiLink, EuiText } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import { FormattedMessage } from '@kbn/i18n/react'; @@ -104,7 +104,7 @@ function DefaultEditorAggSelect({ const isValid = !!value && !errors.length && !isDirty; const onChange = useCallback( - (options: EuiComboBoxOptionProps[]) => { + (options: EuiComboBoxOptionOption[]) => { const selectedOption = get(options, '0.target'); if (selectedOption) { setValue(selectedOption as IAggType); diff --git a/src/legacy/core_plugins/vis_default_editor/public/components/controls/field.test.tsx b/src/legacy/core_plugins/vis_default_editor/public/components/controls/field.test.tsx index 36496c2800b64..186738d0f551c 100644 --- a/src/legacy/core_plugins/vis_default_editor/public/components/controls/field.test.tsx +++ b/src/legacy/core_plugins/vis_default_editor/public/components/controls/field.test.tsx @@ -29,7 +29,7 @@ import { FieldParamEditor, FieldParamEditorProps } from './field'; import { IAggConfig } from '../../legacy_imports'; function callComboBoxOnChange(comp: ReactWrapper, value: any = []) { - const comboBoxProps: EuiComboBoxProps = comp.find(EuiComboBox).props(); + const comboBoxProps = comp.find(EuiComboBox).props() as EuiComboBoxProps; if (comboBoxProps.onChange) { comboBoxProps.onChange(value); } diff --git a/src/legacy/core_plugins/vis_default_editor/public/components/controls/field.tsx b/src/legacy/core_plugins/vis_default_editor/public/components/controls/field.tsx index d605fb203f4d3..0ec00ab6f20f0 100644 --- a/src/legacy/core_plugins/vis_default_editor/public/components/controls/field.tsx +++ b/src/legacy/core_plugins/vis_default_editor/public/components/controls/field.tsx @@ -20,7 +20,7 @@ import { get } from 'lodash'; import React, { useEffect, useState, useCallback } from 'react'; -import { EuiComboBox, EuiComboBoxOptionProps, EuiFormRow } from '@elastic/eui'; +import { EuiComboBox, EuiComboBoxOptionOption, EuiFormRow } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import { IndexPatternField } from 'src/plugins/data/public'; @@ -55,7 +55,7 @@ function FieldParamEditor({ ? [{ label: value.displayName || value.name, target: value }] : []; - const onChange = (options: EuiComboBoxOptionProps[]) => { + const onChange = (options: EuiComboBoxOptionOption[]) => { const selectedOption: IndexPatternField = get(options, '0.target'); if (!(aggParam.required && !selectedOption)) { setValue(selectedOption); diff --git a/src/legacy/core_plugins/vis_default_editor/public/components/controls/time_interval.tsx b/src/legacy/core_plugins/vis_default_editor/public/components/controls/time_interval.tsx index 5da0d6462a8ba..ee3666b2ed441 100644 --- a/src/legacy/core_plugins/vis_default_editor/public/components/controls/time_interval.tsx +++ b/src/legacy/core_plugins/vis_default_editor/public/components/controls/time_interval.tsx @@ -19,14 +19,14 @@ import { get, find } from 'lodash'; import React, { useEffect } from 'react'; -import { EuiFormRow, EuiIconTip, EuiComboBox, EuiComboBoxOptionProps } from '@elastic/eui'; +import { EuiFormRow, EuiIconTip, EuiComboBox, EuiComboBoxOptionOption } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import { FormattedMessage } from '@kbn/i18n/react'; import { isValidInterval, AggParamOption } from '../../legacy_imports'; import { AggParamEditorProps } from '../agg_param_props'; -interface ComboBoxOption extends EuiComboBoxOptionProps { +interface ComboBoxOption extends EuiComboBoxOptionOption { key: string; } @@ -105,7 +105,7 @@ function TimeIntervalParamEditor({ } }; - const onChange = (opts: EuiComboBoxOptionProps[]) => { + const onChange = (opts: EuiComboBoxOptionOption[]) => { const selectedOpt: ComboBoxOption = get(opts, '0'); setValue(selectedOpt ? selectedOpt.key : ''); diff --git a/src/legacy/core_plugins/vis_type_timelion/public/components/timelion_interval.tsx b/src/legacy/core_plugins/vis_type_timelion/public/components/timelion_interval.tsx index 02783434bfdc2..13a57296bab7a 100644 --- a/src/legacy/core_plugins/vis_type_timelion/public/components/timelion_interval.tsx +++ b/src/legacy/core_plugins/vis_type_timelion/public/components/timelion_interval.tsx @@ -18,7 +18,7 @@ */ import React, { useMemo, useCallback } from 'react'; -import { EuiFormRow, EuiComboBox, EuiComboBoxOptionProps } from '@elastic/eui'; +import { EuiFormRow, EuiComboBox, EuiComboBoxOptionOption } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import { isValidEsInterval } from '../../../../core_plugins/data/common'; @@ -90,7 +90,7 @@ function TimelionInterval({ value, setValue, setValidity }: TimelionIntervalProp ); const onChange = useCallback( - (opts: Array>) => { + (opts: Array>) => { setValue((opts[0] && opts[0].value) || ''); }, [setValue] diff --git a/src/legacy/core_plugins/vis_type_timeseries/public/components/icon_select/__snapshots__/icon_select.test.js.snap b/src/legacy/core_plugins/vis_type_timeseries/public/components/icon_select/__snapshots__/icon_select.test.js.snap index fd22bcafb8df4..d269f61beefab 100644 --- a/src/legacy/core_plugins/vis_type_timeseries/public/components/icon_select/__snapshots__/icon_select.test.js.snap +++ b/src/legacy/core_plugins/vis_type_timeseries/public/components/icon_select/__snapshots__/icon_select.test.js.snap @@ -2,6 +2,7 @@ exports[`src/legacy/core_plugins/metrics/public/components/icon_select/icon_select.js should render and match a snapshot 1`] = ` ({ name: 'heatmap', title: i18n.translate('visTypeVislib.heatmap.heatmapTitle', { defaultMessage: 'Heat Map' }), - icon: 'visHeatmap', + icon: 'heatmap', description: i18n.translate('visTypeVislib.heatmap.heatmapDescription', { defaultMessage: 'Shade cells within a matrix', }), diff --git a/src/plugins/advanced_settings/public/management_app/components/field/__snapshots__/field.test.tsx.snap b/src/plugins/advanced_settings/public/management_app/components/field/__snapshots__/field.test.tsx.snap index dba1678339f24..88f30e03df052 100644 --- a/src/plugins/advanced_settings/public/management_app/components/field/__snapshots__/field.test.tsx.snap +++ b/src/plugins/advanced_settings/public/management_app/components/field/__snapshots__/field.test.tsx.snap @@ -1350,7 +1350,6 @@ exports[`Field for json setting should render as read only if saving is disabled "$blockScrolling": Infinity, } } - fullWidth={true} height="auto" isReadOnly={true} maxLines={30} @@ -1456,7 +1455,6 @@ exports[`Field for json setting should render as read only with help text if ove "$blockScrolling": Infinity, } } - fullWidth={true} height="auto" isReadOnly={true} maxLines={30} @@ -1538,7 +1536,6 @@ exports[`Field for json setting should render custom setting icon if it is custo "$blockScrolling": Infinity, } } - fullWidth={true} height="auto" isReadOnly={false} maxLines={30} @@ -1651,7 +1648,6 @@ exports[`Field for json setting should render default value if there is no user "$blockScrolling": Infinity, } } - fullWidth={true} height="auto" isReadOnly={false} maxLines={30} @@ -1740,7 +1736,6 @@ exports[`Field for json setting should render unsaved value if there are unsaved "$blockScrolling": Infinity, } } - fullWidth={true} height="auto" isReadOnly={false} maxLines={30} @@ -1864,7 +1859,6 @@ exports[`Field for json setting should render user value if there is user value "$blockScrolling": Infinity, } } - fullWidth={true} height="auto" isReadOnly={false} maxLines={30} @@ -1935,7 +1929,6 @@ exports[`Field for markdown setting should render as read only if saving is disa "$blockScrolling": Infinity, } } - fullWidth={true} height="auto" isReadOnly={true} maxLines={30} @@ -2038,7 +2031,6 @@ exports[`Field for markdown setting should render as read only with help text if "$blockScrolling": Infinity, } } - fullWidth={true} height="auto" isReadOnly={true} maxLines={30} @@ -2120,7 +2112,6 @@ exports[`Field for markdown setting should render custom setting icon if it is c "$blockScrolling": Infinity, } } - fullWidth={true} height="auto" isReadOnly={false} maxLines={30} @@ -2191,7 +2182,6 @@ exports[`Field for markdown setting should render default value if there is no u "$blockScrolling": Infinity, } } - fullWidth={true} height="auto" isReadOnly={false} maxLines={30} @@ -2280,7 +2270,6 @@ exports[`Field for markdown setting should render unsaved value if there are uns "$blockScrolling": Infinity, } } - fullWidth={true} height="auto" isReadOnly={false} maxLines={30} @@ -2397,7 +2386,6 @@ exports[`Field for markdown setting should render user value if there is user va "$blockScrolling": Infinity, } } - fullWidth={true} height="auto" isReadOnly={false} maxLines={30} diff --git a/src/plugins/advanced_settings/public/management_app/components/field/field.test.tsx b/src/plugins/advanced_settings/public/management_app/components/field/field.test.tsx index 8e41fed685898..356e38c799659 100644 --- a/src/plugins/advanced_settings/public/management_app/components/field/field.test.tsx +++ b/src/plugins/advanced_settings/public/management_app/components/field/field.test.tsx @@ -363,7 +363,7 @@ describe('Field', () => { (component.instance() as Field).getImageAsBase64 = ({}: Blob) => Promise.resolve(''); it('should be able to change value and cancel', async () => { - (component.instance() as Field).onImageChange([userValue]); + (component.instance() as Field).onImageChange(([userValue] as unknown) as FileList); expect(handleChange).toBeCalled(); await wrapper.setProps({ unsavedChanges: { @@ -387,7 +387,9 @@ describe('Field', () => { const updated = wrapper.update(); findTestSubject(updated, `advancedSetting-changeImage-${setting.name}`).simulate('click'); const newUserValue = `${userValue}=`; - await (component.instance() as Field).onImageChange([newUserValue]); + await (component.instance() as Field).onImageChange(([ + newUserValue, + ] as unknown) as FileList); expect(handleChange).toBeCalled(); }); diff --git a/src/plugins/advanced_settings/public/management_app/components/field/field.tsx b/src/plugins/advanced_settings/public/management_app/components/field/field.tsx index 18a1a365709d1..60d2b55dfceb4 100644 --- a/src/plugins/advanced_settings/public/management_app/components/field/field.tsx +++ b/src/plugins/advanced_settings/public/management_app/components/field/field.tsx @@ -90,7 +90,7 @@ export const getEditableValue = ( }; export class Field extends PureComponent { - private changeImageForm: EuiFilePicker | undefined = React.createRef(); + private changeImageForm = React.createRef(); getDisplayedDefaultValue( type: UiSettingsType, @@ -138,7 +138,7 @@ export class Field extends PureComponent { } } - onCodeEditorChange = (value: UiSettingsType) => { + onCodeEditorChange = (value: string) => { const { defVal, type } = this.props.setting; let newUnsavedValue; @@ -212,7 +212,9 @@ export class Field extends PureComponent { }); }; - onImageChange = async (files: any[]) => { + onImageChange = async (files: FileList | null) => { + if (files == null) return; + if (!files.length) { this.setState({ unsavedValue: null, @@ -278,9 +280,9 @@ export class Field extends PureComponent { }; cancelChangeImage = () => { - if (this.changeImageForm.current) { - this.changeImageForm.current.fileInput.value = null; - this.changeImageForm.current.handleChange({}); + if (this.changeImageForm.current?.fileInput) { + this.changeImageForm.current.fileInput.value = ''; + this.changeImageForm.current.handleChange(); } if (this.props.clearChange) { this.props.clearChange(this.props.setting.name); @@ -352,7 +354,6 @@ export class Field extends PureComponent { $blockScrolling: Infinity, }} showGutter={false} - fullWidth /> ); diff --git a/src/plugins/data/public/ui/filter_bar/filter_editor/generic_combo_box.tsx b/src/plugins/data/public/ui/filter_bar/filter_editor/generic_combo_box.tsx index 9d541af5a1d17..a5db8b66caa01 100644 --- a/src/plugins/data/public/ui/filter_bar/filter_editor/generic_combo_box.tsx +++ b/src/plugins/data/public/ui/filter_bar/filter_editor/generic_combo_box.tsx @@ -17,7 +17,7 @@ * under the License. */ -import { EuiComboBox, EuiComboBoxOptionProps } from '@elastic/eui'; +import { EuiComboBox, EuiComboBoxOptionOption } from '@elastic/eui'; import React from 'react'; export interface GenericComboBoxProps { @@ -38,7 +38,7 @@ export function GenericComboBox(props: GenericComboBoxProps) { const { options, selectedOptions, getLabel, onChange, ...otherProps } = props; const labels = options.map(getLabel); - const euiOptions: EuiComboBoxOptionProps[] = labels.map(label => ({ label })); + const euiOptions: EuiComboBoxOptionOption[] = labels.map(label => ({ label })); const selectedEuiOptions = selectedOptions .filter(option => { return options.indexOf(option) !== -1; @@ -47,7 +47,7 @@ export function GenericComboBox(props: GenericComboBoxProps) { return euiOptions[options.indexOf(option)]; }); - const onComboBoxChange = (newOptions: EuiComboBoxOptionProps[]) => { + const onComboBoxChange = (newOptions: EuiComboBoxOptionOption[]) => { const newValues = newOptions.map(({ label }) => { return options[labels.indexOf(label)]; }); diff --git a/src/plugins/data/public/ui/index_pattern_select/index_pattern_select.tsx b/src/plugins/data/public/ui/index_pattern_select/index_pattern_select.tsx index 829c8205a8b52..c56060bb9c288 100644 --- a/src/plugins/data/public/ui/index_pattern_select/index_pattern_select.tsx +++ b/src/plugins/data/public/ui/index_pattern_select/index_pattern_select.tsx @@ -39,7 +39,7 @@ export type IndexPatternSelectProps = Required< interface IndexPatternSelectState { isLoading: boolean; options: []; - selectedIndexPattern: string | undefined; + selectedIndexPattern: { value: string; label: string } | undefined; searchValue: string | undefined; } diff --git a/src/plugins/es_ui_shared/static/forms/components/fields/combobox_field.tsx b/src/plugins/es_ui_shared/static/forms/components/fields/combobox_field.tsx index 3613867950098..a10da62fa6906 100644 --- a/src/plugins/es_ui_shared/static/forms/components/fields/combobox_field.tsx +++ b/src/plugins/es_ui_shared/static/forms/components/fields/combobox_field.tsx @@ -19,7 +19,7 @@ import React from 'react'; import { i18n } from '@kbn/i18n'; -import { EuiFormRow, EuiComboBox, EuiComboBoxOptionProps } from '@elastic/eui'; +import { EuiFormRow, EuiComboBox, EuiComboBoxOptionOption } from '@elastic/eui'; import { FieldHook, VALIDATION_TYPES, FieldValidateResponse } from '../../hook_form_lib'; @@ -69,7 +69,7 @@ export const ComboBoxField = ({ field, euiFieldProps = {}, ...rest }: Props) => field.setValue(newValue); }; - const onComboChange = (options: EuiComboBoxOptionProps[]) => { + const onComboChange = (options: EuiComboBoxOptionOption[]) => { field.setValue(options.map(option => option.label)); }; diff --git a/src/plugins/es_ui_shared/static/forms/helpers/de_serializers.ts b/src/plugins/es_ui_shared/static/forms/helpers/de_serializers.ts index f4b528e681d43..274aa82b31834 100644 --- a/src/plugins/es_ui_shared/static/forms/helpers/de_serializers.ts +++ b/src/plugins/es_ui_shared/static/forms/helpers/de_serializers.ts @@ -16,10 +16,10 @@ * specific language governing permissions and limitations * under the License. */ -import { Option } from '@elastic/eui/src/components/selectable/types'; +import { EuiSelectableOption } from '@elastic/eui'; import { SerializerFunc } from '../hook_form_lib'; -type FuncType = (selectOptions: Option[]) => SerializerFunc; +type FuncType = (selectOptions: EuiSelectableOption[]) => SerializerFunc; export const multiSelectComponent: Record = { // This deSerializer takes the previously selected options and map them @@ -31,7 +31,7 @@ export const multiSelectComponent: Record = { return selectOptions; } - return (selectOptions as Option[]).map(option => ({ + return (selectOptions as EuiSelectableOption[]).map(option => ({ ...option, checked: (defaultFormValue as string[]).includes(option.label) ? 'on' : undefined, })); diff --git a/src/plugins/es_ui_shared/static/forms/helpers/field_validators/min_selectable_selection.ts b/src/plugins/es_ui_shared/static/forms/helpers/field_validators/min_selectable_selection.ts index a10371d08ad5a..8f75c45df6c4a 100644 --- a/src/plugins/es_ui_shared/static/forms/helpers/field_validators/min_selectable_selection.ts +++ b/src/plugins/es_ui_shared/static/forms/helpers/field_validators/min_selectable_selection.ts @@ -17,7 +17,7 @@ * under the License. */ -import { Option } from '@elastic/eui/src/components/selectable/types'; +import { EuiSelectableOption } from '@elastic/eui'; import { ValidationFunc, ValidationError } from '../../hook_form_lib'; import { hasMinLengthArray } from '../../../validators/array'; @@ -42,7 +42,7 @@ export const minSelectableSelectionField = ({ // We need to convert all the options from the multi selectable component, to the // an actual Array of selection _before_ validating the Array length. - return hasMinLengthArray(total)(optionsToSelectedValue(value as Option[])) + return hasMinLengthArray(total)(optionsToSelectedValue(value as EuiSelectableOption[])) ? undefined : { code: 'ERR_MIN_SELECTION', diff --git a/src/plugins/es_ui_shared/static/forms/helpers/serializers.ts b/src/plugins/es_ui_shared/static/forms/helpers/serializers.ts index 0bb89cc1af593..bae6b4c2652ca 100644 --- a/src/plugins/es_ui_shared/static/forms/helpers/serializers.ts +++ b/src/plugins/es_ui_shared/static/forms/helpers/serializers.ts @@ -36,7 +36,7 @@ * ```` */ -import { Option } from '@elastic/eui/src/components/selectable/types'; +import { EuiSelectableOption } from '@elastic/eui'; import { SerializerFunc } from '../hook_form_lib'; export const multiSelectComponent: Record> = { @@ -45,7 +45,7 @@ export const multiSelectComponent: Record> = { * * @param value The Eui Selectable options array */ - optionsToSelectedValue(options: Option[]): string[] { + optionsToSelectedValue(options: EuiSelectableOption[]): string[] { return options.filter(option => option.checked === 'on').map(option => option.label); }, }; diff --git a/src/plugins/inspector/public/ui/__snapshots__/inspector_panel.test.tsx.snap b/src/plugins/inspector/public/ui/__snapshots__/inspector_panel.test.tsx.snap index 9cf725a2faa73..fcd03df5637d0 100644 --- a/src/plugins/inspector/public/ui/__snapshots__/inspector_panel.test.tsx.snap +++ b/src/plugins/inspector/public/ui/__snapshots__/inspector_panel.test.tsx.snap @@ -326,21 +326,25 @@ exports[`InspectorPanel should render as expected 1`] = `
- -

- View 1 -

- + +

+ View 1 +

+ +
diff --git a/test/interpreter_functional/plugins/kbn_tp_run_pipeline/package.json b/test/interpreter_functional/plugins/kbn_tp_run_pipeline/package.json index cb0b9de01c4ed..594823ad047a7 100644 --- 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": "19.0.0", + "@elastic/eui": "20.0.2", "react": "^16.12.0", "react-dom": "^16.12.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 index c68ef6dcd0202..56f5719b5dbef 100644 --- 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": "19.0.0", + "@elastic/eui": "20.0.2", "react": "^16.12.0" } } diff --git a/test/plugin_functional/plugins/kbn_tp_custom_visualizations/public/self_changing_vis/self_changing_vis.js b/test/plugin_functional/plugins/kbn_tp_custom_visualizations/public/self_changing_vis/self_changing_vis.js index 1c6acab4aba16..2976a6cd98e30 100644 --- a/test/plugin_functional/plugins/kbn_tp_custom_visualizations/public/self_changing_vis/self_changing_vis.js +++ b/test/plugin_functional/plugins/kbn_tp_custom_visualizations/public/self_changing_vis/self_changing_vis.js @@ -25,7 +25,7 @@ import { setup as visualizations } from '../../../../../../src/legacy/core_plugi visualizations.types.createReactVisualization({ name: 'self_changing_vis', title: 'Self Changing Vis', - icon: 'visControls', + icon: 'controlsHorizontal', description: 'This visualization is able to change its own settings, that you could also set in the editor.', visConfig: { diff --git a/test/plugin_functional/plugins/kbn_tp_embeddable_explorer/package.json b/test/plugin_functional/plugins/kbn_tp_embeddable_explorer/package.json index d4e4c6bf2fee0..d12c15d0688b2 100644 --- 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": "19.0.0", + "@elastic/eui": "20.0.2", "react": "^16.12.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 index 3ade079419a55..eb24035f9acbe 100644 --- 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": "19.0.0", + "@elastic/eui": "20.0.2", "react": "^16.12.0" }, "scripts": { diff --git a/typings/@elastic/eui/index.d.ts b/typings/@elastic/eui/index.d.ts index 9268f72724141..db07861d63cfe 100644 --- a/typings/@elastic/eui/index.d.ts +++ b/typings/@elastic/eui/index.d.ts @@ -21,6 +21,5 @@ import { Direction } from '@elastic/eui/src/services/sort/sort_direction'; // TODO: Remove once typescript definitions are in EUI declare module '@elastic/eui' { - export const EuiCodeEditor: React.FC; export const Query: any; } diff --git a/x-pack/legacy/plugins/beats_management/public/components/inputs/code_editor.tsx b/x-pack/legacy/plugins/beats_management/public/components/inputs/code_editor.tsx index 6ec2a7f02f3a3..46ea90a9c1b30 100644 --- a/x-pack/legacy/plugins/beats_management/public/components/inputs/code_editor.tsx +++ b/x-pack/legacy/plugins/beats_management/public/components/inputs/code_editor.tsx @@ -93,13 +93,11 @@ class CodeEditor extends Component< error={error ? getErrorMessage() : []} > { this.props.onAssetDelete(this.state.deleteId); }; - private handleFileUpload = (files: FileList) => { + private handleFileUpload = (files: FileList | null) => { + if (files == null) return; this.setState({ isLoading: true }); Promise.all(Array.from(files).map(file => this.props.onAssetAdd(file))).finally(() => { this.setState({ isLoading: false }); diff --git a/x-pack/legacy/plugins/canvas/public/components/asset_manager/asset_modal.tsx b/x-pack/legacy/plugins/canvas/public/components/asset_manager/asset_modal.tsx index f8bce19a46968..3dfbb1b1fde3c 100644 --- a/x-pack/legacy/plugins/canvas/public/components/asset_manager/asset_modal.tsx +++ b/x-pack/legacy/plugins/canvas/public/components/asset_manager/asset_modal.tsx @@ -43,7 +43,7 @@ interface Props { /** Function to invoke when the modal is closed */ onClose: () => void; /** Function to invoke when a file is uploaded */ - onFileUpload: (assets: FileList) => void; + onFileUpload: (assets: FileList | null) => void; /** Function to invoke when an asset is copied */ onAssetCopy: (asset: AssetType) => void; /** Function to invoke when an asset is created */ diff --git a/x-pack/legacy/plugins/canvas/public/components/custom_element_modal/custom_element_modal.tsx b/x-pack/legacy/plugins/canvas/public/components/custom_element_modal/custom_element_modal.tsx index bd7fc775a34a0..56bd0bf5e9f2a 100644 --- a/x-pack/legacy/plugins/canvas/public/components/custom_element_modal/custom_element_modal.tsx +++ b/x-pack/legacy/plugins/canvas/public/components/custom_element_modal/custom_element_modal.tsx @@ -100,8 +100,9 @@ export class CustomElementModal extends PureComponent { this.setState({ [type]: value }); }; - private _handleUpload = (files: File[]) => { - const [file] = files; + private _handleUpload = (files: FileList | null) => { + if (files == null) return; + const file = files[0]; const [type, subtype] = get(file, 'type', '').split('/'); if (type === 'image' && VALID_IMAGE_TYPES.indexOf(subtype) >= 0) { encode(file).then((dataurl: string) => this._handleChange('image', dataurl)); diff --git a/x-pack/legacy/plugins/canvas/public/components/keyboard_shortcuts_doc/__examples__/__snapshots__/keyboard_shortcuts_doc.stories.storyshot b/x-pack/legacy/plugins/canvas/public/components/keyboard_shortcuts_doc/__examples__/__snapshots__/keyboard_shortcuts_doc.stories.storyshot index 35cdd5ac378f4..9954ae0147a97 100644 --- a/x-pack/legacy/plugins/canvas/public/components/keyboard_shortcuts_doc/__examples__/__snapshots__/keyboard_shortcuts_doc.stories.storyshot +++ b/x-pack/legacy/plugins/canvas/public/components/keyboard_shortcuts_doc/__examples__/__snapshots__/keyboard_shortcuts_doc.stories.storyshot @@ -82,1060 +82,1064 @@ exports[`Storyshots components/KeyboardShortcutsDoc default 1`] = ` className="euiFlyoutBody__overflow" >
-

- Element controls -

-
-
-
- Cut -
-
- - - - CTRL - - - - - - X - - - -
-
- Copy -
-
- - - - CTRL - - - - - - C - - - -
-
- Paste -
-
- - - - CTRL - - - - - - V - - - -
-
- Clone -
-
- - - - CTRL - - - - - - D - - - -
-
- Delete -
-
- - - - DEL - - - - - - or - - - - - - BACKSPACE - - - -
-
- Bring forward -
-
- - - - CTRL - - - - - - ↑ - - - -
-
- Bring to front -
-
- - - - CTRL - - - - - - SHIFT - - - - - - ↑ - - - -
-
- Send backward -
-
- - - - CTRL - - - - - - ↓ - - - -
-
- Send to back -
-
- - - - CTRL - - - - - - SHIFT - - - - - - ↓ - - - -
-
- Group -
-
- - - - G - - - -
-
- Ungroup -
-
- - - - U - - - -
-
- Shift up by 10px -
-
- - - - ↑ - - - -
-
- Shift down by 10px -
-
- - - - ↓ - - - -
-
- Shift left by 10px -
-
- - - - ← - - - -
-
- Shift right by 10px -
-
- - - - → - - - -
-
- Shift up by 1px -
-
- - - - SHIFT - - - - - - ↑ - - - -
-
- Shift down by 1px -
-
- - - - SHIFT - - - - - - ↓ - - - -
-
- Shift left by 1px -
-
- - - - SHIFT - - - - - - ← - - - -
-
- Shift right by 1px -
-
- - - - SHIFT - - - - - - → - - - -
-
-
-
-

- Expression controls -

-
-
-
- Run whole expression -
-
- - - - CTRL - - - - - - ENTER - - - -
-
+

+ Element controls +

+
+
+
+ Cut +
+
+ + + + CTRL + + + + + + X + + + +
+
+ Copy +
+
+ + + + CTRL + + + + + + C + + + +
+
+ Paste +
+
+ + + + CTRL + + + + + + V + + + +
+
+ Clone +
+
+ + + + CTRL + + + + + + D + + + +
+
+ Delete +
+
+ + + + DEL + + + + + + or + + + + + + BACKSPACE + + + +
+
+ Bring forward +
+
+ + + + CTRL + + + + + + ↑ + + + +
+
+ Bring to front +
+
+ + + + CTRL + + + + + + SHIFT + + + + + + ↑ + + + +
+
+ Send backward +
+
+ + + + CTRL + + + + + + ↓ + + + +
+
+ Send to back +
+
+ + + + CTRL + + + + + + SHIFT + + + + + + ↓ + + + +
+
+ Group +
+
+ + + + G + + + +
+
+ Ungroup +
+
+ + + + U + + + +
+
+ Shift up by 10px +
+
+ + + + ↑ + + + +
+
+ Shift down by 10px +
+
+ + + + ↓ + + + +
+
+ Shift left by 10px +
+
+ + + + ← + + + +
+
+ Shift right by 10px +
+
+ + + + → + + + +
+
+ Shift up by 1px +
+
+ + + + SHIFT + + + + + + ↑ + + + +
+
+ Shift down by 1px +
+
+ + + + SHIFT + + + + + + ↓ + + + +
+
+ Shift left by 1px +
+
+ + + + SHIFT + + + + + + ← + + + +
+
+ Shift right by 1px +
+
+ + + + SHIFT + + + + + + → + + + +
+
+
+
-
-
-

- Editor controls -

-
-
-
- Select multiple elements -
-
- - - - SHIFT - - - - - - CLICK - - - -
-
- Resize from center -
-
- - - - ALT - - - - - - DRAG - - - -
-
- Move, resize, and rotate without snapping -
-
- - - - CTRL - - - - - - DRAG - - - -
-
- Select element below -
-
- - - - CTRL - - - - - - CLICK - - - -
-
- Undo last action -
-
- - - - CTRL - - - - - - Z - - - -
-
- Redo last action -
-
- - - - CTRL - - - - - - SHIFT - - - - - - Z - - - -
-
- Go to previous page -
-
- - - - ALT - - - - - - [ - - - -
-
- Go to next page -
-
- - - - ALT - - - - - - ] - - - -
-
- Toggle edit mode -
-
- - - - ALT - - - - - - E - - - -
-
- Show grid -
-
- - - - ALT - - - - - - G - - - -
-
- Refresh workpad -
-
- - - - ALT - - - - - - R - - - -
-
- Zoom in -
-
- - - - CTRL - - - - - - ALT - - - - - - + - - - -
-
- Zoom out -
-
- - - - CTRL - - - - - - ALT - - - - - - - - - - -
-
- Reset zoom to 100% -
-
- - - - CTRL - - - - - - ALT - - - - - - [ - - - -
-
- Enter presentation mode -
-
- - - - ALT - - - - - - F - - - - - - or - - - - - - ALT - - - - - - P - - - -
-
+

+ Expression controls +

+
+
+
+ Run whole expression +
+
+ + + + CTRL + + + + + + ENTER + + + +
+
+
+
-
-
-

- Presentation controls -

-
-
-
- Enter presentation mode -
-
- - - - ALT - - - - - - F - - - - - - or - - - - - - ALT - - - - - - P - - - -
-
- Exit presentation mode -
-
- - - - ESC - - - -
-
- Go to previous page -
-
- - - - ALT - - - - - - [ - - - - - - or - - - - - - BACKSPACE - - - - - - or - - - - - - ← - - - -
-
- Go to next page -
-
- - - - ALT - - - - - - ] - - - - - - or - - - - - - SPACE - - - - - - or - - - - - - → - - - -
-
- Refresh workpad -
-
- - - - ALT - - - - - - R - - - -
-
- Toggle page cycling -
-
- - - - P - - - -
-
+

+ Editor controls +

+
+
+
+ Select multiple elements +
+
+ + + + SHIFT + + + + + + CLICK + + + +
+
+ Resize from center +
+
+ + + + ALT + + + + + + DRAG + + + +
+
+ Move, resize, and rotate without snapping +
+
+ + + + CTRL + + + + + + DRAG + + + +
+
+ Select element below +
+
+ + + + CTRL + + + + + + CLICK + + + +
+
+ Undo last action +
+
+ + + + CTRL + + + + + + Z + + + +
+
+ Redo last action +
+
+ + + + CTRL + + + + + + SHIFT + + + + + + Z + + + +
+
+ Go to previous page +
+
+ + + + ALT + + + + + + [ + + + +
+
+ Go to next page +
+
+ + + + ALT + + + + + + ] + + + +
+
+ Toggle edit mode +
+
+ + + + ALT + + + + + + E + + + +
+
+ Show grid +
+
+ + + + ALT + + + + + + G + + + +
+
+ Refresh workpad +
+
+ + + + ALT + + + + + + R + + + +
+
+ Zoom in +
+
+ + + + CTRL + + + + + + ALT + + + + + + + + + + +
+
+ Zoom out +
+
+ + + + CTRL + + + + + + ALT + + + + + + - + + + +
+
+ Reset zoom to 100% +
+
+ + + + CTRL + + + + + + ALT + + + + + + [ + + + +
+
+ Enter presentation mode +
+
+ + + + ALT + + + + + + F + + + + + + or + + + + + + ALT + + + + + + P + + + +
+
+
+
+ className="canvasKeyboardShortcut" + > +

+ Presentation controls +

+
+
+
+ Enter presentation mode +
+
+ + + + ALT + + + + + + F + + + + + + or + + + + + + ALT + + + + + + P + + + +
+
+ Exit presentation mode +
+
+ + + + ESC + + + +
+
+ Go to previous page +
+
+ + + + ALT + + + + + + [ + + + + + + or + + + + + + BACKSPACE + + + + + + or + + + + + + ← + + + +
+
+ Go to next page +
+
+ + + + ALT + + + + + + ] + + + + + + or + + + + + + SPACE + + + + + + or + + + + + + → + + + +
+
+ Refresh workpad +
+
+ + + + ALT + + + + + + R + + + +
+
+ Toggle page cycling +
+
+ + + + P + + + +
+
+
+
diff --git a/x-pack/legacy/plugins/graph/public/components/field_manager/field_editor.tsx b/x-pack/legacy/plugins/graph/public/components/field_manager/field_editor.tsx index f2a4c28afcdae..9c7cffa775781 100644 --- a/x-pack/legacy/plugins/graph/public/components/field_manager/field_editor.tsx +++ b/x-pack/legacy/plugins/graph/public/components/field_manager/field_editor.tsx @@ -4,7 +4,7 @@ * you may not use this file except in compliance with the Elastic License. */ -import React, { useState, useEffect } from 'react'; +import React, { useState, useEffect, ButtonHTMLAttributes } from 'react'; import { EuiPopover, EuiFormRow, @@ -23,7 +23,6 @@ import { EuiForm, EuiSpacer, EuiIconTip, - EuiComboBoxOptionProps, } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import classNames from 'classnames'; @@ -224,14 +223,12 @@ export function FieldEditor({ }} singleSelection={{ asPlainText: true }} isClearable={false} - options={ - toOptions(allFields, initialField) as Array> - } + options={toOptions(allFields, initialField)} selectedOptions={[ { value: currentField.name, label: currentField.name, - type: currentField.type, + type: currentField.type as ButtonHTMLAttributes['type'], }, ]} renderOption={(option, searchValue, contentClassName) => { @@ -379,12 +376,12 @@ export function FieldEditor({ function toOptions( fields: WorkspaceField[], currentField: WorkspaceField -): Array<{ label: string; value: string; type: string }> { +): Array<{ label: string; value: string; type: ButtonHTMLAttributes['type'] }> { return fields .filter(field => !field.selected || field === currentField) .map(({ name, type }) => ({ label: name, value: name, - type, + type: type as ButtonHTMLAttributes['type'], })); } diff --git a/x-pack/legacy/plugins/lens/public/indexpattern_datasource/dimension_panel/field_select.tsx b/x-pack/legacy/plugins/lens/public/indexpattern_datasource/dimension_panel/field_select.tsx index 77435fcdf3eed..8651751ea365b 100644 --- a/x-pack/legacy/plugins/lens/public/indexpattern_datasource/dimension_panel/field_select.tsx +++ b/x-pack/legacy/plugins/lens/public/indexpattern_datasource/dimension_panel/field_select.tsx @@ -7,7 +7,7 @@ import _ from 'lodash'; import React, { useMemo } from 'react'; import { i18n } from '@kbn/i18n'; -import { EuiComboBox, EuiFlexGroup, EuiFlexItem, EuiComboBoxOptionProps } from '@elastic/eui'; +import { EuiComboBox, EuiFlexGroup, EuiFlexItem, EuiComboBoxOptionOption } from '@elastic/eui'; import classNames from 'classnames'; import { EuiHighlight } from '@elastic/eui'; import { OperationType } from '../indexpattern'; @@ -138,10 +138,10 @@ export function FieldSelect({ placeholder={i18n.translate('xpack.lens.indexPattern.fieldPlaceholder', { defaultMessage: 'Field', })} - options={(memoizedFieldOptions as unknown) as EuiComboBoxOptionProps[]} + options={(memoizedFieldOptions as unknown) as EuiComboBoxOptionOption[]} isInvalid={Boolean(incompatibleSelectedOperationType && selectedColumnOperationType)} selectedOptions={ - selectedColumnOperationType + ((selectedColumnOperationType ? selectedColumnSourceField ? [ { @@ -150,7 +150,7 @@ export function FieldSelect({ }, ] : [memoizedFieldOptions[0]] - : [] + : []) as unknown) as EuiComboBoxOptionOption[] } singleSelection={{ asPlainText: true }} onChange={choices => { diff --git a/x-pack/legacy/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/create_analytics_form/create_analytics_form.tsx b/x-pack/legacy/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/create_analytics_form/create_analytics_form.tsx index 70722d9cb953a..c744c357c9550 100644 --- a/x-pack/legacy/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/create_analytics_form/create_analytics_form.tsx +++ b/x-pack/legacy/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/create_analytics_form/create_analytics_form.tsx @@ -8,7 +8,7 @@ import React, { Fragment, FC, useEffect, useMemo } from 'react'; import { EuiComboBox, - EuiComboBoxOptionProps, + EuiComboBoxOptionOption, EuiForm, EuiFieldText, EuiFormRow, @@ -118,7 +118,7 @@ export const CreateAnalyticsForm: FC = ({ actions, sta } }; - const onCreateOption = (searchValue: string, flattenedOptions: EuiComboBoxOptionProps[]) => { + const onCreateOption = (searchValue: string, flattenedOptions: EuiComboBoxOptionOption[]) => { const normalizedSearchValue = searchValue.trim().toLowerCase(); if (!normalizedSearchValue) { @@ -132,7 +132,7 @@ export const CreateAnalyticsForm: FC = ({ actions, sta // Create the option if it doesn't exist. if ( !flattenedOptions.some( - (option: EuiComboBoxOptionProps) => + (option: EuiComboBoxOptionOption) => option.label.trim().toLowerCase() === normalizedSearchValue ) ) { @@ -164,7 +164,7 @@ export const CreateAnalyticsForm: FC = ({ actions, sta // If sourceIndex has changed load analysis field options again if (previousSourceIndex !== sourceIndex || previousJobType !== jobType) { - const analyzedFieldsOptions: EuiComboBoxOptionProps[] = []; + const analyzedFieldsOptions: EuiComboBoxOptionOption[] = []; if (resp.field_selection) { resp.field_selection.forEach((selectedField: FieldSelectionItem) => { @@ -229,7 +229,7 @@ export const CreateAnalyticsForm: FC = ({ actions, sta // Get fields and filter for supported types for job type const { fields } = newJobCapsService; - const depVarOptions: EuiComboBoxOptionProps[] = []; + const depVarOptions: EuiComboBoxOptionOption[] = []; fields.forEach((field: Field) => { if (shouldAddAsDepVarOption(field, jobType)) { @@ -276,7 +276,7 @@ export const CreateAnalyticsForm: FC = ({ actions, sta return errors; }; - const onSourceIndexChange = (selectedOptions: EuiComboBoxOptionProps[]) => { + const onSourceIndexChange = (selectedOptions: EuiComboBoxOptionOption[]) => { setFormState({ excludes: [], excludesOptions: [], diff --git a/x-pack/legacy/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/hooks/use_create_analytics_form/state.ts b/x-pack/legacy/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/hooks/use_create_analytics_form/state.ts index 1f23048e09d1f..170700d35e651 100644 --- a/x-pack/legacy/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/hooks/use_create_analytics_form/state.ts +++ b/x-pack/legacy/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/hooks/use_create_analytics_form/state.ts @@ -4,7 +4,7 @@ * you may not use this file except in compliance with the Elastic License. */ -import { EuiComboBoxOptionProps } from '@elastic/eui'; +import { EuiComboBoxOptionOption } from '@elastic/eui'; import { DeepPartial } from '../../../../../../../common/types/common'; import { checkPermission } from '../../../../../privilege/check_privilege'; import { mlNodesAvailable } from '../../../../../ml_nodes_check/check_ml_nodes'; @@ -46,7 +46,7 @@ export interface State { createIndexPattern: boolean; dependentVariable: DependentVariable; dependentVariableFetchFail: boolean; - dependentVariableOptions: EuiComboBoxOptionProps[] | []; + dependentVariableOptions: EuiComboBoxOptionOption[]; description: string; destinationIndex: EsIndexName; destinationIndexNameExists: boolean; @@ -54,7 +54,7 @@ export interface State { destinationIndexNameValid: boolean; destinationIndexPatternTitleExists: boolean; excludes: string[]; - excludesOptions: EuiComboBoxOptionProps[]; + excludesOptions: EuiComboBoxOptionOption[]; fieldOptionsFetchFail: boolean; jobId: DataFrameAnalyticsId; jobIdExists: boolean; diff --git a/x-pack/legacy/plugins/ml/public/application/datavisualizer/file_based/components/edit_flyout/__snapshots__/overrides.test.js.snap b/x-pack/legacy/plugins/ml/public/application/datavisualizer/file_based/components/edit_flyout/__snapshots__/overrides.test.js.snap index 997b437508c34..46428ff9c351a 100644 --- a/x-pack/legacy/plugins/ml/public/application/datavisualizer/file_based/components/edit_flyout/__snapshots__/overrides.test.js.snap +++ b/x-pack/legacy/plugins/ml/public/application/datavisualizer/file_based/components/edit_flyout/__snapshots__/overrides.test.js.snap @@ -40,6 +40,7 @@ exports[`Overrides render overrides 1`] = ` labelType="label" > = ({ }); }; - const onQueryEntitiesChange = (selectedOptions: EuiComboBoxOption[]) => { + const onQueryEntitiesChange = (selectedOptions: EuiComboBoxOptionOption[]) => { const selectedFieldNames = selectedOptions.map(option => option.label); const kibanaSettings = customUrl.kibanaSettings; @@ -172,7 +168,7 @@ export const CustomUrlEditor: FC = ({ }); const entityOptions = queryEntityFieldNames.map(fieldName => ({ label: fieldName })); - let selectedEntityOptions: EuiComboBoxOption[] = []; + let selectedEntityOptions: EuiComboBoxOptionOption[] = []; if (kibanaSettings !== undefined && kibanaSettings.queryFieldNames !== undefined) { const queryFieldNames: string[] = kibanaSettings.queryFieldNames; selectedEntityOptions = queryFieldNames.map(fieldName => ({ label: fieldName })); diff --git a/x-pack/legacy/plugins/ml/public/application/jobs/jobs_list/components/ml_job_editor/ml_job_editor.tsx b/x-pack/legacy/plugins/ml/public/application/jobs/jobs_list/components/ml_job_editor/ml_job_editor.tsx index ff6706edb0179..0633c62f754e0 100644 --- a/x-pack/legacy/plugins/ml/public/application/jobs/jobs_list/components/ml_job_editor/ml_job_editor.tsx +++ b/x-pack/legacy/plugins/ml/public/application/jobs/jobs_list/components/ml_job_editor/ml_job_editor.tsx @@ -6,7 +6,7 @@ import React, { FC } from 'react'; -import { EuiCodeEditor } from '@elastic/eui'; +import { EuiCodeEditor, EuiCodeEditorProps } from '@elastic/eui'; import { expandLiteralStrings } from '../../../../../../shared_imports'; import { xJsonMode } from '../../../../components/custom_hooks'; @@ -20,7 +20,7 @@ interface MlJobEditorProps { readOnly?: boolean; syntaxChecking?: boolean; theme?: string; - onChange?: Function; + onChange?: EuiCodeEditorProps['onChange']; } export const MLJobEditor: FC = ({ value, diff --git a/x-pack/legacy/plugins/ml/public/application/jobs/new_job/common/components/job_groups_input.tsx b/x-pack/legacy/plugins/ml/public/application/jobs/new_job/common/components/job_groups_input.tsx index 7211c034617f1..131e313e7c9e5 100644 --- a/x-pack/legacy/plugins/ml/public/application/jobs/new_job/common/components/job_groups_input.tsx +++ b/x-pack/legacy/plugins/ml/public/application/jobs/new_job/common/components/job_groups_input.tsx @@ -6,7 +6,7 @@ import React, { FC, memo } from 'react'; import { i18n } from '@kbn/i18n'; -import { EuiComboBox, EuiComboBoxOptionProps } from '@elastic/eui'; +import { EuiComboBox, EuiComboBoxOptionOption } from '@elastic/eui'; import { Validation } from '../job_validator'; import { tabColor } from '../../../../../../common/util/group_color_utils'; import { Description } from '../../pages/components/job_details_step/components/groups/description'; @@ -20,28 +20,28 @@ export interface JobGroupsInputProps { export const JobGroupsInput: FC = memo( ({ existingGroups, selectedGroups, onChange, validation }) => { - const options = existingGroups.map(g => ({ + const options = existingGroups.map(g => ({ label: g, color: tabColor(g), })); - const selectedOptions = selectedGroups.map(g => ({ + const selectedOptions = selectedGroups.map(g => ({ label: g, color: tabColor(g), })); - function onChangeCallback(optionsIn: EuiComboBoxOptionProps[]) { + function onChangeCallback(optionsIn: EuiComboBoxOptionOption[]) { onChange(optionsIn.map(g => g.label)); } - function onCreateGroup(input: string, flattenedOptions: EuiComboBoxOptionProps[]) { + function onCreateGroup(input: string, flattenedOptions: EuiComboBoxOptionOption[]) { const normalizedSearchValue = input.trim().toLowerCase(); if (!normalizedSearchValue) { return; } - const newGroup: EuiComboBoxOptionProps = { + const newGroup: EuiComboBoxOptionOption = { label: input, color: tabColor(input), }; diff --git a/x-pack/legacy/plugins/ml/public/application/jobs/new_job/pages/components/datafeed_step/components/time_field/time_field_select.tsx b/x-pack/legacy/plugins/ml/public/application/jobs/new_job/pages/components/datafeed_step/components/time_field/time_field_select.tsx index 9af1226d1fe6c..869dc046648b3 100644 --- a/x-pack/legacy/plugins/ml/public/application/jobs/new_job/pages/components/datafeed_step/components/time_field/time_field_select.tsx +++ b/x-pack/legacy/plugins/ml/public/application/jobs/new_job/pages/components/datafeed_step/components/time_field/time_field_select.tsx @@ -5,7 +5,7 @@ */ import React, { FC, useContext } from 'react'; -import { EuiComboBox, EuiComboBoxOptionProps } from '@elastic/eui'; +import { EuiComboBox, EuiComboBoxOptionOption } from '@elastic/eui'; import { JobCreatorContext } from '../../../job_creator_context'; import { Field } from '../../../../../../../../../common/types/fields'; @@ -19,14 +19,17 @@ interface Props { export const TimeFieldSelect: FC = ({ fields, changeHandler, selectedField }) => { const { jobCreator } = useContext(JobCreatorContext); - const options: EuiComboBoxOptionProps[] = createFieldOptions(fields, jobCreator.additionalFields); + const options: EuiComboBoxOptionOption[] = createFieldOptions( + fields, + jobCreator.additionalFields + ); - const selection: EuiComboBoxOptionProps[] = []; + const selection: EuiComboBoxOptionOption[] = []; if (selectedField !== null) { selection.push({ label: selectedField }); } - function onChange(selectedOptions: EuiComboBoxOptionProps[]) { + function onChange(selectedOptions: EuiComboBoxOptionOption[]) { const option = selectedOptions[0]; if (typeof option !== 'undefined') { changeHandler(option.label); diff --git a/x-pack/legacy/plugins/ml/public/application/jobs/new_job/pages/components/job_details_step/components/additional_section/components/calendars/calendars_selection.tsx b/x-pack/legacy/plugins/ml/public/application/jobs/new_job/pages/components/job_details_step/components/additional_section/components/calendars/calendars_selection.tsx index 1e7327552623e..597fe42543301 100644 --- a/x-pack/legacy/plugins/ml/public/application/jobs/new_job/pages/components/job_details_step/components/additional_section/components/calendars/calendars_selection.tsx +++ b/x-pack/legacy/plugins/ml/public/application/jobs/new_job/pages/components/job_details_step/components/additional_section/components/calendars/calendars_selection.tsx @@ -9,7 +9,7 @@ import { FormattedMessage } from '@kbn/i18n/react'; import { EuiButtonIcon, EuiComboBox, - EuiComboBoxOptionProps, + EuiComboBoxOptionOption, EuiComboBoxProps, EuiFlexGroup, EuiFlexItem, @@ -28,10 +28,10 @@ import { GLOBAL_CALENDAR } from '../../../../../../../../../../../common/constan export const CalendarsSelection: FC = () => { const { jobCreator, jobCreatorUpdate } = useContext(JobCreatorContext); const [selectedCalendars, setSelectedCalendars] = useState(jobCreator.calendars); - const [selectedOptions, setSelectedOptions] = useState>>( + const [selectedOptions, setSelectedOptions] = useState>>( [] ); - const [options, setOptions] = useState>>([]); + const [options, setOptions] = useState>>([]); const [isLoading, setIsLoading] = useState(false); async function loadCalendars() { diff --git a/x-pack/legacy/plugins/ml/public/application/jobs/new_job/pages/components/job_details_step/components/groups/groups_input.tsx b/x-pack/legacy/plugins/ml/public/application/jobs/new_job/pages/components/job_details_step/components/groups/groups_input.tsx index cf0be9d3c0c4e..841ccfdce0958 100644 --- a/x-pack/legacy/plugins/ml/public/application/jobs/new_job/pages/components/job_details_step/components/groups/groups_input.tsx +++ b/x-pack/legacy/plugins/ml/public/application/jobs/new_job/pages/components/job_details_step/components/groups/groups_input.tsx @@ -5,7 +5,7 @@ */ import React, { FC, useState, useContext, useEffect } from 'react'; -import { EuiComboBox, EuiComboBoxOptionProps } from '@elastic/eui'; +import { EuiComboBox, EuiComboBoxOptionOption } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import { JobCreatorContext } from '../../../job_creator_context'; import { tabColor } from '../../../../../../../../../common/util/group_color_utils'; @@ -24,28 +24,28 @@ export const GroupsInput: FC = () => { jobCreatorUpdate(); }, [selectedGroups.join()]); - const options: EuiComboBoxOptionProps[] = existingJobsAndGroups.groupIds.map((g: string) => ({ + const options: EuiComboBoxOptionOption[] = existingJobsAndGroups.groupIds.map((g: string) => ({ label: g, color: tabColor(g), })); - const selectedOptions: EuiComboBoxOptionProps[] = selectedGroups.map((g: string) => ({ + const selectedOptions: EuiComboBoxOptionOption[] = selectedGroups.map((g: string) => ({ label: g, color: tabColor(g), })); - function onChange(optionsIn: EuiComboBoxOptionProps[]) { + function onChange(optionsIn: EuiComboBoxOptionOption[]) { setSelectedGroups(optionsIn.map(g => g.label)); } - function onCreateGroup(input: string, flattenedOptions: EuiComboBoxOptionProps[]) { + function onCreateGroup(input: string, flattenedOptions: EuiComboBoxOptionOption[]) { const normalizedSearchValue = input.trim().toLowerCase(); if (!normalizedSearchValue) { return; } - const newGroup: EuiComboBoxOptionProps = { + const newGroup: EuiComboBoxOptionOption = { label: input, color: tabColor(input), }; diff --git a/x-pack/legacy/plugins/ml/public/application/jobs/new_job/pages/components/pick_fields_step/components/advanced_detector_modal/advanced_detector_modal.tsx b/x-pack/legacy/plugins/ml/public/application/jobs/new_job/pages/components/pick_fields_step/components/advanced_detector_modal/advanced_detector_modal.tsx index 753cea7adcb35..9e784a20c4f5f 100644 --- a/x-pack/legacy/plugins/ml/public/application/jobs/new_job/pages/components/pick_fields_step/components/advanced_detector_modal/advanced_detector_modal.tsx +++ b/x-pack/legacy/plugins/ml/public/application/jobs/new_job/pages/components/pick_fields_step/components/advanced_detector_modal/advanced_detector_modal.tsx @@ -10,7 +10,7 @@ import { EuiFlexItem, EuiFlexGroup, EuiFlexGrid, - EuiComboBoxOptionProps, + EuiComboBoxOptionOption, EuiHorizontalRule, EuiTextArea, } from '@elastic/eui'; @@ -54,11 +54,11 @@ export interface ModalPayload { index?: number; } -const emptyOption: EuiComboBoxOptionProps = { +const emptyOption: EuiComboBoxOptionOption = { label: '', }; -const excludeFrequentOptions: EuiComboBoxOptionProps[] = [{ label: 'all' }, { label: 'none' }]; +const excludeFrequentOptions: EuiComboBoxOptionOption[] = [{ label: 'all' }, { label: 'none' }]; export const AdvancedDetectorModal: FC = ({ payload, @@ -90,7 +90,7 @@ export const AdvancedDetectorModal: FC = ({ const usingScriptFields = jobCreator.additionalFields.length > 0; // list of aggregation combobox options. - const aggOptions: EuiComboBoxOptionProps[] = aggs + const aggOptions: EuiComboBoxOptionOption[] = aggs .filter(agg => filterAggs(agg, usingScriptFields)) .map(createAggOption); @@ -101,19 +101,19 @@ export const AdvancedDetectorModal: FC = ({ fields ); - const allFieldOptions: EuiComboBoxOptionProps[] = [ + const allFieldOptions: EuiComboBoxOptionOption[] = [ ...createFieldOptions(fields, jobCreator.additionalFields), ].sort(comboBoxOptionsSort); - const splitFieldOptions: EuiComboBoxOptionProps[] = [ + const splitFieldOptions: EuiComboBoxOptionOption[] = [ ...allFieldOptions, ...createMlcategoryFieldOption(jobCreator.categorizationFieldName), ].sort(comboBoxOptionsSort); const eventRateField = fields.find(f => f.id === EVENT_RATE_FIELD_ID); - const onOptionChange = (func: (p: EuiComboBoxOptionProps) => any) => ( - selectedOptions: EuiComboBoxOptionProps[] + const onOptionChange = (func: (p: EuiComboBoxOptionOption) => any) => ( + selectedOptions: EuiComboBoxOptionOption[] ) => { func(selectedOptions[0] || emptyOption); }; @@ -312,7 +312,7 @@ export const AdvancedDetectorModal: FC = ({ ); }; -function createAggOption(agg: Aggregation | null): EuiComboBoxOptionProps { +function createAggOption(agg: Aggregation | null): EuiComboBoxOptionOption { if (agg === null) { return emptyOption; } @@ -328,7 +328,7 @@ function filterAggs(agg: Aggregation, usingScriptFields: boolean) { return agg.fields !== undefined && (usingScriptFields || agg.fields.length); } -function createFieldOption(field: Field | null): EuiComboBoxOptionProps { +function createFieldOption(field: Field | null): EuiComboBoxOptionOption { if (field === null) { return emptyOption; } @@ -337,7 +337,7 @@ function createFieldOption(field: Field | null): EuiComboBoxOptionProps { }; } -function createExcludeFrequentOption(excludeFrequent: string | null): EuiComboBoxOptionProps { +function createExcludeFrequentOption(excludeFrequent: string | null): EuiComboBoxOptionOption { if (excludeFrequent === null) { return emptyOption; } @@ -406,15 +406,15 @@ function createDefaultDescription(dtr: RichDetector) { // if the options list only contains one option and nothing has been selected, set // selectedOptions list to be an empty array function createSelectedOptions( - selectedOption: EuiComboBoxOptionProps, - options: EuiComboBoxOptionProps[] -): EuiComboBoxOptionProps[] { + selectedOption: EuiComboBoxOptionOption, + options: EuiComboBoxOptionOption[] +): EuiComboBoxOptionOption[] { return (options.length === 1 && options[0].label !== selectedOption.label) || selectedOption.label === '' ? [] : [selectedOption]; } -function comboBoxOptionsSort(a: EuiComboBoxOptionProps, b: EuiComboBoxOptionProps) { +function comboBoxOptionsSort(a: EuiComboBoxOptionOption, b: EuiComboBoxOptionOption) { return a.label.localeCompare(b.label); } diff --git a/x-pack/legacy/plugins/ml/public/application/jobs/new_job/pages/components/pick_fields_step/components/agg_select/agg_select.tsx b/x-pack/legacy/plugins/ml/public/application/jobs/new_job/pages/components/pick_fields_step/components/agg_select/agg_select.tsx index a2434f3c33559..e4eccb5f01423 100644 --- a/x-pack/legacy/plugins/ml/public/application/jobs/new_job/pages/components/pick_fields_step/components/agg_select/agg_select.tsx +++ b/x-pack/legacy/plugins/ml/public/application/jobs/new_job/pages/components/pick_fields_step/components/agg_select/agg_select.tsx @@ -5,7 +5,7 @@ */ import React, { FC, useContext, useState, useEffect } from 'react'; -import { EuiComboBox, EuiComboBoxOptionProps, EuiFormRow } from '@elastic/eui'; +import { EuiComboBox, EuiComboBoxOptionOption, EuiFormRow } from '@elastic/eui'; import { JobCreatorContext } from '../../../job_creator_context'; import { Field, Aggregation, AggFieldPair } from '../../../../../../../../../common/types/fields'; @@ -26,12 +26,12 @@ export interface DropDownOption { options: DropDownLabel[]; } -export type DropDownProps = DropDownLabel[] | EuiComboBoxOptionProps[]; +export type DropDownProps = DropDownLabel[] | EuiComboBoxOptionOption[]; interface Props { fields: Field[]; - changeHandler(d: EuiComboBoxOptionProps[]): void; - selectedOptions: EuiComboBoxOptionProps[]; + changeHandler(d: EuiComboBoxOptionOption[]): void; + selectedOptions: EuiComboBoxOptionOption[]; removeOptions: AggFieldPair[]; } @@ -42,7 +42,7 @@ export const AggSelect: FC = ({ fields, changeHandler, selectedOptions, r // so they can be removed from the dropdown list const removeLabels = removeOptions.map(createLabel); - const options: EuiComboBoxOptionProps[] = fields.map(f => { + const options: EuiComboBoxOptionOption[] = fields.map(f => { const aggOption: DropDownOption = { label: f.name, options: [] }; if (typeof f.aggs !== 'undefined') { aggOption.options = f.aggs diff --git a/x-pack/legacy/plugins/ml/public/application/jobs/new_job/pages/components/pick_fields_step/components/categorization_field/categorization_field_select.tsx b/x-pack/legacy/plugins/ml/public/application/jobs/new_job/pages/components/pick_fields_step/components/categorization_field/categorization_field_select.tsx index 6451c2785eae0..2f3e8d43bc169 100644 --- a/x-pack/legacy/plugins/ml/public/application/jobs/new_job/pages/components/pick_fields_step/components/categorization_field/categorization_field_select.tsx +++ b/x-pack/legacy/plugins/ml/public/application/jobs/new_job/pages/components/pick_fields_step/components/categorization_field/categorization_field_select.tsx @@ -5,7 +5,7 @@ */ import React, { FC, useContext } from 'react'; -import { EuiComboBox, EuiComboBoxOptionProps } from '@elastic/eui'; +import { EuiComboBox, EuiComboBoxOptionOption } from '@elastic/eui'; import { JobCreatorContext } from '../../../job_creator_context'; import { Field } from '../../../../../../../../../common/types/fields'; @@ -19,16 +19,16 @@ interface Props { export const CategorizationFieldSelect: FC = ({ fields, changeHandler, selectedField }) => { const { jobCreator } = useContext(JobCreatorContext); - const options: EuiComboBoxOptionProps[] = [ + const options: EuiComboBoxOptionOption[] = [ ...createFieldOptions(fields, jobCreator.additionalFields), ]; - const selection: EuiComboBoxOptionProps[] = []; + const selection: EuiComboBoxOptionOption[] = []; if (selectedField !== null) { selection.push({ label: selectedField }); } - function onChange(selectedOptions: EuiComboBoxOptionProps[]) { + function onChange(selectedOptions: EuiComboBoxOptionOption[]) { const option = selectedOptions[0]; if (typeof option !== 'undefined') { changeHandler(option.label); diff --git a/x-pack/legacy/plugins/ml/public/application/jobs/new_job/pages/components/pick_fields_step/components/influencers/influencers_select.tsx b/x-pack/legacy/plugins/ml/public/application/jobs/new_job/pages/components/pick_fields_step/components/influencers/influencers_select.tsx index d4ac470f4ea4f..25c924ee0b42f 100644 --- a/x-pack/legacy/plugins/ml/public/application/jobs/new_job/pages/components/pick_fields_step/components/influencers/influencers_select.tsx +++ b/x-pack/legacy/plugins/ml/public/application/jobs/new_job/pages/components/pick_fields_step/components/influencers/influencers_select.tsx @@ -5,7 +5,7 @@ */ import React, { FC, useContext } from 'react'; -import { EuiComboBox, EuiComboBoxOptionProps } from '@elastic/eui'; +import { EuiComboBox, EuiComboBoxOptionOption } from '@elastic/eui'; import { JobCreatorContext } from '../../../job_creator_context'; import { Field } from '../../../../../../../../../common/types/fields'; @@ -22,14 +22,14 @@ interface Props { export const InfluencersSelect: FC = ({ fields, changeHandler, selectedInfluencers }) => { const { jobCreator } = useContext(JobCreatorContext); - const options: EuiComboBoxOptionProps[] = [ + const options: EuiComboBoxOptionOption[] = [ ...createFieldOptions(fields, jobCreator.additionalFields), ...createMlcategoryFieldOption(jobCreator.categorizationFieldName), ]; - const selection: EuiComboBoxOptionProps[] = selectedInfluencers.map(i => ({ label: i })); + const selection: EuiComboBoxOptionOption[] = selectedInfluencers.map(i => ({ label: i })); - function onChange(selectedOptions: EuiComboBoxOptionProps[]) { + function onChange(selectedOptions: EuiComboBoxOptionOption[]) { changeHandler(selectedOptions.map(o => o.label)); } diff --git a/x-pack/legacy/plugins/ml/public/application/jobs/new_job/pages/components/pick_fields_step/components/split_field/split_field_select.tsx b/x-pack/legacy/plugins/ml/public/application/jobs/new_job/pages/components/pick_fields_step/components/split_field/split_field_select.tsx index 378c088332ed4..816614fb2a772 100644 --- a/x-pack/legacy/plugins/ml/public/application/jobs/new_job/pages/components/pick_fields_step/components/split_field/split_field_select.tsx +++ b/x-pack/legacy/plugins/ml/public/application/jobs/new_job/pages/components/pick_fields_step/components/split_field/split_field_select.tsx @@ -5,7 +5,7 @@ */ import React, { FC } from 'react'; -import { EuiComboBox, EuiComboBoxOptionProps } from '@elastic/eui'; +import { EuiComboBox, EuiComboBoxOptionOption } from '@elastic/eui'; import { Field, SplitField } from '../../../../../../../../../common/types/fields'; @@ -31,7 +31,7 @@ export const SplitFieldSelect: FC = ({ testSubject, placeholder, }) => { - const options: EuiComboBoxOptionProps[] = fields.map( + const options: EuiComboBoxOptionOption[] = fields.map( f => ({ label: f.name, @@ -39,12 +39,12 @@ export const SplitFieldSelect: FC = ({ } as DropDownLabel) ); - const selection: EuiComboBoxOptionProps[] = []; + const selection: EuiComboBoxOptionOption[] = []; if (selectedField !== null) { selection.push({ label: selectedField.name, field: selectedField } as DropDownLabel); } - function onChange(selectedOptions: EuiComboBoxOptionProps[]) { + function onChange(selectedOptions: EuiComboBoxOptionOption[]) { const option = selectedOptions[0] as DropDownLabel; if (typeof option !== 'undefined') { changeHandler(option.field); diff --git a/x-pack/legacy/plugins/ml/public/application/jobs/new_job/pages/components/pick_fields_step/components/summary_count_field/summary_count_field_select.tsx b/x-pack/legacy/plugins/ml/public/application/jobs/new_job/pages/components/pick_fields_step/components/summary_count_field/summary_count_field_select.tsx index 6fe3aaf0a8652..8136008dce11b 100644 --- a/x-pack/legacy/plugins/ml/public/application/jobs/new_job/pages/components/pick_fields_step/components/summary_count_field/summary_count_field_select.tsx +++ b/x-pack/legacy/plugins/ml/public/application/jobs/new_job/pages/components/pick_fields_step/components/summary_count_field/summary_count_field_select.tsx @@ -5,7 +5,7 @@ */ import React, { FC, useContext } from 'react'; -import { EuiComboBox, EuiComboBoxOptionProps } from '@elastic/eui'; +import { EuiComboBox, EuiComboBoxOptionOption } from '@elastic/eui'; import { JobCreatorContext } from '../../../job_creator_context'; import { Field } from '../../../../../../../../../common/types/fields'; @@ -22,17 +22,17 @@ interface Props { export const SummaryCountFieldSelect: FC = ({ fields, changeHandler, selectedField }) => { const { jobCreator } = useContext(JobCreatorContext); - const options: EuiComboBoxOptionProps[] = [ + const options: EuiComboBoxOptionOption[] = [ ...createFieldOptions(fields, jobCreator.additionalFields), ...createDocCountFieldOption(jobCreator.aggregationFields.length > 0), ]; - const selection: EuiComboBoxOptionProps[] = []; + const selection: EuiComboBoxOptionOption[] = []; if (selectedField !== null) { selection.push({ label: selectedField }); } - function onChange(selectedOptions: EuiComboBoxOptionProps[]) { + function onChange(selectedOptions: EuiComboBoxOptionOption[]) { const option = selectedOptions[0]; if (typeof option !== 'undefined') { changeHandler(option.label); diff --git a/x-pack/legacy/plugins/ml/public/application/timeseriesexplorer/components/entity_control/entity_control.tsx b/x-pack/legacy/plugins/ml/public/application/timeseriesexplorer/components/entity_control/entity_control.tsx index 6727102f55a52..8911ed53e74d0 100644 --- a/x-pack/legacy/plugins/ml/public/application/timeseriesexplorer/components/entity_control/entity_control.tsx +++ b/x-pack/legacy/plugins/ml/public/application/timeseriesexplorer/components/entity_control/entity_control.tsx @@ -11,7 +11,7 @@ import { i18n } from '@kbn/i18n'; import { EuiComboBox, - EuiComboBoxOptionProps, + EuiComboBoxOptionOption, EuiFlexItem, EuiFormRow, EuiToolTip, @@ -29,13 +29,13 @@ interface EntityControlProps { isLoading: boolean; onSearchChange: (entity: Entity, queryTerm: string) => void; forceSelection: boolean; - options: EuiComboBoxOptionProps[]; + options: EuiComboBoxOptionOption[]; } interface EntityControlState { - selectedOptions: EuiComboBoxOptionProps[] | undefined; + selectedOptions: EuiComboBoxOptionOption[] | undefined; isLoading: boolean; - options: EuiComboBoxOptionProps[] | undefined; + options: EuiComboBoxOptionOption[] | undefined; } export class EntityControl extends Component { @@ -53,7 +53,7 @@ export class EntityControl extends Component 0) || (Array.isArray(selectedOptions) && @@ -84,7 +84,7 @@ export class EntityControl extends Component { + onChange = (selectedOptions: EuiComboBoxOptionOption[]) => { const options = selectedOptions.length > 0 ? selectedOptions : undefined; this.setState({ selectedOptions: options, diff --git a/x-pack/legacy/plugins/reporting/public/components/__snapshots__/report_info_button.test.tsx.snap b/x-pack/legacy/plugins/reporting/public/components/__snapshots__/report_info_button.test.tsx.snap index 2055afdcf2bfe..f89e90cc4860c 100644 --- a/x-pack/legacy/plugins/reporting/public/components/__snapshots__/report_info_button.test.tsx.snap +++ b/x-pack/legacy/plugins/reporting/public/components/__snapshots__/report_info_button.test.tsx.snap @@ -182,9 +182,13 @@ Array [ class="euiFlyoutBody__overflow" >
- Could not fetch the job info +
+ Could not fetch the job info +
@@ -243,9 +247,13 @@ Array [ class="euiFlyoutBody__overflow" >
- Could not fetch the job info +
+ Could not fetch the job info +
@@ -332,13 +340,17 @@ Array [
- -
- Could not fetch the job info -
- +
+ +
+ Could not fetch the job info +
+ +
@@ -440,13 +452,17 @@ Array [
- -
- Could not fetch the job info -
- +
+ +
+ Could not fetch the job info +
+ +
@@ -599,8 +615,12 @@ Array [ class="euiFlyoutBody__overflow" >
+ class="euiFlyoutBody__overflowContent" + > +
+
@@ -658,8 +678,12 @@ Array [ class="euiFlyoutBody__overflow" >
+ class="euiFlyoutBody__overflowContent" + > +
+
@@ -745,11 +769,15 @@ Array [
- -
- +
+ +
+ +
@@ -851,11 +879,15 @@ Array [
- -
- +
+ +
+ +
diff --git a/x-pack/legacy/plugins/siem/public/components/edit_data_provider/helpers.tsx b/x-pack/legacy/plugins/siem/public/components/edit_data_provider/helpers.tsx index 1b003f1336406..e6afc86a7ee67 100644 --- a/x-pack/legacy/plugins/siem/public/components/edit_data_provider/helpers.tsx +++ b/x-pack/legacy/plugins/siem/public/components/edit_data_provider/helpers.tsx @@ -4,7 +4,7 @@ * you may not use this file except in compliance with the Elastic License. */ import { findIndex } from 'lodash/fp'; -import { EuiComboBoxOptionProps } from '@elastic/eui'; +import { EuiComboBoxOptionOption } from '@elastic/eui'; import { BrowserField, BrowserFields, getAllFieldsByName } from '../../containers/source'; import { @@ -16,7 +16,7 @@ import { import * as i18n from './translations'; /** The list of operators to display in the `Operator` select */ -export const operatorLabels: EuiComboBoxOptionProps[] = [ +export const operatorLabels: EuiComboBoxOptionOption[] = [ { label: i18n.IS, }, @@ -38,7 +38,7 @@ export const getFieldNames = (category: Partial): string[] => : []; /** Returns all field names by category, for display in an `EuiComboBox` */ -export const getCategorizedFieldNames = (browserFields: BrowserFields): EuiComboBoxOptionProps[] => +export const getCategorizedFieldNames = (browserFields: BrowserFields): EuiComboBoxOptionOption[] => Object.keys(browserFields) .sort() .map(categoryId => ({ @@ -55,8 +55,8 @@ export const selectionsAreValid = ({ selectedOperator, }: { browserFields: BrowserFields; - selectedField: EuiComboBoxOptionProps[]; - selectedOperator: EuiComboBoxOptionProps[]; + selectedField: EuiComboBoxOptionOption[]; + selectedOperator: EuiComboBoxOptionOption[]; }): boolean => { const fieldId = selectedField.length > 0 ? selectedField[0].label : ''; const operator = selectedOperator.length > 0 ? selectedOperator[0].label : ''; @@ -69,7 +69,7 @@ export const selectionsAreValid = ({ /** Returns a `QueryOperator` based on the user's Operator selection */ export const getQueryOperatorFromSelection = ( - selectedOperator: EuiComboBoxOptionProps[] + selectedOperator: EuiComboBoxOptionOption[] ): QueryOperator => { const selection = selectedOperator.length > 0 ? selectedOperator[0].label : ''; @@ -88,7 +88,7 @@ export const getQueryOperatorFromSelection = ( /** * Returns `true` when the search excludes results that match the specified data provider */ -export const getExcludedFromSelection = (selectedOperator: EuiComboBoxOptionProps[]): boolean => { +export const getExcludedFromSelection = (selectedOperator: EuiComboBoxOptionOption[]): boolean => { const selection = selectedOperator.length > 0 ? selectedOperator[0].label : ''; switch (selection) { diff --git a/x-pack/legacy/plugins/siem/public/components/edit_data_provider/index.tsx b/x-pack/legacy/plugins/siem/public/components/edit_data_provider/index.tsx index 87e83e0c47b6d..5ecc96187532d 100644 --- a/x-pack/legacy/plugins/siem/public/components/edit_data_provider/index.tsx +++ b/x-pack/legacy/plugins/siem/public/components/edit_data_provider/index.tsx @@ -8,7 +8,7 @@ import { noop } from 'lodash/fp'; import { EuiButton, EuiComboBox, - EuiComboBoxOptionProps, + EuiComboBoxOptionOption, EuiFieldText, EuiFlexGroup, EuiFlexItem, @@ -64,7 +64,7 @@ const sanatizeValue = (value: string | number): string => export const getInitialOperatorLabel = ( isExcluded: boolean, operator: QueryOperator -): EuiComboBoxOptionProps[] => { +): EuiComboBoxOptionOption[] => { if (operator === ':') { return isExcluded ? [{ label: i18n.IS_NOT }] : [{ label: i18n.IS }]; } else { @@ -84,8 +84,8 @@ export const StatefulEditDataProvider = React.memo( timelineId, value, }) => { - const [updatedField, setUpdatedField] = useState([{ label: field }]); - const [updatedOperator, setUpdatedOperator] = useState( + const [updatedField, setUpdatedField] = useState([{ label: field }]); + const [updatedOperator, setUpdatedOperator] = useState( getInitialOperatorLabel(isExcluded, operator) ); const [updatedValue, setUpdatedValue] = useState(value); @@ -105,13 +105,13 @@ export const StatefulEditDataProvider = React.memo( } }; - const onFieldSelected = useCallback((selectedField: EuiComboBoxOptionProps[]) => { + const onFieldSelected = useCallback((selectedField: EuiComboBoxOptionOption[]) => { setUpdatedField(selectedField); focusInput(); }, []); - const onOperatorSelected = useCallback((operatorSelected: EuiComboBoxOptionProps[]) => { + const onOperatorSelected = useCallback((operatorSelected: EuiComboBoxOptionOption[]) => { setUpdatedOperator(operatorSelected); focusInput(); diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/search_super_select/index.tsx b/x-pack/legacy/plugins/siem/public/components/timeline/search_super_select/index.tsx index b8280aedd12fa..be83a4f7b33a7 100644 --- a/x-pack/legacy/plugins/siem/public/components/timeline/search_super_select/index.tsx +++ b/x-pack/legacy/plugins/siem/public/components/timeline/search_super_select/index.tsx @@ -16,8 +16,8 @@ import { EuiFilterButton, EuiFilterGroup, EuiPortal, + EuiSelectableOption, } from '@elastic/eui'; -import { Option } from '@elastic/eui/src/components/selectable/types'; import { isEmpty } from 'lodash/fp'; import React, { memo, useCallback, useMemo, useState } from 'react'; import { ListProps } from 'react-virtualized'; @@ -91,10 +91,10 @@ const getBasicSelectableOptions = (timelineId: string) => [ description: i18n.DEFAULT_TIMELINE_DESCRIPTION, favorite: [], label: i18n.DEFAULT_TIMELINE_TITLE, - id: null, + id: undefined, title: i18n.DEFAULT_TIMELINE_TITLE, checked: timelineId === '-1' ? 'on' : undefined, - } as Option, + } as EuiSelectableOption, ]; const ORIGINAL_PAGE_SIZE = 50; @@ -326,7 +326,7 @@ const SearchTimelineSuperSelectComponent: React.FC diff --git a/x-pack/legacy/plugins/siem/public/pages/detection_engine/rules/all/columns.tsx b/x-pack/legacy/plugins/siem/public/pages/detection_engine/rules/all/columns.tsx index 2214190de6a16..8cbad4e89c106 100644 --- a/x-pack/legacy/plugins/siem/public/pages/detection_engine/rules/all/columns.tsx +++ b/x-pack/legacy/plugins/siem/public/pages/detection_engine/rules/all/columns.tsx @@ -42,7 +42,7 @@ export const getActions = ( ) => [ { description: i18n.EDIT_RULE_SETTINGS, - icon: 'visControls', + icon: 'controlsHorizontal', name: i18n.EDIT_RULE_SETTINGS, onClick: (rowItem: Rule) => editRuleAction(rowItem, history), enabled: (rowItem: Rule) => !rowItem.immutable, diff --git a/x-pack/legacy/plugins/siem/public/pages/detection_engine/rules/components/import_rule_modal/index.tsx b/x-pack/legacy/plugins/siem/public/pages/detection_engine/rules/components/import_rule_modal/index.tsx index 9a68797aea79b..97649fb03dac0 100644 --- a/x-pack/legacy/plugins/siem/public/pages/detection_engine/rules/components/import_rule_modal/index.tsx +++ b/x-pack/legacy/plugins/siem/public/pages/detection_engine/rules/components/import_rule_modal/index.tsx @@ -113,8 +113,8 @@ export const ImportRuleModalComponent = ({ { - setSelectedFiles(Object.keys(files).length > 0 ? files : null); + onChange={(files: FileList | null) => { + setSelectedFiles(files && files.length > 0 ? files : null); }} display={'large'} fullWidth={true} diff --git a/x-pack/legacy/plugins/siem/public/pages/detection_engine/rules/details/index.tsx b/x-pack/legacy/plugins/siem/public/pages/detection_engine/rules/details/index.tsx index 83dd18f0f14b7..cd255b0951597 100644 --- a/x-pack/legacy/plugins/siem/public/pages/detection_engine/rules/details/index.tsx +++ b/x-pack/legacy/plugins/siem/public/pages/detection_engine/rules/details/index.tsx @@ -274,7 +274,7 @@ const RuleDetailsPageComponent: FC = ({ {ruleI18n.EDIT_RULE_SETTINGS} diff --git a/x-pack/legacy/plugins/transform/public/app/sections/create_transform/components/aggregation_dropdown/dropdown.tsx b/x-pack/legacy/plugins/transform/public/app/sections/create_transform/components/aggregation_dropdown/dropdown.tsx index 9ff235fb40d8a..157e0f76856c8 100644 --- a/x-pack/legacy/plugins/transform/public/app/sections/create_transform/components/aggregation_dropdown/dropdown.tsx +++ b/x-pack/legacy/plugins/transform/public/app/sections/create_transform/components/aggregation_dropdown/dropdown.tsx @@ -6,12 +6,12 @@ import React from 'react'; -import { EuiComboBox, EuiComboBoxOptionProps } from '@elastic/eui'; +import { EuiComboBox, EuiComboBoxOptionOption } from '@elastic/eui'; interface Props { - options: EuiComboBoxOptionProps[]; + options: EuiComboBoxOptionOption[]; placeholder?: string; - changeHandler(d: EuiComboBoxOptionProps[]): void; + changeHandler(d: EuiComboBoxOptionOption[]): void; testSubj?: string; } diff --git a/x-pack/legacy/plugins/transform/public/app/sections/create_transform/components/step_define/common.ts b/x-pack/legacy/plugins/transform/public/app/sections/create_transform/components/step_define/common.ts index 7b78d4ffccfa1..35e1ea02a5cef 100644 --- a/x-pack/legacy/plugins/transform/public/app/sections/create_transform/components/step_define/common.ts +++ b/x-pack/legacy/plugins/transform/public/app/sections/create_transform/components/step_define/common.ts @@ -4,7 +4,7 @@ * you may not use this file except in compliance with the Elastic License. */ import { get } from 'lodash'; -import { EuiComboBoxOptionProps, EuiDataGridSorting } from '@elastic/eui'; +import { EuiComboBoxOptionOption, EuiDataGridSorting } from '@elastic/eui'; import { IndexPattern, KBN_FIELD_TYPES, @@ -112,11 +112,11 @@ const illegalEsAggNameChars = /[[\]>]/g; export function getPivotDropdownOptions(indexPattern: IndexPattern) { // The available group by options - const groupByOptions: EuiComboBoxOptionProps[] = []; + const groupByOptions: EuiComboBoxOptionOption[] = []; const groupByOptionsData: PivotGroupByConfigWithUiSupportDict = {}; // The available aggregations - const aggOptions: EuiComboBoxOptionProps[] = []; + const aggOptions: EuiComboBoxOptionOption[] = []; const aggOptionsData: PivotAggsConfigWithUiSupportDict = {}; const ignoreFieldNames = ['_id', '_index', '_type']; diff --git a/x-pack/legacy/plugins/uptime/public/components/functional/ping_list/__tests__/ping_list.test.tsx b/x-pack/legacy/plugins/uptime/public/components/functional/ping_list/__tests__/ping_list.test.tsx index ba07d6c63b36c..7705c72fa14a0 100644 --- a/x-pack/legacy/plugins/uptime/public/components/functional/ping_list/__tests__/ping_list.test.tsx +++ b/x-pack/legacy/plugins/uptime/public/components/functional/ping_list/__tests__/ping_list.test.tsx @@ -8,7 +8,7 @@ import React from 'react'; import { shallowWithIntl } from 'test_utils/enzyme_helpers'; import { PingResults, Ping } from '../../../../../common/graphql/types'; import { PingListComponent, AllLocationOption, toggleDetails } from '../ping_list'; -import { EuiComboBoxOptionProps } from '@elastic/eui'; +import { EuiComboBoxOptionOption } from '@elastic/eui'; import { ExpandedRowMap } from '../../monitor_list/types'; describe('PingList component', () => { @@ -205,7 +205,7 @@ describe('PingList component', () => { loading={false} data={{ allPings }} onPageCountChange={jest.fn()} - onSelectedLocationChange={(loc: EuiComboBoxOptionProps[]) => {}} + onSelectedLocationChange={(loc: EuiComboBoxOptionOption[]) => {}} onSelectedStatusChange={jest.fn()} pageSize={30} selectedOption="down" diff --git a/x-pack/package.json b/x-pack/package.json index 585d05b3c8a13..11068bcccf561 100644 --- a/x-pack/package.json +++ b/x-pack/package.json @@ -179,7 +179,7 @@ "@elastic/apm-rum-react": "^0.3.2", "@elastic/datemath": "5.0.2", "@elastic/ems-client": "7.6.0", - "@elastic/eui": "19.0.0", + "@elastic/eui": "20.0.2", "@elastic/filesaver": "1.1.2", "@elastic/maki": "6.1.0", "@elastic/node-crypto": "^1.0.0", diff --git a/x-pack/plugins/infra/public/components/source_configuration/add_log_column_popover.tsx b/x-pack/plugins/infra/public/components/source_configuration/add_log_column_popover.tsx index 0835a904585ed..3c96d505dce4d 100644 --- a/x-pack/plugins/infra/public/components/source_configuration/add_log_column_popover.tsx +++ b/x-pack/plugins/infra/public/components/source_configuration/add_log_column_popover.tsx @@ -5,7 +5,7 @@ */ import { EuiBadge, EuiButton, EuiPopover, EuiPopoverTitle, EuiSelectable } from '@elastic/eui'; -import { Option } from '@elastic/eui/src/components/selectable/types'; +import { EuiSelectableOption } from '@elastic/eui'; import { FormattedMessage } from '@kbn/i18n/react'; import React, { useCallback, useMemo } from 'react'; import { v4 as uuidv4 } from 'uuid'; @@ -15,7 +15,7 @@ import { useVisibilityState } from '../../utils/use_visibility_state'; import { euiStyled } from '../../../../observability/public'; interface SelectableColumnOption { - optionProps: Option; + optionProps: EuiSelectableOption; columnConfiguration: LogColumnConfiguration; } @@ -78,13 +78,13 @@ export const AddLogColumnButtonAndPopover: React.FunctionComponent<{ [availableFields] ); - const availableOptions = useMemo( + const availableOptions = useMemo( () => availableColumnOptions.map(availableColumnOption => availableColumnOption.optionProps), [availableColumnOptions] ); const handleColumnSelection = useCallback( - (selectedOptions: Option[]) => { + (selectedOptions: EuiSelectableOption[]) => { closePopover(); const selectedOptionIndex = selectedOptions.findIndex( diff --git a/x-pack/plugins/infra/public/pages/logs/log_entry_categories/sections/top_categories/datasets_selector.tsx b/x-pack/plugins/infra/public/pages/logs/log_entry_categories/sections/top_categories/datasets_selector.tsx index 9c22caa4b3465..c2087e9032f59 100644 --- a/x-pack/plugins/infra/public/pages/logs/log_entry_categories/sections/top_categories/datasets_selector.tsx +++ b/x-pack/plugins/infra/public/pages/logs/log_entry_categories/sections/top_categories/datasets_selector.tsx @@ -4,13 +4,13 @@ * you may not use this file except in compliance with the Elastic License. */ -import { EuiComboBox, EuiComboBoxOptionProps } from '@elastic/eui'; +import { EuiComboBox, EuiComboBoxOptionOption } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import React, { useCallback, useMemo } from 'react'; import { getFriendlyNameForPartitionId } from '../../../../../../common/log_analysis'; -type DatasetOptionProps = EuiComboBoxOptionProps; +type DatasetOptionProps = EuiComboBoxOptionOption; export const DatasetsSelector: React.FunctionComponent<{ availableDatasets: string[]; diff --git a/x-pack/plugins/remote_clusters/public/application/sections/components/remote_cluster_form/__snapshots__/remote_cluster_form.test.js.snap b/x-pack/plugins/remote_clusters/public/application/sections/components/remote_cluster_form/__snapshots__/remote_cluster_form.test.js.snap index 45751997eb0d5..590ea27617adf 100644 --- a/x-pack/plugins/remote_clusters/public/application/sections/components/remote_cluster_form/__snapshots__/remote_cluster_form.test.js.snap +++ b/x-pack/plugins/remote_clusters/public/application/sections/components/remote_cluster_form/__snapshots__/remote_cluster_form.test.js.snap @@ -165,6 +165,7 @@ Array [ style="font-size:14px;display:inline-block" > @@ -473,6 +474,7 @@ Array [ style="font-size: 14px; display: inline-block;" > ; + option: EuiComboBoxOptionOption<{ isDeprecated: boolean }>; } export const RoleComboBoxOption = ({ option }: Props) => { diff --git a/x-pack/plugins/security/public/management/role_mappings/edit_role_mapping/rule_editor_panel/json_rule_editor.test.tsx b/x-pack/plugins/security/public/management/role_mappings/edit_role_mapping/rule_editor_panel/json_rule_editor.test.tsx index 43f6c50ea1172..c5b3ea433adaa 100644 --- a/x-pack/plugins/security/public/management/role_mappings/edit_role_mapping/rule_editor_panel/json_rule_editor.test.tsx +++ b/x-pack/plugins/security/public/management/role_mappings/edit_role_mapping/rule_editor_panel/json_rule_editor.test.tsx @@ -55,7 +55,7 @@ describe('JSONRuleEditor', () => { const wrapper = mountWithIntl(); const { value } = wrapper.find(EuiCodeEditor).props(); - expect(JSON.parse(value)).toEqual({ + expect(JSON.parse(value as string)).toEqual({ all: [ { any: [{ field: { username: '*' } }], @@ -90,10 +90,7 @@ describe('JSONRuleEditor', () => { const allRule = JSON.stringify(new AllRule().toRaw()); act(() => { - wrapper - .find(EuiCodeEditor) - .props() - .onChange(allRule + ', this makes invalid JSON'); + wrapper.find(EuiCodeEditor).props().onChange!(allRule + ', this makes invalid JSON'); }); expect(props.onValidityChange).toHaveBeenCalledTimes(1); @@ -121,10 +118,7 @@ describe('JSONRuleEditor', () => { }); act(() => { - wrapper - .find(EuiCodeEditor) - .props() - .onChange(invalidRule); + wrapper.find(EuiCodeEditor).props().onChange!(invalidRule); }); expect(props.onValidityChange).toHaveBeenCalledTimes(1); @@ -143,10 +137,7 @@ describe('JSONRuleEditor', () => { const allRule = JSON.stringify(new AllRule().toRaw()); act(() => { - wrapper - .find(EuiCodeEditor) - .props() - .onChange(allRule + ', this makes invalid JSON'); + wrapper.find(EuiCodeEditor).props().onChange!(allRule + ', this makes invalid JSON'); }); expect(props.onValidityChange).toHaveBeenCalledTimes(1); @@ -156,10 +147,7 @@ describe('JSONRuleEditor', () => { props.onValidityChange.mockReset(); act(() => { - wrapper - .find(EuiCodeEditor) - .props() - .onChange(allRule); + wrapper.find(EuiCodeEditor).props().onChange!(allRule); }); expect(props.onValidityChange).toHaveBeenCalledTimes(1); diff --git a/x-pack/plugins/security/public/management/roles/edit_role/privileges/es/__snapshots__/cluster_privileges.test.tsx.snap b/x-pack/plugins/security/public/management/roles/edit_role/privileges/es/__snapshots__/cluster_privileges.test.tsx.snap index b38b7e6634ada..a52438ca93638 100644 --- a/x-pack/plugins/security/public/management/roles/edit_role/privileges/es/__snapshots__/cluster_privileges.test.tsx.snap +++ b/x-pack/plugins/security/public/management/roles/edit_role/privileges/es/__snapshots__/cluster_privileges.test.tsx.snap @@ -6,6 +6,7 @@ exports[`it renders without crashing 1`] = ` key="clusterPrivs" > { }); }; - private onIndexPatternsChange = (newPatterns: EuiComboBoxOptionProps[]) => { + private onIndexPatternsChange = (newPatterns: EuiComboBoxOptionOption[]) => { this.props.onChange({ ...this.props.indexPrivilege, names: newPatterns.map(fromOption), }); }; - private onPrivilegeChange = (newPrivileges: EuiComboBoxOptionProps[]) => { + private onPrivilegeChange = (newPrivileges: EuiComboBoxOptionOption[]) => { this.props.onChange({ ...this.props.indexPrivilege, privileges: newPrivileges.map(fromOption), @@ -418,7 +418,7 @@ export class IndexPrivilegeForm extends Component { }); }; - private onGrantedFieldsChange = (grantedFields: EuiComboBoxOptionProps[]) => { + private onGrantedFieldsChange = (grantedFields: EuiComboBoxOptionOption[]) => { this.props.onChange({ ...this.props.indexPrivilege, field_security: { @@ -447,7 +447,7 @@ export class IndexPrivilegeForm extends Component { }); }; - private onDeniedFieldsChange = (deniedFields: EuiComboBoxOptionProps[]) => { + private onDeniedFieldsChange = (deniedFields: EuiComboBoxOptionOption[]) => { this.props.onChange({ ...this.props.indexPrivilege, field_security: { diff --git a/x-pack/plugins/security/public/management/roles/edit_role/privileges/kibana/space_aware_privilege_section/space_selector.tsx b/x-pack/plugins/security/public/management/roles/edit_role/privileges/kibana/space_aware_privilege_section/space_selector.tsx index 3e5ea9f146876..1e42a926c51f7 100644 --- a/x-pack/plugins/security/public/management/roles/edit_role/privileges/kibana/space_aware_privilege_section/space_selector.tsx +++ b/x-pack/plugins/security/public/management/roles/edit_role/privileges/kibana/space_aware_privilege_section/space_selector.tsx @@ -4,7 +4,7 @@ * you may not use this file except in compliance with the Elastic License. */ -import { EuiComboBox, EuiComboBoxOptionProps, EuiHealth, EuiHighlight } from '@elastic/eui'; +import { EuiComboBox, EuiComboBoxOptionOption, EuiHealth, EuiHighlight } from '@elastic/eui'; import { InjectedIntl } from '@kbn/i18n/react'; import React, { Component } from 'react'; import { Space, getSpaceColor } from '../../../../../../../../spaces/public'; @@ -65,7 +65,7 @@ export class SpaceSelector extends Component { ); } - private onChange = (selectedSpaces: EuiComboBoxOptionProps[]) => { + private onChange = (selectedSpaces: EuiComboBoxOptionOption[]) => { this.props.onChange(selectedSpaces.map(s => (s.id as string).split('spaceOption_')[1])); }; @@ -81,12 +81,12 @@ export class SpaceSelector extends Component { ) ); - return options.filter(Boolean) as EuiComboBoxOptionProps[]; + return options.filter(Boolean) as EuiComboBoxOptionOption[]; }; private getSelectedOptions = () => { const options = this.props.selectedSpaceIds.map(spaceIdToOption(this.props.spaces)); - return options.filter(Boolean) as EuiComboBoxOptionProps[]; + return options.filter(Boolean) as EuiComboBoxOptionOption[]; }; } diff --git a/x-pack/plugins/snapshot_restore/public/application/components/policy_form/steps/step_settings.tsx b/x-pack/plugins/snapshot_restore/public/application/components/policy_form/steps/step_settings.tsx index 45eea10a28311..fc743767e9f70 100644 --- a/x-pack/plugins/snapshot_restore/public/application/components/policy_form/steps/step_settings.tsx +++ b/x-pack/plugins/snapshot_restore/public/application/components/policy_form/steps/step_settings.tsx @@ -20,7 +20,7 @@ import { EuiComboBox, EuiToolTip, } from '@elastic/eui'; -import { Option } from '@elastic/eui/src/components/selectable/types'; +import { EuiSelectableOption } from '@elastic/eui'; import { SlmPolicyPayload, SnapshotConfig } from '../../../../../common/types'; import { documentationLinksService } from '../../../services/documentation'; import { useServices } from '../../../app_context'; @@ -45,9 +45,9 @@ export const PolicyStepSettings: React.FunctionComponent = ({ // States for choosing all indices, or a subset, including caching previously chosen subset list const [isAllIndices, setIsAllIndices] = useState(!Boolean(config.indices)); const [indicesSelection, setIndicesSelection] = useState([...indices]); - const [indicesOptions, setIndicesOptions] = useState( + const [indicesOptions, setIndicesOptions] = useState( indices.map( - (index): Option => ({ + (index): EuiSelectableOption => ({ label: index, checked: isAllIndices || @@ -210,7 +210,7 @@ export const PolicyStepSettings: React.FunctionComponent = ({ data-test-subj="deselectIndicesLink" onClick={() => { // TODO: Change this to setIndicesOptions() when https://github.com/elastic/eui/issues/2071 is fixed - indicesOptions.forEach((option: Option) => { + indicesOptions.forEach((option: EuiSelectableOption) => { option.checked = undefined; }); updatePolicyConfig({ indices: [] }); @@ -226,7 +226,7 @@ export const PolicyStepSettings: React.FunctionComponent = ({ { // TODO: Change this to setIndicesOptions() when https://github.com/elastic/eui/issues/2071 is fixed - indicesOptions.forEach((option: Option) => { + indicesOptions.forEach((option: EuiSelectableOption) => { option.checked = 'on'; }); updatePolicyConfig({ indices: [...indices] }); diff --git a/x-pack/plugins/snapshot_restore/public/application/components/repository_form/type_settings/hdfs_settings.tsx b/x-pack/plugins/snapshot_restore/public/application/components/repository_form/type_settings/hdfs_settings.tsx index c504cccf0ac4b..6d936f41206cc 100644 --- a/x-pack/plugins/snapshot_restore/public/application/components/repository_form/type_settings/hdfs_settings.tsx +++ b/x-pack/plugins/snapshot_restore/public/application/components/repository_form/type_settings/hdfs_settings.tsx @@ -5,6 +5,7 @@ */ import React, { Fragment, useState } from 'react'; +import { i18n } from '@kbn/i18n'; import { FormattedMessage } from '@kbn/i18n/react'; import { EuiCode, @@ -391,15 +392,13 @@ export const HDFSSettings: React.FunctionComponent = ({ }} showGutter={false} minLines={6} - aria-label={ - - } + aria-label={i18n.translate( + 'xpack.snapshotRestore.repositoryForm.typeHDFS.configurationAriaLabel', + { + defaultMessage: `Additional configuration for HDFS repository '{name}'`, + values: { name }, + } + )} onChange={(value: string) => { setAdditionalConf(value); try { diff --git a/x-pack/plugins/snapshot_restore/public/application/components/restore_snapshot_form/steps/step_logistics.tsx b/x-pack/plugins/snapshot_restore/public/application/components/restore_snapshot_form/steps/step_logistics.tsx index 6780ab4bc664e..0896b283a6762 100644 --- a/x-pack/plugins/snapshot_restore/public/application/components/restore_snapshot_form/steps/step_logistics.tsx +++ b/x-pack/plugins/snapshot_restore/public/application/components/restore_snapshot_form/steps/step_logistics.tsx @@ -20,7 +20,7 @@ import { EuiTitle, EuiComboBox, } from '@elastic/eui'; -import { Option } from '@elastic/eui/src/components/selectable/types'; +import { EuiSelectableOption } from '@elastic/eui'; import { RestoreSettings } from '../../../../../common/types'; import { documentationLinksService } from '../../../services/documentation'; import { useServices } from '../../../app_context'; @@ -48,9 +48,9 @@ export const RestoreSnapshotStepLogistics: React.FunctionComponent = // States for choosing all indices, or a subset, including caching previously chosen subset list const [isAllIndices, setIsAllIndices] = useState(!Boolean(restoreIndices)); - const [indicesOptions, setIndicesOptions] = useState( + const [indicesOptions, setIndicesOptions] = useState( snapshotIndices.map( - (index): Option => ({ + (index): EuiSelectableOption => ({ label: index, checked: isAllIndices || @@ -230,7 +230,7 @@ export const RestoreSnapshotStepLogistics: React.FunctionComponent = { // TODO: Change this to setIndicesOptions() when https://github.com/elastic/eui/issues/2071 is fixed - indicesOptions.forEach((option: Option) => { + indicesOptions.forEach((option: EuiSelectableOption) => { option.checked = undefined; }); updateRestoreSettings({ indices: [] }); @@ -249,7 +249,7 @@ export const RestoreSnapshotStepLogistics: React.FunctionComponent = { // TODO: Change this to setIndicesOptions() when https://github.com/elastic/eui/issues/2071 is fixed - indicesOptions.forEach((option: Option) => { + indicesOptions.forEach((option: EuiSelectableOption) => { option.checked = 'on'; }); updateRestoreSettings({ indices: [...snapshotIndices] }); diff --git a/x-pack/plugins/snapshot_restore/public/application/components/restore_snapshot_form/steps/step_review.tsx b/x-pack/plugins/snapshot_restore/public/application/components/restore_snapshot_form/steps/step_review.tsx index 3f7daea361f7f..52d162d0963f3 100644 --- a/x-pack/plugins/snapshot_restore/public/application/components/restore_snapshot_form/steps/step_review.tsx +++ b/x-pack/plugins/snapshot_restore/public/application/components/restore_snapshot_form/steps/step_review.tsx @@ -282,12 +282,10 @@ export const RestoreSnapshotStepReview: React.FunctionComponent = ({ setOptions={{ maxLines: Infinity }} value={JSON.stringify(serializedRestoreSettings, null, 2)} editorProps={{ $blockScrolling: Infinity }} - aria-label={ - - } + aria-label={i18n.translate( + 'xpack.snapshotRestore.restoreForm.stepReview.jsonTab.jsonAriaLabel', + { defaultMessage: 'Restore settings to be executed' } + )} /> ); diff --git a/x-pack/plugins/snapshot_restore/public/application/components/restore_snapshot_form/steps/step_settings.tsx b/x-pack/plugins/snapshot_restore/public/application/components/restore_snapshot_form/steps/step_settings.tsx index fd29fc3105f90..d9a5a06d862d6 100644 --- a/x-pack/plugins/snapshot_restore/public/application/components/restore_snapshot_form/steps/step_settings.tsx +++ b/x-pack/plugins/snapshot_restore/public/application/components/restore_snapshot_form/steps/step_settings.tsx @@ -183,12 +183,10 @@ export const RestoreSnapshotStepSettings: React.FunctionComponent = ( showGutter={false} minLines={6} maxLines={15} - aria-label={ - - } + aria-label={i18n.translate( + 'xpack.snapshotRestore.restoreForm.stepSettings.indexSettingsAriaLabel', + { defaultMessage: 'Index settings to modify' } + )} onChange={(value: string) => { updateRestoreSettings({ indexSettings: value, diff --git a/x-pack/plugins/snapshot_restore/public/application/sections/home/policy_list/policy_details/tabs/tab_history.tsx b/x-pack/plugins/snapshot_restore/public/application/sections/home/policy_list/policy_details/tabs/tab_history.tsx index 708042359d088..22c37241348e7 100644 --- a/x-pack/plugins/snapshot_restore/public/application/sections/home/policy_list/policy_details/tabs/tab_history.tsx +++ b/x-pack/plugins/snapshot_restore/public/application/sections/home/policy_list/policy_details/tabs/tab_history.tsx @@ -4,6 +4,7 @@ * you may not use this file except in compliance with the Elastic License. */ import React, { Fragment } from 'react'; +import { i18n } from '@kbn/i18n'; import { FormattedMessage } from '@kbn/i18n/react'; import { EuiCodeEditor, @@ -155,15 +156,13 @@ export const TabHistory: React.FunctionComponent = ({ policy }) => { maxLines={12} wrapEnabled={true} showGutter={false} - aria-label={ - - } + aria-label={i18n.translate( + 'xpack.snapshotRestore.policyDetails.lastFailure.detailsAriaLabel', + { + defaultMessage: `Last failure details for policy '{name}'`, + values: { name }, + } + )} /> diff --git a/x-pack/plugins/snapshot_restore/public/application/sections/home/repository_list/repository_details/type_details/default_details.tsx b/x-pack/plugins/snapshot_restore/public/application/sections/home/repository_list/repository_details/type_details/default_details.tsx index 6b99628863e77..80bf9fdee24e1 100644 --- a/x-pack/plugins/snapshot_restore/public/application/sections/home/repository_list/repository_details/type_details/default_details.tsx +++ b/x-pack/plugins/snapshot_restore/public/application/sections/home/repository_list/repository_details/type_details/default_details.tsx @@ -6,6 +6,7 @@ import 'brace/theme/textmate'; import React, { Fragment } from 'react'; +import { i18n } from '@kbn/i18n'; import { FormattedMessage } from '@kbn/i18n/react'; import { EuiCodeEditor, EuiSpacer, EuiTitle } from '@elastic/eui'; @@ -47,15 +48,15 @@ export const DefaultDetails: React.FunctionComponent = ({ }} showGutter={false} minLines={6} - aria-label={ - - } + }, + } + )} /> ); diff --git a/x-pack/plugins/spaces/public/management/edit_space/customize_space/__snapshots__/customize_space_avatar.test.tsx.snap b/x-pack/plugins/spaces/public/management/edit_space/customize_space/__snapshots__/customize_space_avatar.test.tsx.snap index 562641d8fca51..269b2b6908183 100644 --- a/x-pack/plugins/spaces/public/management/edit_space/customize_space/__snapshots__/customize_space_avatar.test.tsx.snap +++ b/x-pack/plugins/spaces/public/management/edit_space/customize_space/__snapshots__/customize_space_avatar.test.tsx.snap @@ -53,14 +53,7 @@ exports[`renders without crashing 1`] = ` labelType="label" > { image.src = imgUrl; }; - private onFileUpload = (files: File[]) => { - const [file] = files; + private onFileUpload = (files: FileList | null) => { + if (files == null) return; + const file = files[0]; if (imageTypes.indexOf(file.type) > -1) { encode(file).then((dataurl: string) => this.handleImageUpload(dataurl)); } @@ -169,7 +170,7 @@ export class CustomizeSpaceAvatar extends Component { } )} onChange={this.onFileUpload} - accept={imageTypes} + accept={imageTypes.join(',')} /> ); diff --git a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/webhook.tsx b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/webhook.tsx index fecf846ed6c9a..8625487282880 100644 --- a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/webhook.tsx +++ b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/webhook.tsx @@ -473,8 +473,6 @@ const WebhookParamsFields: React.FunctionComponent 0 && body !== undefined} mode="json" width="100%" height="200px" diff --git a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_alert_types/threshold/expression.tsx b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_alert_types/threshold/expression.tsx index a2ef67be7bca2..866a7e497742c 100644 --- a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_alert_types/threshold/expression.tsx +++ b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_alert_types/threshold/expression.tsx @@ -17,7 +17,7 @@ import { EuiSelect, EuiSpacer, EuiComboBox, - EuiComboBoxOptionProps, + EuiComboBoxOptionOption, EuiFormRow, EuiCallOut, } from '@elastic/eui'; @@ -104,7 +104,7 @@ export const IndexThresholdAlertTypeExpression: React.FunctionComponent>([]); - const [indexOptions, setIndexOptions] = useState([]); + const [indexOptions, setIndexOptions] = useState([]); const [timeFieldOptions, setTimeFieldOptions] = useState([firstFieldOption]); const [isIndiciesLoading, setIsIndiciesLoading] = useState(false); @@ -256,7 +256,7 @@ export const IndexThresholdAlertTypeExpression: React.FunctionComponent { + onChange={async (selected: EuiComboBoxOptionOption[]) => { setAlertParams( 'index', selected.map(aSelected => aSelected.value) diff --git a/x-pack/plugins/triggers_actions_ui/public/common/expression_items/of.test.tsx b/x-pack/plugins/triggers_actions_ui/public/common/expression_items/of.test.tsx index 2e674f4fb47b1..4d0017ce5c8e6 100644 --- a/x-pack/plugins/triggers_actions_ui/public/common/expression_items/of.test.tsx +++ b/x-pack/plugins/triggers_actions_ui/public/common/expression_items/of.test.tsx @@ -23,6 +23,7 @@ describe('of expression', () => { expect(wrapper.find('[data-test-subj="availablefieldsOptionsComboBox"]')) .toMatchInlineSnapshot(` { ); expect(wrapper.find('[data-test-subj="availablefieldsOptionsComboBox"]')) .toMatchInlineSnapshot(` - + /> `); }); diff --git a/x-pack/plugins/watcher/public/application/sections/watch_edit/components/json_watch_edit/json_watch_edit_simulate.tsx b/x-pack/plugins/watcher/public/application/sections/watch_edit/components/json_watch_edit/json_watch_edit_simulate.tsx index c906d05be64be..b9fce52b480ef 100644 --- a/x-pack/plugins/watcher/public/application/sections/watch_edit/components/json_watch_edit/json_watch_edit_simulate.tsx +++ b/x-pack/plugins/watcher/public/application/sections/watch_edit/components/json_watch_edit/json_watch_edit_simulate.tsx @@ -374,7 +374,6 @@ export const JsonWatchEditSimulate = ({ errors={executeWatchErrors} > = ({ errors={errors} > { value: anIndex, }; })} - onChange={async (selected: EuiComboBoxOptionProps[]) => { + onChange={async (selected: EuiComboBoxOptionOption[]) => { setWatchProperty( 'index', selected.map(aSelected => aSelected.value) diff --git a/x-pack/typings/@elastic/eui/index.d.ts b/x-pack/typings/@elastic/eui/index.d.ts index 688d1a2fa127d..ea7a81fa986ce 100644 --- a/x-pack/typings/@elastic/eui/index.d.ts +++ b/x-pack/typings/@elastic/eui/index.d.ts @@ -7,7 +7,6 @@ // TODO: Remove once typescript definitions are in EUI declare module '@elastic/eui' { - export const EuiCodeEditor: React.FC; export const Query: any; } diff --git a/yarn.lock b/yarn.lock index dde08490d62f0..1cf77d50d7dbb 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1952,16 +1952,17 @@ tabbable "^1.1.0" uuid "^3.1.0" -"@elastic/eui@19.0.0": - version "19.0.0" - resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-19.0.0.tgz#cf7d644945c95997d442585cf614e853f173746e" - integrity sha512-8/USz56MYhu6bV4oecJct7tsdi0ktErOIFLobNmQIKdxDOni/KpttX6IHqxM7OuIWi1AEMXoIozw68+oyL/uKQ== +"@elastic/eui@20.0.2": + version "20.0.2" + resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-20.0.2.tgz#c64b16fef15da6aa9e627d45cdd372f1fc676359" + integrity sha512-8TtazI7RO1zJH4Qkl6TZKvAxaFG9F8BEdwyGmbGhyvXOJbkvttRzoaEg9jSQpKr+z7w2vsjGNbza/fEAE41HOA== dependencies: "@types/chroma-js" "^1.4.3" "@types/enzyme" "^3.1.13" "@types/lodash" "^4.14.116" "@types/numeral" "^0.0.25" "@types/react-beautiful-dnd" "^10.1.0" + "@types/react-input-autosize" "^2.0.2" "@types/react-virtualized" "^9.18.7" chroma-js "^2.0.4" classnames "^2.2.5" @@ -5011,6 +5012,13 @@ dependencies: "@types/react" "*" +"@types/react-input-autosize@^2.0.2": + version "2.0.2" + resolved "https://registry.yarnpkg.com/@types/react-input-autosize/-/react-input-autosize-2.0.2.tgz#6ccdfb100c21b6096c1a04c3c3fac196b0ce61c1" + integrity sha512-QzewaD5kog7c6w5e3dretb+50oM8RDdDvVumQKCtPjI6VHyR8lA/HxCiTrv5l9Vgbi4NCitYuix/NorOevlrng== + dependencies: + "@types/react" "*" + "@types/react-intl@^2.3.15": version "2.3.17" resolved "https://registry.yarnpkg.com/@types/react-intl/-/react-intl-2.3.17.tgz#e1fc6e46e8af58bdef9531259d509380a8a99e8e"