Replaced <pre>s with WBJsonViewer in WBCollectionFields, WBContainerFields and WBWorkflowFields.

frontend/src/js/component/wb-collection-fields.js

@@ -8,6 +8,7 @@ import wbFormatDate from 'wb-format-date';
 import WBNameAndUuid from 'wb-name-and-uuid';
 import WBAccordion from 'wb-accordion';
 import wbFormatSpecialValue from 'wb-format-special-value';
+import WBJsonViewer from 'wb-json-viewer';
 
 class WBCollectionFields extends Component {
   componentDidMount() {
@@ -39,7 +40,7 @@ class WBCollectionFields extends Component {
         [ 'Description', wbFormatSpecialValue(item.description) ],
         [ 'Properties', (
           <WBAccordion names={ ['Properties'] } cardHeaderClass="card-header-sm">
-            <pre class="word-wrap">{ JSON.stringify(item.properties, null, 2) }</pre>
+            <WBJsonViewer value={ item.properties } />
           </WBAccordion>
         ) ],
         [ 'Portable Data Hash', item.portable_data_hash ],

frontend/src/js/component/wb-container-fields.js

@@ -7,6 +7,7 @@ import urlForObject from 'url-for-object';
 import wbFormatDate from 'wb-format-date';
 import WBNameAndUuid from 'wb-name-and-uuid';
 import WBAccordion from 'wb-accordion';
+import WBJsonViewer from 'wb-json-viewer';
 
 class WBContainerFields extends Component {
   componentDidMount() {
@@ -38,38 +39,38 @@ class WBContainerFields extends Component {
         [ 'Environment', (
           <WBAccordion names={ ['Environment'] }
             cardHeaderClass="card-header-sm">
-            <pre class="word-wrap">{ JSON.stringify(item.environment, null, 2) }</pre>
+            <WBJsonViewer value={ item.environment } />
           </WBAccordion>
         ) ],
         [ 'Working Directory', item.cwd ],
         [ 'Command', (
-          <pre class="word-wrap">{ JSON.stringify(item.command) }</pre>
+          <WBJsonViewer value={ item.command } />
         ) ],
         [ 'Output Path', item.output_path ],
         [ 'Mounts', (
           <WBAccordion names={ Object.keys(item.mounts) }
             cardHeaderClass="card-header-sm">
             { Object.keys(item.mounts).map(k => (
-              <pre class="word-wrap">{ JSON.stringify(item.mounts[k], null, 2) }</pre>
+              <WBJsonViewer value={ item.mounts[k] } />
             )) }
           </WBAccordion>
         ) ],
         [ 'Runtime Constraints', (
           <WBAccordion names={ ['Runtime Constraints'] }
             cardHeaderClass="card-header-sm">
-            <pre class="word-wrap">{ JSON.stringify(item.runtime_constraints, null, 2) }</pre>
+            <WBJsonViewer value={ item.runtime_constraints } />
           </WBAccordion>
         ) ],
         [ 'Runtime Status', (
           <WBAccordion names={ ['Runtime Status'] }
             cardHeaderClass="card-header-sm">
-            <pre class="word-wrap">{ JSON.stringify(item.runtime_status, null, 2) }</pre>
+            <WBJsonViewer value={ item.runtime_status } />
           </WBAccordion>
         ) ],
         [ 'Scheduling Parameters', (
           <WBAccordion names={ ['Scheduling Parameters'] }
             cardHeaderClass="card-header-sm">
-            <pre class="word-wrap">{ JSON.stringify(item.scheduling_parameters, null, 2) }</pre>
+            <WBJsonViewer value={ item.scheduling_parameters } />
           </WBAccordion>
         ) ],
         [ 'Output', item.output ? (

frontend/src/js/component/wb-workflow-fields.js

@@ -2,6 +2,7 @@ import { h, Component } from 'preact';
 import WBTable from 'wb-table';
 import makeArvadosRequest from 'make-arvados-request';
 import WBAccordion from 'wb-accordion';
+import WBJsonViewer from 'wb-json-viewer';
 
 class WBWorkflowFields extends Component {
   componentDidMount() {
@@ -51,9 +52,9 @@ class WBWorkflowFields extends Component {
               <WBAccordion names={ [ 'Inputs', 'Outputs', 'Rest' ] }
                 cardHeaderClass="card-header-sm">
 
-                <pre class="word-wrap">{ JSON.stringify(it.inputs, null, 2) }</pre>
+                <WBJsonViewer value={ it.inputs } />
 
-                <pre class="word-wrap">{ JSON.stringify(it.outputs, null, 2) }</pre>
+                <WBJsonViewer value={ it.outputs } />
 
                 { (() => {
                   delete it['inputs'];
@@ -63,7 +64,7 @@ class WBWorkflowFields extends Component {
                   delete it['doc'];
                   delete it['id'];
                   return (
-                    <pre class="word-wrap">{ JSON.stringify(it, null, 2) }</pre>
+                    <WBJsonViewer value={ it } />
                   );
                 })() }
 
@@ -77,7 +78,7 @@ class WBWorkflowFields extends Component {
             cardHeaderClass="card-header-sm">
 
             { graph.map(it => (
-              <pre class="word-wrap">{ JSON.stringify(it, null, 2) }</pre>
+              <WBJsonViewer value={ it } />
             )) }
 
           </WBAccordion>