Upgrade EUI to 21.0.1

package.json

@@ -120,7 +120,7 @@
     "@elastic/charts": "^17.1.1",
     "@elastic/datemath": "5.0.2",
     "@elastic/ems-client": "7.6.0",
-    "@elastic/eui": "20.0.2",
+    "@elastic/eui": "21.0.1",
     "@elastic/filesaver": "1.1.2",
     "@elastic/good": "8.1.1-kibana2",
     "@elastic/numeral": "2.4.0",

packages/kbn-ui-shared-deps/package.json

@@ -11,7 +11,7 @@
   "devDependencies": {
     "@elastic/charts": "^17.1.1",
     "abortcontroller-polyfill": "^1.4.0",
-    "@elastic/eui": "20.0.2",
+    "@elastic/eui": "21.0.1",
     "@kbn/babel-preset": "1.0.0",
     "@kbn/dev-utils": "1.0.0",
     "@kbn/i18n": "1.0.0",

src/plugins/advanced_settings/public/management_app/advanced_settings.tsx

@@ -19,14 +19,7 @@
 
 import React, { Component } from 'react';
 import { Subscription } from 'rxjs';
-import {
-  Comparators,
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiSpacer,
-  // @ts-ignore
-  Query,
-} from '@elastic/eui';
+import { Comparators, EuiFlexGroup, EuiFlexItem, EuiSpacer, Query } from '@elastic/eui';
 
 import { useParams } from 'react-router-dom';
 import { CallOuts } from './components/call_outs';
@@ -38,7 +31,7 @@ import { ComponentRegistry } from '../';
 
 import { getAriaName, toEditableConfig, DEFAULT_CATEGORY } from './lib';
 
-import { FieldSetting, IQuery, SettingsChanges } from './types';
+import { FieldSetting, SettingsChanges } from './types';
 
 interface AdvancedSettingsProps {
   enableSaving: boolean;
@@ -54,7 +47,7 @@ interface AdvancedSettingsComponentProps extends AdvancedSettingsProps {
 
 interface AdvancedSettingsState {
   footerQueryMatched: boolean;
-  query: IQuery;
+  query: Query;
   filteredSettings: Record<string, FieldSetting[]>;
 }
 
@@ -156,7 +149,7 @@ export class AdvancedSettingsComponent extends Component<
     }, {});
   }
 
-  onQueryChange = ({ query }: { query: IQuery }) => {
+  onQueryChange = ({ query }: { query: Query }) => {
     this.setState({
       query,
       filteredSettings: this.mapSettings(Query.execute(query, this.settings)),

src/plugins/advanced_settings/public/management_app/components/search/search.tsx

@@ -19,19 +19,14 @@
 
 import React, { Fragment, PureComponent } from 'react';
 import { i18n } from '@kbn/i18n';
-import {
-  // @ts-ignore
-  EuiSearchBar,
-  EuiFormErrorText,
-} from '@elastic/eui';
-import { IQuery } from '../../types';
+import { EuiSearchBar, EuiFormErrorText, Query } from '@elastic/eui';
 
 import { getCategoryName } from '../../lib';
 
 interface SearchProps {
   categories: string[];
-  query: IQuery;
-  onQueryChange: ({ query }: { query: IQuery }) => void;
+  query: Query;
+  onQueryChange: ({ query }: { query: Query }) => void;
 }
 
 export class Search extends PureComponent<SearchProps> {
@@ -53,7 +48,7 @@ export class Search extends PureComponent<SearchProps> {
     parseErrorMessage: null,
   };
 
-  onChange = ({ query, error }: { query: IQuery; error: { message: string } }) => {
+  onChange = ({ query, error }: { query: Query | null; error: { message: string } | null }) => {
     if (error) {
       this.setState({
         isSearchTextValid: false,
@@ -66,7 +61,7 @@ export class Search extends PureComponent<SearchProps> {
       isSearchTextValid: true,
       parseErrorMessage: null,
     });
-    this.props.onQueryChange({ query });
+    this.props.onQueryChange({ query: query! });
   };
 
   render() {
@@ -82,12 +77,12 @@ export class Search extends PureComponent<SearchProps> {
 
     const filters = [
       {
-        type: 'field_value_selection',
+        type: 'field_value_selection' as const,
         field: 'category',
         name: i18n.translate('advancedSettings.categorySearchLabel', {
           defaultMessage: 'Category',
         }),
-        multiSelect: 'or',
+        multiSelect: 'or' as const,
         options: this.categories,
       },
     ];

src/plugins/advanced_settings/public/management_app/types.ts

@@ -54,9 +54,3 @@ export interface FieldState {
   isInvalid?: boolean;
   error?: string | null;
 }
-
-export interface IQuery {
-  ast: any; // incomplete
-  text: string;
-  syntax: any; // incomplete
-}

test/interpreter_functional/plugins/kbn_tp_run_pipeline/package.json

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

test/plugin_functional/plugins/kbn_tp_custom_visualizations/package.json

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

test/plugin_functional/plugins/kbn_tp_embeddable_explorer/package.json

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

test/plugin_functional/plugins/kbn_tp_sample_panel_action/package.json

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

typings/@elastic/eui/index.d.ts

@@ -19,7 +19,3 @@
 import { Direction } from '@elastic/eui/src/services/sort/sort_direction';
 
 // TODO: Remove once typescript definitions are in EUI
-
-declare module '@elastic/eui' {
-  export const Query: any;
-}

x-pack/legacy/plugins/canvas/.storybook/storyshots.test.js

@@ -61,6 +61,12 @@ jest.mock('@elastic/eui/packages/react-datepicker', () => {
   };
 });
 
+jest.mock('@elastic/eui/lib/services/accessibility/html_id_generator', () => {
+  return {
+    htmlIdGenerator: () => () => `generated-id`,
+  };
+});
+
 jest.mock('plugins/interpreter/registries', () => ({}));
 
 // Disabling this test due to https://github.com/elastic/eui/issues/2242