Update dependencies, octanify moar things

.template-lintrc.js

@@ -7,8 +7,7 @@ module.exports = {
     'no-inline-styles': {
       allowDynamicStyles: true
     },
-    'no-action-modifiers': false,
-    'no-curly-component-invocation': false
+    'no-invalid-interactive': false
   },
 
   ignore: [

app/components/app-authorization/component.js

@@ -1,28 +1,25 @@
-import Component from '@ember/component';
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
 import { run } from '@ember/runloop';
 
-export default Component.extend({
+export default class AppAuthorizationComponent extends Component {
 
-  classNames: ['auth'],
-
-  auth: null,
-
-  click () {
-    const elMeta = this.element.querySelector('.metadata');
+  @action
+  toggleOpenClass (evt) {
+    const elMeta = evt.target.closest('div.auth').querySelector('.metadata');
     const elActions = elMeta.nextElementSibling;
     elMeta.classList.toggle('open');
     elActions.classList.toggle('open');
-  },
-
-  actions: {
+  }
 
-    revoke (auth) {
-      this.element.classList.add('fade-out');
-      run.later(this, function() {
-        this.revokeAccess(auth);
-      }, 300);
-    }
+  @action
+  revoke (evt) {
+    evt.target.closest('div.auth')
+       .classList.add('fade-out');
 
+    run.later(this, function() {
+      this.args.revokeAccess(this.args.auth);
+    }, 300);
   }
 
-});
+}

app/components/app-authorization/template.hbs

@@ -1,25 +1,29 @@
-<div class="icon">
-  <Icons::BrandIconFlat />
-</div>
-<div class="app-name">
-  <h4>
-    {{this.auth.appName}}
-  </h4>
-  <p>
-    <a href={{this.auth.launchUrl}} class="app_url" target="_blank" rel="noopener noreferrer">
-      {{this.auth.clientId}}
-    </a>
-  </p>
-</div>
-<div class="metadata">
-  <p>
-    {{storage-permissions permissions=this.auth.permissions}}
-  </p>
-  <p class="created-at">
-    Approved
-    <time datetime={{this.auth.createdAtDatetime}} title={{this.auth.createdAtDateTitle}}>{{moment-from-now this.auth.createdAt}}</time>{{#if this.auth.expireAt}}, expires <time datetime={{this.auth.expireAtDatetime}} title={{this.auth.expireAtDateTitle}}>{{moment-from-now this.auth.expireAt}}</time>{{/if}}
-  </p>
-</div>
-<div class="actions">
-  <a href="" {{action "revoke" this.auth}} class="danger button">Revoke access</a>
+<div class="auth" {{on "click" (fn this.toggleOpenClass)}}>
+  <div class="icon">
+    <Icons::BrandIconFlat />
+  </div>
+  <div class="app-name">
+    <h4>
+      {{@auth.appName}}
+    </h4>
+    <p>
+      <a href={{@auth.launchUrl}} class="app_url" target="_blank" rel="noopener noreferrer">
+        {{@auth.clientId}}
+      </a>
+    </p>
+  </div>
+  <div class="metadata">
+    <p>
+      <StoragePermissions @permissions={{@auth.permissions}} />
+    </p>
+    <p class="created-at">
+      Approved
+      <time datetime={{@auth.createdAtDatetime}} title={{@auth.createdAtDateTitle}}>{{moment-from-now @auth.createdAt}}</time>{{#if @auth.expireAt}}, expires <time datetime={{@auth.expireAtDatetime}} title={{@auth.expireAtDateTitle}}>{{moment-from-now @auth.expireAt}}</time>{{/if}}
+    </p>
+  </div>
+  <div class="actions">
+    <button type="button" {{on "click" (fn this.revoke)}} class="danger button">
+      Revoke access
+    </button>
+  </div>
 </div>

app/components/topbar/component.js

@@ -1,21 +1,20 @@
-import Component from '@ember/component';
+import Component from '@glimmer/component';
 import { inject as service } from '@ember/service';
+import { action } from '@ember/object'
 import config from 'storage-frontend/config/environment';
 
-export default Component.extend({
+export default class TopbarComponent extends Component {
 
-  tagName: '',
+  @service session;
+  @service currentUser;
 
-  session: service(),
-  currentUser: service(),
+  baseDomain = config.baseDomain;
+  frontpageUrl = 'https://'+config.baseDomain;
 
-  baseDomain: config.baseDomain,
-
-  actions: {
-    logout () {
-      this.set('session.userTriggeredSignout', true);
-      this.session.invalidate();
-    }
+  @action
+  logout () {
+    this.set('session.userTriggeredSignout', true);
+    this.session.invalidate();
   }
 
-});
+}

app/components/topbar/template.hbs

@@ -1,6 +1,6 @@
 <header class="topbar">
   <h1>
-    <img src="{{this.rootURL}}assets/brand/icon-gradient-blue.svg" alt="" role="presentation">
+    <img src="{{this.config.rootURL}}/assets/brand/icon-gradient-blue.svg" alt="" role="presentation">
     <span class="primary"><a href={{this.frontpageUrl}}>5apps</a></span>
     <span class="secondary">Storage</span>
   </h1>
@@ -66,7 +66,7 @@
                     </a>
                   </li>
                   <li>
-                    <a href="#" rel="nofollow" {{action "logout"}}>
+                    <a href="#" rel="nofollow" {{on "click" (fn this.logout)}}>
                       <IconLogOut /> Log out
                     </a>
                   </li>

app/controllers/apps.js

@@ -1,36 +1,35 @@
 import Controller from '@ember/controller';
 import { inject as service } from '@ember/service';
-import { computed } from '@ember/object';
+import { action, computed } from '@ember/object';
 import { isEmpty } from '@ember/utils';
 
-export default Controller.extend({
+export default class AppsController extends Controller {
 
-  currentUser: service(),
+  @service currentUser;
 
-  appsCount: computed('model.[]', function() {
+  @computed('model.[]')
+  get appsCount () {
     return this.get('model.length');
-  }),
+  }
 
-  categoriesCount: computed('model.@each.permissions', function() {
+  @computed('model.@each.permissions')
+  get categoriesCount () {
     const permissions = this.model.map((auth) => {
       return auth.get('permissions').map((permission) => {
         return permission.split(':')[0];
       });
     });
 
     return [].concat(...permissions).uniq().length;
-  }),
-
-  actions: {
-
-    revokeAccess (auth) {
-      auth.destroyRecord().then(() => {
-        if (isEmpty(this.model)) {
-          this.transitionToRoute('welcome');
-        }
-      });
-    }
+  }
 
+  @action
+  revokeAccess (auth) {
+    auth.destroyRecord().then(() => {
+      if (isEmpty(this.model)) {
+        this.transitionToRoute('welcome');
+      }
+    });
   }
 
-});
+}

app/templates/apps.hbs

@@ -4,7 +4,7 @@
   </header>
   <div class="authorizations">
     {{#each this.model as |auth|}}
-      <AppAuthorization @auth={{auth}} @revokeAccess={{action "revokeAccess"}} />
+      <AppAuthorization @auth={{auth}} @revokeAccess={{this.revokeAccess}} />
     {{/each}}
   </div>
 </section>