github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-06-27 10:40:07 -04:00
Code Issues Projects Releases Packages Wiki Activity

Upgrade EUI to v20.0.2 (#59199)

Browse source 
* 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
This commit is contained in:
Chandler Prall 2020-03-05 12:27:52 -07:00 • committed by GitHub
parent e0022be6d3
commit 096dda6f34
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
91 changed files with 1393 additions and 1370 deletions
Download patch file Download diff file Expand all files Collapse all files

2
package.json
View file

@ -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",

2
packages/kbn-ui-shared-deps/package.json
View file

@ -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",

8
src/legacy/core_plugins/input_control_vis/public/components/editor/field_select.tsx
View file

@ -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<EuiComboBoxOptionProps<string>>;
fields: Array<EuiComboBoxOptionOption<string>>;
indexPatternId: string;
}
@ -105,7 +105,7 @@ class FieldSelectUi extends Component<FieldSelectUiProps, FieldSelectUiState> {
}
const fieldsByTypeMap = new Map<string, string[]>();
const fields: Array<EuiComboBoxOptionProps<string>> = [];
const fields: Array<EuiComboBoxOptionOption<string>> = [];
indexPattern.fields
.filter(this.props.filterField ?? (() => true))
.forEach((field: IFieldType) => {
@ -135,7 +135,7 @@ class FieldSelectUi extends Component<FieldSelectUiProps, FieldSelectUiState> {
});
}, 300);
onChange = (selectedOptions: Array<EuiComboBoxOptionProps<any>>) => {
onChange = (selectedOptions: Array<EuiComboBoxOptionOption<any>>) => {
this.props.onChange(_.get(selectedOptions, '0.value'));
};

2
src/legacy/core_plugins/input_control_vis/public/components/vis/list_control.tsx
View file

@ -76,7 +76,7 @@ class ListControlUi extends PureComponent<ListControlUiProps, ListControlUiState
this.isMounted = false;
};
setTextInputRef = (ref: HTMLElement) => {
setTextInputRef = (ref: HTMLInputElement | null) => {
this.textInput = ref;
};

2
src/legacy/core_plugins/input_control_vis/public/input_control_vis_type.ts
View file

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

4
src/legacy/core_plugins/vis_default_editor/public/components/agg_select.tsx
View file

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

2
src/legacy/core_plugins/vis_default_editor/public/components/controls/field.test.tsx
View file

@ -29,7 +29,7 @@ import { FieldParamEditor, FieldParamEditorProps } from './field';
import { IAggConfig } from '../../legacy_imports';
function callComboBoxOnChange(comp: ReactWrapper, value: any = []) {
const comboBoxProps: EuiComboBoxProps<string> = comp.find(EuiComboBox).props();
const comboBoxProps = comp.find(EuiComboBox).props() as EuiComboBoxProps<any>;
if (comboBoxProps.onChange) {
comboBoxProps.onChange(value);
}

4
src/legacy/core_plugins/vis_default_editor/public/components/controls/field.tsx
View file

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

6
src/legacy/core_plugins/vis_default_editor/public/components/controls/time_interval.tsx
View file

@ -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 : '');

4
src/legacy/core_plugins/vis_type_timelion/public/components/timelion_interval.tsx
View file

@ -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<EuiComboBoxOptionProps<string>>) => {
(opts: Array<EuiComboBoxOptionOption<string>>) => {
setValue((opts[0] && opts[0].value) || '');
},
[setValue]

1
src/legacy/core_plugins/vis_type_timeseries/public/components/icon_select/__snapshots__/icon_select.test.js.snap generated
View file

@ -2,6 +2,7 @@
exports[`src/legacy/core_plugins/metrics/public/components/icon_select/icon_select.js <IconSelect /> should render and match a snapshot 1`] = `
<EuiComboBox
async={false}
compressed={false}
fullWidth={false}
isClearable={false}

1
src/legacy/core_plugins/vis_type_timeseries/public/components/splits/__snapshots__/terms.test.js.snap generated
View file

@ -193,6 +193,7 @@ exports[`src/legacy/core_plugins/metrics/public/components/splits/terms.test.js
labelType="label"
>
<EuiComboBox
async={false}
compressed={false}
fullWidth={false}
isClearable={false}

2
src/legacy/core_plugins/vis_type_vislib/public/heatmap.ts
View file

@ -44,7 +44,7 @@ export interface HeatmapVisParams extends CommonVislibParams, ColorSchemaVislibP
export const createHeatmapVisTypeDefinition = (deps: VisTypeVislibDependencies) => ({
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',
}),

12
src/plugins/advanced_settings/public/management_app/components/field/__snapshots__/field.test.tsx.snap generated
View file

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

6
src/plugins/advanced_settings/public/management_app/components/field/field.test.tsx
View file

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

15
src/plugins/advanced_settings/public/management_app/components/field/field.tsx
View file

@ -90,7 +90,7 @@ export const getEditableValue = (
};
export class Field extends PureComponent<FieldProps> {
private changeImageForm: EuiFilePicker | undefined = React.createRef();
private changeImageForm = React.createRef<EuiFilePicker>();
getDisplayedDefaultValue(
type: UiSettingsType,
@ -138,7 +138,7 @@ export class Field extends PureComponent<FieldProps> {
}
}
onCodeEditorChange = (value: UiSettingsType) => {
onCodeEditorChange = (value: string) => {
const { defVal, type } = this.props.setting;
let newUnsavedValue;
@ -212,7 +212,9 @@ export class Field extends PureComponent<FieldProps> {
});
};
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<FieldProps> {
};
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<FieldProps> {
$blockScrolling: Infinity,
}}
showGutter={false}
fullWidth
/>
</div>
);

6
src/plugins/data/public/ui/filter_bar/filter_editor/generic_combo_box.tsx
View file

@ -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<T> {
@ -38,7 +38,7 @@ export function GenericComboBox<T>(props: GenericComboBoxProps<T>) {
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<T>(props: GenericComboBoxProps<T>) {
return euiOptions[options.indexOf(option)];
});
const onComboBoxChange = (newOptions: EuiComboBoxOptionProps[]) => {
const onComboBoxChange = (newOptions: EuiComboBoxOptionOption[]) => {
const newValues = newOptions.map(({ label }) => {
return options[labels.indexOf(label)];
});

2
src/plugins/data/public/ui/index_pattern_select/index_pattern_select.tsx
View file

@ -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;
}

4
src/plugins/es_ui_shared/static/forms/components/fields/combobox_field.tsx
View file

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

6
src/plugins/es_ui_shared/static/forms/helpers/de_serializers.ts
View file

@ -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<string, FuncType> = {
// This deSerializer takes the previously selected options and map them
@ -31,7 +31,7 @@ export const multiSelectComponent: Record<string, FuncType> = {
return selectOptions;
}
return (selectOptions as Option[]).map(option => ({
return (selectOptions as EuiSelectableOption[]).map(option => ({
...option,
checked: (defaultFormValue as string[]).includes(option.label) ? 'on' : undefined,
}));

4
src/plugins/es_ui_shared/static/forms/helpers/field_validators/min_selectable_selection.ts
View file

@ -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',

4
src/plugins/es_ui_shared/static/forms/helpers/serializers.ts
View file

@ -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<string, SerializerFunc<string[]>> = {
@ -45,7 +45,7 @@ export const multiSelectComponent: Record<string, SerializerFunc<string[]>> = {
*
* @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);
},
};

32
src/plugins/inspector/public/ui/__snapshots__/inspector_panel.test.tsx.snap generated
View file

@ -326,21 +326,25 @@ exports[`InspectorPanel should render as expected 1`] = `
<div
className="euiFlyoutBody__overflow"
>
<component
adapters={
Object {
"bardapter": Object {},
"foodapter": Object {
"foo": [Function],
},
}
}
title="Inspector"
<div
className="euiFlyoutBody__overflowContent"
>
<h1>
View 1
</h1>
</component>
<component
adapters={
Object {
"bardapter": Object {},
"foodapter": Object {
"foo": [Function],
},
}
}
title="Inspector"
>
<h1>
View 1
</h1>
</component>
</div>
</div>
</div>
</EuiFlyoutBody>

2
test/interpreter_functional/plugins/kbn_tp_run_pipeline/package.json
View file

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

2
test/plugin_functional/plugins/kbn_tp_custom_visualizations/package.json
View file

@ -7,7 +7,7 @@
},
"license": "Apache-2.0",
"dependencies": {
"@elastic/eui": "19.0.0",
"@elastic/eui": "20.0.2",
"react": "^16.12.0"
}
}

2
test/plugin_functional/plugins/kbn_tp_custom_visualizations/public/self_changing_vis/self_changing_vis.js
View file

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

2
test/plugin_functional/plugins/kbn_tp_embeddable_explorer/package.json
View file

@ -8,7 +8,7 @@
},
"license": "Apache-2.0",
"dependencies": {
"@elastic/eui": "19.0.0",
"@elastic/eui": "20.0.2",
"react": "^16.12.0"
},
"scripts": {

2
test/plugin_functional/plugins/kbn_tp_sample_panel_action/package.json
View file

@ -8,7 +8,7 @@
},
"license": "Apache-2.0",
"dependencies": {
"@elastic/eui": "19.0.0",
"@elastic/eui": "20.0.2",
"react": "^16.12.0"
},
"scripts": {

1
typings/@elastic/eui/index.d.ts vendored
View file

@ -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<any>;
export const Query: any;
}

2
x-pack/legacy/plugins/beats_management/public/components/inputs/code_editor.tsx
View file

@ -93,13 +93,11 @@ class CodeEditor extends Component<
error={error ? getErrorMessage() : []}
>
<EuiCodeEditor
id={id}
name={name}
mode={mode}
theme="github"
value={getValue() || ''}
isReadOnly={isReadOnly || false}
isInvalid={error}
onChange={this.handleChange}
onBlur={this.handleBlur}
width={fullWidth ? '100%' : undefined}

3
x-pack/legacy/plugins/canvas/public/components/asset_manager/asset_manager.tsx
View file

@ -110,7 +110,8 @@ export class AssetManager extends PureComponent<Props, State> {
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 });

2
x-pack/legacy/plugins/canvas/public/components/asset_manager/asset_modal.tsx
View file

@ -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 */

5
x-pack/legacy/plugins/canvas/public/components/custom_element_modal/custom_element_modal.tsx
View file

@ -100,8 +100,9 @@ export class CustomElementModal extends PureComponent<Props, State> {
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));

2008
x-pack/legacy/plugins/canvas/public/components/keyboard_shortcuts_doc/__examples__/__snapshots__/keyboard_shortcuts_doc.stories.storyshot generated
View file

File diff suppressed because it is too large Load diff

13
x-pack/legacy/plugins/graph/public/components/field_manager/field_editor.tsx
View file

@ -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<EuiComboBoxOptionProps<string>>
}
options={toOptions(allFields, initialField)}
selectedOptions={[
{
value: currentField.name,
label: currentField.name,
type: currentField.type,
type: currentField.type as ButtonHTMLAttributes<HTMLButtonElement>['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<HTMLButtonElement>['type'] }> {
return fields
.filter(field => !field.selected || field === currentField)
.map(({ name, type }) => ({
label: name,
value: name,
type,
type: type as ButtonHTMLAttributes<HTMLButtonElement>['type'],
}));
}

8
x-pack/legacy/plugins/lens/public/indexpattern_datasource/dimension_panel/field_select.tsx
View file

@ -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 => {

12
x-pack/legacy/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/create_analytics_form/create_analytics_form.tsx
View file

@ -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<CreateAnalyticsFormProps> = ({ 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<CreateAnalyticsFormProps> = ({ 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<CreateAnalyticsFormProps> = ({ 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<CreateAnalyticsFormProps> = ({ 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<CreateAnalyticsFormProps> = ({ actions, sta
return errors;
};
const onSourceIndexChange = (selectedOptions: EuiComboBoxOptionProps[]) => {
const onSourceIndexChange = (selectedOptions: EuiComboBoxOptionOption[]) => {
setFormState({
excludes: [],
excludesOptions: [],

6
x-pack/legacy/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/hooks/use_create_analytics_form/state.ts
View file

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

3
x-pack/legacy/plugins/ml/public/application/datavisualizer/file_based/components/edit_flyout/__snapshots__/overrides.test.js.snap generated
View file

@ -40,6 +40,7 @@ exports[`Overrides render overrides 1`] = `
labelType="label"
>
<EuiComboBox
async={false}
compressed={false}
fullWidth={false}
isClearable={false}
@ -99,6 +100,7 @@ exports[`Overrides render overrides 1`] = `
labelType="label"
>
<EuiComboBox
async={false}
compressed={false}
fullWidth={false}
isClearable={false}
@ -338,6 +340,7 @@ exports[`Overrides render overrides 1`] = `
labelType="label"
>
<EuiComboBox
async={false}
compressed={false}
fullWidth={false}
isClearable={false}

4
x-pack/legacy/plugins/ml/public/application/jobs/components/custom_url_editor/__snapshots__/editor.test.tsx.snap generated
View file

@ -135,6 +135,7 @@ exports[`CustomUrlEditor renders the editor for a dashboard type URL with a labe
labelType="label"
>
<EuiComboBox
async={false}
compressed={false}
fullWidth={false}
isClearable={true}
@ -334,6 +335,7 @@ exports[`CustomUrlEditor renders the editor for a discover type URL with an enti
labelType="label"
>
<EuiComboBox
async={false}
compressed={false}
fullWidth={false}
isClearable={true}
@ -571,6 +573,7 @@ exports[`CustomUrlEditor renders the editor for a discover type URL with valid t
labelType="label"
>
<EuiComboBox
async={false}
compressed={false}
fullWidth={false}
isClearable={true}
@ -808,6 +811,7 @@ exports[`CustomUrlEditor renders the editor for a new dashboard type URL with no
labelType="label"
>
<EuiComboBox
async={false}
compressed={false}
fullWidth={false}
isClearable={true}

10
x-pack/legacy/plugins/ml/public/application/jobs/components/custom_url_editor/editor.tsx
View file

@ -8,6 +8,7 @@ import React, { ChangeEvent, FC } from 'react';
import {
EuiComboBox,
EuiComboBoxOptionOption,
EuiFieldText,
EuiFlexGroup,
EuiFlexItem,
@ -61,11 +62,6 @@ interface CustomUrlEditorProps {
queryEntityFieldNames: string[];
}
interface EuiComboBoxOption {
label?: string;
value?: string;
}
/*
* React component for the form for editing a custom URL.
*/
@ -117,7 +113,7 @@ export const CustomUrlEditor: FC<CustomUrlEditorProps> = ({
});
};
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<CustomUrlEditorProps> = ({
});
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 }));

4
x-pack/legacy/plugins/ml/public/application/jobs/jobs_list/components/ml_job_editor/ml_job_editor.tsx
View file

@ -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<MlJobEditorProps> = ({
value,

12
x-pack/legacy/plugins/ml/public/application/jobs/new_job/common/components/job_groups_input.tsx
View file

@ -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<JobGroupsInputProps> = memo(
({ existingGroups, selectedGroups, onChange, validation }) => {
const options = existingGroups.map<EuiComboBoxOptionProps>(g => ({
const options = existingGroups.map<EuiComboBoxOptionOption>(g => ({
label: g,
color: tabColor(g),
}));
const selectedOptions = selectedGroups.map<EuiComboBoxOptionProps>(g => ({
const selectedOptions = selectedGroups.map<EuiComboBoxOptionOption>(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),
};

11
x-pack/legacy/plugins/ml/public/application/jobs/new_job/pages/components/datafeed_step/components/time_field/time_field_select.tsx
View file

@ -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<Props> = ({ 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);

6
x-pack/legacy/plugins/ml/public/application/jobs/new_job/pages/components/job_details_step/components/additional_section/components/calendars/calendars_selection.tsx
View file

@ -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<Calendar[]>(jobCreator.calendars);
const [selectedOptions, setSelectedOptions] = useState<Array<EuiComboBoxOptionProps<Calendar>>>(
const [selectedOptions, setSelectedOptions] = useState<Array<EuiComboBoxOptionOption<Calendar>>>(
[]
);
const [options, setOptions] = useState<Array<EuiComboBoxOptionProps<Calendar>>>([]);
const [options, setOptions] = useState<Array<EuiComboBoxOptionOption<Calendar>>>([]);
const [isLoading, setIsLoading] = useState(false);
async function loadCalendars() {

12
x-pack/legacy/plugins/ml/public/application/jobs/new_job/pages/components/job_details_step/components/groups/groups_input.tsx
View file

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

30
x-pack/legacy/plugins/ml/public/application/jobs/new_job/pages/components/pick_fields_step/components/advanced_detector_modal/advanced_detector_modal.tsx
View file

@ -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<Props> = ({
payload,
@ -90,7 +90,7 @@ export const AdvancedDetectorModal: FC<Props> = ({
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<Props> = ({
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<Props> = ({
);
};
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);
}

10
x-pack/legacy/plugins/ml/public/application/jobs/new_job/pages/components/pick_fields_step/components/agg_select/agg_select.tsx
View file

@ -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<Props> = ({ 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

8
x-pack/legacy/plugins/ml/public/application/jobs/new_job/pages/components/pick_fields_step/components/categorization_field/categorization_field_select.tsx
View file

@ -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<Props> = ({ 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);

8
x-pack/legacy/plugins/ml/public/application/jobs/new_job/pages/components/pick_fields_step/components/influencers/influencers_select.tsx
View file

@ -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<Props> = ({ 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));
}

8
x-pack/legacy/plugins/ml/public/application/jobs/new_job/pages/components/pick_fields_step/components/split_field/split_field_select.tsx
View file

@ -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<Props> = ({
testSubject,
placeholder,
}) => {
const options: EuiComboBoxOptionProps[] = fields.map(
const options: EuiComboBoxOptionOption[] = fields.map(
f =>
({
label: f.name,
@ -39,12 +39,12 @@ export const SplitFieldSelect: FC<Props> = ({
} 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);

8
x-pack/legacy/plugins/ml/public/application/jobs/new_job/pages/components/pick_fields_step/components/summary_count_field/summary_count_field_select.tsx
View file

@ -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<Props> = ({ 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);

12
x-pack/legacy/plugins/ml/public/application/timeseriesexplorer/components/entity_control/entity_control.tsx
View file

@ -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<EntityControlProps, EntityControlState> {
@ -53,7 +53,7 @@ export class EntityControl extends Component<EntityControlProps, EntityControlSt
const { fieldValue } = entity;
let selectedOptionsUpdate: EuiComboBoxOptionProps[] | undefined = selectedOptions;
let selectedOptionsUpdate: EuiComboBoxOptionOption[] | undefined = selectedOptions;
if (
(selectedOptions === undefined && fieldValue.length > 0) ||
(Array.isArray(selectedOptions) &&
@ -84,7 +84,7 @@ export class EntityControl extends Component<EntityControlProps, EntityControlSt
}
}
onChange = (selectedOptions: EuiComboBoxOptionProps[]) => {
onChange = (selectedOptions: EuiComboBoxOptionOption[]) => {
const options = selectedOptions.length > 0 ? selectedOptions : undefined;
this.setState({
selectedOptions: options,

96
x-pack/legacy/plugins/reporting/public/components/__snapshots__/report_info_button.test.tsx.snap generated
View file

@ -182,9 +182,13 @@ Array [
class="euiFlyoutBody__overflow"
>
<div
class="euiText euiText--medium"
class="euiFlyoutBody__overflowContent"
>
Could not fetch the job info
<div
class="euiText euiText--medium"
>
Could not fetch the job info
</div>
</div>
</div>
</div>
@ -243,9 +247,13 @@ Array [
class="euiFlyoutBody__overflow"
>
<div
class="euiText euiText--medium"
class="euiFlyoutBody__overflowContent"
>
Could not fetch the job info
<div
class="euiText euiText--medium"
>
Could not fetch the job info
</div>
</div>
</div>
</div>
@ -332,13 +340,17 @@ Array [
<div
className="euiFlyoutBody__overflow"
>
<EuiText>
<div
className="euiText euiText--medium"
>
Could not fetch the job info
</div>
</EuiText>
<div
className="euiFlyoutBody__overflowContent"
>
<EuiText>
<div
className="euiText euiText--medium"
>
Could not fetch the job info
</div>
</EuiText>
</div>
</div>
</div>
</EuiFlyoutBody>
@ -440,13 +452,17 @@ Array [
<div
className="euiFlyoutBody__overflow"
>
<EuiText>
<div
className="euiText euiText--medium"
>
Could not fetch the job info
</div>
</EuiText>
<div
className="euiFlyoutBody__overflowContent"
>
<EuiText>
<div
className="euiText euiText--medium"
>
Could not fetch the job info
</div>
</EuiText>
</div>
</div>
</div>
</EuiFlyoutBody>
@ -599,8 +615,12 @@ Array [
class="euiFlyoutBody__overflow"
>
<div
class="euiText euiText--medium"
/>
class="euiFlyoutBody__overflowContent"
>
<div
class="euiText euiText--medium"
/>
</div>
</div>
</div>
</div>
@ -658,8 +678,12 @@ Array [
class="euiFlyoutBody__overflow"
>
<div
class="euiText euiText--medium"
/>
class="euiFlyoutBody__overflowContent"
>
<div
class="euiText euiText--medium"
/>
</div>
</div>
</div>
</div>
@ -745,11 +769,15 @@ Array [
<div
className="euiFlyoutBody__overflow"
>
<EuiText>
<div
className="euiText euiText--medium"
/>
</EuiText>
<div
className="euiFlyoutBody__overflowContent"
>
<EuiText>
<div
className="euiText euiText--medium"
/>
</EuiText>
</div>
</div>
</div>
</EuiFlyoutBody>
@ -851,11 +879,15 @@ Array [
<div
className="euiFlyoutBody__overflow"
>
<EuiText>
<div
className="euiText euiText--medium"
/>
</EuiText>
<div
className="euiFlyoutBody__overflowContent"
>
<EuiText>
<div
className="euiText euiText--medium"
/>
</EuiText>
</div>
</div>
</div>
</EuiFlyoutBody>

14
x-pack/legacy/plugins/siem/public/components/edit_data_provider/helpers.tsx
View file

@ -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<BrowserField>): 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) {

12
x-pack/legacy/plugins/siem/public/components/edit_data_provider/index.tsx
View file

@ -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<Props>(
timelineId,
value,
}) => {
const [updatedField, setUpdatedField] = useState<EuiComboBoxOptionProps[]>([{ label: field }]);
const [updatedOperator, setUpdatedOperator] = useState<EuiComboBoxOptionProps[]>(
const [updatedField, setUpdatedField] = useState<EuiComboBoxOptionOption[]>([{ label: field }]);
const [updatedOperator, setUpdatedOperator] = useState<EuiComboBoxOptionOption[]>(
getInitialOperatorLabel(isExcluded, operator)
);
const [updatedValue, setUpdatedValue] = useState<string | number>(value);
@ -105,13 +105,13 @@ export const StatefulEditDataProvider = React.memo<Props>(
}
};
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();

8
x-pack/legacy/plugins/siem/public/components/timeline/search_super_select/index.tsx
View file

@ -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<SearchTimelineSuperSelectProp
key: `${t.title}-${index}`,
title: t.title,
checked: t.savedObjectId === timelineId ? 'on' : undefined,
} as Option)
} as EuiSelectableOption)
),
]}
>

2
x-pack/legacy/plugins/siem/public/pages/detection_engine/rules/all/columns.tsx
View file

@ -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,

4
x-pack/legacy/plugins/siem/public/pages/detection_engine/rules/components/import_rule_modal/index.tsx
View file

@ -113,8 +113,8 @@ export const ImportRuleModalComponent = ({
<EuiFilePicker
id="rule-file-picker"
initialPromptText={i18n.INITIAL_PROMPT_TEXT}
onChange={(files: FileList) => {
setSelectedFiles(Object.keys(files).length > 0 ? files : null);
onChange={(files: FileList | null) => {
setSelectedFiles(files && files.length > 0 ? files : null);
}}
display={'large'}
fullWidth={true}

2
x-pack/legacy/plugins/siem/public/pages/detection_engine/rules/details/index.tsx
View file

@ -274,7 +274,7 @@ const RuleDetailsPageComponent: FC<PropsFromRedux> = ({
<EuiFlexItem grow={false}>
<EuiButton
href={getEditRuleUrl(ruleId ?? '')}
iconType="visControls"
iconType="controlsHorizontal"
isDisabled={(userHasNoPermissions || rule?.immutable) ?? true}
>
{ruleI18n.EDIT_RULE_SETTINGS}

6
x-pack/legacy/plugins/transform/public/app/sections/create_transform/components/aggregation_dropdown/dropdown.tsx
View file

@ -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;
}

6
x-pack/legacy/plugins/transform/public/app/sections/create_transform/components/step_define/common.ts
View file

@ -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'];

4
x-pack/legacy/plugins/uptime/public/components/functional/ping_list/__tests__/ping_list.test.tsx
View file

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

2
x-pack/package.json
View file

@ -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",

8
x-pack/plugins/infra/public/components/source_configuration/add_log_column_popover.tsx
View file

@ -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<Option[]>(
const availableOptions = useMemo<EuiSelectableOption[]>(
() => availableColumnOptions.map(availableColumnOption => availableColumnOption.optionProps),
[availableColumnOptions]
);
const handleColumnSelection = useCallback(
(selectedOptions: Option[]) => {
(selectedOptions: EuiSelectableOption[]) => {
closePopover();
const selectedOptionIndex = selectedOptions.findIndex(

4
x-pack/plugins/infra/public/pages/logs/log_entry_categories/sections/top_categories/datasets_selector.tsx
View file

@ -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<string>;
type DatasetOptionProps = EuiComboBoxOptionOption<string>;
export const DatasetsSelector: React.FunctionComponent<{
availableDatasets: string[];

4
x-pack/plugins/remote_clusters/public/application/sections/components/remote_cluster_form/__snapshots__/remote_cluster_form.test.js.snap generated
View file

@ -165,6 +165,7 @@ Array [
style="font-size:14px;display:inline-block"
>
<input
aria-controls=""
data-test-subj="comboBoxSearchInput"
id="mockId"
role="textbox"
@ -448,7 +449,7 @@ Array [
aria-describedby="mockId-help mockId-error-0"
aria-expanded="false"
aria-haspopup="listbox"
class="euiComboBox euiComboBox-isInvalid euiComboBox--fullWidth"
class="euiComboBox euiComboBox--fullWidth euiComboBox-isInvalid"
data-test-subj="remoteClusterFormSeedsInput"
role="combobox"
>
@ -473,6 +474,7 @@ Array [
style="font-size: 14px; display: inline-block;"
>
<input
aria-controls=""
data-test-subj="comboBoxSearchInput"
id="mockId"
role="textbox"

4
x-pack/plugins/security/public/management/role_combo_box/role_combo_box_option.tsx
View file

@ -8,10 +8,10 @@ import React from 'react';
import { i18n } from '@kbn/i18n';
import { EuiComboBoxOptionProps, EuiText } from '@elastic/eui';
import { EuiComboBoxOptionOption, EuiText } from '@elastic/eui';
interface Props {
option: EuiComboBoxOptionProps<{ isDeprecated: boolean }>;
option: EuiComboBoxOptionOption<{ isDeprecated: boolean }>;
}
export const RoleComboBoxOption = ({ option }: Props) => {

22
x-pack/plugins/security/public/management/role_mappings/edit_role_mapping/rule_editor_panel/json_rule_editor.test.tsx
View file

@ -55,7 +55,7 @@ describe('JSONRuleEditor', () => {
const wrapper = mountWithIntl(<JSONRuleEditor {...props} />);
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);

1
x-pack/plugins/security/public/management/roles/edit_role/privileges/es/__snapshots__/cluster_privileges.test.tsx.snap generated
View file

@ -6,6 +6,7 @@ exports[`it renders without crashing 1`] = `
key="clusterPrivs"
>
<EuiComboBox
async={false}
compressed={false}
data-test-subj="cluster-privileges-combobox"
fullWidth={false}

1
x-pack/plugins/security/public/management/roles/edit_role/privileges/es/__snapshots__/elasticsearch_privileges.test.tsx.snap generated
View file

@ -108,6 +108,7 @@ exports[`it renders without crashing 1`] = `
labelType="label"
>
<EuiComboBox
async={false}
compressed={false}
fullWidth={false}
isClearable={true}

2
x-pack/plugins/security/public/management/roles/edit_role/privileges/es/__snapshots__/index_privilege_form.test.tsx.snap generated
View file

@ -26,6 +26,7 @@ exports[`it renders without crashing 1`] = `
labelType="label"
>
<EuiComboBox
async={false}
compressed={false}
data-test-subj="indicesInput0"
fullWidth={false}
@ -56,6 +57,7 @@ exports[`it renders without crashing 1`] = `
labelType="label"
>
<EuiComboBox
async={false}
compressed={false}
data-test-subj="privilegesInput0"
fullWidth={false}

10
x-pack/plugins/security/public/management/roles/edit_role/privileges/es/index_privilege_form.tsx
View file

@ -6,7 +6,7 @@
import {
EuiButtonIcon,
EuiComboBox,
EuiComboBoxOptionProps,
EuiComboBoxOptionOption,
EuiFlexGroup,
EuiFlexItem,
EuiFormRow,
@ -378,14 +378,14 @@ export class IndexPrivilegeForm extends Component<Props, State> {
});
};
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<Props, State> {
});
};
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<Props, State> {
});
};
private onDeniedFieldsChange = (deniedFields: EuiComboBoxOptionProps[]) => {
private onDeniedFieldsChange = (deniedFields: EuiComboBoxOptionOption[]) => {
this.props.onChange({
...this.props.indexPrivilege,
field_security: {

8
x-pack/plugins/security/public/management/roles/edit_role/privileges/kibana/space_aware_privilege_section/space_selector.tsx
View file

@ -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<Props, {}> {
);
}
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<Props, {}> {
)
);
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[];
};
}

10
x-pack/plugins/snapshot_restore/public/application/components/policy_form/steps/step_settings.tsx
View file

@ -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<StepProps> = ({
// States for choosing all indices, or a subset, including caching previously chosen subset list
const [isAllIndices, setIsAllIndices] = useState<boolean>(!Boolean(config.indices));
const [indicesSelection, setIndicesSelection] = useState<SnapshotConfig['indices']>([...indices]);
const [indicesOptions, setIndicesOptions] = useState<Option[]>(
const [indicesOptions, setIndicesOptions] = useState<EuiSelectableOption[]>(
indices.map(
(index): Option => ({
(index): EuiSelectableOption => ({
label: index,
checked:
isAllIndices ||
@ -210,7 +210,7 @@ export const PolicyStepSettings: React.FunctionComponent<StepProps> = ({
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<StepProps> = ({
<EuiLink
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 = 'on';
});
updatePolicyConfig({ indices: [...indices] });

17
x-pack/plugins/snapshot_restore/public/application/components/repository_form/type_settings/hdfs_settings.tsx
View file

@ -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<Props> = ({
}}
showGutter={false}
minLines={6}
aria-label={
<FormattedMessage
id="xpack.snapshotRestore.repositoryForm.typeHDFS.configurationAriaLabel"
defaultMessage="Additional configuration for HDFS repository '{name}'"
values={{
name,
}}
/>
}
aria-label={i18n.translate(
'xpack.snapshotRestore.repositoryForm.typeHDFS.configurationAriaLabel',
{
defaultMessage: `Additional configuration for HDFS repository '{name}'`,
values: { name },
}
)}
onChange={(value: string) => {
setAdditionalConf(value);
try {

10
x-pack/plugins/snapshot_restore/public/application/components/restore_snapshot_form/steps/step_logistics.tsx
View file

@ -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<StepProps> =
// States for choosing all indices, or a subset, including caching previously chosen subset list
const [isAllIndices, setIsAllIndices] = useState<boolean>(!Boolean(restoreIndices));
const [indicesOptions, setIndicesOptions] = useState<Option[]>(
const [indicesOptions, setIndicesOptions] = useState<EuiSelectableOption[]>(
snapshotIndices.map(
(index): Option => ({
(index): EuiSelectableOption => ({
label: index,
checked:
isAllIndices ||
@ -230,7 +230,7 @@ export const RestoreSnapshotStepLogistics: React.FunctionComponent<StepProps> =
<EuiLink
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;
});
updateRestoreSettings({ indices: [] });
@ -249,7 +249,7 @@ export const RestoreSnapshotStepLogistics: React.FunctionComponent<StepProps> =
<EuiLink
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 = 'on';
});
updateRestoreSettings({ indices: [...snapshotIndices] });

10
x-pack/plugins/snapshot_restore/public/application/components/restore_snapshot_form/steps/step_review.tsx
View file

@ -282,12 +282,10 @@ export const RestoreSnapshotStepReview: React.FunctionComponent<StepProps> = ({
setOptions={{ maxLines: Infinity }}
value={JSON.stringify(serializedRestoreSettings, null, 2)}
editorProps={{ $blockScrolling: Infinity }}
aria-label={
<FormattedMessage
id="xpack.snapshotRestore.restoreForm.stepReview.jsonTab.jsonAriaLabel"
defaultMessage="Restore settings to be executed"
/>
}
aria-label={i18n.translate(
'xpack.snapshotRestore.restoreForm.stepReview.jsonTab.jsonAriaLabel',
{ defaultMessage: 'Restore settings to be executed' }
)}
/>
</Fragment>
);

10
x-pack/plugins/snapshot_restore/public/application/components/restore_snapshot_form/steps/step_settings.tsx
View file

@ -183,12 +183,10 @@ export const RestoreSnapshotStepSettings: React.FunctionComponent<StepProps> = (
showGutter={false}
minLines={6}
maxLines={15}
aria-label={
<FormattedMessage
id="xpack.snapshotRestore.restoreForm.stepSettings.indexSettingsAriaLabel"
defaultMessage="Index settings to modify"
/>
}
aria-label={i18n.translate(
'xpack.snapshotRestore.restoreForm.stepSettings.indexSettingsAriaLabel',
{ defaultMessage: 'Index settings to modify' }
)}
onChange={(value: string) => {
updateRestoreSettings({
indexSettings: value,

17
x-pack/plugins/snapshot_restore/public/application/sections/home/policy_list/policy_details/tabs/tab_history.tsx
View file

@ -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<Props> = ({ policy }) => {
maxLines={12}
wrapEnabled={true}
showGutter={false}
aria-label={
<FormattedMessage
id="xpack.snapshotRestore.policyDetails.lastFailure.detailsAriaLabel"
defaultMessage="Last failure details for policy '{name}'"
values={{
name,
}}
/>
}
aria-label={i18n.translate(
'xpack.snapshotRestore.policyDetails.lastFailure.detailsAriaLabel',
{
defaultMessage: `Last failure details for policy '{name}'`,
values: { name },
}
)}
/>
</EuiDescriptionListDescription>
</EuiFlexItem>

17
x-pack/plugins/snapshot_restore/public/application/sections/home/repository_list/repository_details/type_details/default_details.tsx
View file

@ -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<Props> = ({
}}
showGutter={false}
minLines={6}
aria-label={
<FormattedMessage
id="xpack.snapshotRestore.repositoryDetails.genericSettingsDescription"
defaultMessage="Readonly settings for repository '{name}'"
values={{
aria-label={i18n.translate(
'xpack.snapshotRestore.repositoryDetails.genericSettingsDescription',
{
defaultMessage: `Readonly settings for repository '{name}'`,
values: {
name,
}}
/>
}
},
}
)}
/>
</Fragment>
);

9
x-pack/plugins/spaces/public/management/edit_space/customize_space/__snapshots__/customize_space_avatar.test.tsx.snap generated
View file

@ -53,14 +53,7 @@ exports[`renders without crashing 1`] = `
labelType="label"
>
<EuiFilePicker
accept={
Array [
"image/svg+xml",
"image/jpeg",
"image/png",
"image/gif",
]
}
accept="image/svg+xml,image/jpeg,image/png,image/gif"
compressed={false}
display="default"
initialPromptText="Select image file"

7
x-pack/plugins/spaces/public/management/edit_space/customize_space/customize_space_avatar.tsx
View file

@ -91,8 +91,9 @@ export class CustomizeSpaceAvatar extends Component<Props, State> {
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<Props, State> {
}
)}
onChange={this.onFileUpload}
accept={imageTypes}
accept={imageTypes.join(',')}
/>
</EuiFormRow>
);

2
x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/webhook.tsx
View file

@ -473,8 +473,6 @@ const WebhookParamsFields: React.FunctionComponent<ActionParamsProps<WebhookActi
error={errors.body}
>
<EuiCodeEditor
fullWidth
isInvalid={errors.body.length > 0 && body !== undefined}
mode="json"
width="100%"
height="200px"

6
x-pack/plugins/triggers_actions_ui/public/application/components/builtin_alert_types/threshold/expression.tsx
View file

@ -17,7 +17,7 @@ import {
EuiSelect,
EuiSpacer,
EuiComboBox,
EuiComboBoxOptionProps,
EuiComboBoxOptionOption,
EuiFormRow,
EuiCallOut,
} from '@elastic/eui';
@ -104,7 +104,7 @@ export const IndexThresholdAlertTypeExpression: React.FunctionComponent<IndexThr
const [indexPopoverOpen, setIndexPopoverOpen] = useState(false);
const [indexPatterns, setIndexPatterns] = useState([]);
const [esFields, setEsFields] = useState<Record<string, any>>([]);
const [indexOptions, setIndexOptions] = useState<EuiComboBoxOptionProps[]>([]);
const [indexOptions, setIndexOptions] = useState<EuiComboBoxOptionOption[]>([]);
const [timeFieldOptions, setTimeFieldOptions] = useState([firstFieldOption]);
const [isIndiciesLoading, setIsIndiciesLoading] = useState<boolean>(false);
@ -256,7 +256,7 @@ export const IndexThresholdAlertTypeExpression: React.FunctionComponent<IndexThr
value: anIndex,
};
})}
onChange={async (selected: EuiComboBoxOptionProps[]) => {
onChange={async (selected: EuiComboBoxOptionOption[]) => {
setAlertParams(
'index',
selected.map(aSelected => aSelected.value)

58
x-pack/plugins/triggers_actions_ui/public/common/expression_items/of.test.tsx
View file

@ -23,6 +23,7 @@ describe('of expression', () => {
expect(wrapper.find('[data-test-subj="availablefieldsOptionsComboBox"]'))
.toMatchInlineSnapshot(`
<EuiComboBox
async={false}
compressed={false}
data-test-subj="availablefieldsOptionsComboBox"
fullWidth={true}
@ -75,35 +76,36 @@ describe('of expression', () => {
);
expect(wrapper.find('[data-test-subj="availablefieldsOptionsComboBox"]'))
.toMatchInlineSnapshot(`
<EuiComboBox
compressed={false}
data-test-subj="availablefieldsOptionsComboBox"
fullWidth={true}
isClearable={true}
isInvalid={false}
noSuggestions={false}
onChange={[Function]}
options={
Array [
Object {
"label": "test2",
},
]
}
placeholder="Select a field"
selectedOptions={
Array [
Object {
"label": "test",
},
]
}
singleSelection={
Object {
"asPlainText": true,
<EuiComboBox
async={false}
compressed={false}
data-test-subj="availablefieldsOptionsComboBox"
fullWidth={true}
isClearable={true}
isInvalid={false}
noSuggestions={false}
onChange={[Function]}
options={
Array [
Object {
"label": "test2",
},
]
}
}
/>
placeholder="Select a field"
selectedOptions={
Array [
Object {
"label": "test",
},
]
}
singleSelection={
Object {
"asPlainText": true,
}
}
/>
`);
});

1
x-pack/plugins/watcher/public/application/sections/watch_edit/components/json_watch_edit/json_watch_edit_simulate.tsx
View file

@ -374,7 +374,6 @@ export const JsonWatchEditSimulate = ({
errors={executeWatchErrors}
>
<EuiCodeEditor
fullWidth
mode={xJsonMode}
width="100%"
height="200px"

1
x-pack/plugins/watcher/public/application/sections/watch_edit/components/threshold_watch_edit/action_fields/webhook_action_fields.tsx
View file

@ -241,7 +241,6 @@ export const WebhookActionFields: React.FunctionComponent<Props> = ({
errors={errors}
>
<EuiCodeEditor
fullWidth
mode="json"
width="100%"
height="200px"

4
x-pack/plugins/watcher/public/application/sections/watch_edit/components/threshold_watch_edit/threshold_watch_edit.tsx
View file

@ -9,7 +9,7 @@ import {
EuiButton,
EuiButtonEmpty,
EuiComboBox,
EuiComboBoxOptionProps,
EuiComboBoxOptionOption,
EuiExpression,
EuiFieldNumber,
EuiFieldText,
@ -323,7 +323,7 @@ export const ThresholdWatchEdit = ({ pageTitle }: { pageTitle: string }) => {
value: anIndex,
};
})}
onChange={async (selected: EuiComboBoxOptionProps[]) => {
onChange={async (selected: EuiComboBoxOptionOption[]) => {
setWatchProperty(
'index',
selected.map(aSelected => aSelected.value)

1
x-pack/typings/@elastic/eui/index.d.ts vendored
View file

@ -7,7 +7,6 @@
// TODO: Remove once typescript definitions are in EUI
declare module '@elastic/eui' {
export const EuiCodeEditor: React.FC<any>;
export const Query: any;
}

16
yarn.lock
View file

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