Table: Improve JSON rendering in inspect for JSON strings (#114189)

This commit is contained in:
Paul Marbach
2025-11-19 19:38:06 -05:00
committed by GitHub
parent 5754d7fbad
commit 946e6d9641
3 changed files with 23 additions and 4 deletions
@@ -94,9 +94,18 @@ exports[`TableNG utils buildInspectValue should handle string 1`] = `
]
`;
exports[`TableNG utils buildInspectValue should handle string w/ JSON (invalid JSON) 1`] = `
[
""{\\"invalid\\": \\"json"",
"code",
]
`;
exports[`TableNG utils buildInspectValue should handle string w/ JSON 1`] = `
[
""baz"",
"{
"valid": "json"
}",
"code",
]
`;
@@ -1619,6 +1619,7 @@ describe('TableNG utils', () => {
};
const jsonStringField: Field = {
...stringField,
values: ['{"valid": "json"}', '{"invalid": "json', null, '{"another": "one"}'],
config: { custom: { cellOptions: { type: TableCellDisplayMode.JSONView } } },
};
const booleanField: Field = {
@@ -1675,11 +1676,12 @@ describe('TableNG utils', () => {
it.each([
{ name: 'numbers', input: { valueIdx: 0, field: numberFieldWithNulls } },
{ name: 'string', input: { valueIdx: 0, field: stringField } },
{ name: 'string w/ JSON', input: { valueIdx: 2, field: jsonStringField } },
{ name: 'string w/ JSON', input: { valueIdx: 0, field: jsonStringField } },
{ name: 'string w/ JSON (invalid JSON)', input: { valueIdx: 1, field: jsonStringField } },
{ name: 'boolean', input: { valueIdx: 0, field: booleanField } },
{ name: 'NaN', input: { valueIdx: 4, field: numberFieldWithNulls } },
{ name: 'null', input: { valueIdx: 3, field: numberFieldWithNulls } },
{ name: 'null w/ JSON', input: { valueIdx: 3, field: jsonStringField } },
{ name: 'null w/ JSON', input: { valueIdx: 2, field: jsonStringField } },
{ name: 'undefined', input: { valueIdx: 6, field: numberFieldWithNulls } },
{ name: 'sparkline', input: { valueIdx: 0, field: sparklineField } },
{ name: 'sparkline (no x)', input: { valueIdx: 0, field: sparklineFieldNoX } },
@@ -1049,7 +1049,15 @@ export function buildInspectValue(value: unknown, field: Field): [string, TableC
inspectValue += ']';
mode = TableCellInspectorMode.code;
} else if (cellOptions.type === TableCellDisplayMode.JSONView || Array.isArray(value) || isPlainObject(value)) {
inspectValue = JSON.stringify(value, null, ' ');
let toStringify = value;
if (typeof value === 'string') {
try {
toStringify = JSON.parse(value);
} catch {
// do nothing, toStringify will stay as the raw string
}
}
inspectValue = JSON.stringify(toStringify, null, ' ');
mode = TableCellInspectorMode.code;
} else {
inspectValue = String(value ?? '');