From 19d7202bd1bb6f4c04120cdc8c8b5862998f5208 Mon Sep 17 00:00:00 2001
From: Michael Lange <dingoeatingfuzz@gmail.com>
Date: Mon, 30 Jul 2018 17:44:07 -0700
Subject: [PATCH] Use ivy-codemirror in the JSON Viewer component

---
 ui/app/components/json-viewer.js            | 26 ++-------------------
 ui/app/templates/components/json-viewer.hbs |  8 +++++++
 ui/app/templates/jobs/job/definition.hbs    |  2 +-
 3 files changed, 11 insertions(+), 25 deletions(-)
 create mode 100644 ui/app/templates/components/json-viewer.hbs

diff --git a/ui/app/components/json-viewer.js b/ui/app/components/json-viewer.js
index 092491917..95e27c6db 100644
--- a/ui/app/components/json-viewer.js
+++ b/ui/app/components/json-viewer.js
@@ -1,33 +1,11 @@
 import Component from '@ember/component';
 import { computed } from '@ember/object';
-import { run } from '@ember/runloop';
-import { copy } from '@ember/object/internals';
-import JSONFormatter from 'json-formatter-js';
 
 export default Component.extend({
   classNames: ['json-viewer'],
 
   json: null,
-  expandDepth: Infinity,
-
-  formatter: computed('json', 'expandDepth', function() {
-    return new JSONFormatter(copy(this.get('json'), true), this.get('expandDepth'), {
-      theme: 'nomad',
-    });
+  jsonStr: computed('json', function() {
+    return JSON.stringify(this.get('json'), null, 2);
   }),
-
-  didReceiveAttrs() {
-    const json = this.get('json');
-    if (!json) {
-      return;
-    }
-
-    run.scheduleOnce('afterRender', this, embedViewer);
-  },
 });
-
-function embedViewer() {
-  this.$()
-    .empty()
-    .append(this.get('formatter').render());
-}
diff --git a/ui/app/templates/components/json-viewer.hbs b/ui/app/templates/components/json-viewer.hbs
new file mode 100644
index 000000000..16b26caa3
--- /dev/null
+++ b/ui/app/templates/components/json-viewer.hbs
@@ -0,0 +1,8 @@
+{{ivy-codemirror
+  value=jsonStr
+  options=(hash
+    mode="javascript"
+    tabSize=2
+    lineNumbers=true
+    readOnly=true
+  )}}
diff --git a/ui/app/templates/jobs/job/definition.hbs b/ui/app/templates/jobs/job/definition.hbs
index 2265ecdbe..2e4280af2 100644
--- a/ui/app/templates/jobs/job/definition.hbs
+++ b/ui/app/templates/jobs/job/definition.hbs
@@ -1,7 +1,7 @@
 {{partial "jobs/job/subnav"}}
 <section class="section">
   <div class="boxed-section">
-    <div class="boxed-section-body is-dark">
+    <div class="boxed-section-body is-full-bleed">
       {{json-viewer data-test-definition-view json=model.definition}}
     </div>
   </div>