0.8.0

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

.scss-lint.yml

@@ -199,7 +199,7 @@ linters:
     style: one_space # or 'at_least_one_space', or 'no_space'
 
   SpaceBeforeBrace:
-    enabled: true
+    enabled: false
     style: space # or 'new_line'
     allow_single_line_padding: false
 

README.md

@@ -1,7 +1,27 @@
-# inspektor
+# RS Inspektor
 
-This README outlines the details of collaborating on this Ember application.
+Inspektor is a simple file browser for inspecting the contents of a
-A short introduction of this app could easily go here.
+[remoteStorage](https://remotestorage.io) account. It is intended for RS app
+developers and power users.
+
+Inspektor is beta software and currently under development. You're invited to
+contribute and/or give feedback: https://gitlab.com/skddc/inspektor
+
+## Features
+
+* [x] Connect RS accounts
+* [x] Traverse/inspect directories
+* [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)
+* [ ] Copy/move documents
+* [ ] Copy/move directories (and enclosed files)
+* [ ] Loading indicator for any view change that loads remote data
+* [ ] Logo/icon
 
 ## Prerequisites
 
@@ -40,7 +60,14 @@ Make use of the many generators for code, try `ember help generate` for more det
 
 ### Deploying
 
-Specify what it takes to deploy your app.
+With the 5apps remote added correctly (and push access to the GitLab repo),
+just run:
+
+    npm run deploy
+
+If you want to deploy this from and to different repos, have a look at the
+`scripts` section in `package.json`, as well as `scripts/deploy.sh` for how it
+works.
 
 ## Further Reading / Useful Links
 

app/components/account-info/component.js

@@ -0,0 +1,18 @@
+import Component from '@ember/component';
+import { computed } from '@ember/object';
+
+export default Component.extend({
+
+  classNames: ['account-info'],
+
+  userAddress: null,
+
+  username: computed('userAddress', function() {
+    return this.get('userAddress').split('@')[0];
+  }),
+
+  host: computed('userAddress', function() {
+    return '@' + this.get('userAddress').split('@')[1];
+  })
+
+});

app/components/account-info/template.hbs

@@ -0,0 +1,4 @@
+<span class="username">{{username}}</span>
+<br><span class="host">{{host}}</span>
+
+{{#link-to "disconnect" class="disconnect"}}disconnect{{/link-to}}

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\/.+$/);
+    return this.get('type').match(/^image\/.+$/); }.property('type'),
-  }.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/application.js

@@ -1,8 +1,8 @@
 import Controller from '@ember/controller';
 import EmberObject from '@ember/object';
+import { computed, observer } from '@ember/object';
 import { inject as service } from '@ember/service';
 import { alias } from '@ember/object/computed';
-import { observer } from '@ember/object';
 import { isEmpty } from '@ember/utils';
 
 export default Controller.extend({
@@ -11,10 +11,12 @@ export default Controller.extend({
 
   connecting: alias('storage.connecting'),
   connected: alias('storage.connected'),
+  userAddress: alias('storage.userAddress'),
   rootListing: alias('storage.rootListing'),
+  currentDirPath: null,
 
-  handleConnected: observer('connected', function() {
+  connectedClass: computed('connected', function() {
-    this.get('storage').fetchRootListing();
+    return this.get('connected') ? 'connected' : 'disconnected';
   }),
 
   categories: function() {
@@ -33,8 +35,14 @@ export default Controller.extend({
     });
 
     return categories;
-  }.property('rootListing')
+  }.property('rootListing'),
-
 
+  connectedChange: observer('connected', function() {
+    if (this.get('connected')) {
+      // console.debug('connectedChange connected');
+    } else {
+      this.set('currentDirPath', null);
+    }
+  }),
 
 });

app/controllers/index.js

@@ -1,27 +1,87 @@
 import Controller from '@ember/controller';
 import { inject as controller } from '@ember/controller';
 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({
 
   application: controller(),
   storage: service(),
 
-  // connecting: alias('storage.connecting'),
+  connected: alias('storage.connected'),
-  // connected: alias('storage.connected'),
   rootListing: alias('storage.rootListing'),
   currentDirPath: alias('application.currentDirPath'),
 
   queryParams: ['path'],
 
-  currentListing: function() {
+  currentListing: function () {
     if (isPresent(this.get('model.currentListing'))) {
       return this.get('model.currentListing').sortBy('name');
     } else {
       return this.get('rootListing');
     }
-  }.property('rootListing.[]', 'model.[]')
+  }.property('rootListing.[]', 'model.[]'),
+
+  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 {
+      this.set('model', null);
+      this.set('path', null);
+    }
+  }),
+
+  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,4 +14,45 @@ 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('Delete?')) {
+        this.get('storage.client')
+            .remove(this.get('path')).then(() => {
+              this.transitionToRoute('index', {
+                queryParams: {
+                  path: this.get('currentDirPath')
+                }
+              });
+            });
+      }
+    }
+
+  }
+
 });

app/router.js

@@ -8,6 +8,8 @@ const Router = EmberRouter.extend({
 
 Router.map(function() {
   this.route('inspect');
+  this.route('connect');
+  this.route('disconnect');
 });
 
 export default Router;

app/routes/application.js

@@ -1,5 +1,38 @@
 import Route from '@ember/routing/route';
+import { inject as service } from '@ember/service';
+import BodyClassMixin from 'ember-body-class/mixins/body-class';
 
-export default Route.extend({
+export default Route.extend(BodyClassMixin, {
+
+  storage: service(),
+
+  beforeModel () {
+    this.get('storage.rs').on('error', (error) => {
+      console.debug('rs.on error', error);
+      if (error.name === 'Unauthorized') {
+        this.handleUnauthorized();
+      } else if (error.name === 'DiscoveryError') {
+        // Do nothing, because the widget will handle it
+      } else {
+        alert('An unknown error occured. Please check the browser console for details.');
+      }
+    });
+  },
+
+  // We need to handle this here, so we can transitionTo
+  // the connect route
+  handleUnauthorized () {
+    // Ignore additional unauthorized events after the
+    // first one
+    if (this.get('storage.unauthorized')) { return; }
+
+    this.get('storage').setProperties({
+      unauthorized: true,
+      connecting: false,
+      connected: false
+    });
+
+    this.transitionTo('connect');
+  }
 
 });

app/routes/connect.js

@@ -0,0 +1,33 @@
+import Route from '@ember/routing/route';
+import { inject as service } from '@ember/service';
+import { later } from '@ember/runloop';
+import { Promise } from 'rsvp';
+
+export default Route.extend({
+
+  storage: service(),
+
+  beforeModel() {
+    return this.waitForConnectionState().then(() => {
+      if (this.get('storage.connected')) {
+        this.transitionTo('index');
+      }
+    });
+  },
+
+  waitForConnectionState() {
+    let self = this;
+
+    return new Promise(resolve => {
+      function checkConnectingDone() {
+        if (self.get('storage.connecting')) {
+          later(checkConnectingDone, 20);
+        } else {
+          resolve();
+        }
+      }
+      checkConnectingDone();
+    });
+  }
+
+});

app/routes/disconnect.js

@@ -0,0 +1,13 @@
+import Route from '@ember/routing/route';
+import { inject as service } from '@ember/service';
+
+export default Route.extend({
+
+  storage: service(),
+
+  beforeModel() {
+    this.get('storage.rs').disconnect();
+    this.transitionTo('connect');
+  }
+
+});

app/routes/index.js

@@ -1,7 +1,8 @@
 import Route from '@ember/routing/route';
 import { inject as service } from '@ember/service';
 import { isEmpty, isPresent } from '@ember/utils';
-import { hash } from 'rsvp';
+import { later } from '@ember/runloop';
+import { hash, Promise } from 'rsvp';
 
 export default Route.extend({
 
@@ -13,6 +14,14 @@ export default Route.extend({
     }
   },
 
+  beforeModel() {
+    return this.waitForConnectionState().then(() => {
+      if (this.get('storage.disconnected')) {
+        this.transitionTo('connect');
+      }
+    });
+  },
+
   model(params) {
     let path = params.path;
 
@@ -35,7 +44,28 @@ export default Route.extend({
 
     if (isPresent(model)) {
       controller.set('currentDirPath', model.currentDirPath);
+
+      if (isEmpty(model.currentListing)) {
+        this.transitionTo('index', {
+          queryParams: { path: controller.get('parentDir') }
+        });
+      }
     }
+  },
+
+  waitForConnectionState() {
+    let self = this;
+
+    return new Promise(resolve => {
+      function checkConnectingDone() {
+        if (self.get('storage.connecting')) {
+          later(checkConnectingDone, 20);
+        } else {
+          resolve();
+        }
+      }
+      checkConnectingDone();
+    });
   }
 
 });

app/services/storage.js

@@ -1,5 +1,7 @@
 import EmberObject from '@ember/object';
 import Service from '@ember/service';
+import { computed, observer } from '@ember/object';
+import { isEmpty } from '@ember/utils';
 import RemoteStorage from 'npm:remotestoragejs';
 import Widget from 'npm:remotestorage-widget';
 import simpleContentType from 'inspektor/utils/simple-content-type';
@@ -10,6 +12,9 @@ export default Service.extend({
   widget: null,
   connecting: true,
   connected: false,
+  unauthorized: false,
+  userAddress: null,
+  disconnected: computed.not('connected'),
   client: null,
   rootListing: null,
 
@@ -26,7 +31,7 @@ export default Service.extend({
     // });
 
     const widget = new Widget(rs, {
-      // leaveOpen: true
+      skipInitial: true
     });
 
     // Attach widget to DOM
@@ -41,6 +46,7 @@ export default Service.extend({
       console.debug('rs.on connected');
       this.set('connecting', false);
       this.set('connected', true);
+      this.set('userAddress', this.get('rs').remote.userAddress);
     });
 
     rs.on('not-connected', () => {
@@ -72,6 +78,21 @@ export default Service.extend({
     this.set('client', rs.scope('/'));
   }.on('init'),
 
+  connectedChange: observer('connected', function() {
+    if (this.get('connected')) {
+      this.fetchRootListing();
+    } else {
+      this.clearLocalData();
+    }
+  }),
+
+  clearLocalData() {
+    this.setProperties({
+      userAddress: null,
+      rootListing: null
+    });
+  },
+
   fetchRootListing() {
     this.fetchListing('').then(items => {
       this.set('rootListing', items.sortBy('name'));
@@ -82,6 +103,8 @@ export default Service.extend({
     let items = [];
 
     return this.get('client').getListing(path).then(listing => {
+      if (isEmpty(listing)) { return []; }
+
       Object.keys(listing).forEach(name => {
         let item = listing[name];
         let type = item['Content-Type'] || 'folder';

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/_colors.scss

@@ -4,7 +4,14 @@ $dark-grey-3: #aaa;
 $light-grey-1: #b5c3d1;
 $light-grey-2: #ececec;
 
+body {
+  background-color: #fff;
+  transition: background-color 0.2s linear;
+}
+
 #app-container {
+  background-color: #fff;
+
   > aside {
     background-color: $dark-grey-1;
     color: $light-grey-1;
@@ -19,7 +26,6 @@ $light-grey-2: #ececec;
   }
 
   > main {
-    // background-color: $dark-grey-2;
     background-color: #fff;
 
     > header {
@@ -32,4 +38,8 @@ $light-grey-2: #ececec;
       }
     }
   }
+
+  &.disconnected main {
+    background-color: $light-grey-2;
+  }
 }

app/styles/_layout.scss

@@ -3,12 +3,24 @@
 }
 
 #remotestorage-widget {
-  position: fixed;
+  display: none;
-  top: 1rem;
+  position: absolute;
-  right: 3rem;
+  top: 20%;
-  z-index: 1;
+  left: 50%;
+  margin-left: -200px;
+  z-index: 23;
 }
 
+.connect #remotestorage-widget {
+  display: block;
+}
+
+// .index #remotestorage-widget {
+//   position: fixed;
+//   top: 1rem;
+//   right: 3rem;
+// }
+
 #app-container {
   position: absolute;
   top: 0;
@@ -21,14 +33,30 @@
   justify-content: flex-start;
   align-items: stretch;
 
+  &.disconnected {
+    > aside {
+      flex: 0;
+      overflow: hidden;
+    }
+  }
+
+  &.connected {
+    > aside {
+      flex: 0 0 16rem;
+      overflow: auto;
+      padding: 2rem;
+    }
+  }
+
   > aside {
-    flex: 0 0 16rem;
+    transition: flex 0.2s ease-in;
-    overflow: auto;
+
-    padding: 2rem;
+    .account-info {
+      height: 5rem;
+    }
 
     nav {
-      margin-top: 5rem;
+      margin-bottom: 3rem;
-      margin-bottom: 4rem;
     }
   }
 
@@ -38,7 +66,19 @@
     padding: 3rem 4rem;
 
     > header {
-      height: 4em;
+      height: 4rem;
+      width: 100%;
+      display: grid;
+      grid-template-columns: 1.618fr 3rem 1fr;
+
+      // nav.breadcrumb-nav {
+      // }
+
+      nav.actions {
+        grid-column-start: 3;
+        text-align: right;
+        margin-top: -0.4rem;
+      }
     }
   }
 }
@@ -47,17 +87,24 @@
   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 {
-      // foo
+      overflow: auto;
     }
 
     &.meta {
       grid-column-start: 3;
+      overflow: hidden;
 
       dl {
         margin: 0;

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,23 +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/components/_account-info.scss

@@ -0,0 +1,28 @@
+.account-info {
+  position: relative;
+
+  .username {
+    font-size: 1.4rem;
+  }
+
+  .host {
+    font-size: 0.8rem;
+    opacity: 0.7;
+  }
+
+  .disconnect {
+    display: inline-block;
+    margin-left: 0.5rem;
+    font-size: 0.8rem;
+    opacity: 0;
+    transition: opacity 0.2s linear;
+  }
+
+  &:hover {
+    .disconnect {
+      font-size: 0.8rem;
+      opacity: 1;
+    }
+  }
+
+}

app/styles/components/_file-preview.scss

@@ -1,8 +1,10 @@
 .file-preview {
 
   code {
+    overflow-wrap: break-word;
+    word-wrap: break-word;
     word-break: break-all;
-    line-height: 1.5rem;
+    hyphens: none;
   }
 
   img {

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/application.hbs

@@ -1,22 +1,11 @@
-<div id="app-container">
+<div id="app-container" class={{connectedClass}}>
   <aside>
     {{#if connected}}
+      {{account-info userAddress=userAddress}}
       {{categories-nav categories=categories}}
     {{/if}}
   </aside>
   <main>
-    <header>
-      {{#if connecting}}
-      <!-- Connecting... -->
-      {{else}}
-        {{#if connected}}
-          {{breadcrumb-nav currentDirPath=currentDirPath}}
-        {{else}}
-          Not connected.
-        {{/if}}
-      {{/if}}
-    </header>
-
     {{outlet}}
   </main>
 </div>

app/templates/disconnect.hbs

@@ -0,0 +1 @@
+{{outlet}}

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,3 +1,13 @@
+<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}}
   {{directory-listing items=currentListing}}
 {{/if}}

app/templates/inspect.hbs

@@ -1,18 +1,60 @@
-<div class="inspect-details">
+<header>
+  {{breadcrumb-nav currentDirPath=currentDirPath}}
+  <nav class="actions">
+    {{#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 {{if metadataHidden "hide-metadata"}}">
   <section class="content">
     {{file-preview metaData=model.documentMetaData
-                   storage=storage}}
+                   isJSON=documentIsJSON
-  </section>
+                   jsonShowTree=jsonShowTree
-  <section class="meta">
+                   jsonShowSource=jsonShowSource}}
-    <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 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.json

@@ -1,23 +1,27 @@
 {
   "name": "inspektor",
-  "version": "0.0.0",
+  "version": "0.8.0",
   "private": true,
-  "description": "Small description for inspektor goes here",
+  "description": "Inspect the contents of your remote storage",
   "license": "MIT",
   "author": "",
   "directories": {
     "doc": "doc",
     "test": "tests"
   },
-  "repository": "",
+  "repository": "gitlab:skddc/inspektor",
   "scripts": {
     "build": "ember build",
+    "build-prod": "ember build --environment production && npm run update-version-file",
     "start": "ember server",
-    "test": "ember test"
+    "test": "ember test",
+    "deploy": "npm run build-prod && bash scripts/deploy.sh",
+    "update-version-file": "bash scripts/update-version-file.sh"
   },
   "devDependencies": {
     "broccoli-asset-rev": "^2.4.5",
     "ember-ajax": "^3.0.0",
+    "ember-body-class": "^0.4.0",
     "ember-browserify": "^1.2.0",
     "ember-cli": "~2.16.2",
     "ember-cli-app-version": "^3.0.0",
@@ -38,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>

scripts/deploy.sh

@@ -0,0 +1,17 @@
+#!/bin/sh
+set -xe
+
+# Check out build branch
+git checkout build-production
+# Copy from build dir to root
+cp -r dist/* .
+# Add all files
+git add --all
+# Commit build files
+git commit -m "Update build - `date -u`"
+# Push to 5apps for deployment
+git push 5apps build-production:master
+# Push build branch to collab repo
+git push origin build-production:build-production
+# Go back to master branch
+git checkout master

scripts/update-version-file.sh

@@ -0,0 +1,10 @@
+#!/bin/bash
+
+PACKAGE_VERSION=$(cat package.json \
+  | grep version \
+  | head -1 \
+  | awk -F: '{ print $2 }' \
+  | sed 's/[",]//g' \
+  | tr -d '[[:space:]]')
+
+echo $PACKAGE_VERSION > dist/VERSION

tests/integration/components/account-info/component-test.js

@@ -0,0 +1,14 @@
+import { moduleForComponent, test } from 'ember-qunit';
+import hbs from 'htmlbars-inline-precompile';
+
+moduleForComponent('account-info', 'Integration | Component | account info', {
+  integration: true
+});
+
+test('it splits the user address into username and host', function(assert) {
+  this.set('userAddress', 'michielbdejong@unhosted.org');
+  this.render(hbs`{{account-info userAddress=userAddress}}`);
+
+  assert.equal(this.$('.username').text().trim(), 'michielbdejong');
+  assert.equal(this.$('.host').text().trim(), '@unhosted.org');
+});

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

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

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

tests/unit/routes/connect-test.js

@@ -0,0 +1,10 @@
+import { moduleFor, test } from 'ember-qunit';
+
+moduleFor('route:connect', 'Unit | Route | connect', {
+  needs: ['service:storage']
+});
+
+test('it exists', function(assert) {
+  let route = this.subject();
+  assert.ok(route);
+});

tests/unit/routes/disconnect-test.js

@@ -0,0 +1,10 @@
+import { moduleFor, test } from 'ember-qunit';
+
+moduleFor('route:disconnect', 'Unit | Route | disconnect', {
+  needs: ['service:storage']
+});
+
+test('it exists', function(assert) {
+  let route = this.subject();
+  assert.ok(route);
+});