Update to use native classes

app/components/date-nav.js

@@ -1,29 +1,35 @@
+import classic from 'ember-classic-decorator';
 import Component from '@ember/component';
 import { computed } from '@ember/object';
 import moment from 'moment';
 
-export default Component.extend({
-  tagName: 'section',
+@classic
+export default class DateNavComponent extends Component {
+  tagName = 'section';
 
-  classNames: ['date-nav'],
+  classNames = ['date-nav'];
 
-  formattedDisplayDate: computed('date', function() {
+  @computed('date')
+  get formattedDisplayDate() {
     return moment(this.get('date')).utc().format('YYYY-MM-DD');
-  }),
+  }
 
-  formattedPreviousDate: computed('date', function() {
+  @computed('date')
+  get formattedPreviousDate() {
     let date = this.get('date');
     return moment(date).subtract(1, 'day').format('YYYY-MM-DD');
-  }),
+  }
 
-  formattedFollowingDate: computed('date', function() {
+  @computed('date')
+  get formattedFollowingDate() {
     let date = this.get('date');
     return moment(date).add(1, 'day').format('YYYY-MM-DD');
-  }),
+  }
 
-  showFollowingDayLink: computed('date', function() {
+  @computed('date')
+  get showFollowingDayLink() {
     let dateFromParam = moment(this.get('date'));
     let currentDate = moment();
     return !dateFromParam.isSame(currentDate, 'day');
-  })
-});
+  }
+}

app/controllers/admin/size-calculation-results/index.js

@@ -1,8 +1,12 @@
+import classic from 'ember-classic-decorator';
 import { sort } from '@ember/object/computed';
 import Controller from '@ember/controller';
 
-export default Controller.extend({
-  queryParams: ['date'],
-  sizeCalculationResultSorting: ['testsRunAt:desc'],
-  sortedSizeCalculationResults: sort('model', 'sizeCalculationResultSorting'),
-});
+@classic
+export default class SizeCalculationResultsIndexController extends Controller {
+  queryParams = ['date'];
+  sizeCalculationResultSorting = ['testsRunAt:desc'];
+
+  @sort('model', 'sizeCalculationResultSorting')
+  sortedSizeCalculationResults;
+}

app/controllers/admin/size-calculation-results/show.js

@@ -1,33 +1,44 @@
-import { computed } from '@ember/object';
+import classic from 'ember-classic-decorator';
+import { action, computed } from '@ember/object';
 import { inject as service } from '@ember/service';
 import Controller from '@ember/controller';
-import { alias } from '@ember/object/computed';
+import { readOnly } from '@ember/object/computed';
 
-export default Controller.extend({
-  api: service('api'),
-  sizeCalculationResult: alias('model'),
-  addonVersion: alias('sizeCalculationResult.version'),
-  addon: alias('addonVersion.addon'),
-  hasRetriedBuild: false,
+@classic
+export default class SizeCalculationResultsShowController extends Controller {
+  @service
+  api;
 
-  buildStatus: computed('sizeCalculationResult.succeeded', 'sizeCalculationResult.errorMessage', function() {
+  @readOnly('model')
+  sizeCalculationResult;
+
+  @readOnly('sizeCalculationResult.version')
+  addonVersion;
+
+  @readOnly('addonVersion.addon')
+  addon;
+
+  hasRetriedBuild = false;
+
+  @computed('sizeCalculationResult.succeeded', 'sizeCalculationResult.errorMessage')
+  get buildStatus() {
     if (this.get('sizeCalculationResult.succeeded')) {
       return 'succeeded';
     }
     return this.get('sizeCalculationResult.errorMessage');
-  }),
+  }
 
-  canRetryBuild: computed('sizeCalculationResult.succeeded', 'hasRetriedBuild', function() {
+  @computed('sizeCalculationResult.succeeded', 'hasRetriedBuild')
+  get canRetryBuild() {
     return !this.get('sizeCalculationResult.succeeded') && !this.get('hasRetriedBuild');
-  }),
-
-  actions: {
-    retryBuild() {
-      this.set('hasRetriedBuild', true);
-      this.api.request(`/size_calculation_results/${this.get('sizeCalculationResult.id')}/retry`, { method: 'POST' }).catch((e) => {
-        this.get('hasRetriedBuild', false);
-        throw e;
-      });
-    }
   }
-});
+
+  @action
+  retryBuild() {
+    this.set('hasRetriedBuild', true);
+    this.api.request(`/size_calculation_results/${this.get('sizeCalculationResult.id')}/retry`, { method: 'POST' }).catch((e) => {
+      this.get('hasRetriedBuild', false);
+      throw e;
+    });
+  }
+}

app/routes/admin/size-calculation-results/index.js

@@ -1,10 +1,13 @@
+import classic from 'ember-classic-decorator';
 import Route from '@ember/routing/route';
 import moment from 'moment';
 
-export default Route.extend({
-  queryParams: {
+@classic
+export default class SizeCalculationResultsIndexRoute extends Route {
+  queryParams = {
     date: { refreshModel: true }
-  },
+  };
+
   model(params) {
     params = params || { };
     if (!params.date) {
@@ -20,4 +23,4 @@ export default Route.extend({
       include: 'version,version.addon'
     });
   }
-});
+}

app/routes/admin/size-calculation-results/show.js

@@ -1,10 +1,12 @@
+import classic from 'ember-classic-decorator';
 import Route from '@ember/routing/route';
 
-export default Route.extend({
+@classic
+export default class SizeCalculationResultsShowRoute extends Route {
   model(params) {
     return this.store.findRecord('size-calculation-result', params.id, {
       include: 'version,version.addon',
       reload: true
     });
   }
-});
+}

app/templates/admin/size-calculation-results.hbs

@@ -1,3 +1,3 @@
-{{#page-layout showCategories=false}}
+<PageLayout @showCategories={{false}}>
   {{outlet}}
-{{/page-layout}}
+</PageLayout>

app/templates/admin/size-calculation-results/index.hbs

@@ -1,16 +1,16 @@
-{{#date-nav date=date as |nav|}}
-  {{#link-to 'admin.size-calculation-results.index' (query-params date=nav.formattedPreviousDate) class='previous-day'}}
+<DateNav @date={{this.date}} as |nav|>
+  <LinkTo @route="admin.size-calculation-results.index" @query={{hash date=nav.formattedPreviousDate}} @class="previous-day">
     &laquo; previous day
-  {{/link-to}}
+  </LinkTo>
 
   Size calculation results for {{nav.formattedDisplayDate}}
 
   {{#if nav.showFollowingDayLink}}
-    {{#link-to 'admin.size-calculation-results.index' (query-params date=nav.formattedFollowingDate) class='next-day'}}
+    <LinkTo @route="admin.size-calculation-results.index" @query={{hash date=nav.formattedFollowingDate}} @class='next-day'>
       next day &raquo;
-    {{/link-to}}
+    </LinkTo>
   {{/if}}
-{{/date-nav}}
+</DateNav>
 
 <table>
   <thead>
@@ -23,12 +23,12 @@
     </tr>
   </thead>
   <tbody>
-    {{#each sortedSizeCalculationResults as |result|}}
+    {{#each this.sortedSizeCalculationResults as |result|}}
       <tr class="test-size-calculation-result" data-sizeCalculationResultId={{result.id}}>
         <td>
-          {{#link-to 'addons.show' result.version.addon.name}}
+          <LinkTo @route="addons.show" @model={{result.version.addon.name}}>
             {{result.version.addon.name}}
-          {{/link-to}}
+          </LinkTo>
         </td>
         <td>{{result.version.version}}</td>
         <td>{{moment-format result.testsRunAt 'YYYY-MM-DD HH:mm' allowEmpty=true}}</td>
@@ -40,9 +40,9 @@
           {{/if}}
         </td>
         <td>
-          {{#link-to 'admin.size-calculation-results.show' result.id}}
+          <LinkTo @route="admin.size-calculation-results.show" @model={{result.id}}>
             details
-          {{/link-to}}
+          </LinkTo>
         </td>
       </tr>
     {{/each}}

app/templates/admin/size-calculation-results/show.hbs

@@ -1,21 +1,21 @@
 <div class="admin-build-result">
   <h1>
-    Size Calculation #{{sizeCalculationResult.id}}
-    (<span class="test-addon-name">{{#link-to 'addons.show' addon.name}}{{addon.name}}{{/link-to}}</span>
-    <span class="test-addon-version">{{addonVersion.version}}</span>)
+    Size Calculation #{{this.sizeCalculationResult.id}}
+    (<span class="test-addon-name"><LinkTo @route="addons.show" @model={{this.addon.name}}>{{this.addon.name}}</LinkTo></span>
+    <span class="test-addon-version">{{this.addonVersion.version}}</span>)
   </h1>
 
   <div>
-    Status: <span class="test-build-status">{{buildStatus}}</span>
-    {{#if canRetryBuild}}
-      <button type="button" onclick={{action 'retryBuild'}} class="test-retry-build">Retry</button>
+    Status: <span class="test-build-status">{{this.buildStatus}}</span>
+    {{#if this.canRetryBuild}}
+      <button type="button" {{on "click" this.retryBuild}} class="test-retry-build">Retry</button>
     {{/if}}
   </div>
 
   <div>
-    Tests run at: <span class="test-run-date">{{moment-format sizeCalculationResult.testsRunAt 'YYYY-MM-DD HH:mm' allowEmpty=true}}</span>
+    Tests run at: <span class="test-run-date">{{moment-format this.sizeCalculationResult.testsRunAt 'YYYY-MM-DD HH:mm' allowEmpty=true}}</span>
   </div>
 
   <h2>Output</h2>
-  <BuildResultOutput @buildResult={{sizeCalculationResult}} />
+  <BuildResultOutput @buildResult={{this.sizeCalculationResult}} />
 </div>

app/templates/components/date-nav.hbs

@@ -1,8 +1,8 @@
 {{yield
   (hash
-    formattedPreviousDate=formattedPreviousDate
-    formattedDisplayDate=formattedDisplayDate
-    formattedFollowingDate=formattedFollowingDate
-    showFollowingDayLink=showFollowingDayLink
+    formattedPreviousDate=this.formattedPreviousDate
+    formattedDisplayDate=this.formattedDisplayDate
+    formattedFollowingDate=this.formattedFollowingDate
+    showFollowingDayLink=this.showFollowingDayLink
   )
 }}