Pretty print inputs and outputs json

frontend/src/components/DetailsTable.test.tsx

@@ -17,26 +17,26 @@
 import * as React from 'react';
 
 import DetailsTable from './DetailsTable';
-import { create } from 'react-test-renderer';
+import { shallow } from 'enzyme';
 
 describe('DetailsTable', () => {
   it('shows no rows', () => {
-    const tree = create(<DetailsTable fields={[]} />);
+    const tree = shallow(<DetailsTable fields={[]} />);
     expect(tree).toMatchSnapshot();
   });
 
   it('shows one row', () => {
-    const tree = create(<DetailsTable fields={[['key', 'value']]} />);
+    const tree = shallow(<DetailsTable fields={[['key', 'value']]} />);
     expect(tree).toMatchSnapshot();
   });
 
   it('shows a row with a title', () => {
-    const tree = create(<DetailsTable title='some title' fields={[['key', 'value']]} />);
+    const tree = shallow(<DetailsTable title='some title' fields={[['key', 'value']]} />);
     expect(tree).toMatchSnapshot();
   });
 
   it('shows key and value for large values', () => {
-    const tree = create(<DetailsTable fields={[
+    const tree = shallow(<DetailsTable fields={[
       ['key', `Lorem Ipsum is simply dummy text of the printing and typesetting
       industry. Lorem Ipsum has been the industry's standard dummy text ever
       since the 1500s, when an unknown printer took a galley of type and
@@ -46,25 +46,31 @@ describe('DetailsTable', () => {
       of Letraset sheets containing Lorem Ipsum passages, and more recently
       with desktop publishing software like Aldus PageMaker including versions
       of Lorem Ipsum.`]
-    ]} />).toJSON();
+    ]} />);
     expect(tree).toMatchSnapshot();
   });
 
   it('shows key and value in row', () => {
-    const tree = create(<DetailsTable fields={[['key', 'value']]} />).toJSON();
+    const tree = shallow(<DetailsTable fields={[['key', 'value']]} />);
     expect(tree).toMatchSnapshot();
   });
 
-  it('shows keys and values in a bunch of rows', () => {
-    const tree = create(<DetailsTable fields={[
+  it('shows key and JSON value in row', () => {
+    const tree = shallow(<DetailsTable fields={[['key', JSON.stringify([{ jsonKey: 'jsonValue' }])]]} />);
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('shows keys and values for multiple rows', () => {
+    const tree = shallow(<DetailsTable fields={[
       ['key1', 'value1'],
-      ['key2', 'value2'],
+      ['key2', JSON.stringify([{ jsonKey: 'jsonValue2' }])],
       ['key3', 'value3'],
       ['key4', 'value4'],
-      ['key5', 'value5'],
+      ['key5', JSON.stringify({ jsonKey: { nestedJsonKey: 'jsonValue' } })],
       ['key6', 'value6'],
       ['key6', 'value7'],
-    ]} />).toJSON();
+    ]} />);
     expect(tree).toMatchSnapshot();
   });
+
 });

frontend/src/components/DetailsTable.tsx

@@ -14,24 +14,34 @@
  * limitations under the License.
  */
 
+import 'codemirror/lib/codemirror.css';
+import 'codemirror/mode/javascript/javascript.js';
 import * as React from 'react';
 import { stylesheet } from 'typestyle';
 import { color, spacing, commonCss } from '../Css';
+import { UnControlled as CodeMirror } from 'react-codemirror2';
 
 export const css = stylesheet({
+  codeMirrorGutter: {
+    width: 6,
+  },
   key: {
     color: color.strong,
     flex: '0 0 50%',
     fontWeight: 'bold',
-  },
-  root: {
-    maxWidth: 700,
+    maxWidth: 300,
   },
   row: {
     borderBottom: `1px solid ${color.divider}`,
     display: 'flex',
     padding: `${spacing.units(-5)}px ${spacing.units(-6)}px`,
   },
+  valueJson: {
+    flexGrow: 1,
+  },
+  valueText: {
+    maxWidth: 400,
+  },
 });
 
 interface DetailsTableProps {
@@ -42,13 +52,37 @@ interface DetailsTableProps {
 export default (props: DetailsTableProps) => {
   return (<React.Fragment>
     {!!props.title && <div className={commonCss.header}>{props.title}</div>}
-    <div className={css.root}>
-      {props.fields.map((f, i) => (
-        <div key={i} className={css.row}>
-          <span className={css.key}>{f[0]}</span>
-          <span>{f[1]}</span>
-        </div>
-      ))}
+    <div>
+      {props.fields.map((f, i) => {
+        try{
+          const parsedJson = JSON.parse(f[1]);
+          return (
+            <div key={i} className={css.row}>
+              <span className={css.key}>{f[0]}</span>
+              <CodeMirror
+                  className={css.valueJson}
+                  value={JSON.stringify(parsedJson, null, 2) || ''}
+                  editorDidMount={(editor) => editor.refresh()}
+                  options={{
+                    gutters: [css.codeMirrorGutter],
+                    lineWrapping: true,
+                    mode: 'application/json',
+                    readOnly: true,
+                    theme: 'default',
+                  }}
+                />
+            </div>
+          );
+        } catch (err) {
+          // If the value isn't JSON, just display it as is
+          return (
+            <div key={i} className={css.row}>
+              <span className={css.key}>{f[0]}</span>
+              <span className={css.valueText}>{f[1]}</span>
+            </div>
+          );
+        }
+      })}
     </div>
   </React.Fragment>
   );