FIX: Display browse more message as long as there are suggested topics (#22967)

app/assets/javascripts/discourse/app/components/more-topics.hbs

@@ -36,4 +36,10 @@
   {{/if}}
 
   <PluginOutlet @name="topic-more-content" @outletArgs={{hash model=@topic}} />
-</div>
+</div>
+
+{{#if @topic.suggestedTopics.length}}
+  <h3 class="suggested-topics-message">
+    {{html-safe this.browseMoreMessage}}
+  </h3>
+{{/if}}

app/assets/javascripts/discourse/app/components/more-topics.js

@@ -1,12 +1,19 @@
 import Component from "@glimmer/component";
 import { inject as service } from "@ember/service";
 import { next } from "@ember/runloop";
-import { action } from "@ember/object";
+import { action, computed } from "@ember/object";
 import { tracked } from "@glimmer/tracking";
+import I18n from "I18n";
+import { categoryBadgeHTML } from "discourse/helpers/category-link";
+import getURL from "discourse-common/lib/get-url";
+import { iconHTML } from "discourse-common/lib/icon-library";
 
 export default class MoreTopics extends Component {
   @service site;
   @service moreTopicsPreferenceTracking;
+  @service pmTopicTrackingState;
+  @service topicTrackingState;
+  @service currentUser;
 
   @tracked availablePills = [];
   @tracked singleList = false;
@@ -62,4 +69,107 @@ export default class MoreTopics extends Component {
       this.availablePills = pills;
     });
   }
+
+  @computed(
+    "pmTopicTrackingState.isTracking",
+    "pmTopicTrackingState.statesModificationCounter",
+    "topicTrackingState.messageCount"
+  )
+  get browseMoreMessage() {
+    return this.args.topic.isPrivateMessage
+      ? this._privateMessageBrowseMoreMessage()
+      : this._topicBrowseMoreMessage();
+  }
+
+  _privateMessageBrowseMoreMessage() {
+    const username = this.currentUser.username;
+    const suggestedGroupName = this.args.topic.suggested_group_name;
+    const inboxFilter = suggestedGroupName ? "group" : "user";
+
+    const unreadCount = this.pmTopicTrackingState.lookupCount("unread", {
+      inboxFilter,
+      groupName: suggestedGroupName,
+    });
+
+    const newCount = this.pmTopicTrackingState.lookupCount("new", {
+      inboxFilter,
+      groupName: suggestedGroupName,
+    });
+
+    if (unreadCount + newCount > 0) {
+      const hasBoth = unreadCount > 0 && newCount > 0;
+
+      if (suggestedGroupName) {
+        return I18n.messageFormat("user.messages.read_more_group_pm_MF", {
+          HAS_UNREAD_AND_NEW: hasBoth,
+          UNREAD: unreadCount,
+          NEW: newCount,
+          username,
+          groupName: suggestedGroupName,
+          groupLink: this._groupLink(username, suggestedGroupName),
+          basePath: getURL(""),
+        });
+      } else {
+        return I18n.messageFormat("user.messages.read_more_personal_pm_MF", {
+          HAS_UNREAD_AND_NEW: hasBoth,
+          UNREAD: unreadCount,
+          NEW: newCount,
+          username,
+          basePath: getURL(""),
+        });
+      }
+    } else if (suggestedGroupName) {
+      return I18n.t("user.messages.read_more_in_group", {
+        groupLink: this._groupLink(username, suggestedGroupName),
+      });
+    } else {
+      return I18n.t("user.messages.read_more", {
+        basePath: getURL(""),
+        username,
+      });
+    }
+  }
+
+  _topicBrowseMoreMessage() {
+    let category = this.args.topic.category;
+
+    if (category && category.id === this.site.uncategorized_category_id) {
+      category = null;
+    }
+
+    let unreadTopics = 0;
+    let newTopics = 0;
+
+    if (this.currentUser) {
+      unreadTopics = this.topicTrackingState.countUnread();
+      newTopics = this.topicTrackingState.countNew();
+    }
+
+    if (newTopics + unreadTopics > 0) {
+      return I18n.messageFormat("topic.read_more_MF", {
+        HAS_UNREAD_AND_NEW: unreadTopics > 0 && newTopics > 0,
+        UNREAD: unreadTopics,
+        NEW: newTopics,
+        HAS_CATEGORY: category ? true : false,
+        categoryLink: category ? categoryBadgeHTML(category) : null,
+        basePath: getURL(""),
+      });
+    } else if (category) {
+      return I18n.t("topic.read_more_in_category", {
+        categoryLink: categoryBadgeHTML(category),
+        latestLink: getURL("/latest"),
+      });
+    } else {
+      return I18n.t("topic.read_more", {
+        categoryLink: getURL("/categories"),
+        latestLink: getURL("/latest"),
+      });
+    }
+  }
+
+  _groupLink(username, groupName) {
+    return `<a class="group-link" href="${getURL(
+      `/u/${username}/messages/group/${groupName}`
+    )}">${iconHTML("users")} ${groupName}</a>`;
+  }
 }

app/assets/javascripts/discourse/app/components/suggested-topics.hbs

@@ -23,8 +23,4 @@
       <BasicTopicList @topics={{this.topic.suggestedTopics}} />
     {{/if}}
   </div>
-
-  <h3 class="suggested-topics-message">
-    {{html-safe this.browseMoreMessage}}
-  </h3>
 </div>

app/assets/javascripts/discourse/app/components/suggested-topics.js

@@ -1,10 +1,6 @@
-import { computed, get } from "@ember/object";
+import { computed } from "@ember/object";
 import Component from "@ember/component";
-import I18n from "I18n";
-import { categoryBadgeHTML } from "discourse/helpers/category-link";
 import discourseComputed from "discourse-common/utils/decorators";
-import getURL from "discourse-common/lib/get-url";
-import { iconHTML } from "discourse-common/lib/icon-library";
 import { inject as service } from "@ember/service";
 
 export default Component.extend({
@@ -25,111 +21,4 @@ export default Component.extend({
   hidden(preference) {
     return this.site.mobileView && preference !== this.listId;
   },
-
-  @discourseComputed(
-    "topic",
-    "pmTopicTrackingState.isTracking",
-    "pmTopicTrackingState.statesModificationCounter",
-    "topicTrackingState.messageCount"
-  )
-  browseMoreMessage(topic) {
-    return topic.isPrivateMessage
-      ? this._privateMessageBrowseMoreMessage(topic)
-      : this._topicBrowseMoreMessage(topic);
-  },
-
-  _privateMessageBrowseMoreMessage(topic) {
-    const username = this.currentUser.username;
-    const suggestedGroupName = topic.suggested_group_name;
-    const inboxFilter = suggestedGroupName ? "group" : "user";
-
-    const unreadCount = this.pmTopicTrackingState.lookupCount("unread", {
-      inboxFilter,
-      groupName: suggestedGroupName,
-    });
-
-    const newCount = this.pmTopicTrackingState.lookupCount("new", {
-      inboxFilter,
-      groupName: suggestedGroupName,
-    });
-
-    if (unreadCount + newCount > 0) {
-      const hasBoth = unreadCount > 0 && newCount > 0;
-
-      if (suggestedGroupName) {
-        return I18n.messageFormat("user.messages.read_more_group_pm_MF", {
-          HAS_UNREAD_AND_NEW: hasBoth,
-          UNREAD: unreadCount,
-          NEW: newCount,
-          username,
-          groupName: suggestedGroupName,
-          groupLink: this._groupLink(username, suggestedGroupName),
-          basePath: getURL(""),
-        });
-      } else {
-        return I18n.messageFormat("user.messages.read_more_personal_pm_MF", {
-          HAS_UNREAD_AND_NEW: hasBoth,
-          UNREAD: unreadCount,
-          NEW: newCount,
-          username,
-          basePath: getURL(""),
-        });
-      }
-    } else if (suggestedGroupName) {
-      return I18n.t("user.messages.read_more_in_group", {
-        groupLink: this._groupLink(username, suggestedGroupName),
-      });
-    } else {
-      return I18n.t("user.messages.read_more", {
-        basePath: getURL(""),
-        username,
-      });
-    }
-  },
-
-  _topicBrowseMoreMessage(topic) {
-    let category = topic.get("category");
-
-    if (
-      category &&
-      get(category, "id") === this.site.uncategorized_category_id
-    ) {
-      category = null;
-    }
-
-    let unreadTopics = 0;
-    let newTopics = 0;
-
-    if (this.currentUser) {
-      unreadTopics = this.topicTrackingState.countUnread();
-      newTopics = this.topicTrackingState.countNew();
-    }
-
-    if (newTopics + unreadTopics > 0) {
-      return I18n.messageFormat("topic.read_more_MF", {
-        HAS_UNREAD_AND_NEW: unreadTopics > 0 && newTopics > 0,
-        UNREAD: unreadTopics,
-        NEW: newTopics,
-        HAS_CATEGORY: category ? true : false,
-        categoryLink: category ? categoryBadgeHTML(category) : null,
-        basePath: getURL(""),
-      });
-    } else if (category) {
-      return I18n.t("topic.read_more_in_category", {
-        categoryLink: categoryBadgeHTML(category),
-        latestLink: getURL("/latest"),
-      });
-    } else {
-      return I18n.t("topic.read_more", {
-        categoryLink: getURL("/categories"),
-        latestLink: getURL("/latest"),
-      });
-    }
-  },
-
-  _groupLink(username, groupName) {
-    return `<a class="group-link" href="${getURL(
-      `/u/${username}/messages/group/${groupName}`
-    )}">${iconHTML("users")} ${groupName}</a>`;
-  },
 });

app/assets/javascripts/discourse/tests/acceptance/user-private-messages-test.js

@@ -736,10 +736,9 @@ acceptance(
 );
 
 acceptance(
-  "User Private Messages - user with group messages - Mobile",
+  "User Private Messages - user with group messages - browse more message",
   function (needs) {
     withGroupMessagesSetup(needs);
-    needs.mobileView();
 
     test("suggested messages without new or unread", async function (assert) {
       await visit("/t/12");
@@ -793,7 +792,6 @@ acceptance(
     });
 
     test("suggested messages for group messages with new and unread", async function (assert) {
-      needs.mobileView();
       await visit("/t/13");
 
       await publishGroupNewToMessageBus({ groupIds: [14], topicId: 1 });

app/assets/stylesheets/common/base/topic.scss

@@ -369,27 +369,31 @@ a.badge-category {
 }
 
 // Target the .badge-category text, the bullet icon needs to maintain `display: block`
-.more-content-topics h3 .badge-wrapper.bullet span.badge-category,
-.more-content-topics h3 .badge-wrapper.box span,
-.more-content-topics h3 .badge-wrapper.bar span {
+.suggested-topics-message .badge-wrapper.bullet span.badge-category,
+.suggested-topics-message .badge-wrapper.box span,
+.suggested-topics-message .badge-wrapper.bar span {
   display: inline;
 }
 
-.more-content-topicss h3 .badge-wrapper.bullet span.badge-category {
+.suggested-topics-message .badge-wrapper.bullet span.badge-category {
   // Override vertical-align: text-top from `badges.css.scss`
   vertical-align: baseline;
   line-height: var(--line-height-medium);
 }
 
-.more-content-topics h3 .badge-wrapper.bullet,
-.more-content-topics h3 .badge-wrapper.bullet span.badge-category-parent-bg,
-.more-content-topics h3 .badge-wrapper.bullet span.badge-category-bg {
+.suggested-topics-message .badge-wrapper.bullet {
+  margin-right: 0;
+}
+
+.suggested-topics-message .badge-wrapper.bullet,
+.suggested-topics-message .badge-wrapper.bullet span.badge-category-parent-bg,
+.suggested-topics-message .badge-wrapper.bullet span.badge-category-bg {
   // Top of bullet aligns with top of line - adjust line height to vertically align bullet.
   line-height: 0.8;
 }
 
-.more-content-topics .badge-wrapper.bullet span.badge-category,
-.more-content-topics .badge-wrapper.bar span.badge-category {
+.suggested-topics-message .badge-wrapper.bullet span.badge-category,
+.suggested-topics-message .badge-wrapper.bar span.badge-category {
   max-width: 150px;
 }
 

app/assets/stylesheets/desktop/topic.scss

@@ -146,8 +146,7 @@
 
     .topic-list-header,
     .posts-map,
-    .views,
-    .suggested-topics-message {
+    .views {
       display: none;
     }
   }