DEV: Convert bookmark-icon to gjs/glimmer (#30136)

app/assets/javascripts/discourse/app/components/bookmark-icon.gjs

@@ -0,0 +1,35 @@
+import Component from "@glimmer/component";
+import {
+  NO_REMINDER_ICON,
+  WITH_REMINDER_ICON,
+} from "discourse/models/bookmark";
+import icon from "discourse-common/helpers/d-icon";
+import { i18n } from "discourse-i18n";
+
+export default class BookmarkIcon extends Component {
+  get icon() {
+    if (this.args.bookmark?.get("reminder_at")) {
+      return WITH_REMINDER_ICON;
+    }
+
+    return NO_REMINDER_ICON;
+  }
+
+  get cssClasses() {
+    return this.args.bookmark
+      ? "bookmark-icon bookmark-icon__bookmarked"
+      : "bookmark-icon";
+  }
+
+  get title() {
+    if (!this.args.bookmark) {
+      return i18n("bookmarks.create");
+    }
+
+    return this.args.bookmark.get("reminderTitle");
+  }
+
+  <template>
+    {{icon this.icon translatedTitle=this.title class=this.cssClasses}}
+  </template>
+}

app/assets/javascripts/discourse/app/components/bookmark-icon.hbs

@@ -1 +0,0 @@
-{{d-icon this.icon translatedTitle=this.title class=this.cssClasses}}

app/assets/javascripts/discourse/app/components/bookmark-icon.js

@@ -1,42 +0,0 @@
-import Component from "@ember/component";
-import { computed } from "@ember/object";
-import { isEmpty } from "@ember/utils";
-import {
-  NO_REMINDER_ICON,
-  WITH_REMINDER_ICON,
-} from "discourse/models/bookmark";
-import { i18n } from "discourse-i18n";
-
-export default class BookmarkIcon extends Component {
-  tagName = "";
-  bookmark = null;
-
-  @computed("bookmark.reminder_at")
-  get icon() {
-    if (!this.bookmark) {
-      return NO_REMINDER_ICON;
-    }
-
-    if (!isEmpty(this.bookmark.reminder_at)) {
-      return WITH_REMINDER_ICON;
-    }
-
-    return NO_REMINDER_ICON;
-  }
-
-  @computed("bookmark")
-  get cssClasses() {
-    return this.bookmark
-      ? "bookmark-icon bookmark-icon__bookmarked"
-      : "bookmark-icon";
-  }
-
-  @computed("bookmark.title")
-  get title() {
-    if (!this.bookmark) {
-      return i18n("bookmarks.create");
-    }
-
-    return this.bookmark.reminderTitle;
-  }
-}

app/assets/javascripts/discourse/tests/integration/components/bookmark-icon-test.gjs

@@ -1,9 +1,8 @@
 import { render } from "@ember/test-helpers";
-import { hbs } from "ember-cli-htmlbars";
 import { module, test } from "qunit";
+import BookmarkIcon from "discourse/components/bookmark-icon";
 import { formattedReminderTime } from "discourse/lib/bookmark";
 import { tomorrow } from "discourse/lib/time-utils";
-import Bookmark from "discourse/models/bookmark";
 import { setupRenderingTest } from "discourse/tests/helpers/component-test";
 import { i18n } from "discourse-i18n";
 
@@ -11,15 +10,14 @@ module("Integration | Component | bookmark-icon", function (hooks) {
   setupRenderingTest(hooks);
 
   test("with reminder", async function (assert) {
-    this.setProperties({
-      bookmark: Bookmark.create({
-        reminder_at: tomorrow(this.currentUser.user_option.timezone),
-        name: "some name",
-        currentUser: this.currentUser,
-      }),
+    const store = this.owner.lookup("service:store");
+    const bookmark = store.createRecord("bookmark", {
+      reminder_at: tomorrow(this.currentUser.user_option.timezone),
+      name: "some name",
+      currentUser: this.currentUser,
     });
 
-    await render(hbs`<BookmarkIcon @bookmark={{this.bookmark}} />`);
+    await render(<template><BookmarkIcon @bookmark={{bookmark}} /></template>);
 
     assert
       .dom(".d-icon-discourse-bookmark-clock.bookmark-icon__bookmarked")
@@ -28,7 +26,7 @@ module("Integration | Component | bookmark-icon", function (hooks) {
       "title",
       i18n("bookmarks.created_with_reminder_generic", {
         date: formattedReminderTime(
-          this.bookmark.reminder_at,
+          bookmark.reminder_at,
           this.currentUser.user_option.timezone
         ),
         name: "some name",
@@ -37,15 +35,13 @@ module("Integration | Component | bookmark-icon", function (hooks) {
   });
 
   test("no reminder", async function (assert) {
-    this.set(
-      "bookmark",
-      Bookmark.create({
-        name: "some name",
-        currentUser: this.currentUser,
-      })
-    );
+    const store = this.owner.lookup("service:store");
+    const bookmark = store.createRecord("bookmark", {
+      name: "some name",
+      currentUser: this.currentUser,
+    });
 
-    await render(hbs`<BookmarkIcon @bookmark={{this.bookmark}} />`);
+    await render(<template><BookmarkIcon @bookmark={{bookmark}} /></template>);
 
     assert.dom(".d-icon-bookmark.bookmark-icon__bookmarked").exists();
     assert.dom(".svg-icon-title").hasAttribute(
@@ -56,12 +52,8 @@ module("Integration | Component | bookmark-icon", function (hooks) {
     );
   });
 
-  test("null bookmark", async function (assert) {
-    this.setProperties({
-      bookmark: null,
-    });
-
-    await render(hbs`<BookmarkIcon @bookmark={{this.bookmark}} />`);
+  test("no bookmark", async function (assert) {
+    await render(<template><BookmarkIcon /></template>);
 
     assert.dom(".d-icon-bookmark.bookmark-icon").exists();
     assert