From 9bbb296078ea385561d46819001644cdb4fdc714 Mon Sep 17 00:00:00 2001 From: Cee Chen <549407+cee-chen@users.noreply.github.com> Date: Mon, 23 Sep 2024 15:45:19 -0700 Subject: [PATCH] Upgrade EUI to v95.11.0 (#192756) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit `v95.10.1`⏩`v95.11.0` > [!note] > The bulk of this release is **EuiDataGrid**. The component has been fully converted to Emotion, and several UX changes have been made to data cell actions. We recommend QA testing any data grid(s) that have custom styles applied to them. _[Questions? Please see our Kibana upgrade FAQ.](https://github.com/elastic/eui/blob/main/wiki/eui-team-processes/upgrading-kibana.md#faq-for-kibana-teams)_ --- ## [`v95.11.0`](https://github.com/elastic/eui/releases/v95.11.0) - Updated `EuiText`, `EuiTextColor`, and `EuiTextAlign` with a new `component` prop that allows changing the default rendered `
` wrapper to a `` or `

` tag. ([#7993](https://github.com/elastic/eui/pull/7993)) - Updated `EuiDataGrid`'s cell actions to always consistently be left-aligned, regardless of text content alignment ([#8011](https://github.com/elastic/eui/pull/8011)) - Increased `EuiDataGrid`'s cell actions hover zone to reduce UX friction when mousing over from the grid cell to its actions ([#8011](https://github.com/elastic/eui/pull/8011)) **Bug fixes** - Fixed `EuiPopover` to correctly inherit from `EuiProvider`'s `componentDefaults.EuiPortal.insert` ([#8003](https://github.com/elastic/eui/pull/8003)) - Fixed push `EuiFlyoutResizable`s to not potentially block scrollbars on outside content ([#8010](https://github.com/elastic/eui/pull/8010)) - Fixed an `EuiDataGrid` bug where the `setCellProps` callback passed by `renderCellValue` was not correctly applying custom `data-test-subj`s ([#8011](https://github.com/elastic/eui/pull/8011)) **Accessibility** - Updated the `EuiBasicTable` actions button's `aria-label` by adding a reference to the current row ([#7994](https://github.com/elastic/eui/pull/7994)) **CSS-in-JS conversions** - Converted `EuiDataGrid`'s toolbar controls to Emotion ([#7997](https://github.com/elastic/eui/pull/7997)) - Removed `$euiDataGridPopoverMaxHeight` - Converted `EuiDataGrid` to Emotion ([#7998](https://github.com/elastic/eui/pull/7998)) - Removed `$euiZDataGrid` - Removed `$euiZHeaderBelowDataGrid` - Converted `EuiDataGrid`'s `gridStyle`s to Emotion; Removed the following Sass variables and mixins: ([#8006](https://github.com/elastic/eui/pull/8006)) - `$euiDataGridCellPaddingS` - `$euiDataGridCellPaddingM` - `$euiDataGridCellPaddingL` - `$euiDataGridVerticalBorder` - `$euiDataGridPrefix` - `$euiDataGridStyles` - `@euiDataGridSelector` - `@euiDataGridStyles` - Converted `EuiDataGrid`'s cell popover, actions, and focus outline to Emotion; Removed the following Sass variables and mixins: ([#8011](https://github.com/elastic/eui/pull/8011)) - `$euiZDataGridCellPopover` - `@euiDataGridCellFocus` - Converted `EuiDataGrid`'s row, header, and footer cells to Emotion; Removed the following Sass variables and mixins: ([#8013](https://github.com/elastic/eui/pull/8013)) - `$euiDataGridColumnResizerWidth` - `@euiDataGridRowCell` - `@euiDataGridHeaderCell` - `@euiDataGridFooterCell` --- package.json | 2 +- .../__snapshots__/i18n_service.test.tsx.snap | 4 +- .../src/i18n_eui_mapping.tsx | 25 ++++++++--- .../src/components/data_table.scss | 33 ++++---------- src/dev/license_checker/config.ts | 2 +- .../components/doc_viewer_table/table.scss | 4 +- .../apps/discover/esql/_esql_view.ts | 2 +- test/functional/services/data_grid.ts | 33 +++++++++----- .../components/data_table/index.test.tsx | 4 +- .../datatable/components/table_basic.test.tsx | 22 +++++----- .../slo/public/pages/slos/slos.test.tsx | 10 ++--- .../query_tab_unified_components.test.tsx | 32 +++----------- .../unified_components/index.test.tsx | 44 ++++--------------- .../translations/translations/fr-FR.json | 3 +- .../translations/translations/ja-JP.json | 3 +- .../translations/translations/zh-CN.json | 3 +- .../alerts_table/alerts_table_state.test.tsx | 4 +- .../test/functional/apps/lens/group2/table.ts | 4 +- .../apps/lens/group2/table_dashboard.ts | 2 +- .../test/functional/page_objects/lens_page.ts | 15 ++----- .../services/ml/common_data_grid.ts | 16 +++---- .../common/discover/esql/_esql_view.ts | 2 +- yarn.lock | 8 ++-- 23 files changed, 113 insertions(+), 164 deletions(-) diff --git a/package.json b/package.json index ea24d9016a81c..1aec2e615a1be 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.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 index 2285da518ce29..23a5239116c98 100644 --- 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 @@ -35,8 +35,9 @@ exports[`#start() returns \`Context\` component 1`] = ` "euiCodeBlockCopy.copy": "Copy", "euiCodeBlockFullScreen.fullscreenCollapse": "Collapse", "euiCodeBlockFullScreen.fullscreenExpand": "Expand", - "euiCollapsedItemActions.allActions": "All actions", + "euiCollapsedItemActions.allActions": [Function], "euiCollapsedItemActions.allActionsDisabled": "Individual item actions are disabled when rows are being selected.", + "euiCollapsedItemActions.allActionsTooltip": "All actions", "euiCollapsedNavButton.ariaLabelButtonIcon": [Function], "euiCollapsibleNavBeta.ariaLabel": "Site menu", "euiCollapsibleNavButton.ariaLabelClose": "Close navigation", @@ -58,6 +59,7 @@ exports[`#start() returns \`Context\` component 1`] = ` "euiColumnActions.moveLeft": "Move left", "euiColumnActions.moveRight": "Move right", "euiColumnActions.sort": [Function], + "euiColumnActions.unsort": [Function], "euiColumnSelector.button": "Columns", "euiColumnSelector.dragHandleAriaLabel": "Drag handle", "euiColumnSelector.hideAll": "Hide all", 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 index c81aca1e5b4e6..3fa687fddd9da 100644 --- 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 index 44801b4052dfe..5bf8773db9c0b 100644 --- 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 index 7f6a9e53f6678..df5da2aff7183 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.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'], '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/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 index 330cf364ae55e..25a41710e4818 100644 --- 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 @@ -68,11 +68,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 index 01660925db799..98bf29b187402 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 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 index a280c6556bbd7..c5c8db4a9886b 100644 --- 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 { 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 { - 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 { - 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,7 +631,9 @@ 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}`); }); @@ -636,7 +641,10 @@ export class DataGridService extends FtrService { public async clickFieldActionInFlyout(fieldName: string, actionName: string): Promise { 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 { @@ -658,11 +666,14 @@ export class DataGridService extends FtrService { } public async expandFieldNameCellInFlyout(fieldName: string): Promise { + 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 index f8183c51e4678..7a0a3e8f76caa 100644 --- 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 index 7ca9137f938fb..21361f874e83e 100644 --- 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'], ]); }); }); diff --git a/x-pack/plugins/observability_solution/slo/public/pages/slos/slos.test.tsx b/x-pack/plugins/observability_solution/slo/public/pages/slos/slos.test.tsx index f8db25d20c9f2..905e6088ef74b 100644 --- a/x-pack/plugins/observability_solution/slo/public/pages/slos/slos.test.tsx +++ b/x-pack/plugins/observability_solution/slo/public/pages/slos/slos.test.tsx @@ -285,7 +285,7 @@ describe('SLOs Page', () => { expect(await screen.findByTestId('compactView')).toBeTruthy(); fireEvent.click(screen.getByTestId('compactView')); - (await screen.findAllByLabelText('All actions')).at(0)?.click(); + (await screen.findByLabelText('All actions, row 1')).click(); await waitForEuiPopoverOpen(); @@ -311,7 +311,7 @@ describe('SLOs Page', () => { }); expect(await screen.findByTestId('compactView')).toBeTruthy(); fireEvent.click(screen.getByTestId('compactView')); - screen.getAllByLabelText('All actions').at(0)?.click(); + screen.getByLabelText('All actions, row 1').click(); await waitForEuiPopoverOpen(); @@ -337,7 +337,7 @@ describe('SLOs Page', () => { }); expect(await screen.findByTestId('compactView')).toBeTruthy(); fireEvent.click(screen.getByTestId('compactView')); - screen.getAllByLabelText('All actions').at(0)?.click(); + screen.getByLabelText('All actions, row 1').click(); await waitForEuiPopoverOpen(); @@ -364,7 +364,7 @@ describe('SLOs Page', () => { expect(await screen.findByTestId('compactView')).toBeTruthy(); fireEvent.click(screen.getByTestId('compactView')); - (await screen.findAllByLabelText('All actions')).at(0)?.click(); + screen.getByLabelText('All actions, row 1').click(); await waitForEuiPopoverOpen(); @@ -396,7 +396,7 @@ describe('SLOs Page', () => { expect(await screen.findByTestId('compactView')).toBeTruthy(); fireEvent.click(screen.getByTestId('compactView')); - screen.getAllByLabelText('All actions').at(0)?.click(); + screen.getByLabelText('All actions, row 1').click(); await waitForEuiPopoverOpen(); diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/tabs/query/query_tab_unified_components.test.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/tabs/query/query_tab_unified_components.test.tsx index bd8a002666aaf..f70f4e1f261f2 100644 --- a/x-pack/plugins/security_solution/public/timelines/components/timeline/tabs/query/query_tab_unified_components.test.tsx +++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/tabs/query/query_tab_unified_components.test.tsx @@ -383,11 +383,7 @@ describe('query tab with unified timeline', () => { expect(container.querySelector('[data-gridcell-column-id="message"]')).toBeInTheDocument(); - fireEvent.click( - container.querySelector( - '[data-gridcell-column-id="message"] .euiDataGridHeaderCell__icon' - ) as HTMLElement - ); + fireEvent.click(screen.getByTestId('dataGridHeaderCellActionButton-message')); await waitFor(() => { expect(screen.getByTitle('Move left')).toBeEnabled(); @@ -416,11 +412,7 @@ describe('query tab with unified timeline', () => { expect(container.querySelector('[data-gridcell-column-id="message"]')).toBeInTheDocument(); - fireEvent.click( - container.querySelector( - '[data-gridcell-column-id="message"] .euiDataGridHeaderCell__icon' - ) as HTMLElement - ); + fireEvent.click(screen.getByTestId('dataGridHeaderCellActionButton-message')); await waitFor(() => { expect(screen.getByTitle('Remove column')).toBeVisible(); @@ -449,16 +441,12 @@ describe('query tab with unified timeline', () => { container.querySelector('[data-gridcell-column-id="@timestamp"]') ).toBeInTheDocument(); - fireEvent.click( - container.querySelector( - '[data-gridcell-column-id="@timestamp"] .euiDataGridHeaderCell__icon' - ) as HTMLElement - ); + fireEvent.click(screen.getByTestId('dataGridHeaderCellActionButton-@timestamp')); await waitFor(() => { expect(screen.getByTitle('Sort Old-New')).toBeVisible(); }); - expect(screen.getByTitle('Sort New-Old')).toBeVisible(); + expect(screen.getByTitle('Unsort New-Old')).toBeVisible(); useTimelineEventsMock.mockClear(); @@ -495,11 +483,7 @@ describe('query tab with unified timeline', () => { container.querySelector('[data-gridcell-column-id="host.name"]') ).toBeInTheDocument(); - fireEvent.click( - container.querySelector( - '[data-gridcell-column-id="host.name"] .euiDataGridHeaderCell__icon' - ) as HTMLElement - ); + fireEvent.click(screen.getByTestId('dataGridHeaderCellActionButton-host.name')); await waitFor(() => { expect(screen.getByTestId('dataGridHeaderCellActionGroup-host.name')).toBeVisible(); @@ -554,11 +538,7 @@ describe('query tab with unified timeline', () => { container.querySelector(`[data-gridcell-column-id="${field.name}"]`) ).toBeInTheDocument(); - fireEvent.click( - container.querySelector( - `[data-gridcell-column-id="${field.name}"] .euiDataGridHeaderCell__icon` - ) as HTMLElement - ); + fireEvent.click(screen.getByTestId(`dataGridHeaderCellActionButton-${field.name}`)); await waitFor(() => { expect(screen.getByTestId(`dataGridHeaderCellActionGroup-${field.name}`)).toBeVisible(); diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/index.test.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/index.test.tsx index b1f05281de803..c50c2877e2fe1 100644 --- a/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/index.test.tsx +++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/index.test.tsx @@ -239,11 +239,7 @@ describe('unified timeline', () => { container.querySelector(`[data-gridcell-column-id="${field.name}"]`) ).toBeInTheDocument(); - fireEvent.click( - container.querySelector( - `[data-gridcell-column-id="${field.name}"] .euiDataGridHeaderCell__icon` - ) as HTMLElement - ); + fireEvent.click(screen.getByTestId(`dataGridHeaderCellActionButton-${field.name}`)); await waitFor(() => { expect(screen.getByTitle('Move left')).toBeEnabled(); @@ -278,11 +274,7 @@ describe('unified timeline', () => { container.querySelector(`[data-gridcell-column-id="${field.name}"]`) ).toBeInTheDocument(); - fireEvent.click( - container.querySelector( - `[data-gridcell-column-id="${field.name}"] .euiDataGridHeaderCell__icon` - ) as HTMLElement - ); + fireEvent.click(screen.getByTestId(`dataGridHeaderCellActionButton-${field.name}`)); await waitFor(() => { expect(screen.getByTitle('Move right')).toBeEnabled(); @@ -314,11 +306,7 @@ describe('unified timeline', () => { container.querySelector(`[data-gridcell-column-id="${field.name}"]`) ).toBeInTheDocument(); - fireEvent.click( - container.querySelector( - `[data-gridcell-column-id="${field.name}"] .euiDataGridHeaderCell__icon` - ) as HTMLElement - ); + fireEvent.click(screen.getByTestId(`dataGridHeaderCellActionButton-${field.name}`)); // column is currently present in the state const currentColumns = getTimelineFromStore(customStore).columns; @@ -363,16 +351,12 @@ describe('unified timeline', () => { container.querySelector('[data-gridcell-column-id="@timestamp"]') ).toBeInTheDocument(); - fireEvent.click( - container.querySelector( - '[data-gridcell-column-id="@timestamp"] .euiDataGridHeaderCell__icon' - ) as HTMLElement - ); + fireEvent.click(screen.getByTestId('dataGridHeaderCellActionButton-@timestamp')); await waitFor(() => { expect(screen.getByTitle('Sort Old-New')).toBeVisible(); }); - expect(screen.getByTitle('Sort New-Old')).toBeVisible(); + expect(screen.getByTitle('Unsort New-Old')).toBeVisible(); useTimelineEventsMock.mockClear(); @@ -404,11 +388,7 @@ describe('unified timeline', () => { container.querySelector('[data-gridcell-column-id="host.name"]') ).toBeInTheDocument(); - fireEvent.click( - container.querySelector( - '[data-gridcell-column-id="host.name"] .euiDataGridHeaderCell__icon' - ) as HTMLElement - ); + fireEvent.click(screen.getByTestId('dataGridHeaderCellActionButton-host.name')); await waitFor(() => { expect(screen.getByTestId('dataGridHeaderCellActionGroup-host.name')).toBeVisible(); @@ -457,11 +437,7 @@ describe('unified timeline', () => { container.querySelector(`[data-gridcell-column-id="${field.name}"]`) ).toBeInTheDocument(); - fireEvent.click( - container.querySelector( - `[data-gridcell-column-id="${field.name}"] .euiDataGridHeaderCell__icon` - ) as HTMLElement - ); + fireEvent.click(screen.getByTestId(`dataGridHeaderCellActionButton-${field.name}`)); await waitFor(() => { expect(screen.getByTestId(`dataGridHeaderCellActionGroup-${field.name}`)).toBeVisible(); @@ -512,11 +488,7 @@ describe('unified timeline', () => { container.querySelector(`[data-gridcell-column-id="${field.name}"]`) ).toBeInTheDocument(); - fireEvent.click( - container.querySelector( - `[data-gridcell-column-id="${field.name}"] .euiDataGridHeaderCell__icon` - ) as HTMLElement - ); + fireEvent.click(screen.getByTestId(`dataGridHeaderCellActionButton-${field.name}`)); await waitFor(() => { expect(screen.getByTitle('Edit data view field')).toBeEnabled(); diff --git a/x-pack/plugins/translations/translations/fr-FR.json b/x-pack/plugins/translations/translations/fr-FR.json index d2891900a2503..a14f2ce6d398d 100644 --- a/x-pack/plugins/translations/translations/fr-FR.json +++ b/x-pack/plugins/translations/translations/fr-FR.json @@ -626,7 +626,6 @@ "core.euiCodeBlockCopy.copy": "Copier", "core.euiCodeBlockFullScreen.fullscreenCollapse": "Réduire", "core.euiCodeBlockFullScreen.fullscreenExpand": "Développer", - "core.euiCollapsedItemActions.allActions": "Toutes les actions", "core.euiCollapsedItemActions.allActionsDisabled": "Les actions individuelles sont désactivées lorsque plusieurs lignes sont sélectionnées.", "core.euiCollapsedNavButton.ariaLabelButtonIcon": "{title}, menu de navigation rapide", "core.euiCollapsibleNavBeta.ariaLabel": "Menu du site", @@ -681,7 +680,7 @@ "core.euiDataGrid.screenReaderNotice": "Cette cellule contient du contenu interactif.", "core.euiDataGridCell.expansionEnterPrompt": "Appuyez sur Entrée pour développer cette cellule.", "core.euiDataGridCell.focusTrapEnterPrompt": "Appuyez sur Entrée pour interagir avec le contenu de cette cellule.", - "core.euiDataGridCell.position": "{columnId}, colonne {col}, ligne {row}", + "core.euiDataGridCell.position": "{columnName}, colonne {columnIndex}, ligne {rowIndex}", "core.euiDataGridCellActions.expandButtonTitle": "Cliquez ou appuyez sur Entrée pour interagir avec le contenu de la cellule.", "core.euiDataGridHeaderCell.actionsButtonAriaLabel": "{title}. Cliquez pour afficher les actions d'en-tête de colonne", "core.euiDataGridHeaderCell.actionsPopoverScreenReaderText": "Pour naviguer dans la liste des actions de la colonne, appuyez sur la touche Tab ou sur les flèches vers le haut et vers le bas.", diff --git a/x-pack/plugins/translations/translations/ja-JP.json b/x-pack/plugins/translations/translations/ja-JP.json index 368ffa47cec39..5184bf3718ef6 100644 --- a/x-pack/plugins/translations/translations/ja-JP.json +++ b/x-pack/plugins/translations/translations/ja-JP.json @@ -628,7 +628,6 @@ "core.euiCodeBlockCopy.copy": "コピー", "core.euiCodeBlockFullScreen.fullscreenCollapse": "縮小", "core.euiCodeBlockFullScreen.fullscreenExpand": "拡張", - "core.euiCollapsedItemActions.allActions": "すべてのアクション", "core.euiCollapsedItemActions.allActionsDisabled": "行が選択されているときには、個別の項目アクションは無効です。", "core.euiCollapsedNavButton.ariaLabelButtonIcon": "{title}、クイックナビゲーションメニュー", "core.euiCollapsibleNavBeta.ariaLabel": "サイトメニュー", @@ -683,7 +682,7 @@ "core.euiDataGrid.screenReaderNotice": "セルにはインタラクティブコンテンツが含まれます。", "core.euiDataGridCell.expansionEnterPrompt": "このセルを展開するには、Enterキーを押してください。", "core.euiDataGridCell.focusTrapEnterPrompt": "このセルの内容を操作するには、Enterキーを押してください。", - "core.euiDataGridCell.position": "{columnId}, 列{col}, 行{row}", + "core.euiDataGridCell.position": "{columnName}, 列{columnIndex}, 行{rowIndex}", "core.euiDataGridCellActions.expandButtonTitle": "クリックするか enter を押すと、セルのコンテンツとインタラクトできます。", "core.euiDataGridHeaderCell.actionsButtonAriaLabel": "{title}。クリックすると、列ヘッダーアクションが表示されます", "core.euiDataGridHeaderCell.actionsPopoverScreenReaderText": "列アクションのリストを移動するには、Tabまたは上下矢印キーを押します。", diff --git a/x-pack/plugins/translations/translations/zh-CN.json b/x-pack/plugins/translations/translations/zh-CN.json index 8ddfd9427e738..dcc0af6a008c3 100644 --- a/x-pack/plugins/translations/translations/zh-CN.json +++ b/x-pack/plugins/translations/translations/zh-CN.json @@ -626,7 +626,6 @@ "core.euiCodeBlockCopy.copy": "复制", "core.euiCodeBlockFullScreen.fullscreenCollapse": "折叠", "core.euiCodeBlockFullScreen.fullscreenExpand": "展开", - "core.euiCollapsedItemActions.allActions": "所有操作", "core.euiCollapsedItemActions.allActionsDisabled": "正选择行时将禁用单个项目操作。", "core.euiCollapsedNavButton.ariaLabelButtonIcon": "{title}，快速导航菜单", "core.euiCollapsibleNavBeta.ariaLabel": "站点菜单", @@ -681,7 +680,7 @@ "core.euiDataGrid.screenReaderNotice": "单元格包含交互内容。", "core.euiDataGridCell.expansionEnterPrompt": "按 Enter 键展开此单元格。", "core.euiDataGridCell.focusTrapEnterPrompt": "按 Enter 键与此单元格的内容进行交互。", - "core.euiDataGridCell.position": "{columnId}，列 {col}，行 {row}", + "core.euiDataGridCell.position": "{columnName}，列 {columnIndex}，行 {rowIndex}", "core.euiDataGridCellActions.expandButtonTitle": "单击或按 Enter 键以便与单元格内容进行交互", "core.euiDataGridHeaderCell.actionsButtonAriaLabel": "{title}。单击以查看列标题操作", "core.euiDataGridHeaderCell.actionsPopoverScreenReaderText": "要在列操作列表中导航，请按 Tab 键或向上和向下箭头键。", diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_table/alerts_table_state.test.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_table/alerts_table_state.test.tsx index 2834d9f7665f4..13b9433ce4b9e 100644 --- a/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_table/alerts_table_state.test.tsx +++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_table/alerts_table_state.test.tsx @@ -907,8 +907,8 @@ describe('AlertsTableState', () => { await waitFor(() => { expect(queryByTestId(`dataGridHeaderCell-${AlertsField.uuid}`)).not.toBe(null); expect( - getByTestId('dataGridHeader') - .querySelectorAll('.euiDataGridHeaderCell__content')[2] + queryByTestId(`dataGridHeaderCell-${AlertsField.uuid}`)! + .querySelector('.euiDataGridHeaderCell__content')! .getAttribute('title') ).toBe(AlertsField.uuid); }); diff --git a/x-pack/test/functional/apps/lens/group2/table.ts b/x-pack/test/functional/apps/lens/group2/table.ts index f98bb6328c3f9..7de5645b16b03 100644 --- a/x-pack/test/functional/apps/lens/group2/table.ts +++ b/x-pack/test/functional/apps/lens/group2/table.ts @@ -36,7 +36,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { expect(await lens.getDatatableCellText(0, 0)).to.eql('169.228.188.120'); // Remove the sorting await retry.try(async () => { - await lens.changeTableSortingBy(0, 'none'); + await lens.changeTableSortingBy(0, 'descending'); await lens.waitForVisualization(); expect(await lens.isDatatableHeaderSorted(0)).to.eql(false); }); @@ -73,7 +73,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { expect(await lens.getDatatableCellText(0, 0)).to.eql('169.228.188.120'); await retry.try(async () => { - await lens.changeTableSortingBy(4, 'none'); + await lens.changeTableSortingBy(4, 'descending'); await lens.waitForVisualization(); expect(await lens.isDatatableHeaderSorted(0)).to.eql(false); }); diff --git a/x-pack/test/functional/apps/lens/group2/table_dashboard.ts b/x-pack/test/functional/apps/lens/group2/table_dashboard.ts index ddbe8d4a1ff40..a877211030972 100644 --- a/x-pack/test/functional/apps/lens/group2/table_dashboard.ts +++ b/x-pack/test/functional/apps/lens/group2/table_dashboard.ts @@ -28,7 +28,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { expect(await lens.getDatatableCellText(0, 0)).to.eql('169.228.188.120'); // Remove the sorting await retry.try(async () => { - await lens.changeTableSortingBy(0, 'none'); + await lens.changeTableSortingBy(0, 'ascending'); await lens.waitForVisualization(); expect(await lens.isDatatableHeaderSorted(0)).to.eql(false); }); diff --git a/x-pack/test/functional/page_objects/lens_page.ts b/x-pack/test/functional/page_objects/lens_page.ts index 4b2ece9a7ca92..310f52f7e651b 100644 --- a/x-pack/test/functional/page_objects/lens_page.ts +++ b/x-pack/test/functional/page_objects/lens_page.ts @@ -1255,21 +1255,14 @@ export function LensPageProvider({ getService, getPageObjects }: FtrProviderCont ); }, - async changeTableSortingBy(colIndex = 0, direction: 'none' | 'ascending' | 'descending') { + async changeTableSortingBy(colIndex = 0, direction: 'ascending' | 'descending') { const el = await this.getDatatableHeader(colIndex); await el.moveMouseTo({ xOffset: 0, yOffset: -16 }); // Prevent the first data row's cell actions from overlapping/intercepting the header click const popoverToggle = await el.findByClassName('euiDataGridHeaderCell__button'); await popoverToggle.click(); - let buttonEl; - if (direction !== 'none') { - buttonEl = await find.byCssSelector( - `[data-test-subj^="dataGridHeaderCellActionGroup"] [title="Sort ${direction}"]` - ); - } else { - buttonEl = await find.byCssSelector( - `[data-test-subj^="dataGridHeaderCellActionGroup"] li[class*="selected"] [title^="Sort"]` - ); - } + const buttonEl = await find.byCssSelector( + `[data-test-subj^="dataGridHeaderCellActionGroup"] [title="Sort ${direction}"]` + ); return buttonEl.click(); }, diff --git a/x-pack/test/functional/services/ml/common_data_grid.ts b/x-pack/test/functional/services/ml/common_data_grid.ts index 9950d6b8f7205..a920b427e9adc 100644 --- a/x-pack/test/functional/services/ml/common_data_grid.ts +++ b/x-pack/test/functional/services/ml/common_data_grid.ts @@ -37,16 +37,14 @@ export function MachineLearningCommonDataGridProvider({ getService }: FtrProvide // Get the content of each cell and divide them up into rows. // Virtualized cells outside the view area are not present in the DOM until they // are scroilled into view, so we're limiting the number of parsed columns. - // To determine row and column of a cell, we're utilizing the screen reader - // help text, which enumerates the rows and columns 1-based. + // To determine row and column of a cell, we're utilizing EUI's data attributes const cells = $.findTestSubjects('dataGridRowCell') .toArray() .map((cell) => { const cellText = $(cell).text(); - const pattern = /^(.*)-(?:.*), column (\d+), row (\d+)$/; - const matches = cellText.match(pattern); - expect(matches).to.not.eql(null, `Cell text should match pattern '${pattern}'`); - return { text: matches![1], column: Number(matches![2]), row: Number(matches![3]) }; + 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) }; }) .filter((cell) => maxColumnsToParse !== undefined ? cell?.column <= maxColumnsToParse : false @@ -150,9 +148,9 @@ export function MachineLearningCommonDataGridProvider({ getService }: FtrProvide async assertColumnSelectorsSwitchState(expectedState: boolean) { await retry.tryForTime(5 * 1000, async () => { - const visibilityToggles = await ( - await find.byClassName('euiDataGrid__controlScroll') - ).findAllByCssSelector('[role="switch"]'); + const visibilityToggles = await find.allByCssSelector( + '.euiDataGridColumnSelector__item [role="switch"]' + ); await asyncForEachWithLimit(visibilityToggles, 1, async (toggle) => { const checked = (await toggle.getAttribute('aria-checked')) === 'true'; 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 1bedd0acd0cc4..7881f5545388f 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 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/yarn.lock b/yarn.lock index 11bae58bb6cfc..666bf8d3e984d 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.10.1": - version "95.10.1" - resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-95.10.1.tgz#f3fb356ad49ba45e42981e39748693ba392567fe" - integrity sha512-1kqyx/NfiQE/bKMf1E3uJEpYZnQnPBrI5zO0l2FB+fs7Naf7wT7zq1VFRzNLn/r1x6mnou8wJ+VlouHCI+prLw== +"@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== dependencies: "@hello-pangea/dnd" "^16.6.0" "@types/lodash" "^4.14.202"