Add Dockerfile for testing/CI

.scss-lint.yml

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

Dockerfile

@@ -0,0 +1,31 @@
+FROM node:8
+
+# Set up the Chrome PPA
+RUN wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | apt-key add -
+RUN echo "deb [arch=amd64] http://dl.google.com/linux/chrome/deb/ stable main" >> /etc/apt/sources.list.d/google.list
+
+# Update the package list, and install Chrome and unzip
+RUN apt-get update && apt-get install -y google-chrome-stable unzip
+
+# Set up ChromeDriver environment variables
+ENV CHROMEDRIVER_VERSION 2.33
+ENV CHROMEDRIVER_DIR /chromedriver
+
+# Download and install ChromeDriver
+RUN mkdir $CHROMEDRIVER_DIR
+RUN wget -q --continue -P $CHROMEDRIVER_DIR \
+    "http://chromedriver.storage.googleapis.com/$CHROMEDRIVER_VERSION/chromedriver_linux64.zip" && \
+    unzip $CHROMEDRIVER_DIR/chromedriver* -d $CHROMEDRIVER_DIR
+
+# Put ChromeDriver into the PATH
+ENV PATH $CHROMEDRIVER_DIR:$PATH
+
+WORKDIR /app
+
+# see https://git.io/vdao3
+ENV JOBS 1
+
+COPY package.json package-lock.json ./
+RUN npm install
+
+COPY . ./

README.md

@@ -1,27 +1,7 @@
-# RS Inspektor
+# inspektor
 
-Inspektor is a simple file browser for inspecting the contents of a
+This README outlines the details of collaborating on this Ember application.
-[remoteStorage](https://remotestorage.io) account. It is intended for RS app
+A short introduction of this app could easily go here.
-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)
-* [ ] 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
-* [ ] Logo/icon
 
 ## Prerequisites
 
@@ -60,14 +40,7 @@ Make use of the many generators for code, try `ember help generate` for more det
 
 ### Deploying
 
-With the 5apps remote added correctly (and push access to the GitLab repo),
+Specify what it takes to deploy your app.
-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

@@ -1,18 +0,0 @@
-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

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

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,12 +11,10 @@ export default Controller.extend({
 
   connecting: alias('storage.connecting'),
   connected: alias('storage.connected'),
-  userAddress: alias('storage.userAddress'),
   rootListing: alias('storage.rootListing'),
-  currentDirPath: null,
 
-  connectedClass: computed('connected', function() {
+  handleConnected: observer('connected', function() {
-    return this.get('connected') ? 'connected' : 'disconnected';
+    this.get('storage').fetchRootListing();
   }),
 
   categories: function() {
@@ -35,14 +33,8 @@ 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,6 +1,5 @@
 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 { alias } from '@ember/object/computed';
 import { isPresent } from '@ember/utils';
@@ -10,7 +9,8 @@ export default Controller.extend({
   application: controller(),
   storage: service(),
 
-  connected: alias('storage.connected'),
+  // connecting: alias('storage.connecting'),
+  // connected: alias('storage.connected'),
   rootListing: alias('storage.rootListing'),
   currentDirPath: alias('application.currentDirPath'),
 
@@ -22,15 +22,6 @@ export default Controller.extend({
     } else {
       return this.get('rootListing');
     }
-  }.property('rootListing.[]', 'model.[]'),
+  }.property('rootListing.[]', 'model.[]')
-
-  connectedChange: observer('connected', function() {
-    if (this.get('connected')) {
-      // console.debug('connectedChange connected');
-    } else {
-      this.set('model', null);
-      this.set('path', null);
-    }
-  }),
 
 });

app/controllers/inspect.js

@@ -12,21 +12,4 @@ export default Controller.extend({
 
   queryParams: ['path'],
 
-  actions: {
-
-    deleteItem () {
-      if (window.confirm('Sure?')) {
-        this.get('storage.client')
-            .remove(this.get('path')).then(() => {
-              this.transitionToRoute('index', {
-                queryParams: {
-                  path: this.get('currentDirPath')
-                }
-              });
-            });
-      }
-    }
-
-  }
-
 });

app/router.js

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

app/routes/application.js

@@ -1,36 +1,5 @@
 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(BodyClassMixin, {
+export default Route.extend({
-
-  storage: service(),
-
-  beforeModel () {
-    this.get('storage.rs').on('error', (error) => {
-      console.debug('rs.on error', error);
-      if (error.name === 'Unauthorized') {
-        this.handleUnauthorized();
-      } 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

@@ -1,33 +0,0 @@
-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

@@ -1,13 +0,0 @@
-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,8 +1,7 @@
 import Route from '@ember/routing/route';
 import { inject as service } from '@ember/service';
 import { isEmpty, isPresent } from '@ember/utils';
-import { later } from '@ember/runloop';
+import { hash } from 'rsvp';
-import { hash, Promise } from 'rsvp';
 
 export default Route.extend({
 
@@ -14,14 +13,6 @@ export default Route.extend({
     }
   },
 
-  beforeModel() {
-    return this.waitForConnectionState().then(() => {
-      if (this.get('storage.disconnected')) {
-        this.transitionTo('connect');
-      }
-    });
-  },
-
   model(params) {
     let path = params.path;
 
@@ -45,21 +36,6 @@ export default Route.extend({
     if (isPresent(model)) {
       controller.set('currentDirPath', model.currentDirPath);
     }
-  },
-
-  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,7 +1,5 @@
 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';
@@ -12,9 +10,6 @@ export default Service.extend({
   widget: null,
   connecting: true,
   connected: false,
-  unauthorized: false,
-  userAddress: null,
-  disconnected: computed.not('connected'),
   client: null,
   rootListing: null,
 
@@ -31,7 +26,7 @@ export default Service.extend({
     // });
 
     const widget = new Widget(rs, {
-      skipInitial: true
+      // leaveOpen: true
     });
 
     // Attach widget to DOM
@@ -46,7 +41,6 @@ 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', () => {
@@ -78,21 +72,6 @@ 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'));
@@ -103,8 +82,6 @@ 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/_colors.scss

@@ -4,14 +4,7 @@ $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;
@@ -26,6 +19,7 @@ body {
   }
 
   > main {
+    // background-color: $dark-grey-2;
     background-color: #fff;
 
     > header {
@@ -38,8 +32,4 @@ body {
       }
     }
   }
-
-  &.disconnected main {
-    background-color: $light-grey-2;
-  }
 }

app/styles/_layout.scss

@@ -3,24 +3,12 @@
 }
 
 #remotestorage-widget {
-  display: none;
+  position: fixed;
-  position: absolute;
+  top: 1rem;
-  top: 20%;
+  right: 3rem;
-  left: 50%;
+  z-index: 1;
-  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;
@@ -33,32 +21,15 @@
   justify-content: flex-start;
   align-items: stretch;
 
-  &.disconnected {
-    > aside {
-      flex: 0;
-      overflow: hidden;
-    }
-  }
-
-  &.connected {
   > aside {
     flex: 0 0 16rem;
     overflow: auto;
     padding: 2rem;
-    }
-  }
 
-  > aside {
+    nav {
-    transition: flex 0.2s ease-in;
+      margin-top: 5rem;
-
+      margin-bottom: 4rem;
-    .account-info {
-      height: 5rem;
     }
-
-    // nav {
-    //   margin-top: 5rem;
-    //   margin-bottom: 4rem;
-    // }
   }
 
   > main {
@@ -67,18 +38,7 @@
     padding: 3rem 4rem;
 
     > header {
-      height: 4rem;
+      height: 4em;
-      display: flex;
-      flex-direction: row;
-
-      nav.breadcrumb-nav {
-        flex: 1;
-      }
-
-      nav.actions {
-        flex: 1;
-        text-align: right;
-      }
     }
   }
 }
@@ -93,12 +53,11 @@
     padding: 1.5rem 1px;
 
     &.content {
-      overflow: hidden;
+      // foo
     }
 
     &.meta {
       grid-column-start: 3;
-      overflow: hidden;
 
       dl {
         margin: 0;

app/styles/app.scss

@@ -16,7 +16,6 @@ body {
   padding: 0;
 }
 
-@import "components/account-info";
 @import "components/breadcrumb-nav";
 @import "components/categories-nav";
 @import "components/directory-listing";

app/styles/components/_account-info.scss

@@ -1,28 +0,0 @@
-.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,10 +1,8 @@
 .file-preview {
 
   code {
-    overflow-wrap: break-word;
-    word-wrap: break-word;
     word-break: break-all;
-    hyphens: none;
+    line-height: 1.5rem;
   }
 
   img {

app/templates/application.hbs

@@ -1,11 +1,22 @@
-<div id="app-container" class={{connectedClass}}>
+<div id="app-container">
   <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

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

app/templates/index.hbs

@@ -1,7 +1,3 @@
-<header>
-  {{breadcrumb-nav currentDirPath=currentDirPath}}
-</header>
-
 {{#if currentListing}}
   {{directory-listing items=currentListing}}
 {{/if}}

app/templates/inspect.hbs

@@ -1,10 +1,3 @@
-<header>
-  {{breadcrumb-nav currentDirPath=currentDirPath}}
-  <nav class="actions">
-    <button class="delete" {{action "deleteItem"}}>delete</button>
-  </nav>
-</header>
-
 <div class="inspect-details">
   <section class="content">
     {{file-preview metaData=model.documentMetaData

package.json

@@ -1,27 +1,23 @@
 {
   "name": "inspektor",
-  "version": "0.6.0",
+  "version": "0.0.0",
   "private": true,
-  "description": "Inspect the contents of your remote storage",
+  "description": "Small description for inspektor goes here",
   "license": "MIT",
   "author": "",
   "directories": {
     "doc": "doc",
     "test": "tests"
   },
-  "repository": "gitlab:skddc/inspektor",
+  "repository": "",
   "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",

scripts/deploy.sh

@@ -1,17 +0,0 @@
-#!/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

@@ -1,10 +0,0 @@
-#!/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

@@ -1,14 +0,0 @@
-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/unit/routes/connect-test.js

@@ -1,10 +0,0 @@
-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

@@ -1,10 +0,0 @@
-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);
-});