Upgrade EUI to v31.4.0

package.json

@@ -98,7 +98,7 @@
     "@elastic/datemath": "link:packages/elastic-datemath",
     "@elastic/elasticsearch": "npm:@elastic/elasticsearch-canary@^8.0.0-canary",
     "@elastic/ems-client": "7.11.0",
-    "@elastic/eui": "31.3.0",
+    "@elastic/eui": "31.4.0",
     "@elastic/filesaver": "1.1.2",
     "@elastic/good": "^9.0.1-kibana3",
     "@elastic/node-crypto": "1.2.1",

test/accessibility/services/a11y/analyze_with_axe.js

@@ -30,6 +30,10 @@ export function analyzeWithAxe(context, options, callback) {
               id: 'aria-roles',
               selector: '[data-test-subj="comboBoxSearchInput"] *',
             },
+            {
+              id: 'aria-required-parent',
+              selector: '[class=*"euiDataGridRowCell"][role="gridcell"] ',
+            },
           ],
         });
         return window.axe.run(context, options);

test/functional/apps/dashboard/embeddable_data_grid.ts

@@ -36,10 +36,13 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
     describe('saved search filters', function () {
       it('are added when a cell filter is clicked', async function () {
         await dashboardAddPanel.addSavedSearch('Rendering-Test:-saved-search');
-        await find.clickByCssSelector(`[role="gridcell"]:nth-child(2)`);
+        await find.clickByCssSelector(`[role="gridcell"]:nth-child(3)`);
+        // needs a short delay between becoming visible & being clickable
+        await PageObjects.common.sleep(250);
         await find.clickByCssSelector(`[data-test-subj="filterOutButton"]`);
         await PageObjects.header.waitUntilLoadingHasFinished();
-        await find.clickByCssSelector(`[role="gridcell"]:nth-child(2)`);
+        await find.clickByCssSelector(`[role="gridcell"]:nth-child(3)`);
+        await PageObjects.common.sleep(250);
         await find.clickByCssSelector(`[data-test-subj="filterForButton"]`);
         const filterCount = await filterBar.getFilterCount();
         expect(filterCount).to.equal(2);

test/functional/apps/discover/_data_grid_context.ts

@@ -27,6 +27,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
 
   describe('discover data grid context tests', () => {
     before(async () => {
+      await esArchiver.load('discover');
       await esArchiver.loadIfNeeded('logstash_functional');
       await PageObjects.timePicker.setDefaultAbsoluteRangeViaUiSettings();
       await kibanaServer.uiSettings.update(defaultSettings);

test/functional/apps/discover/_data_grid_doc_table.ts

@@ -22,8 +22,6 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
   };
 
   describe('discover data grid doc table', function describeIndexTests() {
-    const defaultRowsLimit = 25;
-
     before(async function () {
       log.debug('load kibana index with default index pattern');
       await esArchiver.load('discover');
@@ -38,10 +36,10 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
       await kibanaServer.uiSettings.replace({});
     });
 
-    it('should show the first 50 rows by default', async function () {
+    it('should show the first 12 rows by default', async function () {
       // with the default range the number of hits is ~14000
       const rows = await dataGrid.getDocTableRows();
-      expect(rows.length).to.be(defaultRowsLimit);
+      expect(rows.length).to.be(12);
     });
 
     it('should refresh the table content when changing time window', async function () {

test/functional/apps/discover/_data_grid_field_data.ts

@@ -67,9 +67,10 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
         await dataGrid.clickDocSortAsc();
         await PageObjects.discover.waitUntilSearchingHasFinished();
 
-        await retry.try(async function tryingForTime() {
-          const rowData = await dataGrid.getFields();
-          expect(rowData[0][0].startsWith(expectedTimeStamp)).to.be.ok();
+        await retry.waitFor('first cell contains expected timestamp', async () => {
+          const cell = await dataGrid.getCellElement(1, 2);
+          const text = await cell.getVisibleText();
+          return text === expectedTimeStamp;
         });
       });
 

test/functional/apps/visualize/_data_table.ts

@@ -267,14 +267,16 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
       });
 
       it('should apply correct filter', async () => {
-        await PageObjects.visChart.filterOnTableCell(1, 3);
-        await PageObjects.visChart.waitForVisualizationRenderingStabilized();
-        const data = await PageObjects.visChart.getTableVisContent();
-        expect(data).to.be.eql([
-          ['png', '1,373'],
-          ['gif', '918'],
-          ['Other', '445'],
-        ]);
+        await retry.try(async () => {
+          await PageObjects.visChart.filterOnTableCell(1, 3);
+          await PageObjects.visChart.waitForVisualizationRenderingStabilized();
+          const data = await PageObjects.visChart.getTableVisContent();
+          expect(data).to.be.eql([
+            ['png', '1,373'],
+            ['gif', '918'],
+            ['Other', '445'],
+          ]);
+        });
       });
     });
 

test/functional/apps/visualize/_data_table_notimeindex_filters.ts

@@ -14,6 +14,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
   const log = getService('log');
   const filterBar = getService('filterBar');
   const renderable = getService('renderable');
+  const retry = getService('retry');
   const dashboardAddPanel = getService('dashboardAddPanel');
   const PageObjects = getPageObjects([
     'common',
@@ -66,13 +67,15 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
       await PageObjects.dashboard.clickNewDashboard();
       await dashboardAddPanel.addVisualization(vizName1);
 
-      // hover and click on cell to filter
-      await PageObjects.visChart.filterOnTableCell(1, 2);
+      await retry.try(async () => {
+        // hover and click on cell to filter
+        await PageObjects.visChart.filterOnTableCell(1, 2);
 
-      await PageObjects.header.waitUntilLoadingHasFinished();
-      await renderable.waitForRender();
-      const filterCount = await filterBar.getFilterCount();
-      expect(filterCount).to.be(1);
+        await PageObjects.header.waitUntilLoadingHasFinished();
+        await renderable.waitForRender();
+        const filterCount = await filterBar.getFilterCount();
+        expect(filterCount).to.be(1);
+      });
 
       await filterBar.removeAllFilters();
     });

test/functional/apps/visualize/_embedding_chart.ts

@@ -14,6 +14,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
   const filterBar = getService('filterBar');
   const renderable = getService('renderable');
   const embedding = getService('embedding');
+  const retry = getService('retry');
   const PageObjects = getPageObjects([
     'visualize',
     'visEditor',
@@ -80,23 +81,25 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
       });
 
       it('should allow to change timerange from the visualization in embedded mode', async () => {
-        await PageObjects.visChart.filterOnTableCell(1, 7);
-        await PageObjects.header.waitUntilLoadingHasFinished();
-        await renderable.waitForRender();
+        await retry.try(async () => {
+          await PageObjects.visChart.filterOnTableCell(1, 7);
+          await PageObjects.header.waitUntilLoadingHasFinished();
+          await renderable.waitForRender();
 
-        const data = await PageObjects.visChart.getTableVisContent();
-        expect(data).to.be.eql([
-          ['03:00', '0B', '1'],
-          ['03:00', '1.953KB', '1'],
-          ['03:00', '3.906KB', '1'],
-          ['03:00', '5.859KB', '2'],
-          ['03:10', '0B', '1'],
-          ['03:10', '5.859KB', '1'],
-          ['03:10', '7.813KB', '1'],
-          ['03:15', '0B', '1'],
-          ['03:15', '1.953KB', '1'],
-          ['03:20', '1.953KB', '1'],
-        ]);
+          const data = await PageObjects.visChart.getTableVisContent();
+          expect(data).to.be.eql([
+            ['03:00', '0B', '1'],
+            ['03:00', '1.953KB', '1'],
+            ['03:00', '3.906KB', '1'],
+            ['03:00', '5.859KB', '2'],
+            ['03:10', '0B', '1'],
+            ['03:10', '5.859KB', '1'],
+            ['03:10', '7.813KB', '1'],
+            ['03:15', '0B', '1'],
+            ['03:15', '1.953KB', '1'],
+            ['03:20', '1.953KB', '1'],
+          ]);
+        });
       });
     });
   });

test/functional/page_objects/visualize_chart_page.ts

@@ -418,7 +418,7 @@ export function VisualizeChartPageProvider({ getService, getPageObjects }: FtrPr
     public async filterOnTableCell(columnIndex: number, rowIndex: number) {
       await retry.try(async () => {
         const cell = await dataGrid.getCellElement(rowIndex, columnIndex);
-        await cell.moveMouseTo();
+        await cell.focus();
         const filterBtn = await testSubjects.findDescendant(
           'tbvChartCell__filterForCellValue',
           cell

test/functional/services/data_grid.ts

@@ -6,6 +6,7 @@
  * Side Public License, v 1.
  */
 
+import { chunk } from 'lodash';
 import { FtrProviderContext } from '../ftr_provider_context';
 import { WebElementWrapper } from './lib/web_element_wrapper';
 
@@ -31,14 +32,11 @@ export function DataGridProvider({ getService, getPageObjects }: FtrProviderCont
       const columns = $('.euiDataGridHeaderCell__content')
         .toArray()
         .map((cell) => $(cell).text());
-      const rows = $.findTestSubjects('dataGridRow')
+      const cells = $.findTestSubjects('dataGridRowCell')
         .toArray()
-        .map((row) =>
-          $(row)
-            .find('.euiDataGridRowCell__truncate')
-            .toArray()
-            .map((cell) => $(cell).text())
-        );
+        .map((cell) => $(cell).text());
+
+      const rows = chunk(cells, columns.length);
 
       return {
         columns,
@@ -56,20 +54,18 @@ export function DataGridProvider({ getService, getPageObjects }: FtrProviderCont
       cellDataTestSubj: string
     ): Promise<string[][]> {
       const $ = await element.parseDomContent();
-      return $('[data-test-subj="dataGridRow"]')
+      const columnNumber = $('.euiDataGridHeaderCell__content').length;
+      const cells = $.findTestSubjects('dataGridRowCell')
         .toArray()
-        .map((row) =>
-          $(row)
-            .findTestSubjects('dataGridRowCell')
-            .toArray()
-            .map((cell) =>
-              $(cell)
-                .findTestSubject(cellDataTestSubj)
-                .text()
-                .replace(/&nbsp;/g, '')
-                .trim()
-            )
+        .map((cell) =>
+          $(cell)
+            .findTestSubject(cellDataTestSubj)
+            .text()
+            .replace(/&nbsp;/g, '')
+            .trim()
         );
+
+      return chunk(cells, columnNumber);
     }
 
     /**
@@ -90,62 +86,72 @@ export function DataGridProvider({ getService, getPageObjects }: FtrProviderCont
      * @param columnIndex column index starting from 1 (1 means 1st column)
      */
     public async getCellElement(rowIndex: number, columnIndex: number) {
+      const table = await find.byCssSelector('.euiDataGrid');
+      const $ = await table.parseDomContent();
+      const columnNumber = $('.euiDataGridHeaderCell__content').length;
       return await find.byCssSelector(
-        `[data-test-subj="dataGridWrapper"] [data-test-subj="dataGridRow"]:nth-of-type(${
-          rowIndex + 1
-        })
-        [data-test-subj="dataGridRowCell"]:nth-of-type(${columnIndex})`
+        `[data-test-subj="dataGridWrapper"] [data-test-subj="dataGridRowCell"]:nth-of-type(${
+          columnNumber * (rowIndex - 1) + columnIndex + 1
+        })`
       );
     }
     public async getFields() {
-      const rows = await find.allByCssSelector('.euiDataGridRow');
-
-      const result = [];
-      for (const row of rows) {
-        const cells = await row.findAllByClassName('euiDataGridRowCell__truncate');
-        const cellsText = [];
-        let cellIdx = 0;
-        for (const cell of cells) {
-          if (cellIdx > 0) {
-            cellsText.push(await cell.getVisibleText());
-          }
-          cellIdx++;
+      const cells = await find.allByCssSelector('.euiDataGridRowCell');
+
+      const rows: string[][] = [];
+      let rowIdx = -1;
+      for (const cell of cells) {
+        if (await cell.elementHasClass('euiDataGridRowCell--firstColumn')) {
+          // first column contains expand icon
+          rowIdx++;
+          rows[rowIdx] = [];
+        }
+        if (!(await cell.elementHasClass('euiDataGridRowCell--controlColumn'))) {
+          rows[rowIdx].push(await cell.getVisibleText());
         }
-        result.push(cellsText);
       }
-      return result;
+      return rows;
     }
 
     public async getTable(selector: string = 'docTable') {
       return await testSubjects.find(selector);
     }
 
-    public async getBodyRows(): Promise<WebElementWrapper[]> {
-      const table = await this.getTable();
-      return await table.findAllByTestSubject('dataGridRow');
+    public async getBodyRows(): Promise<WebElementWrapper[][]> {
+      return this.getDocTableRows();
     }
 
+    /**
+     * Returns an array of rows (which are array of cells)
+     */
     public async getDocTableRows() {
       const table = await this.getTable();
-      return await table.findAllByTestSubject('dataGridRow');
-    }
-
-    public async getAnchorRow(): Promise<WebElementWrapper> {
-      const table = await this.getTable();
-      return await table.findByTestSubject('~docTableAnchorRow');
+      const cells = await table.findAllByCssSelector('.euiDataGridRowCell');
+
+      const rows: WebElementWrapper[][] = [];
+      let rowIdx = -1;
+      for (const cell of cells) {
+        if (await cell.elementHasClass('euiDataGridRowCell--firstColumn')) {
+          rowIdx++;
+          rows[rowIdx] = [];
+        }
+        rows[rowIdx].push(cell);
+      }
+      return rows;
     }
 
-    public async getRow(options: SelectOptions): Promise<WebElementWrapper> {
-      return options.isAnchorRow
-        ? await this.getAnchorRow()
-        : (await this.getBodyRows())[options.rowIndex];
+    /**
+     * Returns an array of cells for that row
+     */
+    public async getRow(options: SelectOptions): Promise<WebElementWrapper[]> {
+      return (await this.getBodyRows())[options.rowIndex];
     }
 
     public async clickRowToggle(
       options: SelectOptions = { isAnchorRow: false, rowIndex: 0 }
     ): Promise<void> {
       const row = await this.getRow(options);
-      const toggle = await row.findByTestSubject('~docTableExpandToggleColumn');
+      const toggle = await row[0];
       await toggle.click();
     }
 

x-pack/plugins/lens/public/datatable_visualization/components/table_basic.test.tsx

@@ -161,6 +161,8 @@ describe('DatatableComponent', () => {
       />
     );
 
+    wrapper.find('[data-test-subj="dataGridRowCell"]').first().simulate('focus');
+
     wrapper.find('[data-test-subj="lensDatatableFilterOut"]').first().simulate('click');
 
     expect(onDispatchEvent).toHaveBeenCalledWith({
@@ -200,7 +202,9 @@ describe('DatatableComponent', () => {
       />
     );
 
-    wrapper.find('[data-test-subj="lensDatatableFilterFor"]').at(3).simulate('click');
+    wrapper.find('[data-test-subj="dataGridRowCell"]').at(1).simulate('focus');
+
+    wrapper.find('[data-test-subj="lensDatatableFilterFor"]').first().simulate('click');
 
     expect(onDispatchEvent).toHaveBeenCalledWith({
       name: 'filter',
@@ -278,7 +282,9 @@ describe('DatatableComponent', () => {
       />
     );
 
-    wrapper.find('[data-test-subj="lensDatatableFilterFor"]').at(1).simulate('click');
+    wrapper.find('[data-test-subj="dataGridRowCell"]').at(0).simulate('focus');
+
+    wrapper.find('[data-test-subj="lensDatatableFilterFor"]').first().simulate('click');
 
     expect(onDispatchEvent).toHaveBeenCalledWith({
       name: 'filter',

x-pack/test/accessibility/apps/lens.ts

@@ -44,8 +44,8 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
 
       await PageObjects.lens.configureDimension({
         dimension: 'lnsXY_xDimensionPanel > lns-empty-dimension',
-        operation: 'date_histogram',
-        field: 'timestamp',
+        operation: 'terms',
+        field: 'DestCityName',
       });
 
       await PageObjects.lens.configureDimension({