DEV: Modernize upgrade controller, fix banner styling

assets/javascripts/discourse/controllers/upgrade.js

@@ -1,27 +1,27 @@
 import Controller from "@ember/controller";
-import { computed } from "@ember/object";
+import { tracked } from "@glimmer/tracking";
+import { action } from "@ember/object";
 
-export default Controller.extend({
-  showBanner: computed("banner", "bannerDismissed", "banner.[]", function () {
-    if (this.get("bannerDismissed")) {
+export default class Upgrade extends Controller {
+  @tracked banner = [];
+  @tracked bannerDismissed = false;
+
+  get showBanner() {
+    if (this.bannerDismissed) {
       return false;
     }
 
-    const banner = this.get("banner");
-    return banner && banner.length > 0;
-  }),
+    return this.banner?.length > 0;
+  }
 
   appendBannerHtml(html) {
-    const banner = this.get("banner") || [];
-    if (banner.indexOf(html) === -1) {
-      banner.pushObject(html);
+    if (!this.banner.includes(html)) {
+      this.banner = [...this.banner, html];
     }
-    this.set("banner", banner);
-  },
+  }
 
-  actions: {
-    dismiss() {
-      this.set("bannerDismissed", true);
-    },
-  },
-});
+  @action
+  dismiss() {
+    this.bannerDismissed = true;
+  }
+}

assets/javascripts/discourse/routes/upgrade-index.js

@@ -36,9 +36,12 @@ export default Route.extend({
         repo.get("id") === "discourse" &&
         repo.get("branch") === "origin/main"
       ) {
-        upgradeController.appendBannerHtml(
-          "<b>WARNING:</b> Your Discourse is tracking the 'main' branch which may be unstable, <a href='https://meta.discourse.org/t/change-tracking-branch-for-your-discourse-instance/17014'>we recommend tracking the 'tests-passed' branch</a>."
-        );
+        upgradeController.appendBannerHtml(`
+          <b>WARNING:</b>
+          Your Discourse is tracking the 'main' branch which may be unstable,
+          <a href='https://meta.discourse.org/t/change-tracking-branch-for-your-discourse-instance/17014'>
+            we recommend tracking the 'tests-passed' branch</a>.
+        `);
       }
     });
 

assets/javascripts/discourse/templates/upgrade.hbs

@@ -17,15 +17,20 @@
 </div>
 
 <div class="docker-manager">
-  {{#if showBanner}}
+  {{#if this.showBanner}}
     <div id="banner">
       <div id="banner-content">
-        <div class="close" {{action "dismiss"}}>
-          <i class="fa fa-times" title="Dismiss this banner."></i>
+        <div class="floated-buttons">
+          <DButton
+            @icon="times"
+            @action={{this.dismiss}}
+            @class="btn btn-flat close"
+            @title="banner.close"
+          />
         </div>
 
-        {{#each banner as |row|}}
-          <p>{{{row}}}</p>
+        {{#each this.banner as |row|}}
+          <p>{{html-safe row}}</p>
         {{/each}}
       </div>
     </div>

assets/stylesheets/common/docker-manager.scss

@@ -84,15 +84,9 @@
 
   #banner {
     margin: 1rem 0;
-    padding: 10px;
-    border-radius: 5px;
-    background: scale-color($tertiary, $lightness: 90%);
-    box-shadow: 0 1px 2px scale-color($tertiary, $lightness: 70%);
-    max-width: 1140px;
 
-    .close {
-      font-size: 20px !important;
-      margin-top: -10px !important;
+    p:first-of-type {
+      margin-top: 0;
     }
   }