[9.0] [Discover][ES|QL] Fix JSON view for ES|QL record in DocViewer (#216642) (#216885)

# Backport This will backport the following commits from `main` to `9.0`: - [[Discover][ES|QL] Fix JSON view for ES|QL record in DocViewer (#216642)](https://github.com/elastic/kibana/pull/216642)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sorenlouv/backport)  Co-authored-by: Julia Rechkunova <julia.rechkunova@elastic.co>
2025-04-23 17:28:26 -04:00 · 2025-04-02 20:19:43 +02:00 · 2025-04-02 20:19:43 +02:00 · c46210f690
commit c46210f690
parent d1ba622e36
5 changed files with 58 additions and 25 deletions
--- a/src/platform/plugins/shared/unified_doc_viewer/public/components/doc_viewer_source/source.test.tsx
+++ b/src/platform/plugins/shared/unified_doc_viewer/public/components/doc_viewer_source/source.test.tsx
@ -16,6 +16,10 @@ import * as useUiSettingHook from '@kbn/kibana-react-plugin/public/ui_settings/u
 import { EuiButton, EuiEmptyPrompt, EuiLoadingSpinner } from '@elastic/eui';
 import { JsonCodeEditorCommon } from '../json_code_editor';
 import { buildDataTableRecord } from '@kbn/discover-utils';
+import { mockUnifiedDocViewerServices } from '../../__mocks__';
+import { setUnifiedDocViewerServices } from '../../plugin';
+
+setUnifiedDocViewerServices(mockUnifiedDocViewerServices);

 const mockDataView = {
  getComputedFields: () => [],
@ -94,4 +98,35 @@ describe('Source Viewer component', () => {
    expect(jsonCodeEditor.props().hasLineNumbers).toBe(true);
    expect(jsonCodeEditor.props().enableFindAction).toBe(true);
  });
+
+  test('renders json code editor for ES|QL record', () => {
+    const record = {
+      _index: 'logstash-2014.09.09',
+      _id: 'id123',
+      message: 'Lorem ipsum dolor sit amet',
+      extension: 'html',
+    };
+    const mockHit = {
+      id: '22',
+      raw: record,
+      flattened: record,
+    };
+    jest.spyOn(useUiSettingHook, 'useUiSetting').mockImplementation(() => {
+      return false;
+    });
+    const comp = mountWithIntl(
+      <DocViewerSource
+        id={mockHit.id}
+        index={'index1'}
+        dataView={mockDataView}
+        esqlHit={mockHit}
+        width={123}
+        onRefresh={() => {}}
+      />
+    );
+    const jsonCodeEditor = comp.find(JsonCodeEditorCommon);
+    expect(jsonCodeEditor).not.toBe(null);
+    expect(jsonCodeEditor.props().jsonValue).toContain('message');
+    expect(jsonCodeEditor.props().jsonValue).toContain('_id');
+  });
 });
--- a/src/platform/plugins/shared/unified_doc_viewer/public/components/doc_viewer_source/source.tsx
+++ b/src/platform/plugins/shared/unified_doc_viewer/public/components/doc_viewer_source/source.tsx
@ -26,7 +26,7 @@ interface SourceViewerProps {
  id: string;
  index: string | undefined;
  dataView: DataView;
-  textBasedHits?: DataTableRecord[];
+  esqlHit?: DataTableRecord;
  width?: number;
  decreaseAvailableHeightBy?: number;
  onRefresh: () => void;
@ -39,7 +39,7 @@ export const DocViewerSource = ({
  id,
  index,
  dataView,
-  textBasedHits,
+  esqlHit,
  width,
  decreaseAvailableHeightBy,
  onRefresh,
@ -51,7 +51,7 @@ export const DocViewerSource = ({
    id,
    index,
    dataView,
-    textBasedHits,
+    esqlHit,
  });

  useEffect(() => {
--- a/src/platform/plugins/shared/unified_doc_viewer/public/hooks/use_es_doc_search.test.tsx
+++ b/src/platform/plugins/shared/unified_doc_viewer/public/hooks/use_es_doc_search.test.tsx
@ -12,7 +12,7 @@ import { type EsDocSearchProps, buildSearchBody, useEsDocSearch } from './use_es
 import { Subject } from 'rxjs';
 import type { DataView } from '@kbn/data-views-plugin/public';
 import { ElasticRequestState } from '@kbn/unified-doc-viewer';
-import { buildDataTableRecord } from '@kbn/discover-utils';
+import { buildDataTableRecord, DataTableRecord } from '@kbn/discover-utils';
 import { setUnifiedDocViewerServices } from '../plugin';
 import { UnifiedDocViewerServices } from '../types';

@ -206,18 +206,16 @@ describe('Test of <Doc /> helper / hook', () => {
      getComputedFields: () => [],
      getIndexPattern: () => index,
    };
-    const props = {
+    const props: EsDocSearchProps = {
      id: '1',
      index: 'index1',
-      dataView,
-      textBasedHits: [
-        {
-          id: '1',
-          raw: { field1: 1, field2: 2 },
-          flattened: { field1: 1, field2: 2 },
-        },
-      ],
-    } as unknown as EsDocSearchProps;
+      dataView: dataView as unknown as EsDocSearchProps['dataView'],
+      esqlHit: {
+        id: '1',
+        raw: { field1: 1, field2: 2 },
+        flattened: { field1: 1, field2: 2 },
+      } as DataTableRecord,
+    };

    const hook = renderHook((p: EsDocSearchProps) => useEsDocSearch(p), {
      initialProps: props,
--- a/src/platform/plugins/shared/unified_doc_viewer/public/hooks/use_es_doc_search.ts
+++ b/src/platform/plugins/shared/unified_doc_viewer/public/hooks/use_es_doc_search.ts
@ -33,9 +33,9 @@ export interface EsDocSearchProps {
   */
  dataView: DataView;
  /**
-   * Records fetched from text based query
+   * Record fetched from ES|QL query
   */
-  textBasedHits?: DataTableRecord[];
+  esqlHit?: DataTableRecord;
  /**
   * An optional callback that will be called before fetching the doc
   */
@ -54,7 +54,7 @@ export function useEsDocSearch({
  id,
  index,
  dataView,
-  textBasedHits,
+  esqlHit,
  onBeforeFetch,
  onProcessRecord,
 }: EsDocSearchProps): [ElasticRequestState, DataTableRecord | null, () => void] {
@ -111,16 +111,13 @@ export function useEsDocSearch({
  }, [analytics, data.search, dataView, id, index, onBeforeFetch, onProcessRecord]);

  useEffect(() => {
-    if (textBasedHits) {
-      const selectedHit = textBasedHits?.find((r) => r.id === id);
-      if (selectedHit) {
-        setStatus(ElasticRequestState.Found);
-        setHit(selectedHit);
-      }
+    if (esqlHit) {
+      setStatus(ElasticRequestState.Found);
+      setHit(esqlHit);
    } else {
      requestData();
    }
-  }, [id, requestData, textBasedHits]);
+  }, [id, requestData, esqlHit]);

  return [status, hit, requestData];
 }
--- a/src/platform/plugins/shared/unified_doc_viewer/public/plugin.tsx
+++ b/src/platform/plugins/shared/unified_doc_viewer/public/plugin.tsx
@ -77,7 +77,10 @@ export class UnifiedDocViewerPublicPlugin
            index={hit.raw._index}
            id={hit.raw._id ?? hit.id}
            dataView={dataView}
-            textBasedHits={textBasedHits}
+            // If ES|QL query changes, then textBasedHits will update too.
+            // This is a workaround to reuse the previously referred hit
+            // so the doc viewer preserves the state even after the record disappears from hits list.
+            esqlHit={Array.isArray(textBasedHits) ? hit : undefined}
            decreaseAvailableHeightBy={decreaseAvailableHeightBy}
            onRefresh={() => {}}
          />