{props.fields.map((f, i) => {
- try{
+ try {
const parsedJson = JSON.parse(f[1]);
+ // Nulls, booleans, strings, and numbers can all be parsed as JSON, but we don't care
+ // about rendering those using CodeMirror. Note that `typeOf null` returns 'object'
+ if (parsedJson === null || typeof parsedJson !== 'object') {
+ throw new Error('Parsed JSON was neither an array nor an object. Using default renderer');
+ }
return (
{f[0]}
@@ -74,7 +79,7 @@ export default (props: DetailsTableProps) => {
);
} catch (err) {
- // If the value isn't JSON, just display it as is
+ // If the value isn't a JSON object, just display it as is
return (
{f[0]}
diff --git a/frontend/src/components/__snapshots__/DetailsTable.test.tsx.snap b/frontend/src/components/__snapshots__/DetailsTable.test.tsx.snap
index c3927718275..6ba6b42d71f 100644
--- a/frontend/src/components/__snapshots__/DetailsTable.test.tsx.snap
+++ b/frontend/src/components/__snapshots__/DetailsTable.test.tsx.snap
@@ -1,5 +1,174 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
+exports[`DetailsTable does not render booleans as JSON 1`] = `
+
+
+
+
+ key1
+
+
+ true
+
+
+
+
+ key2
+
+
+ false
+
+
+
+
+`;
+
+exports[`DetailsTable does not render nulls as JSON 1`] = `
+
+
+
+
+ key
+
+
+ null
+
+
+
+
+`;
+
+exports[`DetailsTable does not render numbers as JSON 1`] = `
+
+
+
+`;
+
+exports[`DetailsTable does not render strings as JSON 1`] = `
+
+
+
+
+ key
+
+
+ "some string"
+
+
+
+
+`;
+
+exports[`DetailsTable does render arrays as JSON 1`] = `
+
+
+
+`;
+
+exports[`DetailsTable does render arrays as JSON 2`] = `
+
+
+
+`;
+
exports[`DetailsTable shows a row with a title 1`] = `