[Discover] Fix unmapped field document explorer rendering (#123174)

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

@@ -600,4 +600,64 @@ describe('Discover grid cell rendering', function () {
     );
     expect(component.html()).toMatchInlineSnapshot(`"<span>-</span>"`);
   });
+
+  it('renders unmapped fields correctly', () => {
+    (indexPatternMock.getFieldByName as jest.Mock).mockReturnValueOnce(undefined);
+    const rowsFieldsUnmapped: ElasticSearchHit[] = [
+      {
+        _id: '1',
+        _index: 'test',
+        _score: 1,
+        _source: undefined,
+        fields: { unmapped: ['.gz'] },
+        highlight: {
+          extension: ['@kibana-highlighted-field.gz@/kibana-highlighted-field'],
+        },
+      },
+    ];
+    const DiscoverGridCellValue = getRenderCellValueFn(
+      indexPatternMock,
+      rowsFieldsUnmapped,
+      rowsFieldsUnmapped.map(flatten),
+      true,
+      ['unmapped'],
+      100
+    );
+    const component = shallow(
+      <DiscoverGridCellValue
+        rowIndex={0}
+        columnId="unmapped"
+        isDetails={false}
+        isExpanded={false}
+        isExpandable={true}
+        setCellProps={jest.fn()}
+      />
+    );
+    expect(component).toMatchInlineSnapshot(`
+      <Fragment>
+        .gz
+      </Fragment>
+    `);
+
+    const componentWithDetails = shallow(
+      <DiscoverGridCellValue
+        rowIndex={0}
+        columnId="unmapped"
+        isDetails={true}
+        isExpanded={false}
+        isExpandable={true}
+        setCellProps={jest.fn()}
+      />
+    );
+    expect(componentWithDetails).toMatchInlineSnapshot(`
+      <JsonCodeEditor
+        json={
+          Array [
+            ".gz",
+          ]
+        }
+        width={370}
+      />
+    `);
+  });
 });

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

@@ -169,10 +169,15 @@ export const getRenderCellValueFn =
     if (!field?.type && rowFlattened && typeof rowFlattened[columnId] === 'object') {
       if (isDetails) {
         // nicely formatted JSON for the expanded view
-        return <span>{JSON.stringify(rowFlattened[columnId], null, 2)}</span>;
+        return (
+          <JsonCodeEditor
+            json={rowFlattened[columnId] as Record<string, unknown>}
+            width={defaultMonacoEditorWidth}
+          />
+        );
       }
 
-      return <span>{JSON.stringify(rowFlattened[columnId])}</span>;
+      return <>{formatFieldValue(rowFlattened[columnId], row, indexPattern, field)}</>;
     }
 
     return (