Convert more components to be Glimmer components

.eslintrc.js

@@ -23,7 +23,12 @@ module.exports = {
     'ember/avoid-leaking-state-in-ember-objects': 'off',
     'ember/closure-actions': 'off',
     'ember/use-brace-expansion': 'off',
-    'ember/no-jquery': 'error'
+    'ember/no-get': 'warn',
+    'ember/no-get-with-default': 'warn',
+    'ember/no-jquery': 'error',
+    'ember/no-private-routing-service': 'warn',
+    'ember/require-computed-property-dependencies': 'warn',
+    'ember/use-ember-data-rfc-395-imports': 'warn'
   },
   overrides: [
     // tests

.template-lintrc.js

@@ -2,36 +2,12 @@
 
 module.exports = {
   pending: [
-    {
-      "moduleId": "app/components/addon-review-form",
-      "only": [
-        "no-action"
-      ]
-    },
-    {
-      "moduleId": "app/components/addon-source-usages",
-      "only": [
-        "no-action"
-      ]
-    },
-    {
-      "moduleId": "app/components/addon-version-list",
-      "only": [
-        "no-action"
-      ]
-    },
     {
       "moduleId": "app/components/admin-addon-review-form",
       "only": [
         "no-action"
       ]
     },
-    {
-      "moduleId": "app/components/admin-addon",
-      "only": [
-        "no-action"
-      ]
-    },
     {
       "moduleId": "app/components/code-search",
       "only": [
@@ -50,18 +26,6 @@ module.exports = {
         "no-action"
       ]
     },
-    {
-      "moduleId": "app/components/ember-version-compatibility",
-      "only": [
-        "no-action"
-      ]
-    },
-    {
-      "moduleId": "app/components/exclusive-button",
-      "only": [
-        "no-action"
-      ]
-    },
     {
       "moduleId": "app/components/large-search",
       "only": [

app/components/addon-note.hbs

@@ -1,2 +1,4 @@
-<legend>Note</legend>
-<MarkdownToSanitizedHtml @markdown={{this.content}} @tables={{true}} @ghCodeBlocks={{true}} @tasklists={{true}} @simplifiedAutoLink={{true}} />
+<fieldset class="note test-addon-note">
+  <legend>Note</legend>
+  <MarkdownToSanitizedHtml @markdown={{@content}} @tables={{true}} @ghCodeBlocks={{true}} @tasklists={{true}} @simplifiedAutoLink={{true}} />
+</fieldset>

app/components/addon-review.hbs

@@ -1,20 +1,22 @@
-{{#if this.review}}
-  <p class="review-date">
-    Manually reviewed on {{moment-format this.review.createdAt "MMMM Do YYYY" allowEmpty=true}} for version {{this.review.version.version}}
-  </p>
-  <ol class="questions">
-    {{#each this.answeredQuestions as |question|}}
-      <li class="test-review-question">
-        <span class="question">{{question.text}}</span>
-        <span class="answer">{{question.answer}}</span>
-      </li>
-    {{/each}}
-  </ol>
-  <br>
-  {{#if this.review.review}}
-    <h6>Comments</h6>
-    <fieldset class="test-review-notes">
-      <MarkdownToHtml @markdown={{this.review.review}} />
-    </fieldset>
+<div>
+  {{#if @review}}
+    <p class="review-date">
+      Manually reviewed on {{moment-format @review.createdAt "MMMM Do YYYY" allowEmpty=true}} for version {{@review.version.version}}
+    </p>
+    <ol class="questions">
+      {{#each this.answeredQuestions as |question|}}
+        <li class="test-review-question">
+          <span class="question">{{question.text}}</span>
+          <span class="answer">{{question.answer}}</span>
+        </li>
+      {{/each}}
+    </ol>
+    <br>
+    {{#if @review.review}}
+      <h6>Comments</h6>
+      <fieldset class="test-review-notes">
+        <MarkdownToHtml @markdown={{@review.review}} />
+      </fieldset>
+    {{/if}}
   {{/if}}
-{{/if}}
+</div>

app/components/addon-review.js

@@ -1,7 +1,5 @@
-import classic from 'ember-classic-decorator';
-import { computed } from '@ember/object';
 import { isEmpty } from '@ember/utils';
-import Component from '@ember/component';
+import Component from '@glimmer/component';
 import { questions } from '../models/review';
 
 const ANSWER_MAP = {
@@ -11,11 +9,9 @@ const ANSWER_MAP = {
   4: 'Unknown'
 };
 
-@classic
 export default class AddonReview extends Component {
-  @computed('review')
   get answeredQuestions() {
-    let review = this.review;
+    let review = this.args.review;
     return questions.filter(function(question) {
       return !isEmpty(review.get(question.fieldName));
     }).map(function(question) {

app/components/addon-source-usages.hbs

@@ -1,17 +1,17 @@
 <div class="usage-count">
-  <a href="#" {{action "toggleUsages"}} class="test-usage-count">
+  <a href="#" {{on "click" this.toggleUsages}} class="test-usage-count">
     {{#if this.showUsages}}
-      {{svg-icon "expand-more"}}
+      <SvgIcon @icon="expand-more" />
     {{else}}
-      {{svg-icon "chevron-right"}}
+      <SvgIcon @icon="chevron-right" />
     {{/if}}
-    {{this.count}} {{pluralize this.count "usage"}}
+    {{@count}} {{pluralize @count "usage"}}
   </a>
   {{#if this.showUsages}}
     {{#if this.usages}}
       {{#each this.visibleUsages as |usage|}}
         <div class="usage test-usage">
-          <a class="filename" href="{{clean-repo-url this.addon.repositoryUrl}}/tree/master/{{usage.filename}}#L{{usage.line_number}}">
+          <a class="filename" href="{{clean-repo-url @addon.repositoryUrl}}/tree/master/{{usage.filename}}#L{{usage.line_number}}">
             {{usage.filename}}:{{usage.line_number}}
           </a>
           {{#each usage.lines as |line|}}
@@ -20,7 +20,7 @@
         </div>
       {{/each}}
       {{#if this.moreUsages}}
-        <a href="#" {{action "viewMore"}} class="view-more">
+        <a href="#" {{on "click" this.viewMore}} class="view-more">
           See more usages
         </a>
       {{/if}}

app/components/addon-source-usages.js

@@ -1,49 +1,44 @@
-import classic from 'ember-classic-decorator';
-import { action, computed } from '@ember/object';
+import { action } from '@ember/object';
 import { inject as service } from '@ember/service';
-import Component from '@ember/component';
+import Component from '@glimmer/component';
 import { isEmpty } from '@ember/utils';
-import { task } from 'ember-concurrency';
+import { dropTask } from 'ember-concurrency-decorators';
+import { tracked } from '@glimmer/tracking';
 
-@classic
 export default class AddonSourceUsages extends Component {
-  visibleUsageCount = 25;
-  showUsages = false;
-  usages = null;
-  regex = false;
-  fileFilter = null;
+  @tracked showUsages = false;
+  @tracked usages = null;
+  @tracked visibleUsageCount = 25;
 
-  @service
-  codeSearch;
+  @service codeSearch;
 
-  @computed('visibleUsageCount', 'usages')
   get visibleUsages() {
     return this.usages.slice(0, this.visibleUsageCount);
   }
 
-  @computed('visibleUsageCount', 'usages')
   get moreUsages() {
-    return this.visibleUsageCount < this.get('usages.length');
+    return this.visibleUsageCount < this.usages.length;
   }
 
-  @(task(function* () {
-    let usages = yield this.get('codeSearch.usages').perform(this.get('addon.id'), this.query, this.regex);
-    this.set('usages', filterByFilePath(usages, this.fileFilter));
-  }).drop())
-  fetchUsages;
+  @dropTask
+  *fetchUsages() {
+    let usages = yield this.codeSearch.usages.perform(this.args.addon.id, this.args.query, this.args.regex);
+    this.usages = filterByFilePath(usages, this.args.fileFilter);
+  }
 
   @action
-  toggleUsages() {
-    this.toggleProperty('showUsages');
+  toggleUsages(event) {
+    event.preventDefault();
+    this.showUsages = !this.showUsages;
     if (this.showUsages && this.usages === null) {
       this.fetchUsages.perform();
     }
   }
 
   @action
-  viewMore() {
-    let newUsageCount = this.visibleUsageCount + 25;
-    this.set('visibleUsageCount', newUsageCount);
+  viewMore(event) {
+    event.preventDefault();
+    this.visibleUsageCount = this.visibleUsageCount + 25;
   }
 }
 

app/components/addon-version-item.hbs

@@ -1 +1 @@
-{{moment-format this.version.released "YYYY-MMM-DD" allowEmpty=true}} <span class="version-number">{{this.version.version}}</span>
+{{moment-format @version.released "YYYY-MMM-DD" allowEmpty=true}} <span class="version-number">{{@version.version}}</span>

app/components/addon-version-list.hbs

@@ -9,6 +9,6 @@
     </li>
   {{/each}}
   {{#if this.thereAreHiddenVersions}}
-    <a href="#" {{action "showAllVersions"}}>Show all versions</a>
+    <a href="#" {{on "click" this.showAllVersions}}>Show all versions</a>
   {{/if}}
 </ul>

app/components/addon-version-list.js

@@ -1,47 +1,44 @@
-import classic from 'ember-classic-decorator';
-import { action, computed } from '@ember/object';
+import { action } from '@ember/object';
 import { inject as service } from '@ember/service';
-import { gt } from '@ember/object/computed';
-import Component from '@ember/component';
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
 
-@classic
 export default class AddonVersionList extends Component {
-  showAll = false;
+  @tracked showAll = false;
 
   @service
   emberVersions;
 
-  @computed('versions', 'showAll')
   get showingVersions() {
     if (this.showAll) {
-      return this.versions;
+      return this.args.versions;
     }
-    return (this.versions || []).slice(0, 10);
+    return (this.args.versions || []).slice(0, 10);
   }
 
-  @computed('emberVersions.versions.[]', 'showingVersions.lastObject')
   get emberVersionDataAfterOldestShowingAddonVersion() {
-    let oldestVersionDate = this.get('showingVersions.lastObject.released');
-    return this.get('emberVersions.versions').filter(version => version.released > oldestVersionDate);
+    let oldestVersion = this.showingVersions[this.showingVersions.length - 1];
+    let oldestVersionDate = oldestVersion ? oldestVersion.released : null;
+    return this.emberVersions.versions.filter(version => version.released > oldestVersionDate);
   }
 
-  @computed('emberVersionDataAfterOldestShowingAddonVersion.[]', 'showingVersions.[]')
   get versionsWithMeta() {
     let versions = this.emberVersionDataAfterOldestShowingAddonVersion.map(version => ({ isEmber: true, version }));
     versions = versions.concat(this.showingVersions.map(version => ({ isAddon: true, version })));
     return versions.sortBy('version.released').reverse();
   }
 
-  @gt('versions.length', 10)
-  moreThan10Versions;
+  get moreThan10Versions() {
+    return this.args.versions.length > 10;
+  }
 
-  @computed('moreThan10Versions', 'showAll')
   get thereAreHiddenVersions() {
     return this.moreThan10Versions && !this.showAll;
   }
 
   @action
-  showAllVersions() {
-    this.set('showAll', true);
+  showAllVersions(event) {
+    event.preventDefault();
+    this.showAll = true;
   }
 }