DEV: Modernize repo-status component

assets/javascripts/discourse/components/repo-status.hbs

@@ -11,16 +11,16 @@
   </td>
 
   <td>
-    <a href="{{repo.url}}">{{repo.name}}</a>
-    <span class="current commit-hash" title={{repo.version}}>
-      {{repo.prettyVersion}}
+    <a href="{{@repo.url}}">{{@repo.name}}</a>
+    <span class="current commit-hash" title={{@repo.version}}>
+      {{@repo.prettyVersion}}
     </span>
   </td>
 
   <td>
-    {{#if repo.checkingStatus}}
+    {{#if @repo.checkingStatus}}
       Checking for new version...
-    {{else if repo.upToDate}}
+    {{else if @repo.upToDate}}
       Up to date
     {{else}}
       <div class="new-version">
@@ -29,42 +29,40 @@
         <ul>
           <li>
             Remote Version:
-            <span class="new commit-hash" title={{repo.latestVersion}}>
-              {{repo.prettyLatestVersion}}
+            <span class="new commit-hash" title={{@repo.latestVersion}}>
+              {{@repo.prettyLatestVersion}}
             </span>
           </li>
           <li>
             Last Updated:
-            {{#if repo.latest.date}}
-              {{format-date repo.latest.date}}
+            {{#if @repo.latest.date}}
+              {{format-date @repo.latest.date}}
             {{else}}
               &mdash;
             {{/if}}
           </li>
           <li class="new-commits">
             {{new-commits
-              repo.latest.commits_behind
-              repo.version
-              repo.latest.version
-              repo.url
+              @repo.latest.commits_behind
+              @repo.version
+              @repo.latest.version
+              @repo.url
             }}
           </li>
         </ul>
 
-        {{#if repo.upgrading}}
-          <button class="btn" {{action "upgrade"}}>
+        <LinkTo
+          @route="upgrade.show"
+          @model={{this.repo}}
+          disabled={{this.upgradeDisabled}}
+          class="upgrade-button btn"
+        >
+          {{#if @repo.upgrading}}
             Currently Upgrading...
-          </button>
-        {{else}}
-          <LinkTo
-            @route="upgrade.show"
-            @model={{this.repo}}
-            disabled={{this.upgradeDisabled}}
-            class="upgrade-button btn"
-          >
+          {{else}}
             Upgrade
-          </LinkTo>
-        {{/if}}
+          {{/if}}
+        </LinkTo>
       </div>
     {{/if}}
   </td>

assets/javascripts/discourse/components/repo-status.js

@@ -1,49 +1,37 @@
-import Component from "@ember/component";
-import { computed } from "@ember/object";
+import Component from "@glimmer/component";
 import { inject as service } from "@ember/service";
 
-export default Component.extend({
-  router: service(),
-  tagName: "",
+export default class RepoStatus extends Component {
+  @service router;
 
-  upgradeDisabled: computed(
-    "upgradingRepo",
-    "repo",
-    "managerRepo",
-    "managerRepo.upToDate",
-    function () {
-      const upgradingRepo = this.get("upgradingRepo");
-
-      if (!upgradingRepo) {
-        const managerRepo = this.get("managerRepo");
-        if (!managerRepo) {
-          return false;
-        }
-        return !managerRepo.get("upToDate") && managerRepo !== this.get("repo");
-      }
+  get upgradeDisabled() {
+    if (this.args.upgradingRepo) {
       return true;
     }
-  ),
 
-  officialRepoBadge: computed("repo.official", function () {
-    if (this.get("repo.fork")) {
+    if (!this.args.managerRepo) {
+      return false;
+    }
+
+    return (
+      !this.args.managerRepo.upToDate &&
+      this.args.managerRepo !== this.args.repo
+    );
+  }
+
+  get officialRepoBadge() {
+    if (this.args.repo.fork) {
       return "exclamation-circle";
-    } else if (this.get("repo.official")) {
+    } else if (this.args.repo.official) {
       return "check-circle";
     }
-  }),
+  }
 
-  officialRepoBadgeTitle: computed("repo.official", function () {
-    if (this.get("repo.fork")) {
+  get officialRepoBadgeTitle() {
+    if (this.args.repo.fork) {
       return "Forked Official Plugin";
-    } else if (this.get("repo.official")) {
+    } else if (this.args.repo.official) {
       return "Official Plugin";
     }
-  }),
-
-  actions: {
-    upgrade() {
-      this.get("router").transitionTo("upgrade", this.get("repo"));
-    },
-  },
-});
+  }
+}

assets/javascripts/discourse/templates/upgrade-index.hbs

@@ -18,8 +18,12 @@
     <th>Status</th>
   </thead>
   <tbody>
-    {{#each model as |repo|}}
-      {{repo-status repo=repo upgradingRepo=upgrading managerRepo=managerRepo}}
+    {{#each this.model as |repo|}}
+      <RepoStatus
+        @repo={{repo}}
+        @upgradingRepo={{this.upgrading}}
+        @managerRepo={{this.managerRepo}}
+      />
     {{/each}}
   </tbody>
 </table>