[Discover] Change the signature

src/plugins/discover/public/components/discover_grid/discover_grid.tsx

@@ -30,9 +30,9 @@ import { DataViewFieldEditorStart } from '@kbn/data-view-field-editor-plugin/pub
 import { DocViewFilterFn } from '../../services/doc_views/doc_views_types';
 import { getSchemaDetectors } from './discover_grid_schema';
 import { DiscoverGridFlyout } from './discover_grid_flyout';
+import { DiscoverGridCellPopover } from './discover_grid_cell_popover';
 import { DiscoverGridContext } from './discover_grid_context';
 import { getRenderCellValueFn } from './get_render_cell_value';
-import { getRenderCellPopoverFn } from './get_render_cell_popover';
 import { DiscoverGridSettings } from './types';
 import {
   getEuiGridColumns,
@@ -379,8 +379,6 @@ export const DiscoverGrid = ({
     [dataView, displayedRows, useNewFieldsApi, shouldShowFieldHandler, services.uiSettings]
   );
 
-  const renderCellPopover = useMemo(() => getRenderCellPopoverFn(), []);
-
   /**
    * Render variables
    */
@@ -602,7 +600,7 @@ export const DiscoverGrid = ({
             onColumnResize={onResize}
             pagination={paginationObj}
             renderCellValue={renderCellValue}
-            renderCellPopover={renderCellPopover}
+            renderCellPopover={DiscoverGridCellPopover}
             ref={dataGridRef}
             rowCount={rowCount}
             schemaDetectors={schemaDetectors}

src/plugins/discover/public/components/discover_grid/get_render_cell_popover.test.tsx → src/plugins/discover/public/components/discover_grid/discover_grid_cell_popover.test.tsx

@@ -8,13 +8,9 @@
 
 import React from 'react';
 import { mount } from 'enzyme';
-import { getRenderCellPopoverFn } from './get_render_cell_popover';
-import { EuiDataGridCellPopoverElementProps } from '@elastic/eui';
+import { DiscoverGridCellPopover } from './discover_grid_cell_popover';
 
 describe('Discover grid cell popover rendering', function () {
-  const DiscoverGridCellPopover = getRenderCellPopoverFn() as React.FC<
-    Pick<EuiDataGridCellPopoverElementProps, 'cellActions' | 'setCellPopoverProps'>
-  >;
   const CellValue = ({ schema }: { schema: string }) => {
     return <div>{schema}</div>;
   };

src/plugins/discover/public/components/discover_grid/discover_grid_cell_popover.tsx

@@ -0,0 +1,39 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import React, { useEffect } from 'react';
+import { css } from '@emotion/react';
+import classnames from 'classnames';
+import { EuiDataGridCellPopoverElementProps, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+
+const containerStyles = css`
+  height: 100%;
+`;
+
+export const DiscoverGridCellPopover: React.FC<
+  Pick<EuiDataGridCellPopoverElementProps, 'cellActions' | 'setCellPopoverProps'>
+> = ({ cellActions, setCellPopoverProps, children }) => {
+  useEffect(() => {
+    setCellPopoverProps({
+      panelClassName: classnames('dscDiscoverGrid__cellPopover', {
+        'dscDiscoverGrid__cellPopover--withJson':
+          children &&
+          typeof children === 'object' &&
+          'props' in children &&
+          children.props?.schema === 'kibana-json',
+      }),
+    });
+  }, [setCellPopoverProps, children]);
+
+  return (
+    <EuiFlexGroup responsive={false} direction="column" gutterSize="none" css={containerStyles}>
+      <EuiFlexItem grow={true}>{children}</EuiFlexItem>
+      <EuiFlexItem grow={false}>{cellActions}</EuiFlexItem>
+    </EuiFlexGroup>
+  );
+};