Fix expanding document when using saved search data grid (#92999) (#9…

…3523) Co-authored-by: Matthias Wilhelm <matthias.wilhelm@elastic.co>
elastic · Mar 4, 2021 · faadbce · faadbce
1 parent 7b50a6a
commit faadbce
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 15 deletions.
diff --git a/src/plugins/discover/public/application/components/create_discover_grid_directive.tsx b/src/plugins/discover/public/application/components/create_discover_grid_directive.tsx
@@ -6,19 +6,27 @@
  * Side Public License, v 1.
  */
 
-import * as React from 'react';
+import React, { useState } from 'react';
 import { I18nProvider } from '@kbn/i18n/react';
 import { DiscoverGrid, DiscoverGridProps } from './discover_grid/discover_grid';
 import { getServices } from '../../kibana_services';
+import { ElasticSearchHit } from '../doc_views/doc_views_types';
 
 export const DataGridMemoized = React.memo((props: DiscoverGridProps) => (
   <DiscoverGrid {...props} />
 ));
 
 export function DiscoverGridEmbeddable(props: DiscoverGridProps) {
+  const [expandedDoc, setExpandedDoc] = useState<ElasticSearchHit | undefined>(undefined);
+
   return (
     <I18nProvider>
-      <DataGridMemoized {...props} services={getServices()} />
+      <DataGridMemoized
+        {...props}
+        setExpandedDoc={setExpandedDoc}
+        expandedDoc={expandedDoc}
+        services={getServices()}
+      />
     </I18nProvider>
   );
 }

diff --git a/test/functional/apps/dashboard/embeddable_data_grid.ts b/test/functional/apps/dashboard/embeddable_data_grid.ts
@@ -16,6 +16,8 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
   const kibanaServer = getService('kibanaServer');
   const find = getService('find');
   const PageObjects = getPageObjects(['common', 'dashboard', 'header', 'timePicker', 'discover']);
+  const retry = getService('retry');
+  const dataGrid = getService('dataGrid');
 
   describe('dashboard embeddable data grid', () => {
     before(async () => {
@@ -31,22 +33,30 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
       await PageObjects.dashboard.gotoDashboardLandingPage();
       await PageObjects.dashboard.clickNewDashboard();
       await PageObjects.timePicker.setDefaultDataRange();
+      await dashboardAddPanel.addSavedSearch('Rendering-Test:-saved-search');
     });
 
-    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(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(3)`);
-        await PageObjects.common.sleep(250);
-        await find.clickByCssSelector(`[data-test-subj="filterForButton"]`);
-        const filterCount = await filterBar.getFilterCount();
-        expect(filterCount).to.equal(2);
+    it('should expand the detail row when the toggle arrow is clicked', async function () {
+      await retry.try(async function () {
+        await dataGrid.clickRowToggle({ isAnchorRow: false, rowIndex: 0 });
+        const detailsEl = await dataGrid.getDetailsRows();
+        const defaultMessageEl = await detailsEl[0].findByTestSubject('docTableRowDetailsTitle');
+        expect(defaultMessageEl).to.be.ok();
+        await dataGrid.closeFlyout();
       });
     });
+
+    it('are added when a cell filter is clicked', async function () {
+      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(3)`);
+      await PageObjects.common.sleep(250);
+      await find.clickByCssSelector(`[data-test-subj="filterForButton"]`);
+      const filterCount = await filterBar.getFilterCount();
+      expect(filterCount).to.equal(2);
+    });
   });
 }