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

(cherry picked from commit 5238ba835a)

Co-authored-by: Matthias Wilhelm <matthias.wilhelm@elastic.co>
This commit is contained in:
Kibana Machine 2022-01-20 04:26:12 -05:00 committed by GitHub
parent 7436816cab
commit 5b0871891f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 67 additions and 2 deletions

View file

@ -605,4 +605,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}
/>
`);
});
});

View file

@ -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 (