FIX: Improve bookmark-icon title (#16908)

This improves the bookmark-icon title to be more like the
post bookmark icons, to include the special formatted date
as well as the name of the bookmark.

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

@@ -1,4 +1,6 @@
 import { isEmpty } from "@ember/utils";
+import I18n from "I18n";
+import { formattedReminderTime } from "discourse/lib/bookmark";
 import { computed } from "@ember/object";
 import Component from "@ember/component";
 import {
@@ -18,4 +20,22 @@ export default class BookmarkIcon extends Component {
 
     return NO_REMINDER_ICON;
   }
+
+  @computed("bookmark.name", "bookmark.reminder_at")
+  get title() {
+    if (!isEmpty(this.bookmark.reminder_at)) {
+      const formattedTime = formattedReminderTime(
+        this.bookmark.reminder_at,
+        this.currentUser.timezone
+      );
+      return I18n.t("bookmarks.created_with_reminder_generic", {
+        date: formattedTime,
+        name: this.bookmark.name,
+      });
+    }
+
+    return I18n.t("bookmarks.created_generic", {
+      name: this.bookmark.name,
+    });
+  }
 }

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

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

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

@@ -1,9 +1,16 @@
 import Bookmark from "discourse/models/bookmark";
+import I18n from "I18n";
+import { formattedReminderTime } from "discourse/lib/bookmark";
+import { tomorrow } from "discourse/lib/time-utils";
 import componentTest, {
   setupRenderingTest,
 } from "discourse/tests/helpers/component-test";
 import hbs from "htmlbars-inline-precompile";
-import { discourseModule, exists } from "discourse/tests/helpers/qunit-helpers";
+import {
+  discourseModule,
+  exists,
+  query,
+} from "discourse/tests/helpers/qunit-helpers";
 
 discourseModule("Component | bookmark-icon", function (hooks) {
   setupRenderingTest(hooks);
@@ -12,17 +19,27 @@ discourseModule("Component | bookmark-icon", function (hooks) {
     template: hbs`{{bookmark-icon bookmark=bookmark}}`,
 
     beforeEach() {
-      this.set(
-        "bookmark",
-        Bookmark.create({
-          reminder_at: moment(),
+      this.currentUser.set("timezone", "Australia/Brisbane");
+      this.setProperties({
+        bookmark: Bookmark.create({
+          reminder_at: tomorrow(this.currentUser.timezone),
           name: "some name",
-        })
-      );
+        }),
+      });
     },
 
     async test(assert) {
       assert.ok(exists(".d-icon-discourse-bookmark-clock"));
+      assert.strictEqual(
+        query(".svg-icon-title")["title"],
+        I18n.t("bookmarks.created_with_reminder_generic", {
+          date: formattedReminderTime(
+            this.bookmark.reminder_at,
+            this.currentUser.timezone
+          ),
+          name: "some name",
+        })
+      );
     },
   });
 
@@ -40,6 +57,12 @@ discourseModule("Component | bookmark-icon", function (hooks) {
 
     async test(assert) {
       assert.ok(exists(".d-icon-bookmark"));
+      assert.strictEqual(
+        query(".svg-icon-title")["title"],
+        I18n.t("bookmarks.created_generic", {
+          name: "some name",
+        })
+      );
     },
   });
 });

config/locales/client.en.yml

@@ -335,11 +335,13 @@ en:
 
     bookmarks:
       created: "You've bookmarked this post. %{name}"
+      created_generic: "You've bookmarked this. %{name}"
       create: "Create bookmark"
       edit: "Edit bookmark"
       not_bookmarked: "bookmark this post"
       remove_reminder_keep_bookmark: "Remove reminder and keep bookmark"
       created_with_reminder: "You've bookmarked this post with a reminder %{date}. %{name}"
+      created_with_reminder_generic: "You've bookmarked this with a reminder %{date}. %{name}"
       remove: "Remove Bookmark"
       delete: "Delete Bookmark"
       confirm_delete: "Are you sure you want to delete this bookmark? The reminder will also be deleted."