DEV: Convert DiscourseBanner to gjs (#30413)

app/assets/javascripts/discourse/app/components/discourse-banner.gjs

@@ -0,0 +1,102 @@
+import Component from "@glimmer/component";
+import { tracked } from "@glimmer/tracking";
+import { action } from "@ember/object";
+import didInsert from "@ember/render-modifiers/modifiers/did-insert";
+import { service } from "@ember/service";
+import { htmlSafe } from "@ember/template";
+import DButton from "discourse/components/d-button";
+import icon from "discourse-common/helpers/d-icon";
+import { i18n } from "discourse-i18n";
+
+export default class DiscourseBanner extends Component {
+  @service appEvents;
+  @service currentUser;
+  @service keyValueStore;
+  @service site;
+
+  @tracked hide = false;
+
+  get banner() {
+    return this.site.get("banner");
+  }
+
+  get content() {
+    const bannerHtml = this.banner.html;
+    const newDiv = document.createElement("div");
+    newDiv.innerHTML = bannerHtml;
+    newDiv.querySelectorAll("[id^='heading--']").forEach((el) => {
+      el.removeAttribute("id");
+    });
+    return newDiv.innerHTML;
+  }
+
+  get visible() {
+    let dismissedBannerKey =
+      this.currentUser?.dismissed_banner_key ||
+      this.keyValueStore.get("dismissed_banner_key");
+    let bannerKey = this.banner?.key;
+
+    if (bannerKey) {
+      bannerKey = parseInt(bannerKey, 10);
+    }
+
+    if (dismissedBannerKey) {
+      dismissedBannerKey = parseInt(dismissedBannerKey, 10);
+    }
+
+    return !this.hide && bannerKey && dismissedBannerKey !== bannerKey;
+  }
+
+  @action
+  decorate(element) {
+    this.appEvents.trigger("decorate-non-stream-cooked-element", element);
+  }
+
+  @action
+  dismiss() {
+    if (this.currentUser) {
+      this.currentUser.dismissBanner(this.banner.key);
+    } else {
+      this.hide = true;
+      this.keyValueStore.set({
+        key: "dismissed_banner_key",
+        value: this.banner.key,
+      });
+    }
+  }
+
+  <template>
+    <div {{didInsert this.decorate}}>
+      {{#if this.visible}}
+        <div class="row">
+          <div id="banner">
+            <div class="floated-buttons">
+              {{#if this.currentUser.staff}}
+                <a
+                  href={{this.banner.url}}
+                  class="btn btn-transparent edit-banner"
+                >
+                  {{icon "pencil"}}
+                  {{#if this.site.desktopView}}
+                    {{htmlSafe (i18n "banner.edit")}}
+                  {{/if}}
+                </a>
+              {{/if}}
+
+              <DButton
+                @action={{this.dismiss}}
+                @icon="xmark"
+                @title="banner.close"
+                class="btn-transparent close"
+              />
+            </div>
+
+            <div id="banner-content">
+              {{htmlSafe this.content}}
+            </div>
+          </div>
+        </div>
+      {{/if}}
+    </div>
+  </template>
+}

app/assets/javascripts/discourse/app/components/discourse-banner.hbs

@@ -1,26 +0,0 @@
-{{#if this.visible}}
-  <div class="row">
-    <div id="banner" class={{this.overlay}}>
-      <div class="floated-buttons">
-        {{#if this.currentUser.staff}}
-          <a href={{this.banner.url}} class="btn btn-transparent edit-banner">
-            {{d-icon "pencil"}}
-            {{#if this.site.desktopView}}
-              {{html-safe (i18n "banner.edit")}}
-            {{/if}}
-          </a>
-        {{/if}}
-
-        <DButton
-          @icon="xmark"
-          @action={{this.dismiss}}
-          @title="banner.close"
-          class="btn-transparent close"
-        />
-      </div>
-      <div id="banner-content">
-        {{html-safe this.content}}
-      </div>
-    </div>
-  </div>
-{{/if}}

app/assets/javascripts/discourse/app/components/discourse-banner.js

@@ -1,53 +0,0 @@
-import Component from "@ember/component";
-import { action } from "@ember/object";
-import { readOnly } from "@ember/object/computed";
-import discourseComputed from "discourse-common/utils/decorators";
-
-export default class DiscourseBanner extends Component {
-  hide = false;
-
-  @readOnly("site.banner") banner;
-
-  @discourseComputed("banner.html")
-  content(bannerHtml) {
-    const newDiv = document.createElement("div");
-    newDiv.innerHTML = bannerHtml;
-    newDiv.querySelectorAll("[id^='heading--']").forEach((el) => {
-      el.removeAttribute("id");
-    });
-    return newDiv.innerHTML;
-  }
-
-  @discourseComputed("currentUser.dismissed_banner_key", "banner.key", "hide")
-  visible(dismissedBannerKey, bannerKey, hide) {
-    dismissedBannerKey =
-      dismissedBannerKey || this.keyValueStore.get("dismissed_banner_key");
-
-    if (bannerKey) {
-      bannerKey = parseInt(bannerKey, 10);
-    }
-    if (dismissedBannerKey) {
-      dismissedBannerKey = parseInt(dismissedBannerKey, 10);
-    }
-
-    return !hide && bannerKey && dismissedBannerKey !== bannerKey;
-  }
-
-  @action
-  dismiss() {
-    if (this.currentUser) {
-      this.currentUser.dismissBanner(this.get("banner.key"));
-    } else {
-      this.set("hide", true);
-      this.keyValueStore.set({
-        key: "dismissed_banner_key",
-        value: this.get("banner.key"),
-      });
-    }
-  }
-
-  didInsertElement() {
-    super.didInsertElement(...arguments);
-    this.appEvents.trigger("decorate-non-stream-cooked-element", this.element);
-  }
-}