Replace EuiCodeBlock with JsonCodeEditor in DiscoverGrid (#92442)

* Replace EuiCodeBlock with JsonCodeEditor in DiscoverGrid

* Add optional "hasLineNumbers" property to JsonCodeEditor and removed line numbers from the popover

* Update json_code_editor snapshot

* Add functional test for cell expanded content popover

* Remove unused code

* Fix geo point case and refactor some code

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

Author: DianaDerevyankina

src/plugins/discover/public/application/components/discover_grid/constants.ts

@@ -24,3 +24,5 @@ export const toolbarVisibility = {
   },
   showStyleSelector: false,
 };
+
+export const defaultMonacoEditorWidth = 370;

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

@@ -22,7 +22,7 @@ import {
 } from '@elastic/eui';
 import { IndexPattern } from '../../../kibana_services';
 import { DocViewFilterFn, ElasticSearchHit } from '../../doc_views/doc_views_types';
-import { getPopoverContents, getSchemaDetectors } from './discover_grid_schema';
+import { getSchemaDetectors } from './discover_grid_schema';
 import { DiscoverGridFlyout } from './discover_grid_flyout';
 import { DiscoverGridContext } from './discover_grid_context';
 import { getRenderCellValueFn } from './get_render_cell_value';
@@ -36,6 +36,7 @@ import {
 import { defaultPageSize, gridStyle, pageSizeArr, toolbarVisibility } from './constants';
 import { DiscoverServices } from '../../../build_services';
 import { getDisplayedColumns } from '../../helpers/columns';
+import { KibanaContextProvider } from '../../../../../kibana_react/public';
 
 interface SortObj {
   id: string;
@@ -219,7 +220,6 @@ export const DiscoverGrid = ({
     [displayedColumns, indexPattern, showTimeCol, settings, defaultColumns]
   );
   const schemaDetectors = useMemo(() => getSchemaDetectors(), []);
-  const popoverContents = useMemo(() => getPopoverContents(), []);
   const columnsVisibility = useMemo(
     () => ({
       visibleColumns: getVisibleColumns(displayedColumns, indexPattern, showTimeCol) as string[],
@@ -259,34 +259,35 @@ export const DiscoverGrid = ({
       }}
     >
       <>
-        <EuiDataGridMemoized
-          aria-describedby={randomId}
-          aria-labelledby={ariaLabelledBy}
-          columns={euiGridColumns}
-          columnVisibility={columnsVisibility}
-          data-test-subj="docTable"
-          gridStyle={gridStyle as EuiDataGridStyle}
-          leadingControlColumns={lead}
-          onColumnResize={(col: { columnId: string; width: number }) => {
-            if (onResize) {
-              onResize(col);
+        <KibanaContextProvider services={{ uiSettings: services.uiSettings }}>
+          <EuiDataGridMemoized
+            aria-describedby={randomId}
+            aria-labelledby={ariaLabelledBy}
+            columns={euiGridColumns}
+            columnVisibility={columnsVisibility}
+            data-test-subj="docTable"
+            gridStyle={gridStyle as EuiDataGridStyle}
+            leadingControlColumns={lead}
+            onColumnResize={(col: { columnId: string; width: number }) => {
+              if (onResize) {
+                onResize(col);
+              }
+            }}
+            pagination={paginationObj}
+            renderCellValue={renderCellValue}
+            rowCount={rowCount}
+            schemaDetectors={schemaDetectors}
+            sorting={sorting as EuiDataGridSorting}
+            toolbarVisibility={
+              defaultColumns
+                ? {
+                    ...toolbarVisibility,
+                    showColumnSelector: false,
+                  }
+                : toolbarVisibility
             }
-          }}
-          pagination={paginationObj}
-          popoverContents={popoverContents}
-          renderCellValue={renderCellValue}
-          rowCount={rowCount}
-          schemaDetectors={schemaDetectors}
-          sorting={sorting as EuiDataGridSorting}
-          toolbarVisibility={
-            defaultColumns
-              ? {
-                  ...toolbarVisibility,
-                  showColumnSelector: false,
-                }
-              : toolbarVisibility
-          }
-        />
+          />
+        </KibanaContextProvider>
 
         {showDisclaimer && (
           <p className="dscDiscoverGrid__footer">

src/plugins/discover/public/application/components/discover_grid/discover_grid_schema.tsx renamed to src/plugins/discover/public/application/components/discover_grid/discover_grid_schema.ts

@@ -6,8 +6,6 @@
  * Side Public License, v 1.
  */
 
-import React from 'react';
-import { EuiCodeBlock, EuiDataGridPopoverContents } from '@elastic/eui';
 import { kibanaJSON } from './constants';
 import { KBN_FIELD_TYPES } from '../../../../../data/common';
 
@@ -43,18 +41,3 @@ export function getSchemaDetectors() {
     },
   ];
 }
-
-/**
- * Returns custom popover content for certain schemas
- */
-export function getPopoverContents(): EuiDataGridPopoverContents {
-  return {
-    [kibanaJSON]: ({ children }) => {
-      return (
-        <EuiCodeBlock isCopyable language="json" paddingSize="none" transparentBackground={true}>
-          {children}
-        </EuiCodeBlock>
-      );
-    },
-  };
-}

src/plugins/discover/public/application/components/discover_grid/get_render_cell_value.test.tsx

@@ -7,10 +7,25 @@
  */
 
 import React from 'react';
-import { shallow } from 'enzyme';
+import { ReactWrapper, shallow } from 'enzyme';
 import { getRenderCellValueFn } from './get_render_cell_value';
 import { indexPatternMock } from '../../../__mocks__/index_pattern';
 
+jest.mock('../../../../../kibana_react/public', () => ({
+  useUiSetting: () => true,
+  withKibana: (comp: ReactWrapper) => {
+    return comp;
+  },
+}));
+
+jest.mock('../../../kibana_services', () => ({
+  getServices: () => ({
+    uiSettings: {
+      get: jest.fn(),
+    },
+  }),
+}));
+
 const rowsSource = [
   {
     _id: '1',
@@ -139,20 +154,25 @@ describe('Discover grid cell rendering', function () {
         setCellProps={jest.fn()}
       />
     );
-    expect(component.html()).toMatchInlineSnapshot(`
-      "<span>{
-        &quot;_id&quot;: &quot;1&quot;,
-        &quot;_index&quot;: &quot;test&quot;,
-        &quot;_type&quot;: &quot;test&quot;,
-        &quot;_score&quot;: 1,
-        &quot;_source&quot;: {
-          &quot;bytes&quot;: 100,
-          &quot;extension&quot;: &quot;.gz&quot;
-        },
-        &quot;highlight&quot;: {
-          &quot;extension&quot;: &quot;@kibana-highlighted-field.gz@/kibana-highlighted-field&quot;
+    expect(component).toMatchInlineSnapshot(`
+      <JsonCodeEditor
+        json={
+          Object {
+            "_id": "1",
+            "_index": "test",
+            "_score": 1,
+            "_source": Object {
+              "bytes": 100,
+              "extension": ".gz",
+            },
+            "_type": "test",
+            "highlight": Object {
+              "extension": "@kibana-highlighted-field.gz@/kibana-highlighted-field",
+            },
+          }
         }
-      }</span>"
+        width={370}
+      />
     `);
   });
 
@@ -226,24 +246,30 @@ describe('Discover grid cell rendering', function () {
         setCellProps={jest.fn()}
       />
     );
-    expect(component.html()).toMatchInlineSnapshot(`
-      "<span>{
-        &quot;_id&quot;: &quot;1&quot;,
-        &quot;_index&quot;: &quot;test&quot;,
-        &quot;_type&quot;: &quot;test&quot;,
-        &quot;_score&quot;: 1,
-        &quot;fields&quot;: {
-          &quot;bytes&quot;: [
-            100
-          ],
-          &quot;extension&quot;: [
-            &quot;.gz&quot;
-          ]
-        },
-        &quot;highlight&quot;: {
-          &quot;extension&quot;: &quot;@kibana-highlighted-field.gz@/kibana-highlighted-field&quot;
+    expect(component).toMatchInlineSnapshot(`
+      <JsonCodeEditor
+        json={
+          Object {
+            "_id": "1",
+            "_index": "test",
+            "_score": 1,
+            "_source": undefined,
+            "_type": "test",
+            "fields": Object {
+              "bytes": Array [
+                100,
+              ],
+              "extension": Array [
+                ".gz",
+              ],
+            },
+            "highlight": Object {
+              "extension": "@kibana-highlighted-field.gz@/kibana-highlighted-field",
+            },
+          }
         }
-      }</span>"
+        width={370}
+      />
     `);
   });
 

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

@@ -19,14 +19,16 @@ import {
 import { IndexPattern } from '../../../kibana_services';
 import { ElasticSearchHit } from '../../doc_views/doc_views_types';
 import { DiscoverGridContext } from './discover_grid_context';
+import { JsonCodeEditor } from '../json_code_editor/json_code_editor';
+import { defaultMonacoEditorWidth } from './constants';
 
 export const getRenderCellValueFn = (
   indexPattern: IndexPattern,
   rows: ElasticSearchHit[] | undefined,
   rowsFlattened: Array<Record<string, unknown>>,
   useNewFieldsApi: boolean
 ) => ({ rowIndex, columnId, isDetails, setCellProps }: EuiDataGridCellValueElementProps) => {
-  const row = rows ? (rows[rowIndex] as Record<string, unknown>) : undefined;
+  const row = rows ? rows[rowIndex] : undefined;
   const rowFlattened = rowsFlattened
     ? (rowsFlattened[rowIndex] as Record<string, unknown>)
     : undefined;
@@ -106,10 +108,18 @@ export const getRenderCellValueFn = (
     );
   }
 
+  if (typeof rowFlattened[columnId] === 'object' && isDetails) {
+    return (
+      <JsonCodeEditor
+        json={rowFlattened[columnId] as Record<string, any>}
+        width={defaultMonacoEditorWidth}
+      />
+    );
+  }
+
   if (field && field.type === '_source') {
     if (isDetails) {
-      // nicely formatted JSON for the expanded view
-      return <span>{JSON.stringify(row, null, 2)}</span>;
+      return <JsonCodeEditor json={row} width={defaultMonacoEditorWidth} />;
     }
     const formatted = indexPattern.formatHit(row);
 

src/plugins/discover/public/application/components/json_code_editor/__snapshots__/json_code_editor.test.tsx.snap

@@ -18,5 +18,5 @@ it('returns the `JsonCodeEditor` component', () => {
     _score: 1,
     _source: { test: 123 },
   };
-  expect(shallow(<JsonCodeEditor hit={value} />)).toMatchSnapshot();
+  expect(shallow(<JsonCodeEditor json={value} />)).toMatchSnapshot();
 });

src/plugins/discover/public/application/components/json_code_editor/json_code_editor.test.tsx

@@ -13,7 +13,6 @@ import { i18n } from '@kbn/i18n';
 import { monaco, XJsonLang } from '@kbn/monaco';
 import { EuiButtonEmpty, EuiCopy, EuiFlexGroup, EuiFlexItem, EuiSpacer } from '@elastic/eui';
 import { CodeEditor } from '../../../../../kibana_react/public';
-import { DocViewRenderProps } from '../../../application/doc_views/doc_views_types';
 
 const codeEditorAriaLabel = i18n.translate('discover.json.codeEditorAriaLabel', {
   defaultMessage: 'Read only JSON view of an elasticsearch document',
@@ -22,8 +21,14 @@ const copyToClipboardLabel = i18n.translate('discover.json.copyToClipboardLabel'
   defaultMessage: 'Copy to clipboard',
 });
 
-export const JsonCodeEditor = ({ hit }: DocViewRenderProps) => {
-  const jsonValue = JSON.stringify(hit, null, 2);
+interface JsonCodeEditorProps {
+  json: Record<string, any>;
+  width?: string | number;
+  hasLineNumbers?: boolean;
+}
+
+export const JsonCodeEditor = ({ json, width, hasLineNumbers }: JsonCodeEditorProps) => {
+  const jsonValue = JSON.stringify(json, null, 2);
 
   // setting editor height based on lines height and count to stretch and fit its content
   const setEditorCalculatedHeight = useCallback((editor) => {
@@ -43,7 +48,7 @@ export const JsonCodeEditor = ({ hit }: DocViewRenderProps) => {
 
   return (
     <EuiFlexGroup className="dscJsonCodeEditor" direction="column" gutterSize="s">
-      <EuiFlexItem grow={true}>
+      <EuiFlexItem>
         <EuiSpacer size="s" />
         <div className="eui-textRight">
           <EuiCopy textToCopy={jsonValue}>
@@ -55,16 +60,18 @@ export const JsonCodeEditor = ({ hit }: DocViewRenderProps) => {
           </EuiCopy>
         </div>
       </EuiFlexItem>
-      <EuiFlexItem grow={true}>
+      <EuiFlexItem>
         <CodeEditor
           languageId={XJsonLang.ID}
+          width={width}
           value={jsonValue}
           onChange={() => {}}
           editorDidMount={setEditorCalculatedHeight}
           aria-label={codeEditorAriaLabel}
           options={{
             automaticLayout: true,
             fontSize: 12,
+            lineNumbers: hasLineNumbers ? 'on' : 'off',
             minimap: {
               enabled: false,
             },

src/plugins/discover/public/application/components/json_code_editor/json_code_editor.tsx

@@ -7,6 +7,7 @@
  */
 
 import { i18n } from '@kbn/i18n';
+import React from 'react';
 import angular, { auto } from 'angular';
 import { BehaviorSubject } from 'rxjs';
 import { filter, map } from 'rxjs/operators';
@@ -187,7 +188,7 @@ export class DiscoverPlugin
         defaultMessage: 'JSON',
       }),
       order: 20,
-      component: JsonCodeEditor,
+      component: ({ hit }) => <JsonCodeEditor json={hit} hasLineNumbers />,
     });
 
     const {