Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Upgrade EUI to v95.11.0 #192756

Merged
merged 18 commits into from
Sep 23, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand Down Expand Up @@ -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',
}),
Expand Down Expand Up @@ -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',
Expand Down
33 changes: 9 additions & 24 deletions packages/kbn-unified-data-table/src/components/data_table.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}

Expand Down Expand Up @@ -93,7 +96,8 @@
}

.euiDataGridRowCell__content--autoHeight,
.euiDataGridRowCell__content--lineCountHeight {
.euiDataGridRowCell__content--lineCountHeight,
.euiDataGridHeaderCell__content {
white-space: pre-wrap;
}
}
Expand All @@ -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;
Expand Down
2 changes: 1 addition & 1 deletion src/dev/license_checker/config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -87,7 +87,7 @@ export const LICENSE_OVERRIDES = {
'[email protected]': ['Eclipse Distribution License - v 1.0'], // cf. https://github.com/bjornharrtell/jsts
'@mapbox/[email protected]': ['MIT'], // license in readme https://github.com/tmcw/jsonlint
'@elastic/[email protected]': ['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'],
'[email protected]': ['CC-BY-4.0'], // retired ODC‑By license https://github.com/mattcg/language-subtag-registry
'[email protected]': ['MIT'], // license in importing module https://www.npmjs.com/package/binary
'@bufbuild/[email protected]': ['Apache-2.0'], // license (Apache-2.0 AND BSD-3-Clause)
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}

Expand Down
2 changes: 1 addition & 1 deletion test/functional/apps/discover/esql/_esql_view.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
33 changes: 22 additions & 11 deletions test/functional/services/data_grid.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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')
Expand All @@ -59,7 +59,7 @@ export class DataGridService extends FtrService {
cellDataTestSubj: string
): Promise<string[][]> {
const $ = await element.parseDomContent();
const columnNumber = $('.euiDataGridHeaderCell__content').length;
const columnNumber = $('.euiDataGridHeaderCell').length;
const cells = $.findTestSubjects('dataGridRowCell')
.toArray()
.map((cell) =>
Expand All @@ -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());
}
Expand Down Expand Up @@ -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) {
Expand All @@ -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');
Expand Down Expand Up @@ -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();
}

Expand All @@ -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();
}

Expand All @@ -233,6 +238,7 @@ export class DataGridService extends FtrService {
controlsCount + columnIndex,
'filterOutButton'
);
await actionButton.moveMouseTo();
await actionButton.click();
}

Expand Down Expand Up @@ -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();
Expand Down Expand Up @@ -402,9 +409,7 @@ export class DataGridService extends FtrService {
}

public async getHeaderFields(): Promise<string[]> {
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) {
Expand All @@ -415,9 +420,7 @@ export class DataGridService extends FtrService {
}

public async getControlColumnHeaderFields(): Promise<string[]> {
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) {
Expand Down Expand Up @@ -628,15 +631,20 @@ 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}`);
});
}

public async clickFieldActionInFlyout(fieldName: string, actionName: string): Promise<void> {
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<boolean> {
Expand All @@ -658,11 +666,14 @@ export class DataGridService extends FtrService {
}

public async expandFieldNameCellInFlyout(fieldName: string): Promise<void> {
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);
}

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Comment on lines -144 to -146
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm wondering why this has changed

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The - a, column 1, row 1 is screen reader only text that I'm currently making several efforts to make less visible to users (e.g. in snapshots, during copy/paste events) while still remaining accessible to screen readers. This snapshot/test assertion change is a result of that.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Follow up note: if you still wish to assert on cell col/row placement in EuiDataGrid, please use the data-gridcell-column-index and data-gridcell-visible-row-index attributes.

'shoes',
'1588024800000',
'3',
]);
});

Expand Down Expand Up @@ -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',
]);
});

Expand Down Expand Up @@ -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', ''],
]);
});

Expand All @@ -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'],
]);
});
});
Expand Down
Loading