[Discover] Enable EuiDataGrid (elastic#89264)

* Now the new EuiDataGrid based document table is the default

* Columns can be sorted by drag and drop

* Column width can be changed by drag and drop

* There's a fullscreen mode

* There's document selection

* There's document navigation in the flyover of a expanded document

* Sorting is much more user friendly, less confusing and sort order can be changed by drag and drop
# Conflicts:
#	test/functional/apps/discover/_discover.ts
#	x-pack/test/functional/apps/security/doc_level_security_roles.js
#	x-pack/test/functional/apps/security/field_level_security.js

src/plugins/discover/server/ui_settings.ts

@@ -157,7 +157,7 @@ export const uiSettings: Record<string, UiSettingsParams> = {
     name: i18n.translate('discover.advancedSettings.docTableVersionName', {
       defaultMessage: 'Use legacy table',
     }),
-    value: true,
+    value: false,
     description: i18n.translate('discover.advancedSettings.docTableVersionDescription', {
       defaultMessage:
         'Discover uses a new table layout that includes better data sorting, drag-and-drop columns, and a full screen ' +

test/accessibility/apps/discover.ts

@@ -23,6 +23,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
       await esArchiver.loadIfNeeded('logstash_functional');
       await kibanaServer.uiSettings.update({
         defaultIndex: 'logstash-*',
+        'doc_table:legacy': true,
       });
       await PageObjects.common.navigateToApp('discover');
       await PageObjects.timePicker.setDefaultAbsoluteRange();

test/examples/embeddables/dashboard.ts

@@ -117,7 +117,7 @@ export default function ({ getService, getPageObjects }: PluginFunctionalProvide
     });
 
     it('saved search', async () => {
-      await dashboardExpect.savedSearchRowCount(50);
+      await dashboardExpect.savedSearchRowCount(11);
     });
   });
 

test/functional/apps/context/_context_navigation.js

@@ -19,17 +19,23 @@ export default function ({ getService, getPageObjects }) {
   const browser = getService('browser');
   const docTable = getService('docTable');
   const PageObjects = getPageObjects(['common', 'context', 'discover', 'timePicker']);
+  const kibanaServer = getService('kibanaServer');
 
   describe('discover - context - back navigation', function contextSize() {
     before(async function () {
       await PageObjects.timePicker.setDefaultAbsoluteRangeViaUiSettings();
+      await kibanaServer.uiSettings.update({ 'doc_table:legacy': true });
       await PageObjects.common.navigateToApp('discover');
       for (const [columnName, value] of TEST_FILTER_COLUMN_NAMES) {
         await PageObjects.discover.clickFieldListItem(columnName);
         await PageObjects.discover.clickFieldListPlusFilter(columnName, value);
       }
     });
 
+    after(async function () {
+      await kibanaServer.uiSettings.replace({});
+    });
+
     it('should go back after loading', async function () {
       await retry.waitFor('user navigating to context and returning to discover', async () => {
         // navigate to the context view

test/functional/apps/context/_discover_navigation.js

@@ -30,10 +30,12 @@ export default function ({ getService, getPageObjects }) {
   const testSubjects = getService('testSubjects');
   const dashboardAddPanel = getService('dashboardAddPanel');
   const browser = getService('browser');
+  const kibanaServer = getService('kibanaServer');
 
   describe('context link in discover', () => {
     before(async () => {
       await PageObjects.timePicker.setDefaultAbsoluteRangeViaUiSettings();
+      await kibanaServer.uiSettings.update({ 'doc_table:legacy': true });
       await PageObjects.common.navigateToApp('discover');
 
       for (const columnName of TEST_COLUMN_NAMES) {
@@ -46,7 +48,7 @@ export default function ({ getService, getPageObjects }) {
       }
     });
     after(async () => {
-      await PageObjects.timePicker.resetDefaultAbsoluteRangeViaUiSettings();
+      await kibanaServer.uiSettings.replace({});
     });
 
     it('should open the context view with the selected document as anchor', async () => {

test/functional/apps/dashboard/dashboard_filter_bar.ts

@@ -11,6 +11,7 @@ import expect from '@kbn/expect';
 import { FtrProviderContext } from '../../ftr_provider_context';
 
 export default function ({ getService, getPageObjects }: FtrProviderContext) {
+  const dataGrid = getService('dataGrid');
   const dashboardExpect = getService('dashboardExpect');
   const dashboardAddPanel = getService('dashboardAddPanel');
   const testSubjects = getService('testSubjects');
@@ -173,8 +174,13 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
       it('are added when a cell magnifying glass is clicked', async function () {
         await dashboardAddPanel.addSavedSearch('Rendering-Test:-saved-search');
         await PageObjects.dashboard.waitForRenderComplete();
-        await testSubjects.click('docTableCellFilter');
-
+        const documentCell = await dataGrid.getCellElement(1, 3);
+        await documentCell.click();
+        const expandCellContentButton = await documentCell.findByClassName(
+          'euiDataGridRowCell__expandButtonIcon'
+        );
+        await expandCellContentButton.click();
+        await testSubjects.click('filterForButton');
         const filterCount = await filterBar.getFilterCount();
         expect(filterCount).to.equal(1);
       });

test/functional/apps/dashboard/dashboard_time_picker.ts

@@ -12,13 +12,13 @@ import { PIE_CHART_VIS_NAME } from '../../page_objects/dashboard_page';
 import { FtrProviderContext } from '../../ftr_provider_context';
 
 export default function ({ getService, getPageObjects }: FtrProviderContext) {
-  const dashboardExpect = getService('dashboardExpect');
   const pieChart = getService('pieChart');
   const dashboardVisualizations = getService('dashboardVisualizations');
   const PageObjects = getPageObjects(['dashboard', 'header', 'visualize', 'timePicker']);
   const browser = getService('browser');
   const log = getService('log');
   const kibanaServer = getService('kibanaServer');
+  const dataGrid = getService('dataGrid');
 
   describe('dashboard time picker', function describeIndexTests() {
     before(async function () {
@@ -49,14 +49,16 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
         name: 'saved search',
         fields: ['bytes', 'agent'],
       });
-      await dashboardExpect.docTableFieldCount(150);
+      const initialRows = await dataGrid.getDocTableRows();
+      expect(initialRows.length).to.be(11);
 
       // Set to time range with no data
       await PageObjects.timePicker.setAbsoluteRange(
         'Jan 1, 2000 @ 00:00:00.000',
         'Jan 1, 2000 @ 01:00:00.000'
       );
-      await dashboardExpect.docTableFieldCount(0);
+      const noResults = await dataGrid.hasNoResults();
+      expect(noResults).to.be.ok();
     });
 
     it('Timepicker start, end, interval values are set by url', async () => {

test/functional/apps/dashboard/embeddable_rendering.ts

@@ -64,7 +64,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
     // TODO add test for 'scripted filter and query' viz
     // TODO add test for 'animal weight linked to search' viz
     // TODO add test for the last vega viz
-    await dashboardExpect.savedSearchRowCount(50);
+    await dashboardExpect.savedSearchRowCount(11);
   };
 
   const expectNoDataRenders = async () => {

test/functional/apps/dashboard/saved_search_embeddable.ts

@@ -45,7 +45,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
       const marks = $('mark')
         .toArray()
         .map((mark) => $(mark).text());
-      expect(marks.length).to.be(50);
+      expect(marks.length).to.be(11);
     });
 
     it('removing a filter removes highlights', async function () {

test/functional/apps/discover/_data_grid_field_data.ts

@@ -45,9 +45,11 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
 
       it('the search term should be highlighted in the field data', async function () {
         // marks is the style that highlights the text in yellow
+        await PageObjects.discover.clickFieldListItemAdd('extension');
         const marks = await PageObjects.discover.getMarks();
-        expect(marks.length).to.be(50);
+        expect(marks.length).to.be.greaterThan(0);
         expect(marks.indexOf('php')).to.be(0);
+        await PageObjects.discover.clickFieldListItemRemove('extension');
       });
 
       it('search type:apache should show the correct hit count', async function () {

test/functional/apps/discover/_date_nanos_mixed.ts

@@ -33,14 +33,14 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
     });
 
     it('shows a list of records of indices with date & date_nanos fields in the right order', async function () {
-      const rowData1 = await PageObjects.discover.getDocTableIndex(1);
-      expect(rowData1.startsWith('Jan 1, 2019 @ 12:10:30.124000000')).to.be.ok();
-      const rowData2 = await PageObjects.discover.getDocTableIndex(3);
-      expect(rowData2.startsWith('Jan 1, 2019 @ 12:10:30.123498765')).to.be.ok();
-      const rowData3 = await PageObjects.discover.getDocTableIndex(5);
-      expect(rowData3.startsWith('Jan 1, 2019 @ 12:10:30.123456789')).to.be.ok();
-      const rowData4 = await PageObjects.discover.getDocTableIndex(7);
-      expect(rowData4.startsWith('Jan 1, 2019 @ 12:10:30.123000000')).to.be.ok();
+      const rowData1 = await PageObjects.discover.getDocTableField(1);
+      expect(rowData1).to.be('Jan 1, 2019 @ 12:10:30.124000000');
+      const rowData2 = await PageObjects.discover.getDocTableField(2);
+      expect(rowData2).to.be('Jan 1, 2019 @ 12:10:30.123498765');
+      const rowData3 = await PageObjects.discover.getDocTableField(3);
+      expect(rowData3).to.be('Jan 1, 2019 @ 12:10:30.123456789');
+      const rowData4 = await PageObjects.discover.getDocTableField(4);
+      expect(rowData4).to.be('Jan 1, 2019 @ 12:10:30.123000000');
     });
   });
 }

test/functional/apps/discover/_discover.ts

@@ -46,6 +46,9 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
         const time = await PageObjects.timePicker.getTimeConfig();
         expect(time.start).to.be(PageObjects.timePicker.defaultStartTime);
         expect(time.end).to.be(PageObjects.timePicker.defaultEndTime);
+        const rowData = await PageObjects.discover.getDocTableIndex(1);
+        log.debug('check the newest doc timestamp in UTC (check diff timezone in last test)');
+        expect(rowData).to.contain('Sep 22, 2015 @ 23:50:13.253');
       });
 
       it('save query should show toast message and display query name', async function () {
@@ -92,11 +95,15 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
         const time = await PageObjects.timePicker.getTimeConfig();
         expect(time.start).to.be('Sep 21, 2015 @ 09:00:00.000');
         expect(time.end).to.be('Sep 21, 2015 @ 12:00:00.000');
-        await retry.waitFor('doc table to contain the right search result', async () => {
-          const rowData = await PageObjects.discover.getDocTableField(1);
-          log.debug(`The first timestamp value in doc table: ${rowData}`);
-          return rowData.includes('Sep 21, 2015 @ 11:59:22.316');
-        });
+        await retry.waitForWithTimeout(
+          'doc table to contain the right search result',
+          1000,
+          async () => {
+            const rowData = await PageObjects.discover.getDocTableField(1);
+            log.debug(`The first timestamp value in doc table: ${rowData}`);
+            return rowData.includes('Sep 21, 2015 @ 11:59:22.316');
+          }
+        );
       });
 
       it('should modify the time range when the histogram is brushed', async function () {
@@ -323,7 +330,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
         await PageObjects.timePicker.setDefaultAbsoluteRangeViaUiSettings();
         await PageObjects.common.navigateToApp('discover');
         await PageObjects.discover.clickFieldListItemAdd('_score');
-        await PageObjects.discover.clickFieldSort('_score');
+        await PageObjects.discover.clickFieldSort('_score', 'Sort Low-High');
         const currentUrlWithScore = await browser.getCurrentUrl();
         expect(currentUrlWithScore).to.contain('_score');
         await PageObjects.discover.clickFieldListItemAdd('_score');
@@ -334,7 +341,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
         await PageObjects.timePicker.setDefaultAbsoluteRangeViaUiSettings();
         await PageObjects.common.navigateToApp('discover');
         await PageObjects.discover.clickFieldListItemAdd('referer');
-        await PageObjects.discover.clickFieldSort('referer');
+        await PageObjects.discover.clickFieldSort('referer', 'Sort A-Z');
         expect(await PageObjects.discover.getDocHeader()).to.have.string('Referer custom');
         expect(await PageObjects.discover.getAllFieldNames()).to.contain('Referer custom');
         const url = await browser.getCurrentUrl();

test/functional/apps/discover/_doc_navigation.ts

@@ -17,12 +17,23 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
   const PageObjects = getPageObjects(['common', 'discover', 'timePicker', 'context']);
   const esArchiver = getService('esArchiver');
   const retry = getService('retry');
+  const kibanaServer = getService('kibanaServer');
 
   describe('doc link in discover', function contextSize() {
-    beforeEach(async function () {
+    before(async () => {
       await esArchiver.loadIfNeeded('logstash_functional');
       await esArchiver.loadIfNeeded('discover');
       await PageObjects.timePicker.setDefaultAbsoluteRangeViaUiSettings();
+      await kibanaServer.uiSettings.update({
+        'doc_table:legacy': true,
+        'discover:searchFieldsFromSource': true,
+      });
+    });
+    after(async () => {
+      await kibanaServer.uiSettings.replace({});
+    });
+
+    beforeEach(async function () {
       await PageObjects.common.navigateToApp('discover');
       await PageObjects.discover.waitForDocTableLoadingComplete();
     });