From ddad948501431539948f2317d4c87e4885be5a3f Mon Sep 17 00:00:00 2001 From: Cee Chen Date: Thu, 12 Sep 2024 10:52:57 -0700 Subject: [PATCH 01/15] Upgrade EUI to v95.11.0 --- package.json | 2 +- src/dev/license_checker/config.ts | 2 +- yarn.lock | 8 ++++---- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/package.json b/package.json index 1a420b7cae9ea..60390f23b9415 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/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/yarn.lock b/yarn.lock index 9b0438134fd4c..7db9c9aeb33e5 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" From 251155a4ab9ed203641ef02d320e50fda7a4c117 Mon Sep 17 00:00:00 2001 From: Cee Chen Date: Thu, 12 Sep 2024 11:10:15 -0700 Subject: [PATCH 02/15] i18n updates --- .../__snapshots__/i18n_service.test.tsx.snap | 4 ++- .../src/i18n_eui_mapping.tsx | 25 +++++++++++++------ .../translations/translations/fr-FR.json | 3 +-- .../translations/translations/ja-JP.json | 3 +-- .../translations/translations/zh-CN.json | 3 +-- 5 files changed, 24 insertions(+), 14 deletions(-) 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/x-pack/plugins/translations/translations/fr-FR.json b/x-pack/plugins/translations/translations/fr-FR.json index 1c1ebd739af62..f905a588aa8fb 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 fbe9e93e8a768..307522b153732 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 4d5023b6cfd61..49efd36793920 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 键或向上和向下箭头键。", From c494941312c291060533c2810a8b26581c02cd85 Mon Sep 17 00:00:00 2001 From: Cee Chen Date: Thu, 12 Sep 2024 11:17:18 -0700 Subject: [PATCH 03/15] [FTR] Update EuiDataGrid service based on DOM cleanup - header control cells no longer have `.euiDataGridHeaderCell__content` wrappers --- test/functional/services/data_grid.ts | 14 +++++--------- 1 file changed, 5 insertions(+), 9 deletions(-) diff --git a/test/functional/services/data_grid.ts b/test/functional/services/data_grid.ts index a280c6556bbd7..4abc6faf1f641 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()); } @@ -402,9 +402,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 +413,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) { From 092a9494f149f011a9ef141420facf88748d99e5 Mon Sep 17 00:00:00 2001 From: Cee Chen Date: Tue, 17 Sep 2024 10:55:26 -0700 Subject: [PATCH 04/15] [FTR] Harden datagrid cell actions clicking - not totally sure how the Emotion conversion broke this :T but hovering over cells/etc helps ensure the button remains clickable --- test/functional/services/data_grid.ts | 19 +++++++++++++++++-- 1 file changed, 17 insertions(+), 2 deletions(-) diff --git a/test/functional/services/data_grid.ts b/test/functional/services/data_grid.ts index 4abc6faf1f641..c5c8db4a9886b 100644 --- a/test/functional/services/data_grid.ts +++ b/test/functional/services/data_grid.ts @@ -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(); @@ -624,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}`); }); @@ -632,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 { @@ -654,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); } From 4eabb39e05cac7f5960230341ba978761cc2ed8d Mon Sep 17 00:00:00 2001 From: Cee Chen Date: Tue, 17 Sep 2024 16:25:04 -0700 Subject: [PATCH 05/15] [Lens][FTR] Fix FTR sorting failure - `.euiDataGridHeader__action--selected` isn't a className that EUI sets anymore (as it wasn't doing anything) - we use sort/unsort copy - Lens is overriding EUI's copy, so we need to update the tests to be more manual and remove the `none` option --- x-pack/test/functional/apps/lens/group2/table.ts | 4 ++-- .../apps/lens/group2/table_dashboard.ts | 2 +- x-pack/test/functional/page_objects/lens_page.ts | 15 ++++----------- 3 files changed, 7 insertions(+), 14 deletions(-) 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(); }, From 7a4f63327fe8c547ba1f562b0cfb6b33db6e7d9f Mon Sep 17 00:00:00 2001 From: Cee Chen Date: Mon, 16 Sep 2024 16:02:02 -0700 Subject: [PATCH 06/15] [ML][FTR] Fix test selector based on removed SR text --- x-pack/test/functional/services/ml/common_data_grid.ts | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) 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..dbdda3044efe9 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 From dd3b6303778f5babe83fffc4401bef0d4036c687 Mon Sep 17 00:00:00 2001 From: Cee Chen Date: Tue, 17 Sep 2024 13:22:11 -0700 Subject: [PATCH 07/15] [ML][FTR] Fix test to account for removed className - prefer className specific to column selector instead --- x-pack/test/functional/services/ml/common_data_grid.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) 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 dbdda3044efe9..a920b427e9adc 100644 --- a/x-pack/test/functional/services/ml/common_data_grid.ts +++ b/x-pack/test/functional/services/ml/common_data_grid.ts @@ -148,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'; From 83e605d0d50b4dc6ff21073aba20b8bdd225c4f9 Mon Sep 17 00:00:00 2001 From: Cee Chen Date: Tue, 17 Sep 2024 14:36:38 -0700 Subject: [PATCH 08/15] [Discover][FTR] Update cell headers assertion to account for screen reader text peter_griffin_blinds.gif --- test/functional/apps/discover/esql/_esql_view.ts | 2 +- .../functional/test_suites/common/discover/esql/_esql_view.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/test/functional/apps/discover/esql/_esql_view.ts b/test/functional/apps/discover/esql/_esql_view.ts index b1ca9e937d364..7a4262055685f 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/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 b0cc636dea578..6fa520bf99a75 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', From 20d184d17aa4c77f6154ce6b886aebd18f148f20 Mon Sep 17 00:00:00 2001 From: Cee Chen Date: Fri, 13 Sep 2024 13:57:26 -0700 Subject: [PATCH 09/15] [Discover] Clean up EuiDataGrid styles to account for new styles - `.euiDataGridHeaderCell__button` now behaves very differently due to interactive children change, so center it instead of stretching it - `.euiDataGridHeaderCell__popover` no longer exists - `.euiDataGridRowCell__content` no longer exists for control columns - `.euiDataGridRowCell--numeric` text alignment is already being applied by EUI, delete it --- .../src/components/data_table.scss | 33 ++++--------------- 1 file changed, 7 insertions(+), 26 deletions(-) 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..f3aa79cdaf805 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,12 @@ .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--headerUnderline .euiDataGridHeader { border-bottom: $euiBorderThin; } @@ -63,7 +62,7 @@ border-left: 0; border-right: 0; } - .euiDataGridRowCell.euiDataGridRowCell--controlColumn[data-gridcell-column-id='additionalRowControl_menuControl'] .euiDataGridRowCell__content { + .euiDataGridRowCell.euiDataGridRowCell--controlColumn[data-gridcell-column-id='additionalRowControl_menuControl'] { padding-bottom: 0; } @@ -78,7 +77,7 @@ border-left: 0; border-right: 0; } - .euiDataGridRowCell.euiDataGridRowCell--controlColumn[data-gridcell-column-id='colorIndicator'] .euiDataGridRowCell__content { + .euiDataGridRowCell.euiDataGridRowCell--controlColumn[data-gridcell-column-id='colorIndicator'] { height: 100%; padding: 0; border-bottom: 0; @@ -93,7 +92,8 @@ } .euiDataGridRowCell__content--autoHeight, - .euiDataGridRowCell__content--lineCountHeight { + .euiDataGridRowCell__content--lineCountHeight, + .euiDataGridHeaderCell__content { white-space: pre-wrap; } } @@ -104,25 +104,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; From ae8c25b3b03194d9d55a978d05c17eea8186bdf9 Mon Sep 17 00:00:00 2001 From: Cee Chen Date: Fri, 13 Sep 2024 14:00:38 -0700 Subject: [PATCH 10/15] Fix Enzyme tests to account for new Emotion wrappers --- .../data_table/components/data_table/index.test.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) 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); From 2301ea581b04ce8f6f1ce27a294586ce70c8adc0 Mon Sep 17 00:00:00 2001 From: Cee Chen Date: Fri, 13 Sep 2024 14:03:04 -0700 Subject: [PATCH 11/15] Fix RTL tests with updated DOM - `.euiDataGridHeaderCell__icon` no longer exists, use the data-test-subj attached directly to the column actions button instead - `.euiDataGridHeaderCell__content` no longer exists in control columns - `Unsort` text has been added to datagrid column actions to indicate a column is already being sorted --- .../query_tab_unified_components.test.tsx | 32 +++----------- .../unified_components/index.test.tsx | 44 ++++--------------- .../alerts_table/alerts_table_state.test.tsx | 4 +- 3 files changed, 16 insertions(+), 64 deletions(-) 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/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); }); From 6bdfd0b624ec30b5ef832334ca42a82c3c20e3a7 Mon Sep 17 00:00:00 2001 From: Cee Chen Date: Fri, 13 Sep 2024 14:01:18 -0700 Subject: [PATCH 12/15] Update datagrid cell content test assertion w/ removed screen reader text --- .../datatable/components/table_basic.test.tsx | 22 +++++++++---------- 1 file changed, 11 insertions(+), 11 deletions(-) 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'], ]); }); }); From f2df1a900fad38635bf8396a6f90d8868b4c4541 Mon Sep 17 00:00:00 2001 From: Cee Chen Date: Fri, 13 Sep 2024 14:03:27 -0700 Subject: [PATCH 13/15] Update EuiBasicTable to account for new a11y text - row # has been added to each actions button --- .../slo/public/pages/slos/slos.test.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) 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(); From f8cae9d5cc822dcee81973842d9c74a6d34001e2 Mon Sep 17 00:00:00 2001 From: Cee Chen Date: Wed, 18 Sep 2024 13:07:08 -0700 Subject: [PATCH 14/15] [PR feedback] Restore Discover custom header borders --- .../kbn-unified-data-table/src/components/data_table.scss | 4 ++++ .../public/components/doc_viewer_table/table.scss | 4 ++-- 2 files changed, 6 insertions(+), 2 deletions(-) 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 f3aa79cdaf805..ebf07c1c4d872 100644 --- a/packages/kbn-unified-data-table/src/components/data_table.scss +++ b/packages/kbn-unified-data-table/src/components/data_table.scss @@ -48,6 +48,10 @@ } } + .euiDataGrid--bordersHorizontal .euiDataGridHeader { + border-top: none; + } + .euiDataGrid--headerUnderline .euiDataGridHeader { border-bottom: $euiBorderThin; } 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; } From b3732316e1d9200bf088f11900233a5cf7b80659 Mon Sep 17 00:00:00 2001 From: Cee Chen Date: Thu, 19 Sep 2024 09:41:16 -0700 Subject: [PATCH 15/15] [PR feedback] Revert incorrectly removed styles targeting row cell content div I was derping and should not have removed the `__content` selector :facepalm: --- .../kbn-unified-data-table/src/components/data_table.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) 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 ebf07c1c4d872..5bf8773db9c0b 100644 --- a/packages/kbn-unified-data-table/src/components/data_table.scss +++ b/packages/kbn-unified-data-table/src/components/data_table.scss @@ -66,7 +66,7 @@ border-left: 0; border-right: 0; } - .euiDataGridRowCell.euiDataGridRowCell--controlColumn[data-gridcell-column-id='additionalRowControl_menuControl'] { + .euiDataGridRowCell.euiDataGridRowCell--controlColumn[data-gridcell-column-id='additionalRowControl_menuControl'] .euiDataGridRowCell__content { padding-bottom: 0; } @@ -81,7 +81,7 @@ border-left: 0; border-right: 0; } - .euiDataGridRowCell.euiDataGridRowCell--controlColumn[data-gridcell-column-id='colorIndicator'] { + .euiDataGridRowCell.euiDataGridRowCell--controlColumn[data-gridcell-column-id='colorIndicator'] .euiDataGridRowCell__content { height: 100%; padding: 0; border-bottom: 0;