[7.x] Upgrade EUI to 21.0.1 (#60282) (#60809)

* Upgrade EUI to 21.0.1 (#60282) * update to eui 21.0.1 * most changes needed for search bar ts changes * Passing types * snapshots * jest tests * Removed IQuery placeholder types * Updated functional test to only look at table headers with content * Moved 'filters' definition around in api docs * Update types * update snapshot * typo * Move DATA_FRAME_TASK_STATE enum to its own file to fix x-pack functional test config imports * merge public api 'changes' Co-authored-by: patrykkopycinski <[email protected]> Co-authored-by: Patryk Kopycinski <[email protected]> * unit test update Co-authored-by: patrykkopycinski <[email protected]> Co-authored-by: Patryk Kopycinski <[email protected]>
elastic · Mar 21, 2020 · fa0c700 · fa0c700
1 parent 1411978
commit fa0c700
Show file tree

Hide file tree

Showing 51 changed files with 1,113 additions and 1,082 deletions.
diff --git a/.../development/plugins/data/public/kibana-plugin-plugins-data-public.filterbar.md b/.../development/plugins/data/public/kibana-plugin-plugins-data-public.filterbar.md
@@ -7,7 +7,7 @@
 <b>Signature:</b>
 
 ```typescript
-FilterBar: React.ComponentClass<Pick<Props, "className" | "indexPatterns" | "filters" | "onFiltersUpdated">, any> & {
+FilterBar: React.ComponentClass<Pick<Props, "className" | "filters" | "indexPatterns" | "onFiltersUpdated">, any> & {
     WrappedComponent: React.ComponentType<Props & ReactIntl.InjectedIntlProps>;
 }
 ```
diff --git a/.../development/plugins/data/public/kibana-plugin-plugins-data-public.searchbar.md b/.../development/plugins/data/public/kibana-plugin-plugins-data-public.searchbar.md
@@ -7,7 +7,7 @@
 <b>Signature:</b>
 
 ```typescript
-SearchBar: React.ComponentClass<Pick<Pick<SearchBarProps, "query" | "isLoading" | "intl" | "indexPatterns" | "filters" | "refreshInterval" | "screenTitle" | "dataTestSubj" | "customSubmitButton" | "showQueryBar" | "showQueryInput" | "showFilterBar" | "showDatePicker" | "showAutoRefreshOnly" | "isRefreshPaused" | "dateRangeFrom" | "dateRangeTo" | "showSaveQuery" | "savedQuery" | "onQueryChange" | "onQuerySubmit" | "onSaved" | "onSavedQueryUpdated" | "onClearSavedQuery" | "onRefresh" | "timeHistory" | "onFiltersUpdated" | "onRefreshChange">, "query" | "isLoading" | "indexPatterns" | "filters" | "refreshInterval" | "screenTitle" | "dataTestSubj" | "customSubmitButton" | "showQueryBar" | "showQueryInput" | "showFilterBar" | "showDatePicker" | "showAutoRefreshOnly" | "isRefreshPaused" | "dateRangeFrom" | "dateRangeTo" | "showSaveQuery" | "savedQuery" | "onQueryChange" | "onQuerySubmit" | "onSaved" | "onSavedQueryUpdated" | "onClearSavedQuery" | "onRefresh" | "timeHistory" | "onFiltersUpdated" | "onRefreshChange">, any> & {
-    WrappedComponent: React.ComponentType<Pick<SearchBarProps, "query" | "isLoading" | "intl" | "indexPatterns" | "filters" | "refreshInterval" | "screenTitle" | "dataTestSubj" | "customSubmitButton" | "showQueryBar" | "showQueryInput" | "showFilterBar" | "showDatePicker" | "showAutoRefreshOnly" | "isRefreshPaused" | "dateRangeFrom" | "dateRangeTo" | "showSaveQuery" | "savedQuery" | "onQueryChange" | "onQuerySubmit" | "onSaved" | "onSavedQueryUpdated" | "onClearSavedQuery" | "onRefresh" | "timeHistory" | "onFiltersUpdated" | "onRefreshChange"> & ReactIntl.InjectedIntlProps>;
+SearchBar: React.ComponentClass<Pick<Pick<SearchBarProps, "query" | "isLoading" | "filters" | "intl" | "indexPatterns" | "refreshInterval" | "screenTitle" | "dataTestSubj" | "customSubmitButton" | "showQueryBar" | "showQueryInput" | "showFilterBar" | "showDatePicker" | "showAutoRefreshOnly" | "isRefreshPaused" | "dateRangeFrom" | "dateRangeTo" | "showSaveQuery" | "savedQuery" | "onQueryChange" | "onQuerySubmit" | "onSaved" | "onSavedQueryUpdated" | "onClearSavedQuery" | "onRefresh" | "timeHistory" | "onFiltersUpdated" | "onRefreshChange">, "query" | "isLoading" | "filters" | "indexPatterns" | "refreshInterval" | "screenTitle" | "dataTestSubj" | "customSubmitButton" | "showQueryBar" | "showQueryInput" | "showFilterBar" | "showDatePicker" | "showAutoRefreshOnly" | "isRefreshPaused" | "dateRangeFrom" | "dateRangeTo" | "showSaveQuery" | "savedQuery" | "onQueryChange" | "onQuerySubmit" | "onSaved" | "onSavedQueryUpdated" | "onClearSavedQuery" | "onRefresh" | "timeHistory" | "onFiltersUpdated" | "onRefreshChange">, any> & {
+    WrappedComponent: React.ComponentType<Pick<SearchBarProps, "query" | "isLoading" | "filters" | "intl" | "indexPatterns" | "refreshInterval" | "screenTitle" | "dataTestSubj" | "customSubmitButton" | "showQueryBar" | "showQueryInput" | "showFilterBar" | "showDatePicker" | "showAutoRefreshOnly" | "isRefreshPaused" | "dateRangeFrom" | "dateRangeTo" | "showSaveQuery" | "savedQuery" | "onQueryChange" | "onQuerySubmit" | "onSaved" | "onSavedQueryUpdated" | "onClearSavedQuery" | "onRefresh" | "timeHistory" | "onFiltersUpdated" | "onRefreshChange"> & ReactIntl.InjectedIntlProps>;
 }
 ```
diff --git a/package.json b/package.json
@@ -118,7 +118,7 @@
     "@elastic/charts": "^18.1.0",
     "@elastic/datemath": "5.0.2",
     "@elastic/ems-client": "7.7.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",

diff --git a/packages/kbn-ui-shared-deps/package.json b/packages/kbn-ui-shared-deps/package.json
@@ -10,7 +10,7 @@
   },
   "devDependencies": {
     "abortcontroller-polyfill": "^1.4.0",
-    "@elastic/eui": "20.0.2",
+    "@elastic/eui": "21.0.1",
     "@kbn/babel-preset": "1.0.0",
     "@elastic/charts": "^18.1.0",
     "@kbn/dev-utils": "1.0.0",

diff --git a/src/legacy/core_plugins/vis_default_editor/public/components/__snapshots__/agg.test.tsx.snap b/src/legacy/core_plugins/vis_default_editor/public/components/__snapshots__/agg.test.tsx.snap
diff --git a/...islib/public/components/options/metrics_axes/__snapshots__/value_axes_panel.test.tsx.snap b/...islib/public/components/options/metrics_axes/__snapshots__/value_axes_panel.test.tsx.snap
diff --git a/...lib/public/components/options/metrics_axes/__snapshots__/value_axis_options.test.tsx.snap b/...lib/public/components/options/metrics_axes/__snapshots__/value_axis_options.test.tsx.snap
diff --git a/src/plugins/advanced_settings/public/management_app/advanced_settings.tsx b/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)),

diff --git a/src/plugins/advanced_settings/public/management_app/components/search/search.tsx b/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,
       },
     ];

diff --git a/src/plugins/advanced_settings/public/management_app/types.ts b/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
-}
diff --git a/src/plugins/data/public/public.api.md b/src/plugins/data/public/public.api.md
@@ -513,7 +513,7 @@ export interface Filter {
 // Warning: (ae-missing-release-tag) "FilterBar" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
 // @public (undocumented)
-export const FilterBar: React.ComponentClass<Pick<Props_2, "className" | "indexPatterns" | "filters" | "onFiltersUpdated">, any> & {
+export const FilterBar: React.ComponentClass<Pick<Props_2, "className" | "filters" | "indexPatterns" | "onFiltersUpdated">, any> & {
     WrappedComponent: React.ComponentType<Props_2 & ReactIntl.InjectedIntlProps>;
 };
 
@@ -1541,8 +1541,8 @@ export const search: {
 // Warning: (ae-missing-release-tag) "SearchBar" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
 // @public (undocumented)
-export const SearchBar: React.ComponentClass<Pick<Pick<SearchBarProps, "query" | "isLoading" | "intl" | "indexPatterns" | "filters" | "refreshInterval" | "screenTitle" | "dataTestSubj" | "customSubmitButton" | "showQueryBar" | "showQueryInput" | "showFilterBar" | "showDatePicker" | "showAutoRefreshOnly" | "isRefreshPaused" | "dateRangeFrom" | "dateRangeTo" | "showSaveQuery" | "savedQuery" | "onQueryChange" | "onQuerySubmit" | "onSaved" | "onSavedQueryUpdated" | "onClearSavedQuery" | "onRefresh" | "timeHistory" | "onFiltersUpdated" | "onRefreshChange">, "query" | "isLoading" | "indexPatterns" | "filters" | "refreshInterval" | "screenTitle" | "dataTestSubj" | "customSubmitButton" | "showQueryBar" | "showQueryInput" | "showFilterBar" | "showDatePicker" | "showAutoRefreshOnly" | "isRefreshPaused" | "dateRangeFrom" | "dateRangeTo" | "showSaveQuery" | "savedQuery" | "onQueryChange" | "onQuerySubmit" | "onSaved" | "onSavedQueryUpdated" | "onClearSavedQuery" | "onRefresh" | "timeHistory" | "onFiltersUpdated" | "onRefreshChange">, any> & {
-    WrappedComponent: React.ComponentType<Pick<SearchBarProps, "query" | "isLoading" | "intl" | "indexPatterns" | "filters" | "refreshInterval" | "screenTitle" | "dataTestSubj" | "customSubmitButton" | "showQueryBar" | "showQueryInput" | "showFilterBar" | "showDatePicker" | "showAutoRefreshOnly" | "isRefreshPaused" | "dateRangeFrom" | "dateRangeTo" | "showSaveQuery" | "savedQuery" | "onQueryChange" | "onQuerySubmit" | "onSaved" | "onSavedQueryUpdated" | "onClearSavedQuery" | "onRefresh" | "timeHistory" | "onFiltersUpdated" | "onRefreshChange"> & ReactIntl.InjectedIntlProps>;
+export const SearchBar: React.ComponentClass<Pick<Pick<SearchBarProps, "query" | "isLoading" | "filters" | "intl" | "indexPatterns" | "refreshInterval" | "screenTitle" | "dataTestSubj" | "customSubmitButton" | "showQueryBar" | "showQueryInput" | "showFilterBar" | "showDatePicker" | "showAutoRefreshOnly" | "isRefreshPaused" | "dateRangeFrom" | "dateRangeTo" | "showSaveQuery" | "savedQuery" | "onQueryChange" | "onQuerySubmit" | "onSaved" | "onSavedQueryUpdated" | "onClearSavedQuery" | "onRefresh" | "timeHistory" | "onFiltersUpdated" | "onRefreshChange">, "query" | "isLoading" | "filters" | "indexPatterns" | "refreshInterval" | "screenTitle" | "dataTestSubj" | "customSubmitButton" | "showQueryBar" | "showQueryInput" | "showFilterBar" | "showDatePicker" | "showAutoRefreshOnly" | "isRefreshPaused" | "dateRangeFrom" | "dateRangeTo" | "showSaveQuery" | "savedQuery" | "onQueryChange" | "onQuerySubmit" | "onSaved" | "onSavedQueryUpdated" | "onClearSavedQuery" | "onRefresh" | "timeHistory" | "onFiltersUpdated" | "onRefreshChange">, any> & {
+    WrappedComponent: React.ComponentType<Pick<SearchBarProps, "query" | "isLoading" | "filters" | "intl" | "indexPatterns" | "refreshInterval" | "screenTitle" | "dataTestSubj" | "customSubmitButton" | "showQueryBar" | "showQueryInput" | "showFilterBar" | "showDatePicker" | "showAutoRefreshOnly" | "isRefreshPaused" | "dateRangeFrom" | "dateRangeTo" | "showSaveQuery" | "savedQuery" | "onQueryChange" | "onQuerySubmit" | "onSaved" | "onSavedQueryUpdated" | "onClearSavedQuery" | "onRefresh" | "timeHistory" | "onFiltersUpdated" | "onRefreshChange"> & ReactIntl.InjectedIntlProps>;
 };
 
 // Warning: (ae-forgotten-export) The symbol "SearchBarOwnProps" needs to be exported by the entry point index.d.ts

diff --git a/test/functional/apps/management/_index_pattern_create_delete.js b/test/functional/apps/management/_index_pattern_create_delete.js
@@ -94,7 +94,6 @@ export default function({ getService, getPageObjects }) {
             'Searchable',
             'Aggregatable',
             'Excluded',
-            '',
           ];
 
           expect(headers.length).to.be(expectedHeaders.length);

diff --git a/test/interpreter_functional/plugins/kbn_tp_run_pipeline/package.json b/test/interpreter_functional/plugins/kbn_tp_run_pipeline/package.json
@@ -7,7 +7,7 @@
   },
   "license": "Apache-2.0",
   "dependencies": {
-    "@elastic/eui": "20.0.2",
+    "@elastic/eui": "21.0.1",
     "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
@@ -7,7 +7,7 @@
   },
   "license": "Apache-2.0",
   "dependencies": {
-    "@elastic/eui": "20.0.2",
+    "@elastic/eui": "21.0.1",
     "react": "^16.12.0"
   }
 }
diff --git a/test/plugin_functional/plugins/kbn_tp_embeddable_explorer/package.json b/test/plugin_functional/plugins/kbn_tp_embeddable_explorer/package.json
@@ -8,7 +8,7 @@
   },
   "license": "Apache-2.0",
   "dependencies": {
-    "@elastic/eui": "20.0.2",
+    "@elastic/eui": "21.0.1",
     "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
@@ -8,7 +8,7 @@
   },
   "license": "Apache-2.0",
   "dependencies": {
-    "@elastic/eui": "20.0.2",
+    "@elastic/eui": "21.0.1",
     "react": "^16.12.0"
   },
   "scripts": {

diff --git a/typings/@elastic/eui/index.d.ts b/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;
-}
diff --git a/...m/public/components/app/ErrorGroupOverview/List/__test__/__snapshots__/List.test.tsx.snap b/...m/public/components/app/ErrorGroupOverview/List/__test__/__snapshots__/List.test.tsx.snap
diff --git a/...s/apm/public/components/shared/Stacktrace/__test__/__snapshots__/Stackframe.test.tsx.snap b/...s/apm/public/components/shared/Stacktrace/__test__/__snapshots__/Stackframe.test.tsx.snap
diff --git a/x-pack/legacy/plugins/canvas/.storybook/storyshots.test.js b/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

diff --git a/...s/custom_element_modal/__examples__/__snapshots__/custom_element_modal.examples.storyshot b/...s/custom_element_modal/__examples__/__snapshots__/custom_element_modal.examples.storyshot
diff --git a/.../plugins/canvas/public/components/file_upload/__snapshots__/file_upload.stories.storyshot b/.../plugins/canvas/public/components/file_upload/__snapshots__/file_upload.stories.storyshot
diff --git a/...gacy/plugins/maps/public/connected_components/layer_panel/__snapshots__/view.test.js.snap b/...gacy/plugins/maps/public/connected_components/layer_panel/__snapshots__/view.test.js.snap