[8.x] Upgrade EUI to v95.12.0 (#193805) (#194500)

# Backport This will backport the following commits from `main` to `8.x`: - [Upgrade EUI to v95.12.0 (#193805)](#193805)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport)  Co-authored-by: Cee Chen <549407+cee-chen@users.noreply.github.com>
elastic · Oct 1, 2024 · 20ee61b · 20ee61b
1 parent 6aa7c23
commit 20ee61b
Show file tree

Hide file tree

Showing 22 changed files with 126 additions and 169 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.11.0",
+    "@elastic/eui": "95.12.0-backport.0",
     "@elastic/filesaver": "1.1.2",
     "@elastic/node-crypto": "1.2.1",
     "@elastic/numeral": "^2.5.1",

diff --git a/packages/kbn-test/src/jest/setup/polyfills.jsdom.js b/packages/kbn-test/src/jest/setup/polyfills.jsdom.js
@@ -53,22 +53,16 @@ if (!Object.hasOwn(global, 'Worker')) {
   if (!Object.hasOwn(global, 'matchMedia')) {
     Object.defineProperty(global, 'matchMedia', {
       writable: true,
-      // eslint-disable-next-line no-undef
-      value: jest.fn().mockImplementation((query) => ({
+      value: (query) => ({
         matches: false,
         media: query,
         onchange: null,
-        // eslint-disable-next-line no-undef
-        addListener: jest.fn(), // deprecated
-        // eslint-disable-next-line no-undef
-        removeListener: jest.fn(), // deprecated
-        // eslint-disable-next-line no-undef
-        addEventListener: jest.fn(),
-        // eslint-disable-next-line no-undef
-        removeEventListener: jest.fn(),
-        // eslint-disable-next-line no-undef
-        dispatchEvent: jest.fn(),
-      })),
+        addListener: () => {},
+        removeListener: () => {},
+        addEventListener: () => {},
+        removeEventListener: () => {},
+        dispatchEvent: () => {},
+      }),
     });
   }
 }
diff --git a/packages/kbn-unified-data-table/index.ts b/packages/kbn-unified-data-table/index.ts
@@ -28,7 +28,6 @@ export { popularizeField } from './src/utils/popularize_field';
 
 export { useColumns, type UseColumnsProps } from './src/hooks/use_data_grid_columns';
 export { OPEN_DETAILS, SELECT_ROW } from './src/components/data_table_columns'; // TODO: deprecate?
-export { DataTableRowControl } from './src/components/data_table_row_control';
 
 export type {
   UnifiedDataTableRenderCustomToolbar,

diff --git a/...table/src/components/custom_control_columns/additional_row_control/row_control_column.tsx b/...table/src/components/custom_control_columns/additional_row_control/row_control_column.tsx
@@ -16,7 +16,6 @@ import {
   EuiToolTip,
 } from '@elastic/eui';
 import { RowControlColumn, RowControlProps } from '@kbn/discover-utils';
-import { DataTableRowControl, Size } from '../../data_table_row_control';
 import { DEFAULT_CONTROL_COLUMN_WIDTH } from '../../../constants';
 import { useControlColumn } from '../../../hooks/use_control_column';
 
@@ -40,23 +39,25 @@ export const RowControlCell = ({
         tooltipContent,
       }) => {
         return (
-          <DataTableRowControl size={Size.normal}>
-            <EuiToolTip content={tooltipContent ?? label} delay="long">
-              <EuiButtonIcon
-                data-test-subj={dataTestSubj ?? `unifiedDataTable_rowControl_${props.columnId}`}
-                disabled={disabled}
-                iconSize="s"
-                iconType={iconType}
-                color={color ?? 'text'}
-                aria-label={label}
-                onClick={() => {
-                  if (record) {
-                    onClick?.({ record, rowIndex });
-                  }
-                }}
-              />
-            </EuiToolTip>
-          </DataTableRowControl>
+          <EuiToolTip
+            content={tooltipContent ?? label}
+            delay="long"
+            anchorClassName="unifiedDataTable__rowControl"
+          >
+            <EuiButtonIcon
+              data-test-subj={dataTestSubj ?? `unifiedDataTable_rowControl_${props.columnId}`}
+              disabled={disabled}
+              iconSize="s"
+              iconType={iconType}
+              color={color ?? 'text'}
+              aria-label={label}
+              onClick={() => {
+                if (record) {
+                  onClick?.({ record, rowIndex });
+                }
+              }}
+            />
+          </EuiToolTip>
         );
       },
     [props.columnId, record, rowIndex]

diff --git a/.../src/components/custom_control_columns/additional_row_control/row_menu_control_column.tsx b/.../src/components/custom_control_columns/additional_row_control/row_menu_control_column.tsx
@@ -19,9 +19,7 @@ import {
   EuiToolTip,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
-import { css } from '@emotion/react';
 import { RowControlColumn, RowControlProps } from '@kbn/discover-utils';
-import { DataTableRowControl, Size } from '../../data_table_row_control';
 import { DEFAULT_CONTROL_COLUMN_WIDTH } from '../../../constants';
 import { useControlColumn } from '../../../hooks/use_control_column';
 
@@ -80,26 +78,20 @@ export const RowMenuControlCell = ({
   return (
     <EuiPopover
       id={`rowMenuActionsPopover_${props.rowIndex}`}
+      className="unifiedDataTable__rowControl"
       button={
-        <DataTableRowControl size={Size.normal}>
-          <EuiToolTip content={buttonLabel} delay="long">
-            <EuiButtonIcon
-              data-test-subj={`unifiedDataTable_${props.columnId}`}
-              iconSize="s"
-              iconType="boxesVertical"
-              color="text"
-              aria-label={buttonLabel}
-              css={css`
-                .euiDataGridRowCell__content--defaultHeight & {
-                  margin-top: 2px; // to align with other controls
-                }
-              `}
-              onClick={() => {
-                setIsMoreActionsPopoverOpen(!isMoreActionsPopoverOpen);
-              }}
-            />
-          </EuiToolTip>
-        </DataTableRowControl>
+        <EuiToolTip content={buttonLabel} delay="long">
+          <EuiButtonIcon
+            data-test-subj={`unifiedDataTable_${props.columnId}`}
+            iconSize="s"
+            iconType="boxesVertical"
+            color="text"
+            aria-label={buttonLabel}
+            onClick={() => {
+              setIsMoreActionsPopoverOpen(!isMoreActionsPopoverOpen);
+            }}
+          />
+        </EuiToolTip>
       }
       isOpen={isMoreActionsPopoverOpen}
       closePopover={() => setIsMoreActionsPopoverOpen(false)}

diff --git a/packages/kbn-unified-data-table/src/components/data_table.scss b/packages/kbn-unified-data-table/src/components/data_table.scss
@@ -125,16 +125,17 @@
 
 .unifiedDataTable__rowControl {
   // fine-tuning the vertical alignment with the text for any row height setting
-  margin-top: -$euiSizeXS;
-  .euiDataGridRowCell__content--defaultHeight & { // "Single line" row height setting
-    margin-top: 0;
+  margin-top: -1px;
+
+  // Compact density - 'auto & custom' row height
+  .euiDataGrid--fontSizeSmall .euiDataGridRowCell__content:not(.euiDataGridRowCell__content--defaultHeight) & {
+    margin-top: -2.5px;
   }
 
-  &--size-normal {
-    display: inline-block;
-    width: $euiSizeL;
-    height: $euiSizeL;
-    overflow: hidden;
+  // Compact density - 'single' row height
+  .euiDataGrid--fontSizeSmall .euiDataGridRowCell__content--defaultHeight & {
+    align-self: flex-start;
+    margin-top: -3px;
   }
 }
 

diff --git a/packages/kbn-unified-data-table/src/components/data_table_document_selection.tsx b/packages/kbn-unified-data-table/src/components/data_table_document_selection.tsx
@@ -50,32 +50,22 @@ export const SelectButton = (props: EuiDataGridCellValueElementProps) => {
   }
 
   return (
-    <EuiFlexGroup
-      responsive={false}
-      direction="column"
-      justifyContent="center"
-      className="unifiedDataTable__rowControl"
+    <EuiCheckbox
+      id={record.id}
+      aria-label={toggleDocumentSelectionLabel}
+      checked={isDocSelected(record.id)}
+      data-test-subj={`dscGridSelectDoc-${record.id}`}
+      onChange={(event) => {
+        if ((event.nativeEvent as MouseEvent)?.shiftKey) {
+          toggleMultipleDocsSelection(record.id);
+        } else {
+          toggleDocSelection(record.id);
+        }
+      }}
       css={css`
-        padding-block: ${euiTheme.size.xs}; // to have the same height as "openDetails" control
-        padding-left: ${euiTheme.size.xs}; // space between controls
+        margin-left: ${euiTheme.size.xs}; /* fine tune horizontal alignment */
       `}
-    >
-      <EuiFlexItem grow={false}>
-        <EuiCheckbox
-          id={record.id}
-          aria-label={toggleDocumentSelectionLabel}
-          checked={isDocSelected(record.id)}
-          data-test-subj={`dscGridSelectDoc-${record.id}`}
-          onChange={(event) => {
-            if ((event.nativeEvent as MouseEvent)?.shiftKey) {
-              toggleMultipleDocsSelection(record.id);
-            } else {
-              toggleDocSelection(record.id);
-            }
-          }}
-        />
-      </EuiFlexItem>
-    </EuiFlexGroup>
+    />
   );
 };
 

diff --git a/packages/kbn-unified-data-table/src/components/data_table_expand_button.tsx b/packages/kbn-unified-data-table/src/components/data_table_expand_button.tsx
@@ -11,7 +11,6 @@ import React, { useContext, useEffect, useRef, useState } from 'react';
 import { EuiButtonIcon, EuiDataGridCellValueElementProps, EuiToolTip } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { UnifiedDataTableContext } from '../table_context';
-import { DataTableRowControl, Size } from './data_table_row_control';
 import { useControlColumn } from '../hooks/use_control_column';
 
 /**
@@ -49,25 +48,28 @@ export const ExpandButton = (props: EuiDataGridCellValueElementProps) => {
   }
 
   return (
-    <DataTableRowControl size={Size.normal}>
-      <EuiToolTip content={buttonLabel} delay="long" ref={toolTipRef}>
-        <EuiButtonIcon
-          id={rowIndex === 0 ? tourStep : undefined}
-          size="xs"
-          iconSize="s"
-          aria-label={buttonLabel}
-          data-test-subj={testSubj}
-          onClick={() => {
-            const nextHit = isCurrentRowExpanded ? undefined : record;
-            toolTipRef.current?.hideToolTip();
-            setPressed(Boolean(nextHit));
-            setExpanded?.(nextHit);
-          }}
-          color={isCurrentRowExpanded ? 'primary' : 'text'}
-          iconType={isCurrentRowExpanded ? 'minimize' : 'expand'}
-          isSelected={isCurrentRowExpanded}
-        />
-      </EuiToolTip>
-    </DataTableRowControl>
+    <EuiToolTip
+      content={buttonLabel}
+      delay="long"
+      ref={toolTipRef}
+      anchorClassName="unifiedDataTable__rowControl"
+    >
+      <EuiButtonIcon
+        id={rowIndex === 0 ? tourStep : undefined}
+        size="xs"
+        iconSize="s"
+        aria-label={buttonLabel}
+        data-test-subj={testSubj}
+        onClick={() => {
+          const nextHit = isCurrentRowExpanded ? undefined : record;
+          toolTipRef.current?.hideToolTip();
+          setPressed(Boolean(nextHit));
+          setExpanded?.(nextHit);
+        }}
+        color={isCurrentRowExpanded ? 'primary' : 'text'}
+        iconType={isCurrentRowExpanded ? 'minimize' : 'expand'}
+        isSelected={isCurrentRowExpanded}
+      />
+    </EuiToolTip>
   );
 };
diff --git a/packages/kbn-unified-data-table/src/components/data_table_row_control.tsx b/packages/kbn-unified-data-table/src/components/data_table_row_control.tsx
diff --git a/src/dev/license_checker/config.ts b/src/dev/license_checker/config.ts
@@ -87,7 +87,7 @@ 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.5.3': ['Elastic License 2.0'],
-  '@elastic/eui@95.11.0': ['Elastic License 2.0 OR AGPL-3.0-only OR SSPL-1.0'],
+  '@elastic/eui@95.12.0-backport.0': ['Elastic License 2.0 OR AGPL-3.0-only OR SSPL-1.0'],
   'language-subtag-registry@0.3.21': ['CC-BY-4.0'], // retired ODC‑By license https://github.com/mattcg/language-subtag-registry
   'buffers@0.1.1': ['MIT'], // license in importing module https://www.npmjs.com/package/binary
   '@bufbuild/protobuf@1.2.1': ['Apache-2.0'], // license (Apache-2.0 AND BSD-3-Clause)

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 columnPress the Enter key to interact with this cell's contents.", // contains screen reader help text
+          'Select column',
           '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
@@ -9,7 +9,7 @@
 
 import { chunk } from 'lodash';
 import { Key } from 'selenium-webdriver';
-import { WebElementWrapper } from '@kbn/ftr-common-functional-ui-services';
+import { WebElementWrapper, CustomCheerioStatic } from '@kbn/ftr-common-functional-ui-services';
 import { FtrService } from '../ftr_provider_context';
 
 export interface TabbedGridData {
@@ -34,12 +34,10 @@ export class DataGridService extends FtrService {
     const table = await this.find.byCssSelector('.euiDataGrid');
     const $ = await table.parseDomContent();
 
-    const columns = $('.euiDataGridHeaderCell')
-      .toArray()
-      .map((cell) => $(cell).text());
+    const columns = this.getHeaderText($);
     const cells = $.findTestSubjects('dataGridRowCell')
       .toArray()
-      .map((cell) => $(cell).text());
+      .map((cell) => $(cell).find('.euiDataGridRowCell__content').text());
 
     const rows = chunk(cells, columns.length);
 
@@ -76,12 +74,25 @@ export class DataGridService extends FtrService {
   /**
    * Returns an array of data grid headers names
    */
-  public async getHeaders() {
-    const header = await this.testSubjects.find('euiDataGridBody > dataGridHeader');
-    const $ = await header.parseDomContent();
+  public getHeaderText(parsedDomContent: CustomCheerioStatic) {
+    const $ = parsedDomContent;
     return $('.euiDataGridHeaderCell')
       .toArray()
-      .map((cell) => $(cell).text());
+      .map((cell) => {
+        const content = $(cell).find('.euiDataGridHeaderCell__content');
+        if (content.length) {
+          return content.text();
+        } else {
+          // Control columns will need hidden text manually stripped
+          $(cell).find('[hidden], [data-tabular-copy-marker]').remove();
+          return $(cell).text();
+        }
+      });
+  }
+
+  public async getHeaders() {
+    const header = await this.testSubjects.find('euiDataGridBody > dataGridHeader');
+    return this.getHeaderText(await header.parseDomContent());
   }
 
   public getHeaderElement(field: string) {

diff --git a/x-pack/plugins/osquery/cypress/e2e/all/packs_create_edit.cy.ts b/x-pack/plugins/osquery/cypress/e2e/all/packs_create_edit.cy.ts
@@ -577,7 +577,9 @@ describe('Packs - Create and Edit', { tags: ['@ess', '@serverless'] }, () => {
           cy.getBySel('docsLoading').should('exist');
           cy.getBySel('docsLoading').should('not.exist');
 
-          return cy.get('tbody .euiTableRow > td:nth-child(5)').invoke('text');
+          return cy
+            .get('tbody .euiTableRow > td:nth-child(5) > .euiTableCellContent')
+            .invoke('text');
         },
         (response) => response !== '-',
         {