diff --git a/package.json b/package.json index 296ae5f568322..089f28995b551 100644 --- 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 index 308bf18a9ffbd..e6616c2bccfa1 100644 --- 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 index 8f7e711bebcad..40a3dcc23dda8 100644 --- 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/packages/kbn-unified-data-table/src/components/custom_control_columns/additional_row_control/row_control_column.tsx b/packages/kbn-unified-data-table/src/components/custom_control_columns/additional_row_control/row_control_column.tsx index 3519bef843c4a..d1fec11906df4 100644 --- a/packages/kbn-unified-data-table/src/components/custom_control_columns/additional_row_control/row_control_column.tsx +++ b/packages/kbn-unified-data-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 ( - - - { - if (record) { - onClick?.({ record, rowIndex }); - } - }} - /> - - + + { + if (record) { + onClick?.({ record, rowIndex }); + } + }} + /> + ); }, [props.columnId, record, rowIndex] diff --git a/packages/kbn-unified-data-table/src/components/custom_control_columns/additional_row_control/row_menu_control_column.tsx b/packages/kbn-unified-data-table/src/components/custom_control_columns/additional_row_control/row_menu_control_column.tsx index 3d6cd19a53b1e..cc600df002502 100644 --- a/packages/kbn-unified-data-table/src/components/custom_control_columns/additional_row_control/row_menu_control_column.tsx +++ b/packages/kbn-unified-data-table/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 ( - - { - setIsMoreActionsPopoverOpen(!isMoreActionsPopoverOpen); - }} - /> - - + + { + setIsMoreActionsPopoverOpen(!isMoreActionsPopoverOpen); + }} + /> + } 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 index 5bf8773db9c0b..263cc1a801083 100644 --- 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 index c101d8c20f751..7395763e3de34 100644 --- 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 ( - { + 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 */ `} - > - - { - if ((event.nativeEvent as MouseEvent)?.shiftKey) { - toggleMultipleDocsSelection(record.id); - } else { - toggleDocSelection(record.id); - } - }} - /> - - + /> ); }; 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 index f5bb21bc0c95d..ab98696ed685d 100644 --- 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 ( - - - { - const nextHit = isCurrentRowExpanded ? undefined : record; - toolTipRef.current?.hideToolTip(); - setPressed(Boolean(nextHit)); - setExpanded?.(nextHit); - }} - color={isCurrentRowExpanded ? 'primary' : 'text'} - iconType={isCurrentRowExpanded ? 'minimize' : 'expand'} - isSelected={isCurrentRowExpanded} - /> - - + + { + const nextHit = isCurrentRowExpanded ? undefined : record; + toolTipRef.current?.hideToolTip(); + setPressed(Boolean(nextHit)); + setExpanded?.(nextHit); + }} + color={isCurrentRowExpanded ? 'primary' : 'text'} + iconType={isCurrentRowExpanded ? 'minimize' : 'expand'} + isSelected={isCurrentRowExpanded} + /> + ); }; 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 deleted file mode 100644 index 68bf3174975b8..0000000000000 --- a/packages/kbn-unified-data-table/src/components/data_table_row_control.tsx +++ /dev/null @@ -1,26 +0,0 @@ -/* - * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one - * or more contributor license agreements. Licensed under the "Elastic License - * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side - * Public License v 1"; you may not use this file except in compliance with, at - * your election, the "Elastic License 2.0", the "GNU Affero General Public - * License v3.0 only", or the "Server Side Public License, v 1". - */ - -import React from 'react'; -import classnames from 'classnames'; - -export enum Size { - normal = 'normal', -} - -export const DataTableRowControl: React.FC> = ({ - size, - children, -}) => { - const classes = classnames('unifiedDataTable__rowControl', { - // normalize the size of the control - [`unifiedDataTable__rowControl--size-${size}`]: size, - }); - return {children}; -}; diff --git a/src/dev/license_checker/config.ts b/src/dev/license_checker/config.ts index df5da2aff7183..15d08e194c4df 100644 --- 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 index 98bf29b187402..01660925db799 100644 --- 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 index 903e38427181b..07a723857088c 100644 --- 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 index d3047656ad16a..dbed4e56f88a0 100644 --- 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 !== '-', { diff --git a/x-pack/plugins/security_solution/public/management/cypress/tasks/response_actions.ts b/x-pack/plugins/security_solution/public/management/cypress/tasks/response_actions.ts index 715f8adc972f5..03d9ab6590167 100644 --- a/x-pack/plugins/security_solution/public/management/cypress/tasks/response_actions.ts +++ b/x-pack/plugins/security_solution/public/management/cypress/tasks/response_actions.ts @@ -114,13 +114,12 @@ export const getRunningProcesses = (command: string): Cypress.Chainable .getByTestSubj('processesOutput-processListTable', { timeout: 120000 }) .findByTestSubj('processesOutput-command') .contains(command) - .parents('td') - .siblings('td') - .eq(1) - .find('span') - .then((span) => { + .parents('tr') + .findByTestSubj('processesOutput-pid') + .find('.euiTableCellContent') + .then((cellContent) => { // get pid - return Number(span.text()); + return Number(cellContent.text()); }); }; diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/__snapshots__/custom_timeline_data_grid_body.test.tsx.snap b/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/__snapshots__/custom_timeline_data_grid_body.test.tsx.snap index eaac9cb5dada6..d54175194b748 100644 --- a/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/__snapshots__/custom_timeline_data_grid_body.test.tsx.snap +++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/__snapshots__/custom_timeline_data_grid_body.test.tsx.snap @@ -40,11 +40,6 @@ exports[`CustomTimelineDataGridBody should render exactly as snapshots 1`] = ` min-height: 34px; } -.c1 .euiDataGridRowCell .unifiedDataTable__rowControl, -.c1 .euiDataGridRowCell__content .unifiedDataTable__rowControl { - margin-top: -4px; -} -
{ - const cellText = $(cell).text(); + const cellText = $(cell).find('.euiDataGridRowCell__content').text(); const columnData = $(cell).attr('data-gridcell-column-index'); const rowData = $(cell).attr('data-gridcell-row-index'); return { text: cellText, column: Number(columnData) + 1, row: Number(rowData) }; diff --git a/x-pack/test/functional/services/ml/data_frame_analytics_table.ts b/x-pack/test/functional/services/ml/data_frame_analytics_table.ts index 3279013f98069..77041a5bf12d3 100644 --- a/x-pack/test/functional/services/ml/data_frame_analytics_table.ts +++ b/x-pack/test/functional/services/ml/data_frame_analytics_table.ts @@ -436,7 +436,7 @@ export function MachineLearningDataFrameAnalyticsTableProvider({ const vars: Record = {}; for (const row of $('tr').toArray()) { - const [name, value] = $(row).find('td').toArray(); + const [name, value] = $(row).find('td').find('.euiTableCellContent').toArray(); vars[$(name).text().trim()] = $(value).text().trim(); } diff --git a/x-pack/test/security_solution_cypress/cypress/e2e/entity_analytics/hosts/hosts_risk_column.cy.ts b/x-pack/test/security_solution_cypress/cypress/e2e/entity_analytics/hosts/hosts_risk_column.cy.ts index cf52585f9bbea..179dbb0277a11 100644 --- a/x-pack/test/security_solution_cypress/cypress/e2e/entity_analytics/hosts/hosts_risk_column.cy.ts +++ b/x-pack/test/security_solution_cypress/cypress/e2e/entity_analytics/hosts/hosts_risk_column.cy.ts @@ -32,7 +32,7 @@ describe('All hosts table', { tags: ['@ess'] }, () => { kqlSearch('host.name: "siem-kibana" {enter}'); cy.get('[data-test-subj="tableHeaderCell_node.risk_4"]').should('exist'); - cy.get(`${TABLE_CELL} .euiTableCellContent`).eq(4).should('have.text', 'Low'); + cy.get(TABLE_CELL).eq(4).should('have.text', 'Low'); }); }); @@ -55,7 +55,7 @@ describe('All hosts table', { tags: ['@ess'] }, () => { kqlSearch('host.name: "siem-kibana" {enter}'); cy.get('[data-test-subj="tableHeaderCell_node.risk_4"]').should('exist'); - cy.get(`${TABLE_CELL} .euiTableCellContent`).eq(4).should('have.text', 'Critical'); + cy.get(TABLE_CELL).eq(4).should('have.text', 'Critical'); }); }); }); diff --git a/x-pack/test/security_solution_cypress/cypress/screens/alerts_details.ts b/x-pack/test/security_solution_cypress/cypress/screens/alerts_details.ts index bbae387497af7..aeca3f232588c 100644 --- a/x-pack/test/security_solution_cypress/cypress/screens/alerts_details.ts +++ b/x-pack/test/security_solution_cypress/cypress/screens/alerts_details.ts @@ -30,7 +30,7 @@ export const OVERVIEW_STATUS = '[data-test-subj="eventDetails"] [data-test-subj= export const EVENT_DETAILS_ALERT_STATUS_POPOVER = '[data-test-subj="event-details-alertStatusPopover"]'; -export const TABLE_CELL = '.euiTableRowCell'; +export const TABLE_CELL = '.euiTableRowCell .euiTableCellContent'; export const CELL_EXPAND_VALUE = '[data-test-subj="euiDataGridCellExpandButton"]'; diff --git a/x-pack/test_serverless/functional/test_suites/common/discover/esql/_esql_view.ts b/x-pack/test_serverless/functional/test_suites/common/discover/esql/_esql_view.ts index 7881f5545388f..1bedd0acd0cc4 100644 --- a/x-pack/test_serverless/functional/test_suites/common/discover/esql/_esql_view.ts +++ b/x-pack/test_serverless/functional/test_suites/common/discover/esql/_esql_view.ts @@ -202,7 +202,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/yarn.lock b/yarn.lock index b280812c4cc40..352ebb9287fbb 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1741,10 +1741,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@95.11.0": - version "95.11.0" - resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-95.11.0.tgz#40e8124ac54c625ba7160cb84a378507abdeaf40" - integrity sha512-O688EbhrgSrV9j54mnK4xLyhv+imkBv5ti7isqLxJtd0L7Fe2A1d6EaA11Qv5plOwwC+cGsrkrDnlSqi1MtNoQ== +"@elastic/eui@95.12.0-backport.0": + version "95.12.0-backport.0" + resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-95.12.0-backport.0.tgz#de862ded9f23053b24e1f1939de1ff8f8109be60" + integrity sha512-hqhqWdAGw5tQwWTP/hn2VoM8YQE2k9IdMmGh0RdkG+JcD1GZySvSDWdTQgr9iA4/XaulJp9R3OenwDjkLLmjPw== dependencies: "@hello-pangea/dnd" "^16.6.0" "@types/lodash" "^4.14.202"