diff --git a/package.json b/package.json index 3078275e1b9f8..d8a83da6a8755 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.9.0", + "@elastic/eui": "95.10.1", "@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 4f04a571c845b..2285da518ce29 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 @@ -90,10 +90,12 @@ exports[`#start() returns \`Context\` component 1`] = ` "euiDataGrid.screenReaderNotice": "Cell contains interactive content.", "euiDataGridCell.expansionEnterPrompt": "Press the Enter key to expand this cell.", "euiDataGridCell.focusTrapEnterPrompt": "Press the Enter key to interact with this cell's contents.", + "euiDataGridCell.focusTrapExitPrompt": "Exited cell content.", "euiDataGridCell.position": [Function], "euiDataGridCellActions.expandButtonTitle": "Click or hit enter to interact with cell content", + "euiDataGridHeaderCell.actionsButtonAriaLabel": [Function], + "euiDataGridHeaderCell.actionsEnterKeyInstructions": "Press the Enter key to view this column's actions", "euiDataGridHeaderCell.actionsPopoverScreenReaderText": "To navigate through the list of column actions, press the Tab or Up and Down arrow keys.", - "euiDataGridHeaderCell.headerActions": "Click to view column header actions", "euiDataGridHeaderCell.sortedByAscendingFirst": [Function], "euiDataGridHeaderCell.sortedByAscendingMultiple": [Function], "euiDataGridHeaderCell.sortedByAscendingSingle": "Sorted ascending", 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 52b0a5c916aec..c81aca1e5b4e6 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 @@ -542,16 +542,25 @@ export const getEuiContextMapping = (): EuiTokensObject => { 'core.euiDataGridCell.focusTrapEnterPrompt', { defaultMessage: "Press the Enter key to interact with this cell's contents." } ), + 'euiDataGridCell.focusTrapExitPrompt': i18n.translate( + 'core.euiDataGridCell.focusTrapExitPrompt', + { defaultMessage: 'Exited cell content.' } + ), 'euiDataGridCellActions.expandButtonTitle': i18n.translate( 'core.euiDataGridCellActions.expandButtonTitle', { defaultMessage: 'Click or hit enter to interact with cell content', } ), - 'euiDataGridHeaderCell.headerActions': i18n.translate( - 'core.euiDataGridHeaderCell.headerActions', + 'euiDataGridHeaderCell.actionsButtonAriaLabel': ({ title }: EuiValues) => + i18n.translate('core.euiDataGridHeaderCell.actionsButtonAriaLabel', { + defaultMessage: '{title}. Click to view column header actions.', + values: { title }, + }), + 'euiDataGridHeaderCell.actionsEnterKeyInstructions': i18n.translate( + 'core.euiDataGridHeaderCell.actionsEnterKeyInstructions', { - defaultMessage: 'Click to view column header actions', + defaultMessage: "Press the Enter key to view this column's actions", } ), 'euiDataGridHeaderCell.sortedByAscendingSingle': i18n.translate( diff --git a/packages/kbn-unified-data-table/src/components/data_table.test.tsx b/packages/kbn-unified-data-table/src/components/data_table.test.tsx index ec8ffc3885345..c797701facdcc 100644 --- a/packages/kbn-unified-data-table/src/components/data_table.test.tsx +++ b/packages/kbn-unified-data-table/src/components/data_table.test.tsx @@ -15,6 +15,7 @@ import { EuiDataGridCellValueElementProps, EuiDataGridCustomBodyProps, } from '@elastic/eui'; +import { waitForEuiPopoverOpen } from '@elastic/eui/lib/test/rtl'; import { Storage } from '@kbn/kibana-utils-plugin/public'; import { act } from 'react-dom/test-utils'; import { findTestSubject } from '@elastic/eui/lib/test'; @@ -385,7 +386,7 @@ describe('UnifiedDataTable', () => { expect( screen.queryByTestId('dataGridHeaderCellActionGroup-message') ).not.toBeInTheDocument(); - await userEvent.click(screen.getByRole('button', { name: 'message' })); + await userEvent.click(screen.getByTestId('dataGridHeaderCellActionButton-message')); expect(screen.getByTestId('dataGridHeaderCellActionGroup-message')).toBeInTheDocument(); expect(screen.getByTestId('gridEditFieldButton')).toBeInTheDocument(); }, @@ -399,7 +400,7 @@ describe('UnifiedDataTable', () => { expect( screen.queryByTestId('dataGridHeaderCellActionGroup-message') ).not.toBeInTheDocument(); - await userEvent.click(screen.getByRole('button', { name: 'message' })); + await userEvent.click(screen.getByTestId('dataGridHeaderCellActionButton-message')); expect(screen.getByTestId('dataGridHeaderCellActionGroup-message')).toBeInTheDocument(); expect(screen.queryByTestId('gridEditFieldButton')).not.toBeInTheDocument(); }, @@ -458,7 +459,8 @@ describe('UnifiedDataTable', () => { }); describe('sorting', () => { - const getButton = (name: string) => screen.getByRole('button', { name }); + const getColumnActions = (name: string) => + screen.getByTestId(`dataGridHeaderCellActionButton-${name}`); const getCellValuesByColumn = () => { const columns = screen .getAllByRole('columnheader') @@ -497,12 +499,11 @@ describe('UnifiedDataTable', () => { 'message_8', 'message_9', ]); - await userEvent.click(getButton('message')); + await userEvent.click(getColumnActions('message')); + await waitForEuiPopoverOpen(); // Column sort button incorrectly renders as "Sort " instead // of "Sort Z-A" in Jest tests, so we need to find it by index - await userEvent.click(screen.getAllByRole('button', { name: /Sort/ })[2], { - pointerEventsCheck: 0, - }); + await userEvent.click(screen.getAllByRole('button', { name: /Sort/ })[2]); await waitFor(() => { values = getCellValuesByColumn(); expect(values.message).toEqual([ @@ -544,12 +545,11 @@ describe('UnifiedDataTable', () => { 'message_8', 'message_9', ]); - await userEvent.click(getButton('message')); + await userEvent.click(getColumnActions('message')); + await waitForEuiPopoverOpen(); // Column sort button incorrectly renders as "Sort " instead // of "Sort Z-A" in Jest tests, so we need to find it by index - await userEvent.click(screen.getAllByRole('button', { name: /Sort/ })[2], { - pointerEventsCheck: 0, - }); + await userEvent.click(screen.getAllByRole('button', { name: /Sort/ })[2]); await waitFor(() => { values = getCellValuesByColumn(); expect(values.message).toEqual([ @@ -1100,9 +1100,8 @@ describe('UnifiedDataTable', () => { await selectDocument(esHitsMock[0]); await selectDocument(esHitsMock[1]); await openSelectedRowsMenu(); - await userEvent.click(await screen.findByTestId('unifiedDataTableCompareSelectedDocuments'), { - pointerEventsCheck: 0, - }); + await waitForEuiPopoverOpen(); + await userEvent.click(await screen.findByTestId('unifiedDataTableCompareSelectedDocuments')); await screen.findByText('Comparing 2 documents'); // EuiDataGrid makes state updates after calling requestAnimationFrame, which can lead // to "Can't perform a React state update on an unmounted component." warnings in tests, @@ -1259,7 +1258,15 @@ describe('UnifiedDataTable', () => { const EUI_DEFAULT_COLUMN_WIDTH = '100px'; const getColumnHeader = (name: string) => screen.getByRole('columnheader', { name }); const queryColumnHeader = (name: string) => screen.queryByRole('columnheader', { name }); - const getButton = (name: string) => screen.getByRole('button', { name }); + const openColumnActions = async (name: string) => { + const actionsButton = screen.getByTestId(`dataGridHeaderCellActionButton-${name}`); + await userEvent.click(actionsButton); + await waitForEuiPopoverOpen(); + }; + const clickColumnAction = async (name: string) => { + const action = screen.getByRole('button', { name }); + await userEvent.click(action); + }; const queryButton = (name: string) => screen.queryByRole('button', { name }); it( @@ -1277,8 +1284,8 @@ describe('UnifiedDataTable', () => { expect(getColumnHeader('message')).toHaveStyle({ width: EUI_DEFAULT_COLUMN_WIDTH }); expect(getColumnHeader('extension')).toHaveStyle({ width: '50px' }); expect(getColumnHeader('bytes')).toHaveStyle({ width: '50px' }); - await userEvent.click(getButton('message')); - await userEvent.click(getButton('Remove column'), { pointerEventsCheck: 0 }); + await openColumnActions('message'); + await clickColumnAction('Remove column'); await waitFor(() => { expect(queryColumnHeader('message')).not.toBeInTheDocument(); }); @@ -1302,8 +1309,8 @@ describe('UnifiedDataTable', () => { expect(getColumnHeader('message')).toHaveStyle({ width: EUI_DEFAULT_COLUMN_WIDTH }); expect(getColumnHeader('extension')).toHaveStyle({ width: EUI_DEFAULT_COLUMN_WIDTH }); expect(getColumnHeader('bytes')).toHaveStyle({ width: '50px' }); - await userEvent.click(getButton('message')); - await userEvent.click(getButton('Remove column'), { pointerEventsCheck: 0 }); + await openColumnActions('message'); + await clickColumnAction('Remove column'); await waitFor(() => { expect(queryColumnHeader('message')).not.toBeInTheDocument(); }); @@ -1326,21 +1333,21 @@ describe('UnifiedDataTable', () => { }, }); expect(getColumnHeader('@timestamp')).toHaveStyle({ width: '50px' }); - await userEvent.click(getButton('@timestamp')); - await userEvent.click(getButton('Reset width'), { pointerEventsCheck: 0 }); + await openColumnActions('@timestamp'); + await clickColumnAction('Reset width'); await waitFor(() => { expect(getColumnHeader('@timestamp')).toHaveStyle({ width: `${defaultTimeColumnWidth}px`, }); }); expect(getColumnHeader('message')).toHaveStyle({ width: EUI_DEFAULT_COLUMN_WIDTH }); - await userEvent.click(getButton('message')); + await openColumnActions('message'); expect(queryButton('Reset width')).not.toBeInTheDocument(); await waitFor(() => { expect(getColumnHeader('extension')).toHaveStyle({ width: '50px' }); }); - await userEvent.click(getButton('extension')); - await userEvent.click(getButton('Reset width'), { pointerEventsCheck: 0 }); + await openColumnActions('extension'); + await clickColumnAction('Reset width'); await waitFor(() => { expect(getColumnHeader('extension')).toHaveStyle({ width: EUI_DEFAULT_COLUMN_WIDTH }); }); diff --git a/src/dev/license_checker/config.ts b/src/dev/license_checker/config.ts index cb7049e00f684..7f6a9e53f6678 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.9.0': ['Elastic License 2.0 OR AGPL-3.0-only OR SSPL-1.0'], + '@elastic/eui@95.10.1': ['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/accessibility/apps/discover.ts b/test/accessibility/apps/discover.ts index f94bc2d3c427e..169cdcca0f583 100644 --- a/test/accessibility/apps/discover.ts +++ b/test/accessibility/apps/discover.ts @@ -159,7 +159,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { }); it('a11y test for data-grid actions on columns', async () => { - await testSubjects.click('dataGridHeaderCellActionButton-Carrier'); + await dataGrid.openColMenuByField('Carrier'); await a11y.testAppSnapshot(); }); diff --git a/test/functional/apps/context/_discover_navigation.ts b/test/functional/apps/context/_discover_navigation.ts index 37dd92a8be50c..e8213b54e6e9b 100644 --- a/test/functional/apps/context/_discover_navigation.ts +++ b/test/functional/apps/context/_discover_navigation.ts @@ -58,6 +58,11 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { await kibanaServer.uiSettings.replace({}); }); + it('should open the context view with the same columns', async () => { + const columnNames = await dataGrid.getHeaderFields(); + expect(columnNames).to.eql(['@timestamp', ...TEST_COLUMN_NAMES]); + }); + it('should open the context view with the selected document as anchor and allows selecting next anchor', async () => { /** * Helper function to get the first timestamp of the document table @@ -95,11 +100,6 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { }); }); - it('should open the context view with the same columns', async () => { - const columnNames = await dataGrid.getHeaderFields(); - expect(columnNames).to.eql(['@timestamp', ...TEST_COLUMN_NAMES]); - }); - it('should open the context view with the filters disabled', async () => { let disabledFilterCounter = 0; for (const [columnName, value] of TEST_FILTER_COLUMN_NAMES) { diff --git a/test/functional/apps/context/classic/_discover_navigation.ts b/test/functional/apps/context/classic/_discover_navigation.ts index a0bd5847544c5..476a4bfac9e18 100644 --- a/test/functional/apps/context/classic/_discover_navigation.ts +++ b/test/functional/apps/context/classic/_discover_navigation.ts @@ -57,6 +57,11 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { await kibanaServer.uiSettings.replace({}); }); + it('should open the context view with the same columns', async () => { + const columnNames = await docTable.getHeaderFields(); + expect(columnNames).to.eql(['@timestamp', ...TEST_COLUMN_NAMES]); + }); + it('should open the context view with the selected document as anchor and allows selecting next anchor', async () => { /** * Helper function to get the first timestamp of the document table @@ -93,11 +98,6 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { }); }); - it('should open the context view with the same columns', async () => { - const columnNames = await docTable.getHeaderFields(); - expect(columnNames).to.eql(['@timestamp', ...TEST_COLUMN_NAMES]); - }); - it('should open the context view with the filters disabled', async () => { let disabledFilterCounter = 0; for (const [_, value, columnId] of TEST_FILTER_COLUMN_NAMES) { diff --git a/test/functional/apps/discover/group2_data_grid1/_data_grid_context.ts b/test/functional/apps/discover/group2_data_grid1/_data_grid_context.ts index cbd9221311f16..0757304199d8a 100644 --- a/test/functional/apps/discover/group2_data_grid1/_data_grid_context.ts +++ b/test/functional/apps/discover/group2_data_grid1/_data_grid_context.ts @@ -63,6 +63,11 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { await timePicker.resetDefaultAbsoluteRangeViaUiSettings(); }); + it('should open the context view with the same columns', async () => { + const columnNames = await dataGrid.getHeaderFields(); + expect(columnNames).to.eql(['@timestamp', ...TEST_COLUMN_NAMES]); + }); + it('should open the context view with the selected document as anchor', async () => { // check the anchor timestamp in the context view await retry.waitFor('selected document timestamp matches anchor timestamp ', async () => { @@ -82,11 +87,6 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { }); }); - it('should open the context view with the same columns', async () => { - const columnNames = await dataGrid.getHeaderFields(); - expect(columnNames).to.eql(['@timestamp', ...TEST_COLUMN_NAMES]); - }); - it('should open the context view with the filters disabled', async () => { let disabledFilterCounter = 0; for (const [_, value, columnId] of TEST_FILTER_COLUMN_NAMES) { diff --git a/test/functional/apps/management/data_views/_scripted_fields.ts b/test/functional/apps/management/data_views/_scripted_fields.ts index d87e5e602297b..b5697ab30eae6 100644 --- a/test/functional/apps/management/data_views/_scripted_fields.ts +++ b/test/functional/apps/management/data_views/_scripted_fields.ts @@ -33,7 +33,6 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { const retry = getService('retry'); const testSubjects = getService('testSubjects'); const filterBar = getService('filterBar'); - const find = getService('find'); const dataGrid = getService('dataGrid'); const PageObjects = getPageObjects([ 'common', @@ -60,16 +59,6 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { await PageObjects.common.unsetTime(); }); - /** - * @param field field name to sort - * @param optionIndex index of the option to choose in dropdown - */ - const clickSort = async (field: string, optionIndex: number) => { - await testSubjects.click(`dataGridHeaderCell-${field}`); - const optionButtons = await find.allByCssSelector('.euiListGroupItem__button'); - await optionButtons[optionIndex].click(); - }; - it('should not allow saving of invalid scripts', async function () { await PageObjects.settings.navigateTo(); await PageObjects.settings.clickKibanaIndexPatterns(); @@ -170,13 +159,13 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { // add a test to sort numeric scripted field it('should sort scripted field value in Discover', async function () { - await clickSort(scriptedPainlessFieldName, 1); + await dataGrid.clickColumnActionAt(scriptedPainlessFieldName, 1); await PageObjects.common.sleep(500); // after the first click on the scripted field, it becomes secondary sort after time. // click on the timestamp twice to make it be the secondary sort key. - await clickSort('@timestamp', 1); - await clickSort('@timestamp', 0); + await dataGrid.clickColumnActionAt('@timestamp', 1); + await dataGrid.clickColumnActionAt('@timestamp', 0); await PageObjects.header.waitUntilLoadingHasFinished(); await retry.try(async function () { @@ -184,11 +173,11 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { expect(rowData).to.be('Sep 17, 2015 @ 10:53:14.181-1'); }); - await clickSort(scriptedPainlessFieldName, 2); + await dataGrid.clickColumnActionAt(scriptedPainlessFieldName, 2); // after the first click on the scripted field, it becomes primary sort after time. // click on the scripted field twice then, makes it be the secondary sort key. - await clickSort(scriptedPainlessFieldName, 2); - await clickSort(scriptedPainlessFieldName, 2); + await dataGrid.clickColumnActionAt(scriptedPainlessFieldName, 2); + await dataGrid.clickColumnActionAt(scriptedPainlessFieldName, 2); await PageObjects.header.waitUntilLoadingHasFinished(); await retry.try(async function () { @@ -275,25 +264,25 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { // add a test to sort string scripted field it('should sort scripted field value in Discover', async function () { - await clickSort(scriptedPainlessFieldName2, 1); + await dataGrid.clickColumnActionAt(scriptedPainlessFieldName2, 1); // await testSubjects.click(`docTableHeaderFieldSort_${scriptedPainlessFieldName2}`); await PageObjects.common.sleep(500); // after the first click on the scripted field, it becomes secondary sort after time. // click on the timestamp twice to make it be the secondary sort key. - await clickSort('@timestamp', 1); - await clickSort('@timestamp', 0); + await dataGrid.clickColumnActionAt('@timestamp', 1); + await dataGrid.clickColumnActionAt('@timestamp', 0); await PageObjects.header.waitUntilLoadingHasFinished(); await retry.try(async function () { const rowData = (await dataGrid.getRowsText())[0]; expect(rowData).to.be('Sep 17, 2015 @ 09:48:40.594bad'); }); - await clickSort(scriptedPainlessFieldName2, 2); + await dataGrid.clickColumnActionAt(scriptedPainlessFieldName2, 2); // after the first click on the scripted field, it becomes primary sort after time. // click on the scripted field twice then, makes it be the secondary sort key. - await clickSort(scriptedPainlessFieldName2, 2); - await clickSort(scriptedPainlessFieldName2, 2); + await dataGrid.clickColumnActionAt(scriptedPainlessFieldName2, 2); + await dataGrid.clickColumnActionAt(scriptedPainlessFieldName2, 2); await PageObjects.header.waitUntilLoadingHasFinished(); await retry.try(async function () { diff --git a/test/functional/services/data_grid.ts b/test/functional/services/data_grid.ts index 880b761d0f22f..de8f523b268ab 100644 --- a/test/functional/services/data_grid.ts +++ b/test/functional/services/data_grid.ts @@ -386,7 +386,7 @@ export class DataGridService extends FtrService { public async getHeaderFields(): Promise { const result = await this.find.allByCssSelector( - '.euiDataGridHeaderCell__button > .euiDataGridHeaderCell__content' + '.euiDataGridHeaderCell:not(.euiDataGridHeaderCell--controlColumn) .euiDataGridHeaderCell__content' ); const textArr = []; @@ -428,15 +428,27 @@ export class DataGridService extends FtrService { public async openColMenuByField(field: string) { await this.retry.waitFor('header cell action being displayed', async () => { // to prevent flakiness - await this.testSubjects.click(`dataGridHeaderCell-${field}`); + await this.testSubjects.moveMouseTo(`dataGridHeaderCell-${field}`); + await this.testSubjects.click(`dataGridHeaderCellActionButton-${field}`); return await this.testSubjects.exists(`dataGridHeaderCellActionGroup-${field}`); }); } + public async clickColumnActionAt(field: string, index: number) { + await this.openColMenuByField(field); + const actionsGroup = await this.testSubjects.find(`dataGridHeaderCellActionGroup-${field}`); + const actionButtons = await actionsGroup.findAllByTagName('button'); + await actionButtons[index].click(); + } + private async clickColumnMenuField(field?: string) { if (field) { await this.openColMenuByField(field); } else { + const columns = await this.find.allByCssSelector( + '.euiDataGridHeaderCell:not(.euiDataGridHeaderCell--controlColumn)' + ); + await columns[0].moveMouseTo(); await this.find.clickByCssSelector('.euiDataGridHeaderCell__button'); } } @@ -461,6 +473,11 @@ export class DataGridService extends FtrService { await this.find.clickByButtonText('Move left'); } + public async clickHideColumn(field?: string) { + await this.clickColumnMenuField(field); + await this.find.clickByButtonText('Hide column'); + } + public async clickRemoveColumn(field?: string) { await this.clickColumnMenuField(field); await this.find.clickByButtonText('Remove column'); 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 b410958343167..f8183c51e4678 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 @@ -269,7 +269,7 @@ describe('DataTable', () => { ); // click the `@timestamp` column header to display the popover - fireEvent.click(screen.getByText('@timestamp')); + fireEvent.click(screen.getByTestId('dataGridHeaderCellActionButton-@timestamp')); // click the `Remove column` action in the popover fireEvent.click(await screen.getByText(REMOVE_COLUMN)); 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 6148bda17e5f4..7ca9137f938fb 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 @@ -172,7 +172,7 @@ describe('DatatableComponent', () => { test('it should render hide, reset, and sort actions on header even when it is in read only mode', async () => { renderDatatableComponent({ renderMode: 'view' }); - await userEvent.click(screen.getByRole('button', { name: 'a' })); + await userEvent.click(screen.getByTestId('dataGridHeaderCellActionButton-a')); const actionPopover = screen.getByRole('dialog'); const actions = within(actionPopover) .getAllByRole('button') diff --git a/x-pack/plugins/translations/translations/fr-FR.json b/x-pack/plugins/translations/translations/fr-FR.json index a90bac2feed94..94c3218ae520b 100644 --- a/x-pack/plugins/translations/translations/fr-FR.json +++ b/x-pack/plugins/translations/translations/fr-FR.json @@ -765,7 +765,7 @@ "core.euiDataGridCell.position": "{columnId}, colonne {col}, ligne {row}", "core.euiDataGridCellActions.expandButtonTitle": "Cliquez ou appuyez sur Entrée pour interagir avec le contenu de la cellule.", "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.", - "core.euiDataGridHeaderCell.headerActions": "Cliquez pour afficher les actions d'en-tête de colonne", + "core.euiDataGridHeaderCell.actionsButtonAriaLabel": "{title}. Cliquez pour afficher les actions d'en-tête de colonne", "core.euiDataGridHeaderCell.sortedByAscendingFirst": "Trié par {columnId}, ordre croissant", "core.euiDataGridHeaderCell.sortedByAscendingMultiple": ", puis par {columnId}, ordre croissant", "core.euiDataGridHeaderCell.sortedByAscendingSingle": "Trié par ordre croissant", diff --git a/x-pack/plugins/translations/translations/ja-JP.json b/x-pack/plugins/translations/translations/ja-JP.json index 43dd8f770ac1e..45c1da388c176 100644 --- a/x-pack/plugins/translations/translations/ja-JP.json +++ b/x-pack/plugins/translations/translations/ja-JP.json @@ -767,7 +767,7 @@ "core.euiDataGridCell.position": "{columnId}, 列{col}, 行{row}", "core.euiDataGridCellActions.expandButtonTitle": "クリックするか enter を押すと、セルのコンテンツとインタラクトできます。", "core.euiDataGridHeaderCell.actionsPopoverScreenReaderText": "列アクションのリストを移動するには、Tabまたは上下矢印キーを押します。", - "core.euiDataGridHeaderCell.headerActions": "クリックすると、列ヘッダーアクションが表示されます", + "core.euiDataGridHeaderCell.actionsButtonAriaLabel": "{title}。クリックすると、列ヘッダーアクションが表示されます", "core.euiDataGridHeaderCell.sortedByAscendingFirst": "{columnId}の昇順で並べ替え", "core.euiDataGridHeaderCell.sortedByAscendingMultiple": "、{columnId}の昇順で並べ替え", "core.euiDataGridHeaderCell.sortedByAscendingSingle": "昇順で並べ替えます", diff --git a/x-pack/plugins/translations/translations/zh-CN.json b/x-pack/plugins/translations/translations/zh-CN.json index 02aa5c9d475c1..55aa6ce129ae8 100644 --- a/x-pack/plugins/translations/translations/zh-CN.json +++ b/x-pack/plugins/translations/translations/zh-CN.json @@ -765,7 +765,7 @@ "core.euiDataGridCell.position": "{columnId},列 {col},行 {row}", "core.euiDataGridCellActions.expandButtonTitle": "单击或按 Enter 键以便与单元格内容进行交互", "core.euiDataGridHeaderCell.actionsPopoverScreenReaderText": "要在列操作列表中导航,请按 Tab 键或向上和向下箭头键。", - "core.euiDataGridHeaderCell.headerActions": "单击以查看列标题操作", + "core.euiDataGridHeaderCell.actionsButtonAriaLabel": "{title}。单击以查看列标题操作", "core.euiDataGridHeaderCell.sortedByAscendingFirst": "按 {columnId} 排序,升序", "core.euiDataGridHeaderCell.sortedByAscendingMultiple": ",然后按 {columnId} 排序,升序", "core.euiDataGridHeaderCell.sortedByAscendingSingle": "已升序", diff --git a/x-pack/test/functional/page_objects/lens_page.ts b/x-pack/test/functional/page_objects/lens_page.ts index bf38c4e1bdebe..4b2ece9a7ca92 100644 --- a/x-pack/test/functional/page_objects/lens_page.ts +++ b/x-pack/test/functional/page_objects/lens_page.ts @@ -1257,8 +1257,9 @@ export function LensPageProvider({ getService, getPageObjects }: FtrProviderCont async changeTableSortingBy(colIndex = 0, direction: 'none' | 'ascending' | 'descending') { const el = await this.getDatatableHeader(colIndex); - await el.moveMouseTo({ xOffset: 0, yOffset: -20 }); // Prevent the first data row's cell actions from overlapping/intercepting the header click - await el.click(); + 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( diff --git a/x-pack/test/functional_with_es_ssl/page_objects/triggers_actions_ui_page.ts b/x-pack/test/functional_with_es_ssl/page_objects/triggers_actions_ui_page.ts index 137e9ef6f6f2b..1880400dc37c5 100644 --- a/x-pack/test/functional_with_es_ssl/page_objects/triggers_actions_ui_page.ts +++ b/x-pack/test/functional_with_es_ssl/page_objects/triggers_actions_ui_page.ts @@ -16,6 +16,7 @@ export function TriggersActionsPageProvider({ getService }: FtrProviderContext) const retry = getService('retry'); const testSubjects = getService('testSubjects'); const rules = getService('rules'); + const dataGrid = getService('dataGrid'); function getRowItemData(row: CustomCheerio, $: CustomCheerioStatic) { return { @@ -221,15 +222,11 @@ export function TriggersActionsPageProvider({ getService }: FtrProviderContext) await columnsButton.click(); }, async sortEventLogColumn(columnId: string, direction: string) { - await testSubjects.click(`dataGridHeaderCell-${columnId}`); - const popover = await testSubjects.find(`dataGridHeaderCellActionGroup-${columnId}`); - const popoverListItems = await popover.findAllByCssSelector('li'); - if (direction === 'asc') { - await popoverListItems[1].click(); + await dataGrid.clickColumnActionAt(columnId, 1); } if (direction === 'desc') { - await popoverListItems[2].click(); + await dataGrid.clickColumnActionAt(columnId, 2); } }, async clickAlertsPageShowQueryMenuButton() { diff --git a/x-pack/test/observability_functional/apps/observability/pages/alerts/table_storage.ts b/x-pack/test/observability_functional/apps/observability/pages/alerts/table_storage.ts index 33a2c5e7bc44c..c39472715a353 100644 --- a/x-pack/test/observability_functional/apps/observability/pages/alerts/table_storage.ts +++ b/x-pack/test/observability_functional/apps/observability/pages/alerts/table_storage.ts @@ -16,6 +16,7 @@ export default ({ getService, getPageObject }: FtrProviderContext) => { const observability = getService('observability'); const esArchiver = getService('esArchiver'); const testSubjects = getService('testSubjects'); + const dataGrid = getService('dataGrid'); before(async () => { await esArchiver.load('x-pack/test/functional/es_archives/observability/alerts'); @@ -29,42 +30,23 @@ export default ({ getService, getPageObject }: FtrProviderContext) => { it('remembers column changes', async () => { await observability.alerts.common.navigateToTimeWithData(); - const durationColumnButton = await testSubjects.find( - 'dataGridHeaderCellActionButton-kibana.alert.duration.us' - ); - await durationColumnButton.click(); - const columnMenu = await testSubjects.find( - 'dataGridHeaderCellActionGroup-kibana.alert.duration.us' - ); - const removeButton = await columnMenu.findByCssSelector('[title="Hide column"]'); - await removeButton.click(); + await dataGrid.clickHideColumn('kibana.alert.duration.us'); await observability.alerts.common.navigateToTimeWithData(); const durationColumnExists = await testSubjects.exists( - 'dataGridHeaderCellActionButton-kibana.alert.duration.us' + 'dataGridHeaderCell-kibana.alert.duration.us' ); - expect(durationColumnExists).to.be(false); }); it('remembers sorting changes', async () => { await observability.alerts.common.navigateToTimeWithData(); - const triggeredColumnButton = await testSubjects.find( - 'dataGridHeaderCellActionButton-kibana.alert.start' - ); - await triggeredColumnButton.click(); - const columnMenu = await testSubjects.find( - 'dataGridHeaderCellActionGroup-kibana.alert.start' - ); - const sortButton = await columnMenu.findByCssSelector('[title="Sort Old-New"]'); - await sortButton.click(); + await dataGrid.clickDocSortAsc('kibana.alert.start'); await observability.alerts.common.navigateToTimeWithData(); - const triggeredColumnHeading = await testSubjects.find( - 'dataGridHeaderCell-kibana.alert.start' - ); + const triggeredColumnHeading = await dataGrid.getHeaderElement('kibana.alert.start'); expect(await triggeredColumnHeading.getAttribute('aria-sort')).to.be('ascending'); }); }); diff --git a/x-pack/test_serverless/functional/page_objects/svl_triggers_actions_ui_page.ts b/x-pack/test_serverless/functional/page_objects/svl_triggers_actions_ui_page.ts index a2289ce1a2662..983eaf813f999 100644 --- a/x-pack/test_serverless/functional/page_objects/svl_triggers_actions_ui_page.ts +++ b/x-pack/test_serverless/functional/page_objects/svl_triggers_actions_ui_page.ts @@ -16,6 +16,7 @@ export function SvlTriggersActionsPageProvider({ getService }: FtrProviderContex const retry = getService('retry'); const testSubjects = getService('testSubjects'); const rules = getService('rules'); + const dataGrid = getService('dataGrid'); function getRowItemData(row: CustomCheerio, $: CustomCheerioStatic) { return { @@ -221,15 +222,11 @@ export function SvlTriggersActionsPageProvider({ getService }: FtrProviderContex await columnsButton.click(); }, async sortEventLogColumn(columnId: string, direction: string) { - await testSubjects.click(`dataGridHeaderCell-${columnId}`); - const popover = await testSubjects.find(`dataGridHeaderCellActionGroup-${columnId}`); - const popoverListItems = await popover.findAllByCssSelector('li'); - if (direction === 'asc') { - await popoverListItems[1].click(); + await dataGrid.clickColumnActionAt(columnId, 1); } if (direction === 'desc') { - await popoverListItems[2].click(); + await dataGrid.clickColumnActionAt(columnId, 2); } }, }; diff --git a/x-pack/test_serverless/functional/test_suites/common/context/_discover_navigation.ts b/x-pack/test_serverless/functional/test_suites/common/context/_discover_navigation.ts index dccd6723507d5..9e5ee000f324f 100644 --- a/x-pack/test_serverless/functional/test_suites/common/context/_discover_navigation.ts +++ b/x-pack/test_serverless/functional/test_suites/common/context/_discover_navigation.ts @@ -64,6 +64,11 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { await kibanaServer.uiSettings.replace({}); }); + it('should open the context view with the same columns', async () => { + const columnNames = await dataGrid.getHeaderFields(); + expect(columnNames).to.eql(['@timestamp', ...TEST_COLUMN_NAMES]); + }); + it('should open the context view with the selected document as anchor and allows selecting next anchor', async () => { /** * Helper function to get the first timestamp of the document table @@ -101,11 +106,6 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { }); }); - it('should open the context view with the same columns', async () => { - const columnNames = await dataGrid.getHeaderFields(); - expect(columnNames).to.eql(['@timestamp', ...TEST_COLUMN_NAMES]); - }); - it('should open the context view with the filters disabled', async () => { let disabledFilterCounter = 0; for (const [columnName, value] of TEST_FILTER_COLUMN_NAMES) { diff --git a/yarn.lock b/yarn.lock index b984c1145b972..d57afd7e910c7 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.9.0": - version "95.9.0" - resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-95.9.0.tgz#23fbafd7613fb6b41b4925ec4977a0c1e075b455" - integrity sha512-Ppna5bGjamttqHdwhYYrdXOprF3OpEY0schX7mOVJmtpcBtp7wAMYQq/bBELBVb7idO4NytbzI1Q6R6NYs5Tdg== +"@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== dependencies: "@hello-pangea/dnd" "^16.6.0" "@types/lodash" "^4.14.202"