Add buttons for switching JSON preview style

app/controllers/inspect.js

@@ -1,7 +1,9 @@
 import Controller from '@ember/controller';
 import { inject as controller } from '@ember/controller';
 import { inject as service } from '@ember/service';
+import { computed } from '@ember/object';
 import { alias } from '@ember/object/computed';
+import { isEmpty } from '@ember/utils';
 
 export default Controller.extend({
 
@@ -12,8 +14,26 @@ export default Controller.extend({
 
   queryParams: ['path'],
 
+  documentIsJSON: computed('model.documentMetaData.type', function(){
+    if (isEmpty(this.get('model.documentMetaData'))) { return false; }
+
+    return !!this.get('model.documentMetaData.type').match(/application\/json/i);
+  }),
+
+  jsonView: 'source',
+  jsonShowTree: computed.equal('jsonView', 'tree'),
+  jsonShowSource: computed.equal('jsonView', 'source'),
+
   actions: {
 
+    showJsonTree () {
+      this.set('jsonView', 'tree');
+    },
+
+    showJsonSource () {
+      this.set('jsonView', 'source');
+    },
+
     deleteItem () {
       if (window.confirm('Sure?')) {
         this.get('storage.client')

app/styles/_buttons.scss

@@ -0,0 +1,8 @@
+div.button-group {
+  display: inline-block;
+}
+
+div.button-group + button,
+div.button-group + div.button-group {
+  margin-left: 1rem;
+}

app/styles/app.scss

@@ -16,9 +16,11 @@ body {
   padding: 0;
 }
 
+@import "buttons";
+
 @import "components/account-info";
 @import "components/breadcrumb-nav";
 @import "components/categories-nav";
 @import "components/directory-listing";
-@import "components/item-icon";
 @import "components/file-preview";
+@import "components/item-icon";

app/templates/inspect.hbs

@@ -1,6 +1,12 @@
 <header>
   {{breadcrumb-nav currentDirPath=currentDirPath}}
   <nav class="actions">
+    {{#if documentIsJSON}}
+      <div class="button-group json-view">
+        <button disabled={{jsonShowTree}} class="{{if jsonShowTree "active"}}" {{action "showJsonTree"}}>tree view</button>
+        <button disabled={{jsonShowSource}} class="{{if jsonShowSource "active"}}" {{action "showJsonSource"}}>source</button>
+      </div>
+    {{/if}}
     <button class="delete" {{action "deleteItem"}}>delete</button>
   </nav>
 </header>

tests/unit/controllers/inspect-test.js

@@ -4,8 +4,45 @@ moduleFor('controller:inspect', 'Unit | Controller | inspect', {
   needs: ['controller:application', 'service:storage']
 });
 
-// Replace this with your real tests.
+test('#documentIsJSON', function(assert) {
-test('it exists', function(assert) {
   let controller = this.subject();
-  assert.ok(controller);
+
+  controller.set('model', {});
+
+  controller.set('model.documentMetaData', {
+    "name": "869575AF-84AE-49B3-8752-5782E9CA2BC5",
+    "type": "application/json",
+    "isBinary": false,
+    "isFolder": false,
+    "size": 202,
+    "path": "/documents/notes/869575AF-84AE-49B3-8752-5782E9CA2BC5",
+    "etag": "776662336"
+  });
+
+  assert.ok(controller.get('documentIsJSON'), 'is true when content type is JSON');
+
+  controller.set('model.documentMetaData', {
+    "name": "171127-1708-32c3.png",
+    "type": "image/png",
+    "isBinary": true,
+    "isFolder": false,
+    "size": 42624,
+    "path": "public/shares/171127-1708-32c3.png",
+    "etag": "894001114"
+  });
+
+  assert.notOk(controller.get('documentIsJSON'), 'is false when content type is not JSON');
+});
+
+test('jsonView actions/methods', function(assert) {
+  let controller = this.subject();
+  controller.set('jsonView', null);
+
+  controller.send('showJsonTree');
+  assert.ok(controller.get('jsonShowTree'));
+  assert.notOk(controller.get('jsonShowSource'));
+
+  controller.send('showJsonSource');
+  assert.ok(controller.get('jsonShowSource'));
+  assert.notOk(controller.get('jsonShowTree'));
 });