[Discover] Add kibana services provider for embeddable (#121621)

* [Discover] add kibana services provider for embeddable * [Discover] add functional test * [Discover] fix functional test * [Discover] fix data grid test * [Discover] go to discover main page before each test * [Discover] remove redundant navigation to discover Co-authored-by: Kibana Machine <[email protected]>
elastic · Jan 10, 2022 · f5aa068 · f5aa068
1 parent b158055
commit f5aa068
Show file tree

Hide file tree

Showing 3 changed files with 77 additions and 16 deletions.
diff --git a/src/plugins/discover/public/embeddable/saved_search_grid.tsx b/src/plugins/discover/public/embeddable/saved_search_grid.tsx
@@ -12,6 +12,7 @@ import { DiscoverGrid, DiscoverGridProps } from '../components/discover_grid/dis
 import { getServices } from '../kibana_services';
 import { TotalDocuments } from '../application/main/components/total_documents/total_documents';
 import { ElasticSearchHit } from '../types';
+import { KibanaContextProvider } from '../../../kibana_react/public';
 
 export interface DiscoverGridEmbeddableProps extends DiscoverGridProps {
   totalHitCount: number;
@@ -22,25 +23,33 @@ export const DataGridMemoized = React.memo((props: DiscoverGridProps) => (
 ));
 
 export function DiscoverGridEmbeddable(props: DiscoverGridEmbeddableProps) {
+  const services = getServices();
   const [expandedDoc, setExpandedDoc] = useState<ElasticSearchHit | undefined>(undefined);
 
   return (
     <I18nProvider>
-      <EuiFlexGroup style={{ width: '100%' }} direction="column" gutterSize="xs" responsive={false}>
-        {props.totalHitCount !== 0 && (
-          <EuiFlexItem grow={false} style={{ alignSelf: 'flex-end' }}>
-            <TotalDocuments totalHitCount={props.totalHitCount} />
+      <KibanaContextProvider services={services}>
+        <EuiFlexGroup
+          style={{ width: '100%' }}
+          direction="column"
+          gutterSize="xs"
+          responsive={false}
+        >
+          {props.totalHitCount !== 0 && (
+            <EuiFlexItem grow={false} style={{ alignSelf: 'flex-end' }}>
+              <TotalDocuments totalHitCount={props.totalHitCount} />
+            </EuiFlexItem>
+          )}
+          <EuiFlexItem style={{ minHeight: 0 }}>
+            <DataGridMemoized
+              {...props}
+              setExpandedDoc={setExpandedDoc}
+              expandedDoc={expandedDoc}
+              services={services}
+            />
           </EuiFlexItem>
-        )}
-        <EuiFlexItem style={{ minHeight: 0 }}>
-          <DataGridMemoized
-            {...props}
-            setExpandedDoc={setExpandedDoc}
-            expandedDoc={expandedDoc}
-            services={getServices()}
-          />
-        </EuiFlexItem>
-      </EuiFlexGroup>
+        </EuiFlexGroup>
+      </KibanaContextProvider>
     </I18nProvider>
   );
 }
diff --git a/test/functional/apps/discover/_data_grid_doc_table.ts b/test/functional/apps/discover/_data_grid_doc_table.ts
@@ -17,7 +17,8 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
   const esArchiver = getService('esArchiver');
   const kibanaServer = getService('kibanaServer');
   const monacoEditor = getService('monacoEditor');
-  const PageObjects = getPageObjects(['common', 'discover', 'header', 'timePicker']);
+  const dashboardAddPanel = getService('dashboardAddPanel');
+  const PageObjects = getPageObjects(['common', 'discover', 'header', 'timePicker', 'dashboard']);
   const defaultSettings = {
     defaultIndex: 'logstash-*',
     'doc_table:legacy': false,
@@ -32,6 +33,9 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
       await esArchiver.loadIfNeeded('test/functional/fixtures/es_archiver/logstash_functional');
       await kibanaServer.uiSettings.replace(defaultSettings);
       await PageObjects.timePicker.setDefaultAbsoluteRangeViaUiSettings();
+    });
+
+    beforeEach(async () => {
       await PageObjects.common.navigateToApp('discover');
     });
 
@@ -101,6 +105,54 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
       );
     });
 
+    it('should show popover with expanded cell content by click on expand button on embeddable', async () => {
+      log.debug('open popover with expanded cell content to get json from the editor');
+      await PageObjects.timePicker.setDefaultAbsoluteRange();
+      await PageObjects.discover.waitUntilSearchingHasFinished();
+      await PageObjects.discover.saveSearch('expand-cell-search');
+
+      await PageObjects.common.navigateToApp('dashboard');
+      await PageObjects.dashboard.gotoDashboardLandingPage();
+      await PageObjects.dashboard.clickNewDashboard();
+      await PageObjects.header.waitUntilLoadingHasFinished();
+      await dashboardAddPanel.addSavedSearch('expand-cell-search');
+
+      await retry.waitForWithTimeout('timestamp matches expected doc', 5000, async () => {
+        const cell = await dataGrid.getCellElement(0, 2);
+        const text = await cell.getVisibleText();
+        log.debug(`row document timestamp: ${text}`);
+        return text === 'Sep 22, 2015 @ 23:50:13.253';
+      });
+      const docCell = await dataGrid.getCellElement(0, 3);
+      await docCell.click();
+      const expandCellContentButton = await docCell.findByClassName(
+        'euiDataGridRowCell__expandButtonIcon'
+      );
+      await expandCellContentButton.click();
+
+      let expandDocId = '';
+
+      await retry.waitForWithTimeout('expandDocId to be valid', 5000, async () => {
+        const text = await monacoEditor.getCodeEditorValue();
+        return (expandDocId = JSON.parse(text)._id) === 'AU_x3_g4GFA8no6QjkYX';
+      });
+      log.debug(`expanded document id: ${expandDocId}`);
+
+      await dataGrid.clickRowToggle();
+      await find.clickByCssSelectorWhenNotDisabled('#kbn_doc_viewer_tab_1');
+
+      await retry.waitForWithTimeout(
+        'document id in flyout matching the expanded document id',
+        5000,
+        async () => {
+          const text = await monacoEditor.getCodeEditorValue();
+          const flyoutJson = JSON.parse(text);
+          log.debug(`flyout document id: ${flyoutJson._id}`);
+          return flyoutJson._id === expandDocId;
+        }
+      );
+    });
+
     describe('expand a document row', function () {
       const rowToInspect = 1;
 

diff --git a/test/functional/services/data_grid.ts b/test/functional/services/data_grid.ts
@@ -155,7 +155,7 @@ export class DataGridService extends FtrService {
     options: SelectOptions = { isAnchorRow: false, rowIndex: 0 }
   ): Promise<void> {
     const row = await this.getRow(options);
-    const toggle = await row[0];
+    const toggle = await row[0].findByTestSubject('~docTableExpandToggleColumn');
     await toggle.click();
   }