0.8.0

Adds a new button to the top right for deleting all documents in a
directory.

README.md

@@ -14,10 +14,10 @@ contribute and/or give feedback: https://gitlab.com/skddc/inspektor
 * [x] View document details
 * [x] Render images in details
 * [x] Render text content in details (e.g. JSON)
+* [x] Delete documents
+* [ ] Delete directories
 * [ ] Render other types content (e.g. audio and video)
 * [ ] Edit text content (and save changes)
-* [ ] Delete documents
-* [ ] Delete directories
 * [ ] Copy/move documents
 * [ ] Copy/move directories (and enclosed files)
 * [ ] Loading indicator for any view change that loads remote data

app/components/file-preview/component.js

@@ -1,9 +1,13 @@
 import Component from '@ember/component';
+import { inject as service } from '@ember/service';
+import { observer } from '@ember/object';
 import { alias } from '@ember/object/computed';
+import { scheduleOnce } from '@ember/runloop';
+import JSONTreeView from 'npm:json-tree-view';
 
 export default Component.extend({
 
-  storage: null,
+  storage: service(),
 
   classNames: ['file-preview'],
 
@@ -11,12 +15,12 @@ export default Component.extend({
   fileContent: null,
   objectURL: null,
   metaData: null,
+  isJSON: null,
   type: alias('metaData.type'),
   isBinary: alias('metaData.isBinary'),
 
   isImage: function() {
-    return this.get('type').match(/^image\/.+$/);
-  }.property('type'),
+    return this.get('type').match(/^image\/.+$/); }.property('type'),
 
   isText: function() {
     return !this.get('isBinary');
@@ -35,8 +39,65 @@ export default Component.extend({
       } else {
         this.set('fileContent', file.data);
       }
+
       this.set('fileLoaded', true);
     });
-  }.on('init')
+  }.on('didInsertElement'),
+
+  onFileLoaded: observer('fileLoaded', function(){
+    if (this.get('fileLoaded') && this.get('isJSON') && this.get('jsonShowTree')) {
+      scheduleOnce('afterRender', this, 'renderJsonTree');
+    }
+  }),
+
+  onJsonViewChanged: observer('jsonShowTree', function(){
+    if (this.get('fileLoaded') && this.get('isJSON') && this.get('jsonShowTree')) {
+      scheduleOnce('afterRender', this, 'renderJsonTree');
+    }
+  }),
+
+  renderJsonTree () {
+    let value = JSON.parse(this.get('fileContent'));
+
+    let view = new JSONTreeView('content', value);
+
+    // Listen for change events
+    view.on('change', function(self, key, oldValue, newValue){
+      console.log('change', key, oldValue, '=>', newValue);
+    });
+    view.on('rename', function(self, key, oldName, newName) {
+      console.log('rename', key, oldName, '=>', newName);
+    });
+    view.on('delete', function(self, key) {
+      console.log('delete', key);
+    });
+    view.on('append', function(self, key, nameOrValue, newValue) {
+      console.log('append', key, nameOrValue, '=>', newValue);
+    });
+    view.on('click', function(self, key, value) {
+      console.log('click', key, '=', value);
+    });
+    view.on('expand', function(self, key, value) {
+      console.log('expand', key, '=', value);
+    });
+    view.on('collapse', function(self, key, value) {
+      console.log('collapse', key, '=', value);
+    });
+    view.on('refresh', function(self, key, value) {
+      console.log('refresh', key, '=', value);
+    });
+
+    document.getElementById('json-tree-view')
+            .appendChild(view.dom);
+
+    window.jsonview = view;
+
+    view.expand(true);
+
+    view.withRootName = false;
+    view.readonly = true;
+
+    this.set('jsonTreeView', view);
+  }
 
 });

app/components/file-preview/template.hbs

@@ -8,6 +8,14 @@
   {{/if}}
 
   {{#if isText}}
-    <code>{{fileContent}}</code>
+    {{#if isJSON}}
+      {{#if jsonShowTree}}
+        <div id="json-tree-view"></div>
+      {{else}}
+        <code>{{fileContent}}</code>
+      {{/if}}
+    {{else}}
+      <code>{{fileContent}}</code>
+    {{/if}}
   {{/if}}
 {{/if}}

app/controllers/index.js

@@ -1,9 +1,10 @@
 import Controller from '@ember/controller';
 import { inject as controller } from '@ember/controller';
-import { observer } from '@ember/object';
 import { inject as service } from '@ember/service';
+import { computed, observer } from '@ember/object';
 import { alias } from '@ember/object/computed';
-import { isPresent } from '@ember/utils';
+import { isPresent, isEmpty } from '@ember/utils';
+import { all } from 'rsvp';
 
 export default Controller.extend({
 
@@ -16,7 +17,7 @@ export default Controller.extend({
 
   queryParams: ['path'],
 
-  currentListing: function() {
+  currentListing: function () {
     if (isPresent(this.get('model.currentListing'))) {
       return this.get('model.currentListing').sortBy('name');
     } else {
@@ -24,7 +25,34 @@ export default Controller.extend({
     }
   }.property('rootListing.[]', 'model.[]'),
 
-  connectedChange: observer('connected', function() {
+  documents: computed('currentListing.[]', function () {
+    if (isEmpty(this.get('currentListing'))) { return []; }
+
+    return this.get('currentListing')
+               .reject(item => item.path.substr(-1) === '/');
+  }),
+
+  currentListingContainsDocuments: computed('documents.[]', function () {
+    return isPresent(this.get('documents'));
+  }),
+
+  documentCount: computed('documents.[]', function () {
+    if (isPresent(this.get('documents'))) {
+      return this.get('documents').length;
+    } else {
+      return 0;
+    }
+  }),
+
+  parentDir: computed('currentDirPath', function () {
+    const dirs = this.get('currentDirPath')
+                     .split('/')
+                     .reject(p => isEmpty(p));
+
+    return dirs.splice(0, dirs.length - 1).join('/') + '/';
+  }),
+
+  connectedChange: observer('connected', function () {
     if (this.get('connected')) {
       // console.debug('connectedChange connected');
     } else {
@@ -33,4 +61,27 @@ export default Controller.extend({
     }
   }),
 
+  actions: {
+
+    deleteDocuments () {
+      const documentCount = this.get('documentCount');
+      const msg = `Delete all ${documentCount} documents/files in the current directory?`;
+      if (! window.confirm(msg)) { return false; }
+
+      const client = this.get('storage.client');
+
+      let promises = this.get('documents').map(item => {
+        console.debug('removing ' + item.path);
+        return client.remove(item.path);
+      });
+
+      all(promises).then(() => {
+        this.transitionToRoute('index', {
+          queryParams: { path: this.get('parentDir') }
+        });
+      });
+    }
+
+  }
+
 });

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,10 +14,34 @@ 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: 'tree',
+  jsonShowTree: computed.equal('jsonView', 'tree'),
+  jsonShowSource: computed.equal('jsonView', 'source'),
+
+  metadataHidden: false,
+
   actions: {
 
+    showJsonTree () {
+      this.set('jsonView', 'tree');
+    },
+
+    showJsonSource () {
+      this.set('jsonView', 'source');
+    },
+
+    toggleMetadata () {
+      this.toggleProperty('metadataHidden');
+    },
+
     deleteItem () {
-      if (window.confirm('Sure?')) {
+      if (window.confirm('Delete?')) {
         this.get('storage.client')
             .remove(this.get('path')).then(() => {
               this.transitionToRoute('index', {

app/routes/index.js

@@ -44,6 +44,12 @@ export default Route.extend({
 
     if (isPresent(model)) {
       controller.set('currentDirPath', model.currentDirPath);
+
+      if (isEmpty(model.currentListing)) {
+        this.transitionTo('index', {
+          queryParams: { path: controller.get('parentDir') }
+        });
+      }
     }
   },
 

app/styles/_buttons.scss

@@ -0,0 +1,52 @@
+div.button-group {
+  display: inline-block;
+}
+
+div.button-group + button,
+div.button-group + div.button-group {
+  margin-left: 1rem;
+}
+
+header {
+  button {
+    padding: 0.4rem 0 0.3rem;
+    border: 1px solid $dark-grey-2;
+    border-radius: 0.2em;
+    background-color: #fff;
+    color: $dark-grey-2;
+    font-size: 0.8rem;
+    text-transform: uppercase;
+    width: 3rem;
+
+    svg {
+      height: 1rem;
+      path {
+        fill: $dark-grey-2;
+      }
+    }
+
+    &:hover {
+      background-color: $dark-grey-2;
+      color: #fff;
+
+      svg {
+        path {
+          fill: #fff;
+        }
+      }
+    }
+
+    &:disabled,
+    &:disabled:hover {
+      border-color: $dark-grey-3;
+      background-color: #fff;
+      color: $dark-grey-3;
+
+      svg {
+        path {
+          fill: $dark-grey-3;
+        }
+      }
+    }
+  }
+}

app/styles/_layout.scss

@@ -55,10 +55,9 @@
       height: 5rem;
     }
 
-    // nav {
-    //   margin-top: 5rem;
-    //   margin-bottom: 4rem;
-    // }
+    nav {
+      margin-bottom: 3rem;
+    }
   }
 
   > main {
@@ -68,16 +67,17 @@
 
     > header {
       height: 4rem;
-      display: flex;
-      flex-direction: row;
+      width: 100%;
+      display: grid;
+      grid-template-columns: 1.618fr 3rem 1fr;
 
-      nav.breadcrumb-nav {
-        flex: 1;
-      }
+      // nav.breadcrumb-nav {
+      // }
 
       nav.actions {
-        flex: 1;
+        grid-column-start: 3;
         text-align: right;
+        margin-top: -0.4rem;
       }
     }
   }
@@ -87,13 +87,19 @@
   width: 100%;
   display: grid;
   grid-template-columns: 1.618fr 3rem 1fr;
+  margin-bottom: 3rem;
+  transition: all 0.3s ease-out;
+
+  &.hide-metadata {
+    grid-template-columns: 1.618fr 0 0;
+  }
 
   section {
     border-top: 1px solid $light-grey-2;
     padding: 1.5rem 1px;
 
     &.content {
-      overflow: hidden;
+      overflow: auto;
     }
 
     &.meta {

app/styles/_resets.scss

@@ -0,0 +1,6 @@
+* {
+  -moz-outline: none;
+  outline: none;
+}
+:focus { outline:none; }
+::-moz-focus-inner { border: 0; }

app/styles/app.scss

@@ -1,24 +1,24 @@
 @import "bourbon";
+@import "resets";
 @import "colors";
 @import "layout";
 
-* {
-  -moz-outline: none;
-  outline: none;
-}
-
 body {
   background-color: white;
-  font-size: 16px;
+  font-size: 15px;
   font-family: Open Sans, sans-serif;
   color: $dark-grey-1;
   margin: 0;
   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";
+
+@import "vendor/json-tree-view";

app/styles/vendor/_json-tree-view.scss

@@ -0,0 +1,149 @@
+.jsonView{
+    margin-left: 20px;
+    font-family: Consolas, "Lucida Console", Menlo, "dejavu sans mono", monospace;
+    font-size: 15px;
+    line-height: 15px;
+    padding: 2px;
+    cursor: default;
+    color: rgb(66, 66, 66);
+    white-space: nowrap;
+    -webkit-user-select: none;
+}
+
+.jsonView>div{
+    display: inline-block;
+}
+
+.jsonView.hidden{
+    display: none;
+}
+
+.jsonView>.children, .jsonView.insert{
+    display: block;
+}
+
+.jsonView>.name{
+    color: rgb(136, 19, 145);
+}
+
+.jsonView>.separator:before{
+    content: ":";
+}
+
+.jsonView>.separator{
+    padding-right: 5px;
+}
+
+.jsonView>.spacing{
+    display:inline-block;
+    width:15px;
+}
+.jsonView>.spacing::before{
+    content: '1';
+    visibility:hidden;
+}
+
+.jsonView>.value.null, .jsonView>.value.undefined{
+    color: rgb(128, 128, 128);
+}
+
+.jsonView>.value.boolean, .jsonView>.value.number{
+    color: rgb(28, 0, 207);
+}
+
+.jsonView>.value.string:not(.edit):before, .jsonView>.value.string:not(.edit):after{
+    content: "\"";
+}
+
+.jsonView>.value.string {
+    color: rgb(196, 26, 22);
+}
+
+.jsonView>.name:hover, .jsonView>.value:hover{
+    background-color: rgba(56, 121, 217, 0.1);
+}
+
+.jsonView>.expand, .jsonView>.collapse{
+    min-width: 20px;
+    margin-left: -20px;
+    cursor: pointer;
+}
+
+.jsonView>.expand:before{
+    content: '\25B6';
+}
+
+.jsonView>.collapse:before{
+    content: '\25BC';
+}
+
+.jsonView>.edit{
+    padding: 0px 5px 0px 5px;
+    white-space: nowrap;
+    overflow: hidden;
+    background-color: transparent;
+}
+
+.jsonView>.edit br{
+    display: none;
+}
+
+.jsonView>.edit *{
+    display: inline;
+    white-space: nowrap;
+}
+
+.jsonView>.value.edit{
+    color: rgb(0, 0, 0);
+}
+
+.jsonView>.delete:before{
+    content: '+';
+    transform: rotate(45deg);
+    -webkit-transform: rotate(45deg);
+    -o-transform: rotate(45deg);
+    -ms-transform: rotate(45deg);
+    display: inline-block;
+}
+
+.jsonView>.delete{
+    opacity: 0;
+    display: inline;
+    padding: 3px;
+    cursor: pointer;
+    color: rgb(150, 150, 150);
+}
+
+.jsonView>.item:hover~.delete{
+    opacity: 1;
+    color: rgb(150, 150, 150);
+}
+.jsonView>.delete:hover{
+    opacity: 1;
+    color: rgb(0, 0, 0);
+    background: rgb(220, 220, 220);
+}
+
+.jsonView.readonly>.insert,.jsonView.readonly>.delete{
+    display: none !important;
+}
+.jsonView>.insert:before{
+    content: '+';
+}
+
+.jsonView>.insert{
+    display: none;
+    color: rgb(150, 150, 150);
+    cursor: pointer;
+}
+
+.jsonView.expanded>.insert, .jsonView.expanded>.insert{
+    display: inline-block;
+    margin-left: 20px;
+    padding: 3px;
+}
+
+.jsonView>.insert:hover{
+    color: rgb(0, 0, 0);
+    background: rgb(220, 220, 220);
+}

app/templates/icons/arrow-from-left.hbs

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M296 99.5l148.5 148c4.7 4.7 4.7 12.3 0 17L296 412.5c-4.7 4.7-12.3 4.7-17 0l-7.1-7.1c-4.7-4.7-4.7-12.3 0-17l116-115.4H76c-6.6 0-12-5.4-12-12v-10c0-6.6 5.4-12 12-12h311.9L272 123.6c-4.7-4.7-4.7-12.3 0-17l7.1-7.1c4.6-4.7 12.2-4.7 16.9 0zM12 448h8c6.6 0 12-5.4 12-12V76c0-6.6-5.4-12-12-12h-8C5.4 64 0 69.4 0 76v360c0 6.6 5.4 12 12 12z"/></svg>

app/templates/icons/arrow-from-right.hbs

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M152 412.5L3.5 264.5c-4.7-4.7-4.7-12.3 0-17L152 99.5c4.7-4.7 12.3-4.7 17 0l7.1 7.1c4.7 4.7 4.7 12.3 0 17L60.1 239H372c6.6 0 12 5.4 12 12v10c0 6.6-5.4 12-12 12H60.1L176 388.4c4.7 4.7 4.7 12.3 0 17l-7.1 7.1c-4.6 4.7-12.2 4.7-16.9 0zM436 64h-8c-6.6 0-12 5.4-12 12v360c0 6.6 5.4 12 12 12h8c6.6 0 12-5.4 12-12V76c0-6.6-5.4-12-12-12z"/></svg>

app/templates/icons/arrow-to-left.hbs

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M216 412.5l-148.5-148c-4.7-4.7-4.7-12.3 0-17L216 99.5c4.7-4.7 12.3-4.7 17 0l7.1 7.1c4.7 4.7 4.7 12.3 0 17L124.1 239H436c6.6 0 12 5.4 12 12v10c0 6.6-5.4 12-12 12H124.1L240 388.4c4.7 4.7 4.7 12.3 0 17l-7.1 7.1c-4.6 4.7-12.2 4.7-16.9 0zM12 448h8c6.6 0 12-5.4 12-12V76c0-6.6-5.4-12-12-12h-8C5.4 64 0 69.4 0 76v360c0 6.6 5.4 12 12 12z"/></svg>

app/templates/icons/arrow-to-right.hbs

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M215 99.5l-7.1 7.1c-4.7 4.7-4.7 12.3 0 17l116 115.4H12c-6.6 0-12 5.4-12 12v10c0 6.6 5.4 12 12 12h311.9L208 388.4c-4.7 4.7-4.7 12.3 0 17l7.1 7.1c4.7 4.7 12.3 4.7 17 0l148.5-148c4.7-4.7 4.7-12.3 0-17L232 99.5c-4.7-4.7-12.3-4.7-17 0zM448 76v360c0 6.6-5.4 12-12 12h-8c-6.6 0-12-5.4-12-12V76c0-6.6 5.4-12 12-12h8c6.6 0 12 5.4 12 12z"/></svg>

app/templates/icons/code.hbs

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M228.5 511.8l-25-7.1c-3.2-.9-5-4.2-4.1-7.4L340.1 4.4c.9-3.2 4.2-5 7.4-4.1l25 7.1c3.2.9 5 4.2 4.1 7.4L235.9 507.6c-.9 3.2-4.3 5.1-7.4 4.2zm-75.6-125.3l18.5-20.9c1.9-2.1 1.6-5.3-.5-7.1L49.9 256l121-102.5c2.1-1.8 2.4-5 .5-7.1l-18.5-20.9c-1.8-2.1-5-2.3-7.1-.4L1.7 252.3c-2.3 2-2.3 5.5 0 7.5L145.8 387c2.1 1.8 5.3 1.6 7.1-.5zm277.3.4l144.1-127.2c2.3-2 2.3-5.5 0-7.5L430.2 125.1c-2.1-1.8-5.2-1.6-7.1.4l-18.5 20.9c-1.9 2.1-1.6 5.3.5 7.1l121 102.5-121 102.5c-2.1 1.8-2.4 5-.5 7.1l18.5 20.9c1.8 2.1 5 2.3 7.1.4z"/></svg>

app/templates/icons/list.hbs

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M506 114H134a6 6 0 0 1-6-6V84a6 6 0 0 1 6-6h372a6 6 0 0 1 6 6v24a6 6 0 0 1-6 6zm6 154v-24a6 6 0 0 0-6-6H134a6 6 0 0 0-6 6v24a6 6 0 0 0 6 6h372a6 6 0 0 0 6-6zm0 160v-24a6 6 0 0 0-6-6H134a6 6 0 0 0-6 6v24a6 6 0 0 0 6 6h372a6 6 0 0 0 6-6zM84 120V72c0-6.627-5.373-12-12-12H24c-6.627 0-12 5.373-12 12v48c0 6.627 5.373 12 12 12h48c6.627 0 12-5.373 12-12zm0 160v-48c0-6.627-5.373-12-12-12H24c-6.627 0-12 5.373-12 12v48c0 6.627 5.373 12 12 12h48c6.627 0 12-5.373 12-12zm0 160v-48c0-6.627-5.373-12-12-12H24c-6.627 0-12 5.373-12 12v48c0 6.627 5.373 12 12 12h48c6.627 0 12-5.373 12-12z"/></svg>

app/templates/icons/sitemap.hbs

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path d="M616 320h-72v-48c0-26.468-21.532-48-48-48H336v-32h56c13.255 0 24-10.745 24-24V24c0-13.255-10.745-24-24-24H248c-13.255 0-24 10.745-24 24v144c0 13.255 10.745 24 24 24h56v32H144c-26.467 0-48 21.532-48 48v48H24c-13.255 0-24 10.745-24 24v144c0 13.255 10.745 24 24 24h144c13.255 0 24-10.745 24-24V344c0-13.255-10.745-24-24-24h-40v-48c0-8.822 7.178-16 16-16h160v64h-56c-13.255 0-24 10.745-24 24v144c0 13.255 10.745 24 24 24h144c13.255 0 24-10.745 24-24V344c0-13.255-10.745-24-24-24h-56v-64h160c8.822 0 16 7.178 16 16v48h-40c-13.255 0-24 10.745-24 24v144c0 13.255 10.745 24 24 24h144c13.255 0 24-10.745 24-24V344c0-13.255-10.745-24-24-24zm-456 32v128H32V352h128zm224 0v128H256V352h128zM256 160V32h128v128H256zm352 320H480V352h128v128z"/></svg>

app/templates/icons/trash.hbs

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M336 64l-33.6-44.8C293.3 7.1 279.1 0 264 0h-80c-15.1 0-29.3 7.1-38.4 19.2L112 64H24C10.7 64 0 74.7 0 88v2c0 3.3 2.7 6 6 6h26v368c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48V96h26c3.3 0 6-2.7 6-6v-2c0-13.3-10.7-24-24-24h-88zM184 32h80c5 0 9.8 2.4 12.8 6.4L296 64H152l19.2-25.6c3-4 7.8-6.4 12.8-6.4zm200 432c0 8.8-7.2 16-16 16H80c-8.8 0-16-7.2-16-16V96h320v368zm-176-44V156c0-6.6 5.4-12 12-12h8c6.6 0 12 5.4 12 12v264c0 6.6-5.4 12-12 12h-8c-6.6 0-12-5.4-12-12zm-80 0V156c0-6.6 5.4-12 12-12h8c6.6 0 12 5.4 12 12v264c0 6.6-5.4 12-12 12h-8c-6.6 0-12-5.4-12-12zm160 0V156c0-6.6 5.4-12 12-12h8c6.6 0 12 5.4 12 12v264c0 6.6-5.4 12-12 12h-8c-6.6 0-12-5.4-12-12z"/></svg>

app/templates/index.hbs

@@ -1,5 +1,11 @@
 <header>
   {{breadcrumb-nav currentDirPath=currentDirPath}}
+  <nav class="actions">
+    {{#if currentListingContainsDocuments}}
+    <button class="delete-all" title="Delete documents/files"
+            {{action "deleteDocuments"}}>{{partial 'icons/trash'}}</button>
+    {{/if}}
+  </nav>
 </header>
 
 {{#if currentListing}}

app/templates/inspect.hbs

@@ -1,25 +1,60 @@
 <header>
   {{breadcrumb-nav currentDirPath=currentDirPath}}
   <nav class="actions">
-    <button class="delete" {{action "deleteItem"}}>delete</button>
+    {{#if documentIsJSON}}
+      <div class="button-group json-view">
+        {{#if metadataHidden}}
+          <button {{action "toggleMetadata"}}
+                  title="Show metadata">
+            {{partial "icons/arrow-from-right"}}
+          </button>
+        {{else}}
+          <button {{action "toggleMetadata"}}
+                  title="Hide metadata">
+            {{partial "icons/arrow-to-right"}}
+          </button>
+        {{/if}}
+      </div>
+      <div class="button-group json-view">
+        <button disabled={{jsonShowTree}}
+                class="{{if jsonShowTree "active"}}"
+                title="Tree view"
+                {{action "showJsonTree"}}>
+          {{partial "icons/list"}}
+        </button>
+        <button disabled={{jsonShowSource}}
+                class="{{if jsonShowSource "active"}}"
+                title="Show source"
+                {{action "showJsonSource"}}>
+          {{partial "icons/code"}}
+        </button>
+      </div>
+    {{/if}}
+    <button class="delete" title="Delete"
+            {{action "deleteItem"}}>{{partial "icons/trash"}}</button>
   </nav>
 </header>
 
-<div class="inspect-details">
+<div class="inspect-details {{if metadataHidden "hide-metadata"}}">
   <section class="content">
     {{file-preview metaData=model.documentMetaData
-                   storage=storage}}
-  </section>
-  <section class="meta">
-    <dl>
-      <dt>Name</dt>
-      <dd>{{model.documentMetaData.name}}</dd>
-      <dt>Content type</dt>
-      <dd>{{model.documentMetaData.type}}</dd>
-      <dt>Size</dt>
-      <dd>{{human-file-size model.documentMetaData.size}}</dd>
-      <dt>Revision (ETag)</dt>
-      <dd>{{model.documentMetaData.etag}}</dd>
-    </dl>
+                   isJSON=documentIsJSON
+                   jsonShowTree=jsonShowTree
+                   jsonShowSource=jsonShowSource}}
   </section>
+
+  {{#unless metadataHidden}}
+    <section class="meta">
+      <dl>
+        <dt>Name</dt>
+        <dd>{{model.documentMetaData.name}}</dd>
+        <dt>Content type</dt>
+        <dd>{{model.documentMetaData.type}}</dd>
+        <dt>Size</dt>
+        <dd>{{human-file-size model.documentMetaData.size}}</dd>
+        <dt>Revision (ETag)</dt>
+        <dd>{{model.documentMetaData.etag}}</dd>
+      </dl>
+    </section>
+  {{/unless}}
 </div>

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "inspektor",
-  "version": "0.6.1",
+  "version": "0.8.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -8011,6 +8011,10 @@
       "integrity": "sha1-Epai1Y/UXxmg9s4B1lcB4sc1tus=",
       "dev": true
     },
+    "json-tree-view": {
+      "version": "github:skddc/json-tree-view#55cb3b866083bf99e1895481fb73cf9186154c5e",
+      "dev": true
+    },
     "json3": {
       "version": "3.3.2",
       "resolved": "https://registry.npmjs.org/json3/-/json3-3.3.2.tgz",
@@ -10308,9 +10312,9 @@
       }
     },
     "remotestorage-widget": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/remotestorage-widget/-/remotestorage-widget-1.0.0.tgz",
-      "integrity": "sha512-m1zbsjvDHveJIqETzF3oaQwr4m5I7jg4vLETa7eKrXpgV7HBC5nyYv8GBclBoKrhONY4ZWzUX+3GRLyUNDdIcA==",
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/remotestorage-widget/-/remotestorage-widget-1.2.0.tgz",
+      "integrity": "sha512-6SEJ87UiEew43iO53O9ZuJAjg9mPgpSNbehtflm3I7LO5FpQ6RnJZiiHpQzGOgozUFyK8g3UnnOBAzFwJ6jRcA==",
       "dev": true
     },
     "remotestoragejs": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "inspektor",
-  "version": "0.6.1",
+  "version": "0.8.0",
   "private": true,
   "description": "Inspect the contents of your remote storage",
   "license": "MIT",
@@ -42,8 +42,9 @@
     "ember-load-initializers": "^1.0.0",
     "ember-resolver": "^4.0.0",
     "ember-source": "~2.16.0",
+    "json-tree-view": "github:skddc/json-tree-view#bugfix/setters",
     "loader.js": "^4.2.3",
-    "remotestorage-widget": "^1.0.0",
+    "remotestorage-widget": "^1.2.0",
     "remotestoragejs": "^1.0.0"
   },
   "engines": {

public/img/icons/arrow-from-left.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M296 99.5l148.5 148c4.7 4.7 4.7 12.3 0 17L296 412.5c-4.7 4.7-12.3 4.7-17 0l-7.1-7.1c-4.7-4.7-4.7-12.3 0-17l116-115.4H76c-6.6 0-12-5.4-12-12v-10c0-6.6 5.4-12 12-12h311.9L272 123.6c-4.7-4.7-4.7-12.3 0-17l7.1-7.1c4.6-4.7 12.2-4.7 16.9 0zM12 448h8c6.6 0 12-5.4 12-12V76c0-6.6-5.4-12-12-12h-8C5.4 64 0 69.4 0 76v360c0 6.6 5.4 12 12 12z"/></svg>

public/img/icons/arrow-from-right.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M152 412.5L3.5 264.5c-4.7-4.7-4.7-12.3 0-17L152 99.5c4.7-4.7 12.3-4.7 17 0l7.1 7.1c4.7 4.7 4.7 12.3 0 17L60.1 239H372c6.6 0 12 5.4 12 12v10c0 6.6-5.4 12-12 12H60.1L176 388.4c4.7 4.7 4.7 12.3 0 17l-7.1 7.1c-4.6 4.7-12.2 4.7-16.9 0zM436 64h-8c-6.6 0-12 5.4-12 12v360c0 6.6 5.4 12 12 12h8c6.6 0 12-5.4 12-12V76c0-6.6-5.4-12-12-12z"/></svg>

public/img/icons/arrow-to-left.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M216 412.5l-148.5-148c-4.7-4.7-4.7-12.3 0-17L216 99.5c4.7-4.7 12.3-4.7 17 0l7.1 7.1c4.7 4.7 4.7 12.3 0 17L124.1 239H436c6.6 0 12 5.4 12 12v10c0 6.6-5.4 12-12 12H124.1L240 388.4c4.7 4.7 4.7 12.3 0 17l-7.1 7.1c-4.6 4.7-12.2 4.7-16.9 0zM12 448h8c6.6 0 12-5.4 12-12V76c0-6.6-5.4-12-12-12h-8C5.4 64 0 69.4 0 76v360c0 6.6 5.4 12 12 12z"/></svg>

public/img/icons/arrow-to-right.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M215 99.5l-7.1 7.1c-4.7 4.7-4.7 12.3 0 17l116 115.4H12c-6.6 0-12 5.4-12 12v10c0 6.6 5.4 12 12 12h311.9L208 388.4c-4.7 4.7-4.7 12.3 0 17l7.1 7.1c4.7 4.7 12.3 4.7 17 0l148.5-148c4.7-4.7 4.7-12.3 0-17L232 99.5c-4.7-4.7-12.3-4.7-17 0zM448 76v360c0 6.6-5.4 12-12 12h-8c-6.6 0-12-5.4-12-12V76c0-6.6 5.4-12 12-12h8c6.6 0 12 5.4 12 12z"/></svg>

public/img/icons/code.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M228.5 511.8l-25-7.1c-3.2-.9-5-4.2-4.1-7.4L340.1 4.4c.9-3.2 4.2-5 7.4-4.1l25 7.1c3.2.9 5 4.2 4.1 7.4L235.9 507.6c-.9 3.2-4.3 5.1-7.4 4.2zm-75.6-125.3l18.5-20.9c1.9-2.1 1.6-5.3-.5-7.1L49.9 256l121-102.5c2.1-1.8 2.4-5 .5-7.1l-18.5-20.9c-1.8-2.1-5-2.3-7.1-.4L1.7 252.3c-2.3 2-2.3 5.5 0 7.5L145.8 387c2.1 1.8 5.3 1.6 7.1-.5zm277.3.4l144.1-127.2c2.3-2 2.3-5.5 0-7.5L430.2 125.1c-2.1-1.8-5.2-1.6-7.1.4l-18.5 20.9c-1.9 2.1-1.6 5.3.5 7.1l121 102.5-121 102.5c-2.1 1.8-2.4 5-.5 7.1l18.5 20.9c1.8 2.1 5 2.3 7.1.4z"/></svg>

public/img/icons/link.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M301.148 394.702l-79.2 79.19c-50.778 50.799-133.037 50.824-183.84 0-50.799-50.778-50.824-133.037 0-183.84l79.19-79.2a132.833 132.833 0 0 1 3.532-3.403c7.55-7.005 19.795-2.004 20.208 8.286.193 4.807.598 9.607 1.216 14.384.481 3.717-.746 7.447-3.397 10.096-16.48 16.469-75.142 75.128-75.3 75.286-36.738 36.759-36.731 96.188 0 132.94 36.759 36.738 96.188 36.731 132.94 0l79.2-79.2.36-.36c36.301-36.672 36.14-96.07-.37-132.58-8.214-8.214-17.577-14.58-27.585-19.109-4.566-2.066-7.426-6.667-7.134-11.67a62.197 62.197 0 0 1 2.826-15.259c2.103-6.601 9.531-9.961 15.919-7.28 15.073 6.324 29.187 15.62 41.435 27.868 50.688 50.689 50.679 133.17 0 183.851zm-90.296-93.554c12.248 12.248 26.362 21.544 41.435 27.868 6.388 2.68 13.816-.68 15.919-7.28a62.197 62.197 0 0 0 2.826-15.259c.292-5.003-2.569-9.604-7.134-11.67-10.008-4.528-19.371-10.894-27.585-19.109-36.51-36.51-36.671-95.908-.37-132.58l.36-.36 79.2-79.2c36.752-36.731 96.181-36.738 132.94 0 36.731 36.752 36.738 96.181 0 132.94-.157.157-58.819 58.817-75.3 75.286-2.651 2.65-3.878 6.379-3.397 10.096a163.156 163.156 0 0 1 1.216 14.384c.413 10.291 12.659 15.291 20.208 8.286a131.324 131.324 0 0 0 3.532-3.403l79.19-79.2c50.824-50.803 50.799-133.062 0-183.84-50.802-50.824-133.062-50.799-183.84 0l-79.2 79.19c-50.679 50.682-50.688 133.163 0 183.851z"/></svg>

public/img/icons/list.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M506 114H134a6 6 0 0 1-6-6V84a6 6 0 0 1 6-6h372a6 6 0 0 1 6 6v24a6 6 0 0 1-6 6zm6 154v-24a6 6 0 0 0-6-6H134a6 6 0 0 0-6 6v24a6 6 0 0 0 6 6h372a6 6 0 0 0 6-6zm0 160v-24a6 6 0 0 0-6-6H134a6 6 0 0 0-6 6v24a6 6 0 0 0 6 6h372a6 6 0 0 0 6-6zM84 120V72c0-6.627-5.373-12-12-12H24c-6.627 0-12 5.373-12 12v48c0 6.627 5.373 12 12 12h48c6.627 0 12-5.373 12-12zm0 160v-48c0-6.627-5.373-12-12-12H24c-6.627 0-12 5.373-12 12v48c0 6.627 5.373 12 12 12h48c6.627 0 12-5.373 12-12zm0 160v-48c0-6.627-5.373-12-12-12H24c-6.627 0-12 5.373-12 12v48c0 6.627 5.373 12 12 12h48c6.627 0 12-5.373 12-12z"/></svg>

public/img/icons/power-off.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M388.5 46.3C457.9 90.3 504 167.8 504 256c0 136.8-110.8 247.7-247.5 248C120 504.3 8.2 393 8 256.4 7.9 168 54 90.3 123.5 46.3c5.8-3.7 13.5-1.8 16.9 4.2l3.9 7c3.1 5.6 1.3 12.6-4.1 16C79.9 112 40 179.6 40 256c0 119.9 97.3 216 216 216 119.9 0 216-97.3 216-216 0-77-40.1-144.2-100.3-182.4-5.4-3.4-7.2-10.5-4.1-16l3.9-7c3.4-6.1 11.2-7.9 17-4.3zM272 276V12c0-6.6-5.4-12-12-12h-8c-6.6 0-12 5.4-12 12v264c0 6.6 5.4 12 12 12h8c6.6 0 12-5.4 12-12z"/></svg>

public/img/icons/search.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M508.5 481.6l-129-129c-2.3-2.3-5.3-3.5-8.5-3.5h-10.3C395 312 416 262.5 416 208 416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c54.5 0 104-21 141.1-55.2V371c0 3.2 1.3 6.2 3.5 8.5l129 129c4.7 4.7 12.3 4.7 17 0l9.9-9.9c4.7-4.7 4.7-12.3 0-17zM208 384c-97.3 0-176-78.7-176-176S110.7 32 208 32s176 78.7 176 176-78.7 176-176 176z"/></svg>

public/img/icons/sign-out.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M48 64h132c6.6 0 12 5.4 12 12v8c0 6.6-5.4 12-12 12H48c-8.8 0-16 7.2-16 16v288c0 8.8 7.2 16 16 16h132c6.6 0 12 5.4 12 12v8c0 6.6-5.4 12-12 12H48c-26.5 0-48-21.5-48-48V112c0-26.5 21.5-48 48-48zm279 19.5l-7.1 7.1c-4.7 4.7-4.7 12.3 0 17l132 131.4H172c-6.6 0-12 5.4-12 12v10c0 6.6 5.4 12 12 12h279.9L320 404.4c-4.7 4.7-4.7 12.3 0 17l7.1 7.1c4.7 4.7 12.3 4.7 17 0l164.5-164c4.7-4.7 4.7-12.3 0-17L344 83.5c-4.7-4.7-12.3-4.7-17 0z"/></svg>

public/img/icons/sitemap.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path d="M616 320h-72v-48c0-26.468-21.532-48-48-48H336v-32h56c13.255 0 24-10.745 24-24V24c0-13.255-10.745-24-24-24H248c-13.255 0-24 10.745-24 24v144c0 13.255 10.745 24 24 24h56v32H144c-26.467 0-48 21.532-48 48v48H24c-13.255 0-24 10.745-24 24v144c0 13.255 10.745 24 24 24h144c13.255 0 24-10.745 24-24V344c0-13.255-10.745-24-24-24h-40v-48c0-8.822 7.178-16 16-16h160v64h-56c-13.255 0-24 10.745-24 24v144c0 13.255 10.745 24 24 24h144c13.255 0 24-10.745 24-24V344c0-13.255-10.745-24-24-24h-56v-64h160c8.822 0 16 7.178 16 16v48h-40c-13.255 0-24 10.745-24 24v144c0 13.255 10.745 24 24 24h144c13.255 0 24-10.745 24-24V344c0-13.255-10.745-24-24-24zm-456 32v128H32V352h128zm224 0v128H256V352h128zM256 160V32h128v128H256zm352 320H480V352h128v128z"/></svg>

public/img/icons/sort-alpha-down.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M204.485 392l-84 84.485c-4.686 4.686-12.284 4.686-16.971 0l-84-84.485c-4.686-4.686-4.686-12.284 0-16.97l7.07-7.071c4.686-4.686 12.284-4.686 16.971 0L95 419.887V44c0-6.627 5.373-12 12-12h10c6.627 0 12 5.373 12 12v375.887l51.444-51.928c4.686-4.686 12.284-4.686 16.971 0l7.07 7.071c4.687 4.686 4.687 12.284 0 16.97zm100.492-220.355h61.547l15.5 44.317A12 12 0 0 0 393.351 224h11.552c8.31 0 14.105-8.243 11.291-16.062l-60.441-168A11.999 11.999 0 0 0 344.462 32h-16.924a11.999 11.999 0 0 0-11.291 7.938l-60.441 168c-2.813 7.82 2.981 16.062 11.291 16.062h11.271c5.12 0 9.676-3.248 11.344-8.088l15.265-44.267zm10.178-31.067l18.071-51.243c.853-2.56 1.776-5.626 2.668-8.743.871 3.134 1.781 6.219 2.644 8.806l17.821 51.18h-41.204zm-3.482 307.342c4.795-6.044-1.179 2.326 92.917-133.561a12.011 12.011 0 0 0 2.136-6.835V300c0-6.627-5.373-12-12-12h-113.84c-6.627 0-12 5.373-12 12v8.068c0 6.644 5.393 12.031 12.037 12.031 81.861.001 76.238.011 78.238-.026-2.973 3.818 4.564-7.109-92.776 133.303a12.022 12.022 0 0 0-2.142 6.847V468c0 6.627 5.373 12 12 12h119.514c6.627 0 12-5.373 12-12v-8.099c0-6.627-5.373-12-12-12-87.527-.001-81.97-.01-84.084.019z"/></svg>

public/img/icons/sort-alpha-up.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M19.515 120l84-84.485c4.686-4.686 12.284-4.686 16.971 0l84 84.485c4.686 4.686 4.686 12.284 0 16.97l-7.07 7.071c-4.686 4.686-12.284 4.686-16.971 0L129 92.113V468c0 6.627-5.373 12-12 12h-10c-6.627 0-12-5.373-12-12V92.113l-51.444 51.928c-4.686 4.686-12.284 4.686-16.971 0l-7.07-7.071c-4.687-4.686-4.687-12.284 0-16.97zm285.462 51.645h61.547l15.5 44.317A12 12 0 0 0 393.351 224h11.552c8.31 0 14.105-8.243 11.291-16.062l-60.441-168A11.999 11.999 0 0 0 344.462 32h-16.924a11.999 11.999 0 0 0-11.291 7.938l-60.441 168c-2.813 7.82 2.981 16.062 11.291 16.062h11.271c5.12 0 9.676-3.248 11.344-8.088l15.265-44.267zm10.178-31.067l18.071-51.243c.853-2.56 1.776-5.626 2.668-8.743.871 3.134 1.781 6.219 2.644 8.806l17.821 51.18h-41.204zm-3.482 307.342c4.795-6.044-1.179 2.326 92.917-133.561a12.011 12.011 0 0 0 2.136-6.835V300c0-6.627-5.373-12-12-12h-113.84c-6.627 0-12 5.373-12 12v8.068c0 6.644 5.393 12.031 12.037 12.031 81.861.001 76.238.011 78.238-.026-2.973 3.818 4.564-7.109-92.776 133.303a12.022 12.022 0 0 0-2.142 6.847V468c0 6.627 5.373 12 12 12h119.514c6.627 0 12-5.373 12-12v-8.099c0-6.627-5.373-12-12-12-87.527-.001-81.97-.01-84.084.019z"/></svg>

public/img/icons/sync.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M492 8h-10c-6.627 0-12 5.373-12 12v110.627C426.929 57.261 347.224 8 256 8 123.228 8 14.824 112.338 8.31 243.493 7.971 250.311 13.475 256 20.301 256h10.016c6.353 0 11.646-4.949 11.977-11.293C48.157 132.216 141.097 42 256 42c82.862 0 154.737 47.077 190.289 116H332c-6.627 0-12 5.373-12 12v10c0 6.627 5.373 12 12 12h160c6.627 0 12-5.373 12-12V20c0-6.627-5.373-12-12-12zm-.301 248h-10.015c-6.352 0-11.647 4.949-11.977 11.293C463.841 380.158 370.546 470 256 470c-82.608 0-154.672-46.952-190.299-116H180c6.627 0 12-5.373 12-12v-10c0-6.627-5.373-12-12-12H20c-6.627 0-12 5.373-12 12v160c0 6.627 5.373 12 12 12h10c6.627 0 12-5.373 12-12V381.373C85.071 454.739 164.777 504 256 504c132.773 0 241.176-104.338 247.69-235.493.339-6.818-5.165-12.507-11.991-12.507z"/></svg>

public/img/icons/trash-alt.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M336 64l-33.6-44.8C293.3 7.1 279.1 0 264 0h-80c-15.1 0-29.3 7.1-38.4 19.2L112 64H24C10.7 64 0 74.7 0 88v2c0 3.3 2.7 6 6 6h26v368c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48V96h26c3.3 0 6-2.7 6-6v-2c0-13.3-10.7-24-24-24h-88zM184 32h80c5 0 9.8 2.4 12.8 6.4L296 64H152l19.2-25.6c3-4 7.8-6.4 12.8-6.4zm200 432c0 8.8-7.2 16-16 16H80c-8.8 0-16-7.2-16-16V96h320v368zm-176-44V156c0-6.6 5.4-12 12-12h8c6.6 0 12 5.4 12 12v264c0 6.6-5.4 12-12 12h-8c-6.6 0-12-5.4-12-12zm-80 0V156c0-6.6 5.4-12 12-12h8c6.6 0 12 5.4 12 12v264c0 6.6-5.4 12-12 12h-8c-6.6 0-12-5.4-12-12zm160 0V156c0-6.6 5.4-12 12-12h8c6.6 0 12 5.4 12 12v264c0 6.6-5.4 12-12 12h-8c-6.6 0-12-5.4-12-12z"/></svg>

public/img/icons/trash.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M368 64l-33.6-44.8C325.3 7.1 311.1 0 296 0h-80c-15.1 0-29.3 7.1-38.4 19.2L144 64H40c-13.3 0-24 10.7-24 24v2c0 3.3 2.7 6 6 6h20.9l33.2 372.3C78.3 493 99 512 123.9 512h264.2c24.9 0 45.6-19 47.8-43.7L469.1 96H490c3.3 0 6-2.7 6-6v-2c0-13.3-10.7-24-24-24H368zM216 32h80c5 0 9.8 2.4 12.8 6.4L328 64H184l19.2-25.6c3-4 7.8-6.4 12.8-6.4zm188 433.4c-.7 8.3-7.6 14.6-15.9 14.6H123.9c-8.3 0-15.2-6.3-15.9-14.6L75 96h362l-33 369.4z"/></svg>

tests/integration/components/file-preview/component-test.js

@@ -1,24 +1,15 @@
-// import { moduleForComponent, test } from 'ember-qunit';
-// import hbs from 'htmlbars-inline-precompile';
-//
-// moduleForComponent('file-preview', 'Integration | Component | file preview', {
-//   integration: true
-// });
-//
-// test('it renders', function(assert) {
-//   // Set any properties with this.set('myProperty', 'value');
-//   // Handle any actions with this.on('myAction', function(val) { ... });
-//
-//   this.render(hbs`{{file-preview}}`);
-//
-//   assert.equal(this.$().text().trim(), '');
-//
-//   // Template block usage:
-//   this.render(hbs`
-//     {{#file-preview}}
-//       template block text
-//     {{/file-preview}}
-//   `);
-//
-//   assert.equal(this.$().text().trim(), 'template block text');
-// });
+import { moduleForComponent, test } from 'ember-qunit';
+import hbs from 'htmlbars-inline-precompile';
+
+moduleForComponent('file-preview', 'Integration | Component | file preview', {
+  integration: true
+});
+
+test('it renders', function(assert) {
+  // Set any properties with this.set('myProperty', 'value');
+  // Handle any actions with this.on('myAction', function(val) { ... });
+
+  this.render(hbs`{{file-preview}}`);
+
+  assert.equal(this.$().text().trim(), '');
+});

tests/unit/controllers/index-test.js

@@ -4,8 +4,89 @@ moduleFor('controller:index', 'Unit | Controller | index', {
   needs: ['controller:application', 'service:storage']
 });
 
-// Replace this with your real tests.
-test('it exists', function(assert) {
+test('#parentDir', function(assert) {
   let controller = this.subject();
-  assert.ok(controller);
+  controller.set('currentDirPath', 'islands/spain/canaries/tenerife/');
+
+  assert.equal(controller.get('parentDir'), 'islands/spain/canaries/');
+});
+
+test('#currentListingContainsDocuments', function(assert) {
+  let controller = this.subject();
+
+  controller.set('currentListing', [
+    {
+      "name": "spain/",
+      "type": "folder",
+      "isBinary": false,
+      "isFolder": true,
+      "size": null,
+      "path": "/islands/spain/",
+      "etag": "885098000"
+    }
+  ]);
+
+  assert.notOk(controller.get('currentListingContainsDocuments'),
+               'returns false when no documents are present');
+
+  controller.set('currentListing', [
+    {
+      "name": "spain/",
+      "type": "folder",
+      "isBinary": false,
+      "isFolder": true,
+      "size": null,
+      "path": "/islands/spain/",
+      "etag": "885098000"
+    },
+    {
+      "name": "lamu",
+      "type": "application/json",
+      "isBinary": false,
+      "isFolder": false,
+      "size": 202,
+      "path": "/islands/lamu",
+      "etag": "478058546"
+    }
+  ]);
+
+  assert.ok(controller.get('currentListingContainsDocuments'),
+            'returns true when no documents are present');
+});
+
+test('#documentCount', function(assert) {
+  let controller = this.subject();
+
+  controller.set('currentListing', [
+    {
+      "name": "spain/",
+      "type": "folder",
+      "isBinary": false,
+      "isFolder": true,
+      "size": null,
+      "path": "/islands/spain/",
+      "etag": "885098000"
+    },
+    {
+      "name": "lamu",
+      "type": "application/json",
+      "isBinary": false,
+      "isFolder": false,
+      "size": 202,
+      "path": "/islands/lamu",
+      "etag": "478058546"
+    },
+    {
+      "name": "dominica",
+      "type": "application/json",
+      "isBinary": false,
+      "isFolder": false,
+      "size": 202,
+      "path": "/islands/dominica",
+      "etag": "929838541"
+    }
+  ]);
+
+  assert.equal(controller.get('documentCount'), 2,
+               'returns the number of documents in the current listing');
 });

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('it exists', function(assert) {
+test('#documentIsJSON', 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'));
 });