1.6.0

Contribution details

.eslintrc.js

@@ -1,7 +1,7 @@
 module.exports = {
   root: true,
   parserOptions: {
-    ecmaVersion: 2017,
+    ecmaVersion: 2018,
     sourceType: 'module'
   },
   globals: {
@@ -41,7 +41,15 @@ module.exports = {
       env: {
         browser: false,
         node: true
-      }
+      },
+      plugins: ['node'],
+      rules: Object.assign({}, require('eslint-plugin-node').configs.recommended.rules, {
+        // add your custom rules and overrides for node files here
+
+        // this can be removed once the following is fixed
+        // https://github.com/mysticatea/eslint-plugin-node/issues/77
+        'node/no-unpublished-require': 'off'
+      })
     }
   ]
 };

.template-lintrc.js

@@ -4,6 +4,7 @@ module.exports = {
   extends: 'recommended',
 
   rules: {
-    'simple-unless': false
+    'simple-unless': false,
+    'no-nested-interactive': false
   }
 };

.travis.yml

@@ -23,9 +23,6 @@ env:
     # See https://git.io/vdao3 for details.
     - JOBS=1
 
-before_install:
-  - npm config set spin false
-
 script:
   - npm run lint:hbs
   - npm run lint:js

app/components/contribution-list/component.js

@@ -6,9 +6,13 @@ import { inject as service } from '@ember/service';
 
 export default Component.extend({
 
+  router: service(),
+
   tagName: 'div',
   classNames: ['contributions'],
 
+  selectedContribution: null,
+
   showQuickFilter: false,
   hideSmallContributions: false,
   contributorId: null,
@@ -57,6 +61,10 @@ export default Component.extend({
       } else {
         window.alert('Only members can veto contributions. Please ask someone to set you up.');
       }
+    },
+
+    openContributionDetails(contribution) {
+      this.router.transitionTo('dashboard.contributions.show', contribution);
     }
 
   }

app/components/contribution-list/template.hbs

@@ -31,17 +31,13 @@
 
 <ul class="contribution-list">
   {{#each contributionsFiltered as |contribution|}}
-    <li data-contribution-id={{contribution.id}} class="{{contribution-status contribution}} {{if contribution.vetoed "vetoed"}}">
+    <li role="button" {{action "openContributionDetails" contribution}}
+        data-contribution-id={{contribution.id}}
+        class="{{contribution-status contribution}}{{if contribution.vetoed " vetoed"}}{{if (eq contribution.id selectedContributionId) " selected"}}">
       <p class="meta">
         <span class="recipient">{{user-avatar contributor=contribution.contributor}}</span>
         <span class="category {{contribution.kind}}">({{contribution.kind}})</span>
-        <span class="title">
-          {{#if contribution.url}}
-            <a href={{contribution.url}} target="_blank" rel="noopener" title={{contribution.description}}>{{contribution.description}}</a>
-          {{else}}
-            {{contribution.description}}
-          {{/if}}
-        </span>
+        <span class="title">{{contribution.description}}</span>
       </p>
       <p class="kredits-amount">
         <span class="amount">{{contribution.amount}}</span><span class="symbol">₭S</span>

app/components/contributor-list/component.js

@@ -7,6 +7,7 @@ export default Component.extend({
 
   tagName: 'table',
   classNames: 'contributor-list',
+
   selectedContributorId: null,
 
   actions: {

app/components/contributor-list/template.hbs

@@ -1,8 +1,7 @@
 <tbody>
   {{#each contributorList as |c|}}
-    <tr role="button"
-        class="{{if (is-current-user c.contributor) "current-user"}} {{if (eq c.contributor.id selectedContributorId) "selected"}}"
-        {{action "openContributorDetails" c.contributor}}>
+    <tr role="button" {{action "openContributorDetails" c.contributor}}
+        class="{{if (is-current-user c.contributor) "current-user"}} {{if (eq c.contributor.id selectedContributorId) "selected"}}">
       <td class="person">
         {{user-avatar contributor=c.contributor}} {{c.contributor.name}}
       </td>

app/controllers/dashboard.js

@@ -8,6 +8,7 @@ export default Controller.extend({
 
   showDetailsPane: false,
   selectedContributorId: null,
+  selectedContributionId: null,
 
   currentBlock: alias('kredits.currentBlock'),
 

app/models/contribution.js

@@ -1,4 +1,4 @@
-import EmberObject from '@ember/object';
+import EmberObject, { computed } from '@ember/object';
 import bignumber from 'kredits-web/utils/cps/bignumber';
 
 export default EmberObject.extend({
@@ -18,11 +18,17 @@ export default EmberObject.extend({
   description: null,
   details: null,
   url: null,
+  date: null,
+  time: null,
   ipfsData: '',
 
   init () {
     this._super(...arguments);
     this.set('details', {});
-  }
+  },
+
+  iso8601Date: computed('date', 'time', function() {
+    return this.time ? `${this.date}T${this.time}` : this.date;
+  })
 
 });

app/router.js

@@ -11,6 +11,10 @@ Router.map(function() {
     this.route('contributors', function() {
       this.route('show', { path: ':id' });
     });
+
+    this.route('contributions', function() {
+      this.route('show', { path: ':id' });
+    });
   });
   this.route('proposals', function() {
     this.route('new');

app/routes/dashboard/contributions/show.js

@@ -0,0 +1,32 @@
+import { inject as service } from '@ember/service';
+import Route from '@ember/routing/route';
+import { alias } from '@ember/object/computed';
+
+export default Route.extend({
+
+  kredits: service(),
+  contributions: alias('kredits.contributions'),
+
+  model (params) {
+    return this.contributions.findBy('id', parseInt(params.id));
+  },
+
+  setupController (controller, model) {
+    this._super(controller, model);
+
+    this.controllerFor('dashboard')
+        .setProperties({
+          showDetailsPane: true,
+          selectedContributionId: model.id
+        });
+  },
+
+  deactivate () {
+    this.controllerFor('dashboard')
+        .setProperties({
+          showDetailsPane: false,
+          selectedContributionId: null
+        });
+  }
+
+});

app/styles/app.scss

@@ -99,6 +99,7 @@ section {
 @import "forms";
 
 @import "components/contribution-list";
+@import "components/contribution-details";
 @import "components/contributor-list";
 @import "components/contributor-profile";
 @import "components/external-account-link";

app/styles/components/_contribution-details.scss

@@ -0,0 +1,59 @@
+section#contribution-details {
+  header {
+    nav {
+      .amount {
+        font-size: 1.5rem;
+      }
+
+      .symbol {
+        padding-left: 0.2rem;
+      }
+    }
+  }
+
+  .content {
+    width: 100%;
+    margin: 0 0 1.5rem;
+    padding: 2rem 2rem;
+
+    border-top: 1px solid rgba(255,255,255,0.2);
+    border-bottom: 1px solid rgba(255,255,255,0.2);
+    background-color: rgba(255,255,255,0.1);
+
+    h3 {
+      font-size: 1.5rem;
+      margin-bottom: 2rem;
+    }
+
+    p {
+      margin-bottom: 2rem;
+
+      span {
+        font-size: inherit;
+      }
+
+      &.who-what-when {
+        font-size: 1.2rem;
+        margin-bottom: 1.2rem;
+      }
+
+      &:last-of-type {
+        margin-bottom: 0;
+      }
+    }
+
+    a {
+      color: $primary-color;
+      text-decoration: none;
+      font-size: inherit;
+
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+  }
+
+  .actions {
+    text-align: center;
+  }
+}

app/styles/components/_contribution-list.scss

@@ -37,6 +37,7 @@ ul.contribution-list {
     background-color: rgba(255,255,255,0.1);
     font-size: 1.2rem;
     border-bottom: 1px solid rgba(255,255,255,0.2);
+    cursor: pointer;
 
     &:first-of-type {
       border-top: 1px solid rgba(255,255,255,0.2);
@@ -52,6 +53,10 @@ ul.contribution-list {
       opacity: 0.6;
     }
 
+    &.selected {
+      background-color: rgba(255,255,255,0.2);
+    }
+
     p {
       align-self: center;
       margin: 0;

app/templates/dashboard.hbs

@@ -53,6 +53,7 @@
           {{contribution-list contributions=contributionsUnconfirmedSorted
                               vetoContribution=(action "vetoContribution")
                               contractInteractionEnabled=kredits.hasAccounts
+                              selectedContributionId=selectedContributionId
                               showQuickFilter=showQuickFilterUnconfirmed}}
         </div>
       </section>
@@ -68,6 +69,7 @@
       <div class="content">
         {{contribution-list contributions=contributionsConfirmedSorted
                             vetoContribution=(action "vetoContribution")
+                            selectedContributionId=selectedContributionId
                             showQuickFilter=showQuickFilterConfirmed}}
       </div>
     </section>

app/templates/dashboard/contributions/show.hbs

@@ -0,0 +1,47 @@
+<section id="contribution-details">
+  <header class="with-nav">
+    <h2>Contribution #{{model.id}}</h2>
+    <nav>
+      <span class="amount">{{model.amount}}</span>&nbsp;
+      <span class="symbol">₭S</span>
+    </nav>
+  </header>
+
+  <div class="content">
+    <p class="who-what-when">
+      <span class="contributor">
+        {{user-avatar contributor=model.contributor}}
+        {{link-to model.contributor.name "dashboard.contributors.show" model.contributor}}
+      </span>
+      contributed
+      <span class="date" title={{model.iso8601Date}}>{{moment-from model.iso8601Date}}</span>:
+    </p>
+    <h3>{{model.description}}</h3>
+    <p>
+      Kind: {{model.kind}}
+      <br>Status: {{contribution-status model}}
+    </p>
+    {{#if model.url}}
+      <p>
+        <a href={{model.url}}
+           title={{model.description}}
+           class="button"
+           target="_blank"
+           rel="noopener">
+          Open URL
+        </a>
+      </p>
+    {{/if}}
+  </div>
+
+  <div class="actions">
+    <p>
+      {{#if model.ipfsHash}}
+        <a href="https://ipfs.io/ipfs/{{model.ipfsHash}}"
+           class="button small" target="_blank" rel="noopener">
+          Inspect IPFS data
+        </a>
+      {{/if}}
+    </p>
+  </div>
+</section>

config/environment.js

@@ -12,7 +12,7 @@ module.exports = function(environment) {
     EmberENV: {
       FEATURES: {
         // Here you can enable experimental features on an ember canary build
-        // e.g. 'with-controller': true
+        // e.g. EMBER_NATIVE_DECORATOR_SUPPORT: true
       },
       EXTEND_PROTOTYPES: {
         // Prevent Ember Data from overriding Date.parse.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "kredits-web",
-  "version": "1.5.1",
+  "version": "1.6.0",
   "private": true,
   "description": "Contribution dashboard of the Kosmos project",
   "repository": "https://github.com/67P/kredits-web",
@@ -24,46 +24,48 @@
     "deploy": "git push 5apps master"
   },
   "devDependencies": {
-    "@ember/jquery": "^0.5.2",
-    "@ember/optional-features": "^0.6.3",
+    "@ember/jquery": "^0.6.0",
+    "@ember/optional-features": "^0.7.0",
     "babel-preset-es2015": "^6.22.0",
     "babelify": "^7.3.0",
     "brfs": "^2.0.2",
-    "broccoli-asset-rev": "^2.7.0",
-    "ember-ajax": "^4.0.1",
+    "broccoli-asset-rev": "^3.0.0",
+    "ember-ajax": "^5.0.0",
     "ember-auto-import": "^1.5.2",
     "ember-awesome-macros": "0.41.0",
-    "ember-cli": "~3.8.1",
+    "ember-cli": "~3.10.1",
     "ember-cli-app-version": "^3.2.0",
-    "ember-cli-babel": "^7.1.2",
+    "ember-cli-babel": "^7.7.3",
     "ember-cli-chart": "^3.4.0",
     "ember-cli-dependency-checker": "^3.1.0",
-    "ember-cli-eslint": "^4.2.3",
-    "ember-cli-htmlbars": "^3.0.0",
-    "ember-cli-htmlbars-inline-precompile": "^1.0.3",
+    "ember-cli-eslint": "^5.1.0",
+    "ember-cli-htmlbars": "^3.0.1",
+    "ember-cli-htmlbars-inline-precompile": "^2.1.0",
     "ember-cli-inject-live-reload": "^1.8.2",
+    "ember-cli-moment-shim": "^3.7.1",
     "ember-cli-sass": "^7.2.0",
     "ember-cli-sri": "^2.1.1",
     "ember-cli-template-lint": "^1.0.0-beta.1",
     "ember-cli-uglify": "^2.1.0",
-    "ember-cli-update": "^0.21.2",
     "ember-export-application-global": "^2.0.0",
     "ember-flatpickr": "^2.14.0",
-    "ember-load-initializers": "^1.1.0",
+    "ember-load-initializers": "^2.0.0",
     "ember-macro-helpers": "0.17.0",
     "ember-maybe-import-regenerator": "^0.1.6",
+    "ember-moment": "^7.8.1",
     "ember-promise-helpers": "1.0.6",
-    "ember-qunit": "^3.4.1",
+    "ember-qunit": "^4.4.1",
     "ember-resolver": "^5.0.1",
-    "ember-source": "~3.8.0",
+    "ember-source": "~3.10.0",
     "ember-truth-helpers": "github:jmurphyau/ember-truth-helpers#31a14373a31f1f82c77537720549b47a95c28e5f",
-    "eslint-plugin-ember": "^5.2.0",
+    "eslint-plugin-ember": "^6.2.0",
+    "eslint-plugin-node": "^9.0.1",
     "ethers": "^4.0.27",
     "kosmos-schemas": "^2.0.0",
     "kredits-contracts": "^5.4.0",
     "loader.js": "^4.7.0",
     "ndjson": "github:hugomrdias/ndjson#feat/readable-stream3",
-    "qunit-dom": "^0.8.0",
+    "qunit-dom": "^0.8.4",
     "transform-loader": "^0.2.4",
     "tv4": "^1.3.0"
   },

release/index.html

@@ -8,10 +8,10 @@
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
 
     
-<meta name="kredits-web/config/environment" content="%7B%22modulePrefix%22%3A%22kredits-web%22%2C%22environment%22%3A%22production%22%2C%22rootURL%22%3A%22%2F%22%2C%22locationType%22%3A%22auto%22%2C%22EmberENV%22%3A%7B%22FEATURES%22%3A%7B%7D%2C%22EXTEND_PROTOTYPES%22%3A%7B%22Date%22%3Afalse%7D%7D%2C%22APP%22%3A%7B%22name%22%3A%22kredits-web%22%2C%22version%22%3A%221.5.1%2Bc6588097%22%7D%2C%22browserify%22%3A%7B%22tests%22%3Atrue%2C%22transform%22%3A%5B%5B%22babelify%22%2C%7B%22presets%22%3A%5B%22es2015%22%5D%2C%22global%22%3Atrue%7D%5D%5D%7D%2C%22web3ProviderUrl%22%3A%22https%3A%2F%2Frinkeby.infura.io%2Fv3%2Fd4f788b7a6584f7db2fc3c268d4d09e9%22%2C%22ipfs%22%3A%7B%22host%22%3A%22ipfs.kosmos.org%22%2C%22port%22%3A%225444%22%2C%22protocol%22%3A%22https%22%2C%22gatewayUrl%22%3A%22https%3A%2F%2Fipfs.kosmos.org%2Fipfs%22%7D%2C%22kreditsApmDomain%22%3A%22open.aragonpm.eth%22%2C%22exportApplicationGlobal%22%3Afalse%7D" />
+<meta name="kredits-web/config/environment" content="%7B%22modulePrefix%22%3A%22kredits-web%22%2C%22environment%22%3A%22production%22%2C%22rootURL%22%3A%22%2F%22%2C%22locationType%22%3A%22auto%22%2C%22EmberENV%22%3A%7B%22FEATURES%22%3A%7B%7D%2C%22EXTEND_PROTOTYPES%22%3A%7B%22Date%22%3Afalse%7D%2C%22_JQUERY_INTEGRATION%22%3Atrue%7D%2C%22APP%22%3A%7B%22name%22%3A%22kredits-web%22%2C%22version%22%3A%221.6.0%2B9c185935%22%7D%2C%22browserify%22%3A%7B%22tests%22%3Atrue%2C%22transform%22%3A%5B%5B%22babelify%22%2C%7B%22presets%22%3A%5B%22es2015%22%5D%2C%22global%22%3Atrue%7D%5D%5D%7D%2C%22web3ProviderUrl%22%3A%22https%3A%2F%2Frinkeby.infura.io%2Fv3%2Fd4f788b7a6584f7db2fc3c268d4d09e9%22%2C%22ipfs%22%3A%7B%22host%22%3A%22ipfs.kosmos.org%22%2C%22port%22%3A%225444%22%2C%22protocol%22%3A%22https%22%2C%22gatewayUrl%22%3A%22https%3A%2F%2Fipfs.kosmos.org%2Fipfs%22%7D%2C%22kreditsApmDomain%22%3A%22open.aragonpm.eth%22%2C%22exportApplicationGlobal%22%3Afalse%7D" />
 
     <link integrity="" rel="stylesheet" href="/assets/vendor-179cf27a97ea5bbb0ce72403a401cc8c.css">
-    <link integrity="" rel="stylesheet" href="/assets/kredits-web-d27bdcdf554d9b3bd6b4d37dd84f4db2.css">
+    <link integrity="" rel="stylesheet" href="/assets/kredits-web-a396c24a9ca056f27e5b65609d59b97e.css">
 
     
 
@@ -24,8 +24,8 @@
   <body>
     
 
-    <script src="/assets/vendor-13953d1578bf9c8e1d4dec9854bc4804.js" integrity="sha256-F5T7/NqJV3S3xep1UpKy/oQii+9YrqCry6EiZxhkzOA= sha512-y4Kk91N4T4PdPgjLiBRJV7q8XFmQY9Dh5ygJayeRcMRBueWJCe4OPDnrstcJ8C/cjGePUGOFoTmMSbF0wWTB+w==" ></script>
-    <script src="/assets/kredits-web-686d8b7af100292e31164c098c81d9fe.js" integrity="sha256-HjLTIO3FCh5VYjuLTlJEx4Ek3OX9fcpEpnNTVYjmiXs= sha512-NQqT/Mx6eFztNGI+lmRPYo/cfDSGKHLtttfzh69EV6daCMLtJUW1NfI4xNpErMadPudRMOAG3R5Uis7+qLoJjw==" ></script>
+    <script src="/assets/vendor-d84a577c9f0624a0b15861936fe740f2.js" integrity="sha256-o5SitqUpXKccldebvatDY/WvXTbEnAu/IA/TyvBxU0U= sha512-gDMabciAMuF89anreuu39lAYDOf6tXMMHxVRUxtqGpmhJdSAUQGFQ2MWTgE8mt+8GvGvPxw9QvnHuBJDK34YVw==" ></script>
+    <script src="/assets/kredits-web-4b35839b5ed8ad1ce819c960f4750ade.js" integrity="sha256-NdPT2sp5XKdQ8vqjEtAXPx3MG48ey1tEEkarF7MuAjs= sha512-cw3EEhGyW7lz2MWd3pXsN/FvxSeye7iP52/fIDImMyhOI6lkj1on8R67ZfMR5e/5sQKTQOnD4Qdg/lp1jb9Zqg==" ></script>
 
     
   </body>

tests/integration/components/user-avatar/component-test.js

@@ -11,7 +11,7 @@ module('Integration | Component | user-avatar', function(hooks) {
     this.set('bumi', contributors.findBy('id', '1'));
     await render(hbs`{{user-avatar contributor=bumi}}`);
 
-    assert.equal(this.element.textContent.trim(), '');
+    assert.dom(this.element).hasText('');
   });
 
   test('default image source URL', async function(assert) {

tests/unit/routes/dashboard/contributions/show-test.js

@@ -0,0 +1,11 @@
+import { module, test } from 'qunit';
+import { setupTest } from 'ember-qunit';
+
+module('Unit | Route | dashboard/contributions/show', function(hooks) {
+  setupTest(hooks);
+
+  test('it exists', function(assert) {
+    let route = this.owner.lookup('route:dashboard/contributions/show');
+    assert.ok(route);
+  });
+});

tests/unit/utils/group-by-test.js

@@ -5,37 +5,37 @@ import { A } from '@ember/array';
 import { module, test } from 'qunit';
 import groupBy from 'kredits-web/utils/group-by';
 
-module('Unit | Utils | group-by');
+module('Unit | Utils | group-by', function () {
+  let car1 = { name: 'Carrera', color: 'red' };
+  let car2 = { name: 'Veyron', color: 'red' };
+  let car3 = { name: 'Corvette', color: 'blue' };
+  let car4 = { name: 'Viper', color: 'blue' };
+  let car5 = { name: 'Cobra', color: 'green' };
+  let cars = A([car1, car2, car3, car4, car5]);
 
-let car1 = { name: 'Carrera', color: 'red' };
-let car2 = { name: 'Veyron', color: 'red' };
-let car3 = { name: 'Corvette', color: 'blue' };
-let car4 = { name: 'Viper', color: 'blue' };
-let car5 = { name: 'Cobra', color: 'green' };
-let cars = A([car1, car2, car3, car4, car5]);
+  test('it groups cars by color', function (assert) {
+    assert.expect(1);
+    let redGroup = { property: 'color', value: 'red', items: [car1, car2] };
+    let blueGroup = { property: 'color', value: 'blue', items: [car3, car4] };
+    let greenGroup = { property: 'color', value: 'green', items: [car5] };
 
-test('it groups cars by color', function(assert) {
-  assert.expect(1);
-  let redGroup = { property: 'color', value: 'red', items: [car1, car2] };
-  let blueGroup = { property: 'color', value: 'blue', items: [car3, car4] };
-  let greenGroup = { property: 'color', value: 'green', items: [car5] };
+    let result = groupBy(cars, 'color');
+    let expected = [redGroup, blueGroup, greenGroup];
 
-  let result = groupBy(cars, 'color');
-  let expected = [redGroup, blueGroup, greenGroup];
+    assert.deepEqual(result, expected);
+  });
 
-  assert.deepEqual(result, expected);
-});
-
-test('it does not fail with empty array', function(assert) {
-  let cars = [];
-
-  let result = groupBy(cars, 'color');
-  assert.deepEqual(result, []);
-});
-
-test('it does not failkwith null', function(assert) {
-  let cars = null;
-
-  let result = groupBy(cars, 'color');
-  assert.deepEqual(result, []);
+  test('it does not fail with empty array', function (assert) {
+    let cars = [];
+
+    let result = groupBy(cars, 'color');
+    assert.deepEqual(result, []);
+  });
+
+  test('it does not failkwith null', function (assert) {
+    let cars = null;
+
+    let result = groupBy(cars, 'color');
+    assert.deepEqual(result, []);
+  });
 });