Upgrade EUI to v46.1.0 (#123652)

* eui to 46.1.0

* use optimize build

* dataGridWrapper -> euiDataGridBody

* remove unused dep from bazel

* use column-index and row-index attrs

* datagrid test fixes

* prevent duplicate global styles

* snapshot updates

* rendering_service test

* update comment

* clean up

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

package.json

@@ -107,7 +107,7 @@
     "@elastic/datemath": "link:bazel-bin/packages/elastic-datemath",
     "@elastic/elasticsearch": "npm:@elastic/elasticsearch-canary@8.1.0-canary.2",
     "@elastic/ems-client": "8.0.0",
-    "@elastic/eui": "44.0.0",
+    "@elastic/eui": "46.1.0",
     "@elastic/filesaver": "1.1.2",
     "@elastic/node-crypto": "1.2.1",
     "@elastic/numeral": "^2.5.1",

packages/kbn-ui-shared-deps-npm/BUILD.bazel

@@ -36,7 +36,6 @@ RUNTIME_DEPS = [
   "@npm//@elastic/numeral",
   "@npm//@emotion/react",
   "@npm//babel-loader",
-  "@npm//babel-plugin-transform-react-remove-prop-types",
   "@npm//core-js",
   "@npm//css-loader",
   "@npm//fflate",

packages/kbn-ui-shared-deps-npm/webpack.config.js

@@ -129,30 +129,12 @@ module.exports = (_, argv) => {
           test: /\.css$/,
           use: [MiniCssExtractPlugin.loader, 'css-loader'],
         },
-        {
-          test: /[\\\/]@elastic[\\\/]eui[\\\/].*\.js$/,
-          use: [
-            {
-              loader: 'babel-loader',
-              options: {
-                plugins: [
-                  [
-                    require.resolve('babel-plugin-transform-react-remove-prop-types'),
-                    {
-                      mode: 'remove',
-                      removeImport: true,
-                    },
-                  ],
-                ],
-              },
-            },
-          ],
-        },
       ],
     },
 
     resolve: {
       alias: {
+        '@elastic/eui$': '@elastic/eui/optimize/es',
         moment: MOMENT_SRC,
         // NOTE: Used to include react profiling on bundles
         // https://gist.github.com/bvaughn/25e6233aeb1b4f0cdb8d8366e54a3977#webpack-4
@@ -179,8 +161,8 @@ module.exports = (_, argv) => {
       new CleanWebpackPlugin({
         protectWebpackAssets: false,
         cleanAfterEveryBuildPatterns: [
-          'kbn-ui-shared-deps-npm.{v7,v8}.{dark,light}.{dll.js,dll.js.map}',
+          'kbn-ui-shared-deps-npm.v8.{dark,light}.{dll.js,dll.js.map}',
-          'kbn-ui-shared-deps-npm.{v7,v8}.{dark,light}-manifest.json',
+          'kbn-ui-shared-deps-npm.v8.{dark,light}-manifest.json',
         ],
       }),
       new MiniCssExtractPlugin({

packages/kbn-ui-shared-deps-src/webpack.config.js

@@ -74,6 +74,7 @@ module.exports = {
     extensions: ['.js', '.ts'],
     symlinks: false,
     alias: {
+      '@elastic/eui$': '@elastic/eui/optimize/es',
       moment: MOMENT_SRC,
       // NOTE: Used to include react profiling on bundles
       // https://gist.github.com/bvaughn/25e6233aeb1b4f0cdb8d8366e54a3977#webpack-4

src/core/public/overlays/flyout/__snapshots__/flyout_service.test.tsx.snap

@@ -53,6 +53,7 @@ Array [
               Array [
                 Object {
                   "children": <CoreThemeProvider
+                    globalStyles={false}
                     theme$={
                       Observable {
                         "_isScalar": false,
@@ -77,6 +78,7 @@ Array [
               Object {
                 "type": "return",
                 "value": <CoreThemeProvider
+                  globalStyles={false}
                   theme$={
                     Observable {
                       "_isScalar": false,
@@ -127,6 +129,7 @@ Array [
               Array [
                 Object {
                   "children": <CoreThemeProvider
+                    globalStyles={false}
                     theme$={
                       Observable {
                         "_isScalar": false,
@@ -151,6 +154,7 @@ Array [
               Object {
                 "type": "return",
                 "value": <CoreThemeProvider
+                  globalStyles={false}
                   theme$={
                     Observable {
                       "_isScalar": false,

src/core/public/overlays/modal/__snapshots__/modal_service.test.tsx.snap

@@ -19,6 +19,7 @@ Array [
               Array [
                 Object {
                   "children": <CoreThemeProvider
+                    globalStyles={false}
                     theme$={
                       Observable {
                         "_isScalar": false,
@@ -43,6 +44,7 @@ Array [
               Object {
                 "type": "return",
                 "value": <CoreThemeProvider
+                  globalStyles={false}
                   theme$={
                     Observable {
                       "_isScalar": false,
@@ -103,6 +105,7 @@ Array [
               Array [
                 Object {
                   "children": <CoreThemeProvider
+                    globalStyles={false}
                     theme$={
                       Observable {
                         "_isScalar": false,
@@ -125,6 +128,7 @@ Array [
               Array [
                 Object {
                   "children": <CoreThemeProvider
+                    globalStyles={false}
                     theme$={
                       Observable {
                         "_isScalar": false,
@@ -152,6 +156,7 @@ Array [
               Object {
                 "type": "return",
                 "value": <CoreThemeProvider
+                  globalStyles={false}
                   theme$={
                     Observable {
                       "_isScalar": false,
@@ -172,6 +177,7 @@ Array [
               Object {
                 "type": "return",
                 "value": <CoreThemeProvider
+                  globalStyles={false}
                   theme$={
                     Observable {
                       "_isScalar": false,
@@ -232,6 +238,7 @@ Array [
               Array [
                 Object {
                   "children": <CoreThemeProvider
+                    globalStyles={false}
                     theme$={
                       Observable {
                         "_isScalar": false,
@@ -254,6 +261,7 @@ Array [
               Array [
                 Object {
                   "children": <CoreThemeProvider
+                    globalStyles={false}
                     theme$={
                       Observable {
                         "_isScalar": false,
@@ -279,6 +287,7 @@ Array [
               Array [
                 Object {
                   "children": <CoreThemeProvider
+                    globalStyles={false}
                     theme$={
                       Observable {
                         "_isScalar": false,
@@ -303,6 +312,7 @@ Array [
               Object {
                 "type": "return",
                 "value": <CoreThemeProvider
+                  globalStyles={false}
                   theme$={
                     Observable {
                       "_isScalar": false,
@@ -323,6 +333,7 @@ Array [
               Object {
                 "type": "return",
                 "value": <CoreThemeProvider
+                  globalStyles={false}
                   theme$={
                     Observable {
                       "_isScalar": false,
@@ -346,6 +357,7 @@ Array [
               Object {
                 "type": "return",
                 "value": <CoreThemeProvider
+                  globalStyles={false}
                   theme$={
                     Observable {
                       "_isScalar": false,
@@ -396,6 +408,7 @@ Array [
               Array [
                 Object {
                   "children": <CoreThemeProvider
+                    globalStyles={false}
                     theme$={
                       Observable {
                         "_isScalar": false,
@@ -418,6 +431,7 @@ Array [
               Array [
                 Object {
                   "children": <CoreThemeProvider
+                    globalStyles={false}
                     theme$={
                       Observable {
                         "_isScalar": false,
@@ -443,6 +457,7 @@ Array [
               Array [
                 Object {
                   "children": <CoreThemeProvider
+                    globalStyles={false}
                     theme$={
                       Observable {
                         "_isScalar": false,
@@ -467,6 +482,7 @@ Array [
               Object {
                 "type": "return",
                 "value": <CoreThemeProvider
+                  globalStyles={false}
                   theme$={
                     Observable {
                       "_isScalar": false,
@@ -487,6 +503,7 @@ Array [
               Object {
                 "type": "return",
                 "value": <CoreThemeProvider
+                  globalStyles={false}
                   theme$={
                     Observable {
                       "_isScalar": false,
@@ -510,6 +527,7 @@ Array [
               Object {
                 "type": "return",
                 "value": <CoreThemeProvider
+                  globalStyles={false}
                   theme$={
                     Observable {
                       "_isScalar": false,
@@ -565,6 +583,7 @@ Array [
               Array [
                 Object {
                   "children": <CoreThemeProvider
+                    globalStyles={false}
                     theme$={
                       Observable {
                         "_isScalar": false,
@@ -587,6 +606,7 @@ Array [
               Array [
                 Object {
                   "children": <CoreThemeProvider
+                    globalStyles={false}
                     theme$={
                       Observable {
                         "_isScalar": false,
@@ -612,6 +632,7 @@ Array [
               Array [
                 Object {
                   "children": <CoreThemeProvider
+                    globalStyles={false}
                     theme$={
                       Observable {
                         "_isScalar": false,
@@ -636,6 +657,7 @@ Array [
               Object {
                 "type": "return",
                 "value": <CoreThemeProvider
+                  globalStyles={false}
                   theme$={
                     Observable {
                       "_isScalar": false,
@@ -656,6 +678,7 @@ Array [
               Object {
                 "type": "return",
                 "value": <CoreThemeProvider
+                  globalStyles={false}
                   theme$={
                     Observable {
                       "_isScalar": false,
@@ -679,6 +702,7 @@ Array [
               Object {
                 "type": "return",
                 "value": <CoreThemeProvider
+                  globalStyles={false}
                   theme$={
                     Observable {
                       "_isScalar": false,
@@ -729,6 +753,7 @@ Array [
               Array [
                 Object {
                   "children": <CoreThemeProvider
+                    globalStyles={false}
                     theme$={
                       Observable {
                         "_isScalar": false,
@@ -751,6 +776,7 @@ Array [
               Array [
                 Object {
                   "children": <CoreThemeProvider
+                    globalStyles={false}
                     theme$={
                       Observable {
                         "_isScalar": false,
@@ -776,6 +802,7 @@ Array [
               Array [
                 Object {
                   "children": <CoreThemeProvider
+                    globalStyles={false}
                     theme$={
                       Observable {
                         "_isScalar": false,
@@ -800,6 +827,7 @@ Array [
               Object {
                 "type": "return",
                 "value": <CoreThemeProvider
+                  globalStyles={false}
                   theme$={
                     Observable {
                       "_isScalar": false,
@@ -820,6 +848,7 @@ Array [
               Object {
                 "type": "return",
                 "value": <CoreThemeProvider
+                  globalStyles={false}
                   theme$={
                     Observable {
                       "_isScalar": false,
@@ -843,6 +872,7 @@ Array [
               Object {
                 "type": "return",
                 "value": <CoreThemeProvider
+                  globalStyles={false}
                   theme$={
                     Observable {
                       "_isScalar": false,
@@ -932,6 +962,7 @@ Array [
               Array [
                 Object {
                   "children": <CoreThemeProvider
+                    globalStyles={false}
                     theme$={
                       Observable {
                         "_isScalar": false,
@@ -956,6 +987,7 @@ Array [
               Object {
                 "type": "return",
                 "value": <CoreThemeProvider
+                  globalStyles={false}
                   theme$={
                     Observable {
                       "_isScalar": false,
@@ -1006,6 +1038,7 @@ Array [
               Array [
                 Object {
                   "children": <CoreThemeProvider
+                    globalStyles={false}
                     theme$={
                       Observable {
                         "_isScalar": false,
@@ -1030,6 +1063,7 @@ Array [
               Object {
                 "type": "return",
                 "value": <CoreThemeProvider
+                  globalStyles={false}
                   theme$={
                     Observable {
                       "_isScalar": false,
@@ -1085,6 +1119,7 @@ Array [
               Array [
                 Object {
                   "children": <CoreThemeProvider
+                    globalStyles={false}
                     theme$={
                       Observable {
                         "_isScalar": false,
@@ -1109,6 +1144,7 @@ Array [
               Object {
                 "type": "return",
                 "value": <CoreThemeProvider
+                  globalStyles={false}
                   theme$={
                     Observable {
                       "_isScalar": false,
@@ -1159,6 +1195,7 @@ Array [
               Array [
                 Object {
                   "children": <CoreThemeProvider
+                    globalStyles={false}
                     theme$={
                       Observable {
                         "_isScalar": false,
@@ -1183,6 +1220,7 @@ Array [
               Object {
                 "type": "return",
                 "value": <CoreThemeProvider
+                  globalStyles={false}
                   theme$={
                     Observable {
                       "_isScalar": false,

src/core/public/rendering/rendering_service.test.tsx

@@ -104,4 +104,9 @@ describe('RenderingService#start', () => {
               </div>
           `);
   });
+
+  it('adds global styles via `CoreContextProvider` `globalStyles` configuration', () => {
+    startService();
+    expect(document.querySelector(`style[data-emotion="eui-styles-global"]`)).toBeDefined();
+  });
 });

src/core/public/rendering/rendering_service.tsx

@@ -51,7 +51,7 @@ export class RenderingService {
       });
 
     ReactDOM.render(
-      <CoreContextProvider i18n={i18n} theme={theme}>
+      <CoreContextProvider i18n={i18n} theme={theme} globalStyles={true}>
         <>
           {/* Fixed headers */}
           {chromeHeader}

src/core/public/theme/core_theme_provider.tsx

@@ -10,7 +10,7 @@ import React, { FC, useMemo } from 'react';
 import { Observable } from 'rxjs';
 import useObservable from 'react-use/lib/useObservable';
 import createCache from '@emotion/cache';
-import { EuiProvider } from '@elastic/eui';
+import { EuiProvider, EuiProviderProps } from '@elastic/eui';
 import { EUI_STYLES_GLOBAL } from '../../utils';
 import { CoreTheme } from './types';
 import { convertCoreTheme } from './convert_core_theme';
@@ -21,6 +21,7 @@ const defaultTheme: CoreTheme = {
 
 interface CoreThemeProviderProps {
   theme$: Observable<CoreTheme>;
+  globalStyles?: EuiProviderProps<{}>['globalStyles'];
 }
 
 const emotionCache = createCache({
@@ -32,11 +33,16 @@ const emotionCache = createCache({
  * Wrapper around `EuiProvider` converting (and exposing) core's theme to EUI theme.
  * @internal Only meant to be used within core for internal usages of EUI/React
  */
-export const CoreThemeProvider: FC<CoreThemeProviderProps> = ({ theme$, children }) => {
+export const CoreThemeProvider: FC<CoreThemeProviderProps> = ({
+  theme$,
+  children,
+  globalStyles,
+}) => {
   const coreTheme = useObservable(theme$, defaultTheme);
   const euiTheme = useMemo(() => convertCoreTheme(coreTheme), [coreTheme]);
   return (
     <EuiProvider
+      globalStyles={globalStyles}
       colorMode={euiTheme.colorMode}
       theme={euiTheme.euiThemeSystem}
       cache={emotionCache}

src/core/public/utils/core_context_provider.tsx

@@ -14,15 +14,27 @@ import type { I18nStart } from '../i18n';
 interface CoreContextProviderProps {
   theme: ThemeServiceStart;
   i18n: I18nStart;
+  globalStyles?: boolean;
 }
 
 /**
  * utility component exposing all the context providers required by core when integrating with react
  **/
-export const CoreContextProvider: FC<CoreContextProviderProps> = ({ i18n, theme, children }) => {
+export const CoreContextProvider: FC<CoreContextProviderProps> = ({
+  i18n,
+  theme,
+  children,
+  globalStyles = false,
+}) => {
+  // `globalStyles` default value is inverted from that of `EuiProvider`.
+  // Default to `false` (does not add EUI global styles) because more instances use that value.
+  // A value of `true` (does add EUI global styles) will have `EuiProvider` use its default value.
+  const includeGlobalStyles = globalStyles === false ? false : undefined;
   return (
     <i18n.Context>
-      <CoreThemeProvider theme$={theme.theme$}>{children}</CoreThemeProvider>
+      <CoreThemeProvider theme$={theme.theme$} globalStyles={includeGlobalStyles}>
+        {children}
+      </CoreThemeProvider>
     </i18n.Context>
   );
 };

src/dev/license_checker/config.ts

@@ -77,6 +77,6 @@ export const LICENSE_OVERRIDES = {
   'jsts@1.6.2': ['Eclipse Distribution License - v 1.0'], // cf. https://github.com/bjornharrtell/jsts
   '@mapbox/jsonlint-lines-primitives@2.0.2': ['MIT'], // license in readme https://github.com/tmcw/jsonlint
   '@elastic/ems-client@8.0.0': ['Elastic License 2.0'],
-  '@elastic/eui@44.0.0': ['SSPL-1.0 OR Elastic License 2.0'],
+  '@elastic/eui@46.1.0': ['SSPL-1.0 OR Elastic License 2.0'],
   'language-subtag-registry@0.3.21': ['CC-BY-4.0'], // retired ODC‑By license https://github.com/mattcg/language-subtag-registry
 };

test/functional/page_objects/visualize_chart_page.ts

@@ -364,7 +364,7 @@ export class VisualizeChartPageObject extends FtrService {
   public async getTableVisContent({ stripEmptyRows = true } = {}) {
     return await this.retry.try(async () => {
       const container = await this.testSubjects.find('tbvChart');
-      const allTables = await this.testSubjects.findAllDescendant('dataGridWrapper', container);
+      const allTables = await this.testSubjects.findAllDescendant('euiDataGridBody', container);
 
       if (allTables.length === 0) {
         return [];

test/functional/services/data_grid.ts

@@ -72,7 +72,7 @@ export class DataGridService extends FtrService {
    * Returns an array of data grid headers names
    */
   public async getHeaders() {
-    const header = await this.testSubjects.find('dataGridWrapper > dataGridHeader');
+    const header = await this.testSubjects.find('euiDataGridBody > dataGridHeader');
     const $ = await header.parseDomContent();
     return $('.euiDataGridHeaderCell__content')
       .toArray()
@@ -86,7 +86,7 @@ export class DataGridService extends FtrService {
    */
   public async getCellElement(rowIndex: number = 0, columnIndex: number = 0) {
     return await this.find.byCssSelector(
-      `[data-test-subj="dataGridWrapper"] [data-test-subj="dataGridRowCell"][data-gridcell-id="${rowIndex},${columnIndex}"]`
+      `[data-test-subj="euiDataGridBody"] [data-test-subj="dataGridRowCell"][data-gridcell-column-index="${columnIndex}"][data-gridcell-row-index="${rowIndex}"]`
     );
   }
 

x-pack/plugins/lens/public/datatable_visualization/components/cell_value.tsx

@@ -26,7 +26,7 @@ export const createGridCell = (
   const IS_DARK_THEME = uiSettings.get('theme:darkMode');
   return ({ rowIndex, columnId, setCellProps }: EuiDataGridCellValueElementProps) => {
     const { table, alignments, minMaxByColumnId, getColorForValue } = useContext(DataContext);
-    const rowValue = table?.rows[rowIndex][columnId];
+    const rowValue = table?.rows[rowIndex]?.[columnId];
     const content = formatters[columnId]?.convert(rowValue, 'html');
     const currentAlignment = alignments && alignments[columnId];
     const alignmentClassName = `lnsTableCell--${currentAlignment}`;

x-pack/plugins/security_solution/cypress/screens/alerts.ts

@@ -23,7 +23,7 @@ export const ALERT_RISK_SCORE = '[data-test-subj="formatted-field-kibana.alert.r
 
 export const ALERT_SEVERITY = '[data-test-subj="formatted-field-kibana.alert.severity"]';
 
-export const ALERT_DATA_GRID = '[data-test-subj="dataGridWrapper"]';
+export const ALERT_DATA_GRID = '[data-test-subj="euiDataGridBody"]';
 
 export const ALERTS = '[data-test-subj="events-viewer-panel"][data-test-subj="event"]';
 

x-pack/plugins/timelines/public/components/t_grid/body/index.test.tsx

@@ -126,7 +126,7 @@ describe('Body', () => {
         </TestProviders>
       );
 
-      expect(wrapper.find('div.euiDataGrid__overflow').first().exists()).toEqual(true);
+      expect(wrapper.find('div.euiDataGrid__virtualized').first().exists()).toEqual(true);
     });
 
     test('it renders events', () => {

x-pack/test/functional/page_objects/lens_page.ts

@@ -932,7 +932,7 @@ export function LensPageProvider({ getService, getPageObjects }: FtrProviderCont
 
     async getDatatableCell(rowIndex = 0, colIndex = 0) {
       return await find.byCssSelector(
-        `[data-test-subj="lnsDataTable"] [data-test-subj="dataGridRowCell"][data-gridcell-id="${rowIndex},${colIndex}"]`
+        `[data-test-subj="lnsDataTable"] [data-test-subj="dataGridRowCell"][data-gridcell-column-index="${colIndex}"][data-gridcell-row-index="${rowIndex}"]`
       );
     },
 

yarn.lock

@@ -1505,10 +1505,10 @@
   resolved "https://registry.yarnpkg.com/@elastic/eslint-plugin-eui/-/eslint-plugin-eui-0.0.2.tgz#56b9ef03984a05cc213772ae3713ea8ef47b0314"
   integrity sha512-IoxURM5zraoQ7C8f+mJb9HYSENiZGgRVcG4tLQxE61yHNNRDXtGDWTZh8N1KIHcsqN1CEPETjuzBXkJYF/fDiQ==
 
-"@elastic/eui@44.0.0":
+"@elastic/eui@46.1.0":
-  version "44.0.0"
+  version "46.1.0"
-  resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-44.0.0.tgz#5d2dde9715fce5448b7d98367fd274dce974fe0a"
+  resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-46.1.0.tgz#b1d77a56d529001858b7fc91f6c2953288549336"
-  integrity sha512-Co3hSmvHn91upvylKvk5IJDR02KL+hdLQcJWU5DfRxTUv3iua3ZLmCMwG3WeoV/XE7kTsxDlNslRO5I3hk5uWg==
+  integrity sha512-j65NMzqKluVPtk3b6UYdVVaBha74Y8Y/N6QaHin9MmqUKoAPgevqHWvi0n/OmMpADdRCI0ldxkse6tgAvdaEHQ==
   dependencies:
     "@types/chroma-js" "^2.0.0"
     "@types/lodash" "^4.14.160"