DEV: Add bookmark-icon component (#16893)

This component will be useful for chat, and also moves
the definition of the icon for with and without reminders
to the bookmark model as consts, so they can easily be
referenced in other places.

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

@@ -0,0 +1,21 @@
+import { isEmpty } from "@ember/utils";
+import { computed } from "@ember/object";
+import Component from "@ember/component";
+import {
+  NO_REMINDER_ICON,
+  WITH_REMINDER_ICON,
+} from "discourse/models/bookmark";
+
+export default class BookmarkIcon extends Component {
+  tagName = "";
+  bookmark = null;
+
+  @computed("bookmark.reminder_at")
+  get icon() {
+    if (!isEmpty(this.bookmark.reminder_at)) {
+      return WITH_REMINDER_ICON;
+    }
+
+    return NO_REMINDER_ICON;
+  }
+}

app/assets/javascripts/discourse/app/initializers/topic-footer-buttons.js

@@ -1,4 +1,8 @@
 import I18n from "I18n";
+import {
+  NO_REMINDER_ICON,
+  WITH_REMINDER_ICON,
+} from "discourse/models/bookmark";
 import { registerTopicFooterButton } from "discourse/lib/register-topic-footer-button";
 import showModal from "discourse/lib/show-modal";
 
@@ -73,9 +77,9 @@ export default {
       id: "bookmark",
       icon() {
         if (this.topic.bookmarks.some((bookmark) => bookmark.reminder_at)) {
-          return "discourse-bookmark-clock";
+          return WITH_REMINDER_ICON;
         }
-        return "bookmark";
+        return NO_REMINDER_ICON;
       },
       priority: BOOKMARK_PRIORITY,
       classNames() {

app/assets/javascripts/discourse/app/models/bookmark.js

@@ -20,6 +20,9 @@ export const AUTO_DELETE_PREFERENCES = {
   ON_OWNER_REPLY: 2,
 };
 
+export const NO_REMINDER_ICON = "bookmark";
+export const WITH_REMINDER_ICON = "discourse-bookmark-clock";
+
 const Bookmark = RestModel.extend({
   newBookmark: none("id"),
 

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

@@ -0,0 +1 @@
+{{d-icon icon translatedtitle=@bookmark.name}}

app/assets/javascripts/discourse/app/widgets/post-menu.js

@@ -6,6 +6,10 @@ import { h } from "virtual-dom";
 import showModal from "discourse/lib/show-modal";
 import { smallUserAtts } from "discourse/widgets/actions-summary";
 import I18n from "I18n";
+import {
+  NO_REMINDER_ICON,
+  WITH_REMINDER_ICON,
+} from "discourse/models/bookmark";
 
 const LIKE_ACTION = 2;
 const VIBRATE_DURATION = 5;
@@ -359,7 +363,7 @@ registerButton(
       title,
       titleOptions,
       className: classNames.join(" "),
-      icon: attrs.bookmarkReminderAt ? "discourse-bookmark-clock" : "bookmark",
+      icon: attrs.bookmarkReminderAt ? WITH_REMINDER_ICON : NO_REMINDER_ICON,
     };
   }
 );

app/assets/javascripts/discourse/app/widgets/quick-access-bookmarks.js

@@ -1,4 +1,8 @@
 import RawHtml from "discourse/widgets/raw-html";
+import {
+  NO_REMINDER_ICON,
+  WITH_REMINDER_ICON,
+} from "discourse/models/bookmark";
 import { iconHTML } from "discourse-common/lib/icon-library";
 import QuickAccessPanel from "discourse/widgets/quick-access-panel";
 import { ajax } from "discourse/lib/ajax";
@@ -8,8 +12,6 @@ import { postUrl } from "discourse/lib/utilities";
 import I18n from "I18n";
 import { htmlSafe } from "@ember/template";
 
-const ICON = "bookmark";
-
 createWidget("no-quick-access-bookmarks", {
   html() {
     return h("div.empty-state", [
@@ -21,7 +23,7 @@ createWidget("no-quick-access-bookmarks", {
             "<p>" +
             htmlSafe(
               I18n.t("user.no_bookmarks_body", {
-                icon: iconHTML(ICON),
+                icon: iconHTML(NO_REMINDER_ICON),
               })
             ) +
             "</p>",
@@ -74,9 +76,9 @@ createWidgetFrom(QuickAccessPanel, "quick-access-bookmarks", {
 
   icon(bookmark) {
     if (bookmark.reminder_at) {
-      return "discourse-bookmark-clock";
+      return WITH_REMINDER_ICON;
     }
-    return ICON;
+    return NO_REMINDER_ICON;
   },
 
   loadBookmarksWithReminders() {

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

@@ -0,0 +1,45 @@
+import Bookmark from "discourse/models/bookmark";
+import componentTest, {
+  setupRenderingTest,
+} from "discourse/tests/helpers/component-test";
+import hbs from "htmlbars-inline-precompile";
+import { discourseModule, exists } from "discourse/tests/helpers/qunit-helpers";
+
+discourseModule("Component | bookmark-icon", function (hooks) {
+  setupRenderingTest(hooks);
+
+  componentTest("with reminder", {
+    template: hbs`{{bookmark-icon bookmark=bookmark}}`,
+
+    beforeEach() {
+      this.set(
+        "bookmark",
+        Bookmark.create({
+          reminder_at: moment(),
+          name: "some name",
+        })
+      );
+    },
+
+    async test(assert) {
+      assert.ok(exists(".d-icon-discourse-bookmark-clock"));
+    },
+  });
+
+  componentTest("no reminder", {
+    template: hbs`{{bookmark-icon bookmark=bookmark}}`,
+
+    beforeEach() {
+      this.set(
+        "bookmark",
+        Bookmark.create({
+          name: "some name",
+        })
+      );
+    },
+
+    async test(assert) {
+      assert.ok(exists(".d-icon-bookmark"));
+    },
+  });
+});