[8.x] Upgrade EUI to v95.11.0 (#192756) (#193803)

# Backport This will backport the following commits from `main` to `8.x`: - [Upgrade EUI to v95.11.0 (#192756)](#192756)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport)  --------- Co-authored-by: Cee Chen <[email protected]> Co-authored-by: Cee Chen <[email protected]>
elastic · Sep 27, 2024 · 6dfc890 · 6dfc890
1 parent 621b192
commit 6dfc890
Show file tree

Hide file tree

Showing 24 changed files with 114 additions and 164 deletions.
diff --git a/package.json b/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.10.1",
+    "@elastic/eui": "95.11.0",
     "@elastic/filesaver": "1.1.2",
     "@elastic/node-crypto": "1.2.1",
     "@elastic/numeral": "^2.5.1",

diff --git a/packages/core/i18n/core-i18n-browser-internal/src/__snapshots__/i18n_service.test.tsx.snap b/packages/core/i18n/core-i18n-browser-internal/src/__snapshots__/i18n_service.test.tsx.snap
diff --git a/packages/core/i18n/core-i18n-browser-internal/src/i18n_eui_mapping.tsx b/packages/core/i18n/core-i18n-browser-internal/src/i18n_eui_mapping.tsx
@@ -163,12 +163,18 @@ export const getEuiContextMapping = (): EuiTokensObject => {
         description: 'ARIA label for a button that enters fullscreen view',
       }
     ),
-    'euiCollapsedItemActions.allActions': i18n.translate(
-      'core.euiCollapsedItemActions.allActions',
+    'euiCollapsedItemActions.allActions': ({ index }: EuiValues) =>
+      i18n.translate('core.euiCollapsedItemActions.allActions', {
+        defaultMessage: 'All actions, row {index}',
+        values: { index },
+        description:
+          'ARIA label for a button that is rendered on multiple table rows, that expands an actions menu',
+      }),
+    'euiCollapsedItemActions.allActionsTooltip': i18n.translate(
+      'core.euiCollapsedItemActions.allActionsTooltip',
       {
         defaultMessage: 'All actions',
-        description:
-          'ARIA label and tooltip content describing a button that expands an actions menu',
+        description: 'Tooltip content describing a button that expands an actions menu',
       }
     ),
     'euiCollapsedItemActions.allActionsDisabled': i18n.translate(
@@ -251,6 +257,11 @@ export const getEuiContextMapping = (): EuiTokensObject => {
         defaultMessage: 'Sort {schemaLabel}',
         values: { schemaLabel },
       }),
+    'euiColumnActions.unsort': ({ schemaLabel }: EuiValues) =>
+      i18n.translate('core.euiColumnActions.unsort', {
+        defaultMessage: 'Unsort {schemaLabel}',
+        values: { schemaLabel },
+      }),
     'euiColumnActions.moveLeft': i18n.translate('core.euiColumnActions.moveLeft', {
       defaultMessage: 'Move left',
     }),
@@ -529,10 +540,10 @@ export const getEuiContextMapping = (): EuiTokensObject => {
         values: { page, pageCount },
         description: 'Screen reader text to describe the size of the data grid',
       }),
-    'euiDataGridCell.position': ({ columnId, row, col }: EuiValues) =>
+    'euiDataGridCell.position': ({ columnName, columnIndex, rowIndex }: EuiValues) =>
       i18n.translate('core.euiDataGridCell.position', {
-        defaultMessage: '{columnId}, column {col}, row {row}',
-        values: { columnId, row, col },
+        defaultMessage: '{columnName}, column {columnIndex}, row {rowIndex}',
+        values: { columnName, columnIndex, rowIndex },
       }),
     'euiDataGridCell.expansionEnterPrompt': i18n.translate(
       'core.euiDataGridCell.expansionEnterPrompt',

diff --git a/packages/kbn-unified-data-table/src/components/data_table.scss b/packages/kbn-unified-data-table/src/components/data_table.scss
@@ -43,13 +43,16 @@
   .euiDataGridHeaderCell {
     align-items: start;
 
-    &:not(.euiDataGridHeaderCell--controlColumn) .euiDataGridHeaderCell__button {
-      height: 100%;
-      align-items: flex-start;
+    .euiPopover[class*='euiDataGridHeaderCell__popover'] {
+      align-self: center;
     }
   }
 
-  .euiDataGrid--headerUnderline .euiDataGridHeaderCell {
+  .euiDataGrid--bordersHorizontal .euiDataGridHeader {
+    border-top: none;
+  }
+
+  .euiDataGrid--headerUnderline .euiDataGridHeader {
     border-bottom: $euiBorderThin;
   }
 
@@ -93,7 +96,8 @@
   }
 
   .euiDataGridRowCell__content--autoHeight,
-  .euiDataGridRowCell__content--lineCountHeight {
+  .euiDataGridRowCell__content--lineCountHeight,
+  .euiDataGridHeaderCell__content {
     white-space: pre-wrap;
   }
 }
@@ -104,25 +108,6 @@
   min-height: 0;
 }
 
-// We only truncate if the cell is not a control column.
-.euiDataGridHeader {
-
-  .euiDataGridHeaderCell__content {
-    white-space: pre-wrap;
-  }
-
-  .euiDataGridHeaderCell__popover {
-    flex-grow: 0;
-    flex-basis: auto;
-    width: auto;
-    padding-left: $euiSizeXS;
-  }
-}
-
-.euiDataGridRowCell--numeric {
-  text-align: right;
-}
-
 .euiDataGrid__loading,
 .euiDataGrid__noResults {
   display: flex;

diff --git a/src/dev/license_checker/config.ts b/src/dev/license_checker/config.ts
@@ -87,7 +87,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.10.1': ['Elastic License 2.0 OR AGPL-3.0-only OR SSPL-1.0'],
+  '@elastic/eui@95.11.0': ['Elastic License 2.0 OR AGPL-3.0-only OR SSPL-1.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)

diff --git a/src/plugins/unified_doc_viewer/public/components/doc_viewer_table/table.scss b/src/plugins/unified_doc_viewer/public/components/doc_viewer_table/table.scss
@@ -72,11 +72,11 @@
 }
 
 .kbnDocViewer__fieldsGrid {
-  &.euiDataGrid--noControls.euiDataGrid--bordersHorizontal .euiDataGridHeaderCell {
+  &.euiDataGrid--noControls.euiDataGrid--bordersHorizontal .euiDataGridHeader {
     border-top: none;
   }
 
-  &.euiDataGrid--headerUnderline .euiDataGridHeaderCell {
+  &.euiDataGrid--headerUnderline .euiDataGridHeader {
     border-bottom: $euiBorderThin;
   }
 

diff --git a/test/functional/apps/discover/esql/_esql_view.ts b/test/functional/apps/discover/esql/_esql_view.ts
@@ -199,7 +199,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
         const cell = await dataGrid.getCellElementExcludingControlColumns(0, 1);
         expect(await cell.getVisibleText()).to.be(' - ');
         expect(await dataGrid.getHeaders()).to.eql([
-          'Select column',
+          "Select columnPress the Enter key to interact with this cell's contents.", // contains screen reader help text
           'Control column',
           'Access to degraded docs',
           'Access to available stacktraces',

diff --git a/test/functional/services/data_grid.ts b/test/functional/services/data_grid.ts
@@ -34,7 +34,7 @@ export class DataGridService extends FtrService {
     const table = await this.find.byCssSelector('.euiDataGrid');
     const $ = await table.parseDomContent();
 
-    const columns = $('.euiDataGridHeaderCell__content')
+    const columns = $('.euiDataGridHeaderCell')
       .toArray()
       .map((cell) => $(cell).text());
     const cells = $.findTestSubjects('dataGridRowCell')
@@ -59,7 +59,7 @@ export class DataGridService extends FtrService {
     cellDataTestSubj: string
   ): Promise<string[][]> {
     const $ = await element.parseDomContent();
-    const columnNumber = $('.euiDataGridHeaderCell__content').length;
+    const columnNumber = $('.euiDataGridHeaderCell').length;
     const cells = $.findTestSubjects('dataGridRowCell')
       .toArray()
       .map((cell) =>
@@ -79,7 +79,7 @@ export class DataGridService extends FtrService {
   public async getHeaders() {
     const header = await this.testSubjects.find('euiDataGridBody > dataGridHeader');
     const $ = await header.parseDomContent();
-    return $('.euiDataGridHeaderCell__content')
+    return $('.euiDataGridHeaderCell')
       .toArray()
       .map((cell) => $(cell).text());
   }
@@ -134,6 +134,7 @@ export class DataGridService extends FtrService {
     let actionButton: WebElementWrapper | undefined;
     await this.retry.try(async () => {
       const cell = await this.getCellElement(rowIndex, columnIndex);
+      await cell.moveMouseTo();
       await cell.click();
       actionButton = await cell.findByTestSubject(selector);
       if (!actionButton) {
@@ -154,6 +155,7 @@ export class DataGridService extends FtrService {
       columnIndex,
       'euiDataGridCellExpandButton'
     );
+    await actionButton.moveMouseTo();
     await actionButton.click();
     await this.retry.waitFor('popover to be opened', async () => {
       return await this.testSubjects.exists('euiDataGridExpansionPopover');
@@ -197,6 +199,7 @@ export class DataGridService extends FtrService {
    */
   public async clickCellFilterForButton(rowIndex: number = 0, columnIndex: number = 0) {
     const actionButton = await this.getCellActionButton(rowIndex, columnIndex, 'filterForButton');
+    await actionButton.moveMouseTo();
     await actionButton.click();
   }
 
@@ -215,11 +218,13 @@ export class DataGridService extends FtrService {
       controlsCount + columnIndex,
       'filterForButton'
     );
+    await actionButton.moveMouseTo();
     await actionButton.click();
   }
 
   public async clickCellFilterOutButton(rowIndex: number = 0, columnIndex: number = 0) {
     const actionButton = await this.getCellActionButton(rowIndex, columnIndex, 'filterOutButton');
+    await actionButton.moveMouseTo();
     await actionButton.click();
   }
 
@@ -233,6 +238,7 @@ export class DataGridService extends FtrService {
       controlsCount + columnIndex,
       'filterOutButton'
     );
+    await actionButton.moveMouseTo();
     await actionButton.click();
   }
 
@@ -374,6 +380,7 @@ export class DataGridService extends FtrService {
 
     if (toggle) {
       await toggle.scrollIntoViewIfNecessary();
+      await toggle.moveMouseTo();
       await toggle.click();
       await this.retry.waitFor('doc viewer to open', async () => {
         return this.isShowingDocViewer();
@@ -402,9 +409,7 @@ export class DataGridService extends FtrService {
   }
 
   public async getHeaderFields(): Promise<string[]> {
-    const result = await this.find.allByCssSelector(
-      '.euiDataGridHeaderCell:not(.euiDataGridHeaderCell--controlColumn) .euiDataGridHeaderCell__content'
-    );
+    const result = await this.find.allByCssSelector('.euiDataGridHeaderCell__content');
 
     const textArr = [];
     for (const cell of result) {
@@ -415,9 +420,7 @@ export class DataGridService extends FtrService {
   }
 
   public async getControlColumnHeaderFields(): Promise<string[]> {
-    const result = await this.find.allByCssSelector(
-      '.euiDataGridHeaderCell--controlColumn .euiDataGridHeaderCell__content'
-    );
+    const result = await this.find.allByCssSelector('.euiDataGridHeaderCell--controlColumn');
 
     const textArr = [];
     for (const cell of result) {
@@ -628,15 +631,20 @@ export class DataGridService extends FtrService {
     const cellSelector = ['addFilterForValueButton', 'addFilterOutValueButton'].includes(actionName)
       ? `tableDocViewRow-${fieldName}-value`
       : `tableDocViewRow-${fieldName}-name`;
+    await this.testSubjects.moveMouseTo(cellSelector);
     await this.testSubjects.click(cellSelector);
+
     await this.retry.waitFor('grid cell actions to appear', async () => {
       return this.testSubjects.exists(`${actionName}-${fieldName}`);
     });
   }
 
   public async clickFieldActionInFlyout(fieldName: string, actionName: string): Promise<void> {
     await this.showFieldCellActionInFlyout(fieldName, actionName);
-    await this.testSubjects.click(`${actionName}-${fieldName}`);
+
+    const actionSelector = `${actionName}-${fieldName}`;
+    await this.testSubjects.moveMouseTo(actionSelector);
+    await this.testSubjects.click(actionSelector);
   }
 
   public async isFieldPinnedInFlyout(fieldName: string): Promise<boolean> {
@@ -658,11 +666,14 @@ export class DataGridService extends FtrService {
   }
 
   public async expandFieldNameCellInFlyout(fieldName: string): Promise<void> {
+    const cellSelector = `tableDocViewRow-${fieldName}-name`;
     const buttonSelector = 'euiDataGridCellExpandButton';
-    await this.testSubjects.click(`tableDocViewRow-${fieldName}-name`);
+    await this.testSubjects.moveMouseTo(cellSelector);
+    await this.testSubjects.click(cellSelector);
     await this.retry.waitFor('grid cell actions to appear', async () => {
       return this.testSubjects.exists(buttonSelector);
     });
+    await this.testSubjects.moveMouseTo(buttonSelector);
     await this.testSubjects.click(buttonSelector);
   }
 

diff --git a/x-pack/packages/security-solution/data_table/components/data_table/index.test.tsx b/x-pack/packages/security-solution/data_table/components/data_table/index.test.tsx
@@ -139,9 +139,9 @@ describe('DataTable', () => {
       wrapper.update();
       expect(
         wrapper
-          .find('[data-test-subj="dataGridRowCell"]')
+          .find('div[data-test-subj="dataGridRowCell"]')
           .at(0)
-          .find('.euiDataGridRowCell__content')
+          .find('div.euiDataGridRowCell__content')
           .childAt(0)
           .text()
       ).toEqual(mockTimelineData[0].ecs.timestamp);

diff --git a/x-pack/plugins/lens/public/visualizations/datatable/components/table_basic.test.tsx b/x-pack/plugins/lens/public/visualizations/datatable/components/table_basic.test.tsx
@@ -141,9 +141,9 @@ describe('DatatableComponent', () => {
     expect(screen.getByLabelText('My fanci metric chart')).toBeInTheDocument();
     expect(screen.getByRole('row')).toBeInTheDocument();
     expect(screen.queryAllByRole('gridcell').map((cell) => cell.textContent)).toEqual([
-      'shoes- a, column 1, row 1',
-      '1588024800000- b, column 2, row 1',
-      '3- c, column 3, row 1',
+      'shoes',
+      '1588024800000',
+      '3',
     ]);
   });
 
@@ -352,8 +352,8 @@ describe('DatatableComponent', () => {
       },
     });
     expect(screen.queryAllByRole('gridcell').map((cell) => cell.textContent)).toEqual([
-      '1588024800000- b, column 1, row 1',
-      '3- c, column 2, row 1',
+      '1588024800000',
+      '3',
     ]);
   });
 
@@ -698,9 +698,9 @@ describe('DatatableComponent', () => {
           .map((cell) => [cell.textContent, cell.style.backgroundColor]);
 
         expect(cellColors).toEqual([
-          ['shoes- a, column 1, row 1', 'red'],
-          ['1588024800000- b, column 2, row 1', ''],
-          ['3- c, column 3, row 1', ''],
+          ['shoes', 'red'],
+          ['1588024800000', ''],
+          ['3', ''],
         ]);
       });
 
@@ -717,9 +717,9 @@ describe('DatatableComponent', () => {
           .map((cell) => [cell.textContent, cell.style.backgroundColor]);
 
         expect(cellColors).toEqual([
-          ['shoes- a, column 1, row 1', ''],
-          ['1588024800000- b, column 2, row 1', ''],
-          ['3- c, column 3, row 1', 'red'],
+          ['shoes', ''],
+          ['1588024800000', ''],
+          ['3', 'red'],
         ]);
       });
     });