FIX: Show topic level bookmark with reminder modal (#9336)

* When using the topic-level bookmark button or shortcut, we now show the bookmark with reminder modal for consistency.
* When hovering on a bookmark reminder notification where the bookmark has a name, show the name of the bookmark on hover.

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

@@ -339,6 +339,7 @@ const Post = RestModel.extend({
   toggleBookmarkWithReminder() {
     this.toggleProperty("bookmarked_with_reminder");
     if (this.bookmarked_with_reminder) {
+      return new Promise(resolve => {
         let controller = showModal("bookmark", {
           model: {
             postId: this.id
@@ -350,6 +351,7 @@ const Post = RestModel.extend({
           onCloseWithoutSaving: () => {
             this.toggleProperty("bookmarked_with_reminder");
             this.appEvents.trigger("post-stream:refresh", { id: this.id });
+            resolve();
           },
           afterSave: (reminderAtISO, reminderType) => {
             this.setProperties({
@@ -358,8 +360,10 @@ const Post = RestModel.extend({
               bookmark_reminder_type: reminderType
             });
             this.appEvents.trigger("post-stream:refresh", { id: this.id });
+            resolve();
           }
         });
+      });
     } else {
       this.setProperties({
         bookmark_reminder_at: null,

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

@@ -397,6 +397,16 @@ const Topic = RestModel.extend({
     }).then(() => this.set("archetype", "regular"));
   },
 
+  afterTopicBookmarked(firstPost) {
+    if (firstPost) {
+      firstPost.set("bookmarked", true);
+      if (this.siteSettings.enable_bookmarks_with_reminders) {
+        firstPost.set("bookmarked_with_reminder", true);
+      }
+      return [firstPost.id];
+    }
+  },
+
   toggleBookmark() {
     if (this.bookmarking) {
       return Promise.resolve();
@@ -408,20 +418,28 @@ const Topic = RestModel.extend({
     const firstPost =
       posts && posts[0] && posts[0].get("post_number") === 1 && posts[0];
     const bookmark = !this.bookmarked;
-    const path = bookmark ? "/bookmark" : "/remove_bookmarks";
 
     const toggleBookmarkOnServer = () => {
-      return ajax(`/t/${this.id}${path}`, { type: "PUT" })
+      if (bookmark) {
+        if (this.siteSettings.enable_bookmarks_with_reminders) {
+          return firstPost.toggleBookmarkWithReminder().then(() => {
+            this.set("bookmarking", false);
+            return this.afterTopicBookmarked(firstPost);
+          });
+        } else {
+          return ajax(`/t/${this.id}/bookmark`, { type: "PUT" })
             .then(() => {
               this.toggleProperty("bookmarked");
-          if (bookmark && firstPost) {
+              return this.afterTopicBookmarked(firstPost);
-            firstPost.set("bookmarked", true);
+            })
-            if (this.siteSettings.enable_bookmarks_with_reminders) {
+            .catch(popupAjaxError)
-              firstPost.set("bookmarked_with_reminder", true);
+            .finally(() => this.set("bookmarking", false));
         }
-            return [firstPost.id];
+      } else {
-          }
+        return ajax(`/t/${this.id}/remove_bookmarks`, { type: "PUT" })
-          if (!bookmark && posts) {
+          .then(() => {
+            this.toggleProperty("bookmarked");
+            if (posts) {
               const updated = [];
               posts.forEach(post => {
                 if (post.get("bookmarked")) {
@@ -438,11 +456,10 @@ const Topic = RestModel.extend({
               });
               return updated;
             }
-
-          return [];
           })
           .catch(popupAjaxError)
           .finally(() => this.set("bookmarking", false));
+      }
     };
 
     const unbookmarkedPosts = [];

app/assets/javascripts/discourse/widgets/bookmark-reminder-notification-item.js

@@ -14,6 +14,19 @@ createWidgetFrom(
         description,
         username
       });
+    },
+    notificationTitle(notificationName, data) {
+      if (notificationName) {
+        if (data.bookmark_name) {
+          return I18n.t(`notifications.titles.${notificationName}_with_name`, {
+            name: data.bookmark_name
+          });
+        } else {
+          return I18n.t(`notifications.titles.${notificationName}`);
+        }
+      } else {
+        return "";
+      }
     }
   }
 );

config/locales/client.en.yml

@@ -1880,6 +1880,7 @@ en:
         moved_post: "post moved"
         linked: "linked"
         bookmark_reminder: "bookmark reminder"
+        bookmark_reminder_with_name: "bookmark reminder - %{name}"
         granted_badge: "badge granted"
         invited_to_topic: "invited to topic"
         group_mentioned: "group mentioned"