DEV: Allow for null bookmark in bookmark-icon (#16909)

Sometimes we need to render the icon as a call to action
to create a bookmark at which point the bookmark does
not yet exist, so we need to just show the normal bookmark
icon and a create title.

Also adds a CSS class for the bookmark existing and not existing
for styling.

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

@@ -14,6 +14,10 @@ export default class BookmarkIcon extends Component {
 
   @computed("bookmark.reminder_at")
   get icon() {
+    if (!this.bookmark) {
+      return NO_REMINDER_ICON;
+    }
+
     if (!isEmpty(this.bookmark.reminder_at)) {
       return WITH_REMINDER_ICON;
     }
@@ -21,8 +25,19 @@ export default class BookmarkIcon extends Component {
     return NO_REMINDER_ICON;
   }
 
+  @computed("bookmark")
+  get cssClasses() {
+    return this.bookmark
+      ? "bookmark-icon bookmark-icon__bookmarked"
+      : "bookmark-icon";
+  }
+
   @computed("bookmark.name", "bookmark.reminder_at")
   get title() {
+    if (!this.bookmark) {
+      return I18n.t("bookmarks.create");
+    }
+
     if (!isEmpty(this.bookmark.reminder_at)) {
       const formattedTime = formattedReminderTime(
         this.bookmark.reminder_at,

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

@@ -1 +1 @@
-{{d-icon icon translatedtitle=title}}
+{{d-icon icon translatedtitle=title class=cssClasses}}

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

@@ -29,7 +29,9 @@ discourseModule("Component | bookmark-icon", function (hooks) {
     },
 
     async test(assert) {
-      assert.ok(exists(".d-icon-discourse-bookmark-clock"));
+      assert.ok(
+        exists(".d-icon-discourse-bookmark-clock.bookmark-icon__bookmarked")
+      );
       assert.strictEqual(
         query(".svg-icon-title")["title"],
         I18n.t("bookmarks.created_with_reminder_generic", {
@@ -56,7 +58,7 @@ discourseModule("Component | bookmark-icon", function (hooks) {
     },
 
     async test(assert) {
-      assert.ok(exists(".d-icon-bookmark"));
+      assert.ok(exists(".d-icon-bookmark.bookmark-icon__bookmarked"));
       assert.strictEqual(
         query(".svg-icon-title")["title"],
         I18n.t("bookmarks.created_generic", {
@@ -65,4 +67,22 @@ discourseModule("Component | bookmark-icon", function (hooks) {
       );
     },
   });
+
+  componentTest("null bookmark", {
+    template: hbs`{{bookmark-icon bookmark=bookmark}}`,
+
+    beforeEach() {
+      this.setProperties({
+        bookmark: null,
+      });
+    },
+
+    async test(assert) {
+      assert.ok(exists(".d-icon-bookmark.bookmark-icon"));
+      assert.strictEqual(
+        query(".svg-icon-title")["title"],
+        I18n.t("bookmarks.create")
+      );
+    },
+  });
 });