FIX: Change /bookmarks URL back to topic list and add bookmark poster avatars (#9759)

* Changes the /bookmarks URL to show the original "topics filtered by bookmark" list instead of redirecting to user activity bookmarks (see https://meta.discourse.org/t/domain-com-bookmarks-is-showing-domain-com-u-user-activity-bookmarks-with-reminders/149252/12)
* Add the user avatar for the user who made the post that is bookmarked

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

@@ -1,4 +1,5 @@
 import Category from "discourse/models/category";
+import User from "discourse/models/user";
 import { isRTL } from "discourse/lib/text-direction";
 import { censor } from "pretty-text/censored-words";
 import { emojiUnescape } from "discourse/lib/text";
@@ -135,6 +136,19 @@ const Bookmark = RestModel.extend({
       }
     }
     return ajax({ url: moreUrl });
+  },
+
+  @discourseComputed(
+    "post_user_username",
+    "post_user_avatar_template",
+    "post_user_name"
+  )
+  postUser(post_user_username, avatarTemplate, name) {
+    return User.create({
+      username: post_user_username,
+      avatar_template: avatarTemplate,
+      name: name
+    });
   }
 });
 

app/assets/javascripts/discourse/app/routes/discovery.js

@@ -13,14 +13,7 @@ export default DiscourseRoute.extend(OpenComposer, {
   },
 
   beforeModel(transition) {
-    // the new bookmark list is radically different to this topic-based one,
-    // including being able to show links to multiple posts to the same topic
-    // and being based on a different model. better to just redirect
     const url = transition.intent.url;
-    if (url === "/bookmarks") {
-      this.transitionTo("userActivity.bookmarks", this.currentUser);
-    }
-
     if (
       (url === "/" || url === "/latest" || url === "/categories") &&
       transition.targetName.indexOf("discovery.top") === -1 &&

app/assets/javascripts/discourse/app/templates/user/bookmarks.hbs

@@ -6,8 +6,9 @@
       <table class="topic-list bookmark-list">
         <thead>
           <th>{{i18n "topic.title"}}</th>
-          <th>{{i18n "post.bookmarks.updated"}}</th>
-          <th>{{i18n "activity"}}</th>
+          <th>&nbsp;</th>
+          <th class="post-metadata">{{i18n "post.bookmarks.updated"}}</th>
+          <th class="post-metadata">{{i18n "activity"}}</th>
           <th>&nbsp;</th>
         </thead>
         <tbody>
@@ -39,8 +40,15 @@
                   {{discourse-tags bookmark mode="list" tagsForUser=tagsForUser}}
                 </div>
               </td>
-              <td>{{format-date bookmark.updated_at format="tiny"}}</td>
-              {{raw "list/activity-column" topic=bookmark class="num" tagName="td"}}
+              <td>
+                {{#if bookmark.post_user_avatar_template}}
+                  <a href={{bookmark.postUser.path}} data-user-card={{bookmark.post_user_username}}>
+                    {{avatar bookmark.postUser avatarTemplatePath="avatar_template" usernamePath="username" namePath="name" imageSize="small"}}
+                  </a>
+                {{/if}}
+              </td>
+              <td class="post-metadata">{{format-date bookmark.updated_at format="tiny"}}</td>
+              {{raw "list/activity-column" topic=bookmark class="num post-metadata" tagName="td"}}
               <td>
                 {{bookmark-actions-dropdown
                   bookmark=bookmark

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

@@ -36,7 +36,7 @@ createWidgetFrom(QuickAccessPanel, "quick-access-bookmarks", {
         bookmark.post_number || bookmark.linked_post_number
       ),
       content: bookmark.title,
-      username: bookmark.username
+      username: bookmark.post_user_username
     });
   },
 

app/assets/stylesheets/common/components/bookmark-list-item.scss

@@ -1,4 +1,13 @@
+.bookmark-list {
+  th.post-metadata {
+    text-align: center;
+  }
+}
+
 .bookmark-list-item {
+  td.post-metadata {
+    text-align: center;
+  }
   .bookmark-metadata {
     font-size: $font-down-2;
     white-space: nowrap;

app/serializers/user_bookmark_serializer.rb

@@ -24,7 +24,9 @@ class UserBookmarkSerializer < ApplicationSerializer
              :highest_post_number,
              :bumped_at,
              :slug,
-             :username
+             :post_user_username,
+             :post_user_avatar_template,
+             :post_user_name
 
   def topic
     @topic ||= object.topic || Topic.unscoped.find(object.topic_id)
@@ -94,7 +96,19 @@ class UserBookmarkSerializer < ApplicationSerializer
     topic.slug
   end
 
-  def username
-    post.user.username
+  def post_user
+    @post_user ||= post.user
+  end
+
+  def post_user_username
+    post_user.username
+  end
+
+  def post_user_avatar_template
+    post_user.avatar_template
+  end
+
+  def post_user_name
+    post_user.name
   end
 end

spec/serializers/user_bookmark_serializer_spec.rb

@@ -28,7 +28,9 @@ RSpec.describe UserBookmarkSerializer do
     expect(s.highest_post_number).to eq(1)
     expect(s.bumped_at).to eq_time(bookmark.topic.bumped_at)
     expect(s.slug).to eq(bookmark.topic.slug)
-    expect(s.username).to eq(bookmark.post.user.username)
+    expect(s.post_user_username).to eq(bookmark.post.user.username)
+    expect(s.post_user_name).to eq(bookmark.post.user.name)
+    expect(s.post_user_avatar_template).not_to eq(nil)
   end
 
   context "when the topic is deleted" do

test/javascripts/fixtures/user_fixtures.js

@@ -419,7 +419,9 @@ export default {
           highest_post_number: 5,
           bumped_at: "2020-04-06T05:20:00.172Z",
           slug: "yelling-topic-title",
-          username: "someguy"
+          post_user_username: "someguy",
+          post_user_name: "Some Guy",
+          post_user_avatar_template: "/letter_avatar/someguy/{size}/3_f9720745f5ce6dfc2b5641fca999d934.png"
         }
       ]
     }