Upgrade EUI to v27.4.0 (#74004) (#75064)

* eui to 27.1.0

* eui to 27.2.0

* buttoniconside type

* euiselectable type

* update onScroll callback and polyfill size references

* findTestSubject ts

* buttoncontent and collapsiblenav src snapshot updates

* update prop retrieval

* xpack snapshots

* jest updates

* type fixes

* more snapshots

* virtual list changes

* more virtualization changes

* merge

* fix functional tests

* data-test-subj for indexPatter-switcher

* storyshots

* eui to 27.3.1

* Fix unit tests

* Fix broken unit test

* Updated snapshots

* Fixed types

* search for value in euiselectable before selection

* select the correct element

* mock virtualized dep

* ts fix

* reinstate storyshot

* ts fix

Co-authored-by: Chandler Prall <[email protected]>
Co-authored-by: Elastic Machine <[email protected]>

Co-authored-by: Chandler Prall <[email protected]>
Co-authored-by: Elastic Machine <[email protected]>

package.json

@@ -121,7 +121,7 @@
     "@elastic/datemath": "5.0.3",
     "@elastic/elasticsearch": "7.9.0-rc.2",
     "@elastic/ems-client": "7.9.3",
-    "@elastic/eui": "26.3.1",
+    "@elastic/eui": "27.4.0",
     "@elastic/filesaver": "1.1.2",
     "@elastic/good": "8.1.1-kibana2",
     "@elastic/numeral": "^2.5.0",

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

@@ -10,7 +10,7 @@
   },
   "dependencies": {
     "@elastic/charts": "19.8.1",
-    "@elastic/eui": "26.3.1",
+    "@elastic/eui": "27.4.0",
     "@elastic/numeral": "^2.5.0",
     "@kbn/i18n": "1.0.0",
     "@kbn/monaco": "1.0.0",

src/plugins/advanced_settings/public/management_app/components/field/field.test.tsx

@@ -25,7 +25,6 @@ import { FieldSetting } from '../../types';
 import { UiSettingsType, StringValidation } from '../../../../../../core/public';
 import { notificationServiceMock, docLinksServiceMock } from '../../../../../../core/public/mocks';
 
-// @ts-ignore
 import { findTestSubject } from '@elastic/eui/lib/test';
 import { Field, getEditableValue } from './field';
 

src/plugins/advanced_settings/public/management_app/components/form/form.test.tsx

@@ -21,7 +21,6 @@ import React from 'react';
 import { shallowWithI18nProvider, mountWithI18nProvider } from 'test_utils/enzyme_helpers';
 import { UiSettingsType } from '../../../../../../core/public';
 
-// @ts-ignore
 import { findTestSubject } from '@elastic/eui/lib/test';
 
 import { notificationServiceMock } from '../../../../../../core/public/mocks';

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

@@ -20,7 +20,6 @@
 import React from 'react';
 import { shallowWithI18nProvider, mountWithI18nProvider } from 'test_utils/enzyme_helpers';
 
-// @ts-ignore
 import { findTestSubject } from '@elastic/eui/lib/test';
 
 import { Query } from '@elastic/eui';

src/plugins/dashboard/public/application/dashboard_empty_screen.test.tsx

@@ -19,7 +19,6 @@
 import React from 'react';
 import { mountWithIntl } from 'test_utils/enzyme_helpers';
 import { DashboardEmptyScreen, DashboardEmptyScreenProps } from './dashboard_empty_screen';
-// @ts-ignore
 import { findTestSubject } from '@elastic/eui/lib/test';
 import { coreMock } from '../../../../core/public/mocks';
 

src/plugins/dashboard/public/application/embeddable/viewport/dashboard_viewport.test.tsx

@@ -17,7 +17,6 @@
  * under the License.
  */
 
-// @ts-ignore
 import { findTestSubject } from '@elastic/eui/lib/test';
 import React from 'react';
 import { skip } from 'rxjs/operators';

src/plugins/dashboard/public/application/tests/dashboard_container.test.tsx

@@ -17,7 +17,6 @@
  * under the License.
  */
 
-// @ts-ignore
 import { findTestSubject } from '@elastic/eui/lib/test';
 import React from 'react';
 import { mount } from 'enzyme';

src/plugins/data/public/ui/shard_failure_modal/shard_failure_open_modal_button.test.tsx

@@ -22,7 +22,6 @@ import { mountWithIntl } from 'test_utils/enzyme_helpers';
 import { ShardFailureOpenModalButton } from './shard_failure_open_modal_button';
 import { shardFailureRequest } from './__mocks__/shard_failure_request';
 import { shardFailureResponse } from './__mocks__/shard_failure_response';
-// @ts-ignore
 import { findTestSubject } from '@elastic/eui/lib/test';
 
 describe('ShardFailureOpenModalButton', () => {

src/plugins/discover/public/application/angular/context/components/action_bar/action_bar.test.tsx

@@ -20,7 +20,6 @@
 import React from 'react';
 import { mountWithIntl } from 'test_utils/enzyme_helpers';
 import { ActionBar, ActionBarProps } from './action_bar';
-// @ts-ignore
 import { findTestSubject } from '@elastic/eui/lib/test';
 import { MAX_CONTEXT_SIZE, MIN_CONTEXT_SIZE } from '../../query_parameters/constants';
 

src/plugins/discover/public/application/angular/doc_table/components/pager/tool_bar_pager_buttons.test.tsx

@@ -20,7 +20,6 @@
 import React from 'react';
 import { mountWithIntl, shallowWithIntl } from 'test_utils/enzyme_helpers';
 import { ToolBarPagerButtons } from './tool_bar_pager_buttons';
-// @ts-ignore
 import { findTestSubject } from '@elastic/eui/lib/test';
 
 test('it renders ToolBarPagerButtons', () => {

src/plugins/discover/public/application/angular/doc_table/components/table_header/table_header.test.tsx

@@ -20,7 +20,6 @@
 import React from 'react';
 import { mountWithIntl } from 'test_utils/enzyme_helpers';
 import { TableHeader } from './table_header';
-// @ts-ignore
 import { findTestSubject } from '@elastic/eui/lib/test';
 import { SortOrder } from './helpers';
 import { IndexPattern, IFieldType } from '../../../../../kibana_services';

src/plugins/discover/public/application/components/context_error_message/context_error_message.test.tsx

@@ -22,7 +22,6 @@ import { ReactWrapper } from 'enzyme';
 import { ContextErrorMessage } from './context_error_message';
 // @ts-ignore
 import { FAILURE_REASONS, LOADING_STATUS } from '../../angular/context/query';
-// @ts-ignore
 import { findTestSubject } from '@elastic/eui/lib/test';
 
 describe('loading spinner', function () {

src/plugins/discover/public/application/components/doc/doc.test.tsx

@@ -20,7 +20,6 @@ import React from 'react';
 import { act } from 'react-dom/test-utils';
 import { mountWithIntl } from 'test_utils/enzyme_helpers';
 import { ReactWrapper } from 'enzyme';
-// @ts-ignore
 import { findTestSubject } from '@elastic/eui/lib/test';
 import { Doc, DocProps } from './doc';
 

src/plugins/discover/public/application/components/doc_viewer/doc_viewer.test.tsx

@@ -19,7 +19,6 @@
 import React from 'react';
 import { mount, shallow } from 'enzyme';
 import { DocViewer } from './doc_viewer';
-// @ts-ignore
 import { findTestSubject } from '@elastic/eui/lib/test';
 import { getDocViewsRegistry } from '../../../kibana_services';
 import { DocViewRenderProps } from '../../doc_views/doc_views_types';

src/plugins/discover/public/application/components/hits_counter/hits_counter.test.tsx

@@ -20,7 +20,6 @@ import React from 'react';
 import { mountWithIntl } from 'test_utils/enzyme_helpers';
 import { ReactWrapper } from 'enzyme';
 import { HitsCounter, HitsCounterProps } from './hits_counter';
-// @ts-ignore
 import { findTestSubject } from '@elastic/eui/lib/test';
 
 describe('hits counter', function () {

src/plugins/discover/public/application/components/loading_spinner/loading_spinner.test.tsx

@@ -20,7 +20,6 @@ import React from 'react';
 import { mountWithIntl } from 'test_utils/enzyme_helpers';
 import { ReactWrapper } from 'enzyme';
 import { LoadingSpinner } from './loading_spinner';
-// @ts-ignore
 import { findTestSubject } from '@elastic/eui/lib/test';
 
 describe('loading spinner', function () {

src/plugins/discover/public/application/components/sidebar/discover_field.test.tsx

@@ -18,7 +18,6 @@
  */
 
 import React from 'react';
-// @ts-ignore
 import { findTestSubject } from '@elastic/eui/lib/test';
 // @ts-ignore
 import StubIndexPattern from 'test_utils/stub_index_pattern';

src/plugins/discover/public/application/components/sidebar/discover_field_search.test.tsx

@@ -19,7 +19,6 @@
 import React, { EventHandler, MouseEvent as ReactMouseEvent } from 'react';
 import { act } from 'react-dom/test-utils';
 import { mountWithIntl } from 'test_utils/enzyme_helpers';
-// @ts-ignore
 import { findTestSubject } from '@elastic/eui/lib/test';
 import { DiscoverFieldSearch, Props } from './discover_field_search';
 import { EuiButtonGroupProps, EuiPopover } from '@elastic/eui';

src/plugins/discover/public/application/components/sidebar/discover_index_pattern.test.tsx

@@ -24,7 +24,7 @@ import { ShallowWrapper } from 'enzyme';
 import { ChangeIndexPattern } from './change_indexpattern';
 import { SavedObject } from 'kibana/server';
 import { DiscoverIndexPattern } from './discover_index_pattern';
-import { EuiSelectable, EuiSelectableList } from '@elastic/eui';
+import { EuiSelectable } from '@elastic/eui';
 import { IIndexPattern } from 'src/plugins/data/public';
 
 const indexPattern = {
@@ -57,7 +57,7 @@ function getIndexPatternPickerList(instance: ShallowWrapper) {
 }
 
 function getIndexPatternPickerOptions(instance: ShallowWrapper) {
-  return getIndexPatternPickerList(instance).dive().find(EuiSelectableList).prop('options');
+  return getIndexPatternPickerList(instance).prop('options');
 }
 
 function selectIndexPatternPickerOption(instance: ShallowWrapper, selectedLabel: string) {

src/plugins/discover/public/application/components/sidebar/discover_sidebar.test.tsx

@@ -19,7 +19,6 @@
 
 import _ from 'lodash';
 import { ReactWrapper } from 'enzyme';
-// @ts-ignore
 import { findTestSubject } from '@elastic/eui/lib/test';
 // @ts-ignore
 import StubIndexPattern from 'test_utils/stub_index_pattern';

src/plugins/discover/public/application/components/skip_bottom_button/skip_bottom_button.test.tsx

@@ -20,8 +20,6 @@ import React from 'react';
 import { mountWithIntl } from 'test_utils/enzyme_helpers';
 import { ReactWrapper } from 'enzyme';
 import { SkipBottomButton, SkipBottomButtonProps } from './skip_bottom_button';
-// @ts-ignore
-import { findTestSubject } from '@elastic/eui/lib/test';
 
 describe('Skip to Bottom Button', function () {
   let props: SkipBottomButtonProps;

src/plugins/discover/public/application/components/table/table.test.tsx

@@ -18,7 +18,6 @@
  */
 import React from 'react';
 import { mount } from 'enzyme';
-// @ts-ignore
 import { findTestSubject } from '@elastic/eui/lib/test';
 import { DocViewTable } from './table';
 import { indexPatterns, IndexPattern } from '../../../../../data/public';

src/plugins/discover/public/application/components/timechart_header/timechart_header.test.tsx

@@ -21,7 +21,6 @@ import { mountWithIntl } from 'test_utils/enzyme_helpers';
 import { ReactWrapper } from 'enzyme';
 import { TimechartHeader, TimechartHeaderProps } from './timechart_header';
 import { EuiIconTip } from '@elastic/eui';
-// @ts-ignore
 import { findTestSubject } from '@elastic/eui/lib/test';
 
 describe('timechart header', function () {

src/plugins/embeddable/public/lib/embeddables/embeddable_root.test.tsx

@@ -20,7 +20,6 @@ import React from 'react';
 import { HelloWorldEmbeddable } from '../../../../../../examples/embeddable_examples/public';
 import { EmbeddableRoot } from './embeddable_root';
 import { mount } from 'enzyme';
-// @ts-ignore
 import { findTestSubject } from '@elastic/eui/lib/test';
 
 test('EmbeddableRoot renders an embeddable', async () => {

src/plugins/embeddable/public/lib/panel/embeddable_panel.test.tsx

@@ -21,7 +21,6 @@ import React from 'react';
 import { mount } from 'enzyme';
 import { nextTick } from 'test_utils/enzyme_helpers';
 
-// @ts-ignore
 import { findTestSubject } from '@elastic/eui/lib/test';
 import { I18nProvider } from '@kbn/i18n/react';
 import { CONTEXT_MENU_TRIGGER } from '../triggers';

src/plugins/embeddable/public/lib/panel/panel_header/panel_actions/add_panel/add_panel_flyout.test.tsx

@@ -30,7 +30,6 @@ import { ContainerInput } from '../../../../containers';
 import { mountWithIntl as mount } from 'test_utils/enzyme_helpers';
 import { ReactWrapper } from 'enzyme';
 import { coreMock } from '../../../../../../../../core/public/mocks';
-// @ts-ignore
 import { findTestSubject } from '@elastic/eui/lib/test';
 import { embeddablePluginMock } from '../../../../../mocks';
 
@@ -125,7 +124,7 @@ test('selecting embeddable in "Create new ..." list calls createNewEmbeddable()'
       notifications={core.notifications}
       SavedObjectFinder={(props) => <DummySavedObjectFinder {...props} />}
     />
-  ) as ReactWrapper<unknown, unknown, AddPanelFlyout>;
+  ) as ReactWrapper<any, {}, AddPanelFlyout>;
 
   const spy = jest.fn();
   component.instance().createNewEmbeddable = spy;

src/plugins/embeddable/public/lib/panel/panel_header/panel_actions/customize_title/customize_panel_action.test.ts

@@ -18,8 +18,6 @@
  */
 
 import { Container, isErrorEmbeddable } from '../../../..';
-// @ts-ignore
-import { findTestSubject } from '@elastic/eui/lib/test';
 import { nextTick } from 'test_utils/enzyme_helpers';
 import { CustomizePanelTitleAction } from './customize_panel_action';
 import {

src/plugins/embeddable/public/tests/customize_panel_modal.test.tsx

@@ -17,7 +17,6 @@
  * under the License.
  */
 
-// @ts-ignore
 import { findTestSubject } from '@elastic/eui/lib/test';
 import * as React from 'react';
 import { Container, isErrorEmbeddable } from '../lib';