Upgrade EUI to v95.10.1

package.json

@@ -115,7 +115,7 @@
     "@elastic/ecs": "^8.11.1",
     "@elastic/elasticsearch": "^8.15.0",
     "@elastic/ems-client": "8.5.3",
-    "@elastic/eui": "95.9.0",
+    "@elastic/eui": "95.10.1",
     "@elastic/filesaver": "1.1.2",
     "@elastic/node-crypto": "1.2.1",
     "@elastic/numeral": "^2.5.1",

packages/core/i18n/core-i18n-browser-internal/src/i18n_eui_mapping.tsx

@@ -541,16 +541,25 @@ export const getEuiContextMapping = (): EuiTokensObject => {
       'core.euiDataGridCell.focusTrapEnterPrompt',
       { defaultMessage: "Press the Enter key to interact with this cell's contents." }
     ),
+    'euiDataGridCell.focusTrapExitPrompt': i18n.translate(
+      'core.euiDataGridCell.focusTrapExitPrompt',
+      { defaultMessage: 'Exited cell content.' }
+    ),
     'euiDataGridCellActions.expandButtonTitle': i18n.translate(
       'core.euiDataGridCellActions.expandButtonTitle',
       {
         defaultMessage: 'Click or hit enter to interact with cell content',
       }
     ),
-    'euiDataGridHeaderCell.headerActions': i18n.translate(
-      'core.euiDataGridHeaderCell.headerActions',
+    'euiDataGridHeaderCell.actionsButtonAriaLabel': ({ title }: EuiValues) =>
+      i18n.translate('core.euiDataGridHeaderCell.actionsButtonAriaLabel', {
+        defaultMessage: '{title}. Click to view column header actions.',
+        values: { title },
+      }),
+    'euiDataGridHeaderCell.actionsEnterKeyInstructions': i18n.translate(
+      'core.euiDataGridHeaderCell.actionsEnterKeyInstructions',
       {
-        defaultMessage: 'Click to view column header actions',
+        defaultMessage: "Press the Enter key to view this column's actions",
       }
     ),
     'euiDataGridHeaderCell.sortedByAscendingSingle': i18n.translate(

packages/kbn-unified-data-table/src/components/data_table.test.tsx

@@ -13,6 +13,7 @@ import {
   EuiDataGridCellValueElementProps,
   EuiDataGridCustomBodyProps,
 } from '@elastic/eui';
+import { waitForEuiPopoverOpen } from '@elastic/eui/lib/test/rtl';
 import { Storage } from '@kbn/kibana-utils-plugin/public';
 import { act } from 'react-dom/test-utils';
 import { findTestSubject } from '@elastic/eui/lib/test';
@@ -383,7 +384,7 @@ describe('UnifiedDataTable', () => {
         expect(
           screen.queryByTestId('dataGridHeaderCellActionGroup-message')
         ).not.toBeInTheDocument();
-        userEvent.click(screen.getByRole('button', { name: 'message' }));
+        userEvent.click(screen.getByTestId('dataGridHeaderCellActionButton-message'));
         expect(screen.getByTestId('dataGridHeaderCellActionGroup-message')).toBeInTheDocument();
         expect(screen.getByTestId('gridEditFieldButton')).toBeInTheDocument();
       },
@@ -397,7 +398,7 @@ describe('UnifiedDataTable', () => {
         expect(
           screen.queryByTestId('dataGridHeaderCellActionGroup-message')
         ).not.toBeInTheDocument();
-        userEvent.click(screen.getByRole('button', { name: 'message' }));
+        userEvent.click(screen.getByTestId('dataGridHeaderCellActionButton-message'));
         expect(screen.getByTestId('dataGridHeaderCellActionGroup-message')).toBeInTheDocument();
         expect(screen.queryByTestId('gridEditFieldButton')).not.toBeInTheDocument();
       },
@@ -456,7 +457,8 @@ describe('UnifiedDataTable', () => {
   });
 
   describe('sorting', () => {
-    const getButton = (name: string) => screen.getByRole('button', { name });
+    const getColumnActions = (name: string) =>
+      screen.getByTestId(`dataGridHeaderCellActionButton-${name}`);
     const getCellValuesByColumn = () => {
       const columns = screen
         .getAllByRole('columnheader')
@@ -495,7 +497,7 @@ describe('UnifiedDataTable', () => {
           'message_8',
           'message_9',
         ]);
-        userEvent.click(getButton('message'));
+        userEvent.click(getColumnActions('message'));
         // Column sort button incorrectly renders as "Sort " instead
         // of "Sort Z-A" in Jest tests, so we need to find it by index
         userEvent.click(screen.getAllByRole('button', { name: /Sort/ })[2], undefined, {
@@ -542,7 +544,7 @@ describe('UnifiedDataTable', () => {
           'message_8',
           'message_9',
         ]);
-        userEvent.click(getButton('message'));
+        userEvent.click(getColumnActions('message'));
         // Column sort button incorrectly renders as "Sort " instead
         // of "Sort Z-A" in Jest tests, so we need to find it by index
         userEvent.click(screen.getAllByRole('button', { name: /Sort/ })[2], undefined, {
@@ -1253,7 +1255,17 @@ describe('UnifiedDataTable', () => {
     const EUI_DEFAULT_COLUMN_WIDTH = '100px';
     const getColumnHeader = (name: string) => screen.getByRole('columnheader', { name });
     const queryColumnHeader = (name: string) => screen.queryByRole('columnheader', { name });
-    const getButton = (name: string) => screen.getByRole('button', { name });
+    const openColumnActions = async (name: string) => {
+      const actionsButton = screen.getByTestId(`dataGridHeaderCellActionButton-${name}`);
+      await userEvent.click(actionsButton);
+      await waitForEuiPopoverOpen();
+    };
+    const clickColumnAction = async (name: string) => {
+      const action = screen.getByRole('button', { name });
+      await act(async () => {
+        await userEvent.click(action, undefined, { skipPointerEventsCheck: true });
+      });
+    };
     const queryButton = (name: string) => screen.queryByRole('button', { name });
 
     it(
@@ -1271,8 +1283,8 @@ describe('UnifiedDataTable', () => {
         expect(getColumnHeader('message')).toHaveStyle({ width: EUI_DEFAULT_COLUMN_WIDTH });
         expect(getColumnHeader('extension')).toHaveStyle({ width: '50px' });
         expect(getColumnHeader('bytes')).toHaveStyle({ width: '50px' });
-        userEvent.click(getButton('message'));
-        userEvent.click(getButton('Remove column'), undefined, { skipPointerEventsCheck: true });
+        await openColumnActions('message');
+        await clickColumnAction('Remove column');
         await waitFor(() => {
           expect(queryColumnHeader('message')).not.toBeInTheDocument();
         });
@@ -1296,8 +1308,8 @@ describe('UnifiedDataTable', () => {
         expect(getColumnHeader('message')).toHaveStyle({ width: EUI_DEFAULT_COLUMN_WIDTH });
         expect(getColumnHeader('extension')).toHaveStyle({ width: EUI_DEFAULT_COLUMN_WIDTH });
         expect(getColumnHeader('bytes')).toHaveStyle({ width: '50px' });
-        userEvent.click(getButton('message'));
-        userEvent.click(getButton('Remove column'), undefined, { skipPointerEventsCheck: true });
+        await openColumnActions('message');
+        await clickColumnAction('Remove column');
         await waitFor(() => {
           expect(queryColumnHeader('message')).not.toBeInTheDocument();
         });
@@ -1320,21 +1332,21 @@ describe('UnifiedDataTable', () => {
           },
         });
         expect(getColumnHeader('@timestamp')).toHaveStyle({ width: '50px' });
-        userEvent.click(getButton('@timestamp'));
-        userEvent.click(getButton('Reset width'), undefined, { skipPointerEventsCheck: true });
+        await openColumnActions('@timestamp');
+        await clickColumnAction('Reset width');
         await waitFor(() => {
           expect(getColumnHeader('@timestamp')).toHaveStyle({
             width: `${defaultTimeColumnWidth}px`,
           });
         });
         expect(getColumnHeader('message')).toHaveStyle({ width: EUI_DEFAULT_COLUMN_WIDTH });
-        userEvent.click(getButton('message'));
+        await openColumnActions('message');
         expect(queryButton('Reset width')).not.toBeInTheDocument();
         await waitFor(() => {
           expect(getColumnHeader('extension')).toHaveStyle({ width: '50px' });
         });
-        userEvent.click(getButton('extension'));
-        userEvent.click(getButton('Reset width'), undefined, { skipPointerEventsCheck: true });
+        await openColumnActions('extension');
+        await clickColumnAction('Reset width');
         await waitFor(() => {
           expect(getColumnHeader('extension')).toHaveStyle({ width: EUI_DEFAULT_COLUMN_WIDTH });
         });

src/dev/license_checker/config.ts

@@ -86,7 +86,7 @@ export const LICENSE_OVERRIDES = {
   '[email protected]': ['Eclipse Distribution License - v 1.0'], // cf. https://github.com/bjornharrtell/jsts
   '@mapbox/[email protected]': ['MIT'], // license in readme https://github.com/tmcw/jsonlint
   '@elastic/[email protected]': ['Elastic License 2.0'],
-  '@elastic/eui@95.9.0': ['SSPL-1.0 OR Elastic License 2.0'],
+  '@elastic/eui@95.10.1': ['SSPL-1.0 OR Elastic License 2.0'],
   '[email protected]': ['CC-BY-4.0'], // retired ODC‑By license https://github.com/mattcg/language-subtag-registry
   '[email protected]': ['MIT'], // license in importing module https://www.npmjs.com/package/binary
   '@bufbuild/[email protected]': ['Apache-2.0'], // license (Apache-2.0 AND BSD-3-Clause)

test/accessibility/apps/discover.ts

@@ -159,7 +159,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
     });
 
     it('a11y test for data-grid actions on columns', async () => {
-      await testSubjects.click('dataGridHeaderCellActionButton-Carrier');
+      await dataGrid.openColMenuByField('Carrier');
       await a11y.testAppSnapshot();
     });
 

test/functional/apps/context/_discover_navigation.ts

@@ -57,6 +57,11 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
       await kibanaServer.uiSettings.replace({});
     });
 
+    it('should open the context view with the same columns', async () => {
+      const columnNames = await dataGrid.getHeaderFields();
+      expect(columnNames).to.eql(['@timestamp', ...TEST_COLUMN_NAMES]);
+    });
+
     it('should open the context view with the selected document as anchor and allows selecting next anchor', async () => {
       /**
        * Helper function to get the first timestamp of the document table
@@ -94,11 +99,6 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
       });
     });
 
-    it('should open the context view with the same columns', async () => {
-      const columnNames = await dataGrid.getHeaderFields();
-      expect(columnNames).to.eql(['@timestamp', ...TEST_COLUMN_NAMES]);
-    });
-
     it('should open the context view with the filters disabled', async () => {
       let disabledFilterCounter = 0;
       for (const [columnName, value] of TEST_FILTER_COLUMN_NAMES) {

test/functional/apps/context/classic/_discover_navigation.ts

@@ -56,6 +56,11 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
       await kibanaServer.uiSettings.replace({});
     });
 
+    it('should open the context view with the same columns', async () => {
+      const columnNames = await docTable.getHeaderFields();
+      expect(columnNames).to.eql(['@timestamp', ...TEST_COLUMN_NAMES]);
+    });
+
     it('should open the context view with the selected document as anchor and allows selecting next anchor', async () => {
       /**
        * Helper function to get the first timestamp of the document table
@@ -92,11 +97,6 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
       });
     });
 
-    it('should open the context view with the same columns', async () => {
-      const columnNames = await docTable.getHeaderFields();
-      expect(columnNames).to.eql(['@timestamp', ...TEST_COLUMN_NAMES]);
-    });
-
     it('should open the context view with the filters disabled', async () => {
       let disabledFilterCounter = 0;
       for (const [_, value, columnId] of TEST_FILTER_COLUMN_NAMES) {

test/functional/apps/discover/group2_data_grid1/_data_grid_context.ts

@@ -63,6 +63,11 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
       await PageObjects.timePicker.resetDefaultAbsoluteRangeViaUiSettings();
     });
 
+    it('should open the context view with the same columns', async () => {
+      const columnNames = await dataGrid.getHeaderFields();
+      expect(columnNames).to.eql(['@timestamp', ...TEST_COLUMN_NAMES]);
+    });
+
     it('should open the context view with the selected document as anchor', async () => {
       // check the anchor timestamp in the context view
       await retry.waitFor('selected document timestamp matches anchor timestamp ', async () => {
@@ -82,11 +87,6 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
       });
     });
 
-    it('should open the context view with the same columns', async () => {
-      const columnNames = await dataGrid.getHeaderFields();
-      expect(columnNames).to.eql(['@timestamp', ...TEST_COLUMN_NAMES]);
-    });
-
     it('should open the context view with the filters disabled', async () => {
       let disabledFilterCounter = 0;
       for (const [_, value, columnId] of TEST_FILTER_COLUMN_NAMES) {

test/functional/apps/management/data_views/_scripted_fields.ts

@@ -32,7 +32,6 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
   const retry = getService('retry');
   const testSubjects = getService('testSubjects');
   const filterBar = getService('filterBar');
-  const find = getService('find');
   const dataGrid = getService('dataGrid');
   const PageObjects = getPageObjects([
     'common',
@@ -59,16 +58,6 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
       await PageObjects.common.unsetTime();
     });
 
-    /**
-     * @param field field name to sort
-     * @param optionIndex index of the option to choose in dropdown
-     */
-    const clickSort = async (field: string, optionIndex: number) => {
-      await testSubjects.click(`dataGridHeaderCell-${field}`);
-      const optionButtons = await find.allByCssSelector('.euiListGroupItem__button');
-      await optionButtons[optionIndex].click();
-    };
-
     it('should not allow saving of invalid scripts', async function () {
       await PageObjects.settings.navigateTo();
       await PageObjects.settings.clickKibanaIndexPatterns();
@@ -169,25 +158,25 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
 
         // add a test to sort numeric scripted field
         it('should sort scripted field value in Discover', async function () {
-          await clickSort(scriptedPainlessFieldName, 1);
+          await dataGrid.clickColumnActionAt(scriptedPainlessFieldName, 1);
           await PageObjects.common.sleep(500);
 
           // after the first click on the scripted field, it becomes secondary sort after time.
           // click on the timestamp twice to make it be the secondary sort key.
-          await clickSort('@timestamp', 1);
-          await clickSort('@timestamp', 0);
+          await dataGrid.clickColumnActionAt('@timestamp', 1);
+          await dataGrid.clickColumnActionAt('@timestamp', 0);
 
           await PageObjects.header.waitUntilLoadingHasFinished();
           await retry.try(async function () {
             const rowData = (await dataGrid.getRowsText())[0];
             expect(rowData).to.be('Sep 17, 2015 @ 10:53:14.181-1');
           });
 
-          await clickSort(scriptedPainlessFieldName, 2);
+          await dataGrid.clickColumnActionAt(scriptedPainlessFieldName, 2);
           // after the first click on the scripted field, it becomes primary sort after time.
           // click on the scripted field twice then, makes it be the secondary sort key.
-          await clickSort(scriptedPainlessFieldName, 2);
-          await clickSort(scriptedPainlessFieldName, 2);
+          await dataGrid.clickColumnActionAt(scriptedPainlessFieldName, 2);
+          await dataGrid.clickColumnActionAt(scriptedPainlessFieldName, 2);
 
           await PageObjects.header.waitUntilLoadingHasFinished();
           await retry.try(async function () {
@@ -274,25 +263,25 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
 
       // add a test to sort string scripted field
       it('should sort scripted field value in Discover', async function () {
-        await clickSort(scriptedPainlessFieldName2, 1);
+        await dataGrid.clickColumnActionAt(scriptedPainlessFieldName2, 1);
         // await testSubjects.click(`docTableHeaderFieldSort_${scriptedPainlessFieldName2}`);
         await PageObjects.common.sleep(500);
 
         // after the first click on the scripted field, it becomes secondary sort after time.
         // click on the timestamp twice to make it be the secondary sort key.
-        await clickSort('@timestamp', 1);
-        await clickSort('@timestamp', 0);
+        await dataGrid.clickColumnActionAt('@timestamp', 1);
+        await dataGrid.clickColumnActionAt('@timestamp', 0);
         await PageObjects.header.waitUntilLoadingHasFinished();
         await retry.try(async function () {
           const rowData = (await dataGrid.getRowsText())[0];
           expect(rowData).to.be('Sep 17, 2015 @ 09:48:40.594bad');
         });
 
-        await clickSort(scriptedPainlessFieldName2, 2);
+        await dataGrid.clickColumnActionAt(scriptedPainlessFieldName2, 2);
         // after the first click on the scripted field, it becomes primary sort after time.
         // click on the scripted field twice then, makes it be the secondary sort key.
-        await clickSort(scriptedPainlessFieldName2, 2);
-        await clickSort(scriptedPainlessFieldName2, 2);
+        await dataGrid.clickColumnActionAt(scriptedPainlessFieldName2, 2);
+        await dataGrid.clickColumnActionAt(scriptedPainlessFieldName2, 2);
 
         await PageObjects.header.waitUntilLoadingHasFinished();
         await retry.try(async function () {