FEATURE: Expand messages filter links when viewing private messages. (#17106)

app/assets/javascripts/discourse/app/components/sidebar/messages-section.js

@@ -1,5 +1,6 @@
 import { cached } from "@glimmer/tracking";
 
+import { getOwner } from "discourse-common/lib/get-owner";
 import GlimmerComponent from "discourse/components/glimmer";
 import GroupMessageSectionLink from "discourse/lib/sidebar/messages-section/group-message-section-link";
 import PersonalMessageSectionLink from "discourse/lib/sidebar/messages-section/personal-message-section-link";
@@ -10,8 +11,15 @@ const SENT = "sent";
 const NEW = "new";
 const ARCHIVE = "archive";
 
-export const PERSONAL_MESSAGES_INBOXES = [INBOX, UNREAD, NEW, SENT, ARCHIVE];
-export const GROUP_MESSAGES_INBOXES = [INBOX, UNREAD, NEW, ARCHIVE];
+export const PERSONAL_MESSAGES_INBOX_FILTERS = [
+  INBOX,
+  NEW,
+  UNREAD,
+  SENT,
+  ARCHIVE,
+];
+
+export const GROUP_MESSAGES_INBOX_FILTERS = [INBOX, NEW, UNREAD, ARCHIVE];
 
 export default class SidebarMessagesSection extends GlimmerComponent {
   constructor() {
@@ -37,19 +45,30 @@ export default class SidebarMessagesSection extends GlimmerComponent {
     currentRouteParentName,
     currentRouteParams,
   }) {
-    const sectionLinks = [
-      ...this.personalMessagesSectionLinks,
-      ...this.groupMessagesSectionLinks,
-    ];
-
-    if (currentRouteParentName !== "userPrivateMessages") {
-      sectionLinks.forEach((sectionLink) => {
+    if (
+      currentRouteParentName !== "userPrivateMessages" &&
+      currentRouteParentName !== "topic"
+    ) {
+      for (const sectionLink of this.allSectionLinks) {
         sectionLink.collapse();
-      });
+      }
     } else {
-      sectionLinks.forEach((sectionLink) => {
-        sectionLink.pageChanged(currentRouteName, currentRouteParams);
-      });
+      const attrs = {
+        currentRouteName,
+        currentRouteParams,
+      };
+
+      if (currentRouteParentName === "topic") {
+        const topicController = getOwner(this).lookup("controller:topic");
+
+        if (topicController.model.isPrivateMessage) {
+          attrs.privateMessageTopic = topicController.model;
+        }
+      }
+
+      for (const sectionLink of this.allSectionLinks) {
+        sectionLink.pageChanged(attrs);
+      }
     }
   }
 
@@ -57,7 +76,7 @@ export default class SidebarMessagesSection extends GlimmerComponent {
   get personalMessagesSectionLinks() {
     const links = [];
 
-    PERSONAL_MESSAGES_INBOXES.forEach((type) => {
+    PERSONAL_MESSAGES_INBOX_FILTERS.forEach((type) => {
       links.push(
         new PersonalMessageSectionLink({
           currentUser: this.currentUser,
@@ -74,7 +93,7 @@ export default class SidebarMessagesSection extends GlimmerComponent {
     const links = [];
 
     this.currentUser.groupsWithMessages.forEach((group) => {
-      GROUP_MESSAGES_INBOXES.forEach((groupMessageLink) => {
+      GROUP_MESSAGES_INBOX_FILTERS.forEach((groupMessageLink) => {
         links.push(
           new GroupMessageSectionLink({
             group,
@@ -87,4 +106,11 @@ export default class SidebarMessagesSection extends GlimmerComponent {
 
     return links;
   }
+
+  get allSectionLinks() {
+    return [
+      ...this.groupMessagesSectionLinks,
+      ...this.personalMessagesSectionLinks,
+    ];
+  }
 }

app/assets/javascripts/discourse/app/lib/sidebar/messages-section/group-message-section-link.js

@@ -1,13 +1,9 @@
 import I18n from "I18n";
 
-import { tracked } from "@glimmer/tracking";
 import { capitalize } from "@ember/string";
+import MessageSectionLink from "discourse/lib/sidebar/messages-section/message-section-link";
 
-import { INBOX } from "discourse/components/sidebar/messages-section";
-
-export default class GroupMessageSectionLink {
-  @tracked shouldDisplay = this._isInbox;
-
+export default class GroupMessageSectionLink extends MessageSectionLink {
   routeNames = new Set([
     "userPrivateMessages.group",
     "userPrivateMessages.groupUnread",
@@ -15,13 +11,6 @@ export default class GroupMessageSectionLink {
     "userPrivateMessages.groupArchive",
   ]);
 
-  constructor({ group, type, currentUser, router }) {
-    this.group = group;
-    this.type = type;
-    this.currentUser = currentUser;
-    this.router = router;
-  }
-
   get name() {
     return `group-messages-${this.type}`;
   }
@@ -56,25 +45,22 @@ export default class GroupMessageSectionLink {
     }
   }
 
-  collapse() {
+  pageChanged({ currentRouteName, currentRouteParams, privateMessageTopic }) {
     if (this._isInbox) {
       return;
     }
 
-    this.shouldDisplay = false;
-  }
-
-  pageChanged(currentRouteName, currentRouteParams) {
-    if (this._isInbox) {
+    if (
+      privateMessageTopic?.allowedGroups?.some(
+        (g) => g.name === this.group.name
+      )
+    ) {
+      this.setDisplayState = true;
       return;
     }
 
-    this.shouldDisplay =
+    this.setDisplayState =
       this.routeNames.has(currentRouteName) &&
       currentRouteParams.name.toLowerCase() === this.group.name.toLowerCase();
   }
-
-  get _isInbox() {
-    return this.type === INBOX;
-  }
 }

app/assets/javascripts/discourse/app/lib/sidebar/messages-section/message-section-link.js

@@ -0,0 +1,46 @@
+import { tracked } from "@glimmer/tracking";
+
+import { INBOX } from "discourse/components/sidebar/messages-section";
+
+export default class MessageSectionLink {
+  @tracked shouldDisplay = this._isInbox;
+
+  constructor({ group, currentUser, type }) {
+    this.group = group;
+    this.currentUser = currentUser;
+    this.type = type;
+  }
+
+  set setDisplayState(value) {
+    this.shouldDisplay = value;
+  }
+
+  get inboxFilter() {
+    throw "not implemented";
+  }
+
+  expand() {
+    if (this._isInbox) {
+      return;
+    }
+
+    this.setDisplayState = true;
+  }
+
+  collapse() {
+    if (this._isInbox) {
+      return;
+    }
+
+    this.setDisplayState = false;
+  }
+
+  // eslint-disable-next-line no-unused-vars
+  pageChanged({ currentRouteName, currentRouteParams, privateMessageTopic }) {
+    throw "not implemented";
+  }
+
+  get _isInbox() {
+    return this.type === INBOX;
+  }
+}

app/assets/javascripts/discourse/app/lib/sidebar/messages-section/personal-message-section-link.js

@@ -1,11 +1,8 @@
 import I18n from "I18n";
 
-import { tracked } from "@glimmer/tracking";
-import { INBOX } from "discourse/components/sidebar/messages-section";
-
-export default class PersonalMessageSectionLink {
-  @tracked shouldDisplay = this._isInbox;
+import MessageSectionLink from "discourse/lib/sidebar/messages-section/message-section-link";
 
+export default class PersonalMessageSectionLink extends MessageSectionLink {
   routeNames = new Set([
     "userPrivateMessages.index",
     "userPrivateMessages.unread",
@@ -14,16 +11,14 @@ export default class PersonalMessageSectionLink {
     "userPrivateMessages.archive",
   ]);
 
-  constructor({ currentUser, type, router }) {
-    this.currentUser = currentUser;
-    this.type = type;
-    this.router = router;
-  }
-
   get name() {
     return `personal-messages-${this.type}`;
   }
 
+  get class() {
+    return `personal-messages`;
+  }
+
   get route() {
     if (this._isInbox) {
       return "userPrivateMessages.index";
@@ -46,23 +41,16 @@ export default class PersonalMessageSectionLink {
     return I18n.t(`sidebar.sections.messages.links.${this.type}`);
   }
 
-  collapse() {
+  pageChanged({ currentRouteName, privateMessageTopic }) {
     if (this._isInbox) {
       return;
     }
 
-    this.shouldDisplay = false;
-  }
-
-  pageChanged(currentRouteName) {
-    if (this._isInbox) {
+    if (privateMessageTopic?.allowedGroups?.length === 0) {
+      this.setDisplayState = true;
       return;
     }
 
-    this.shouldDisplay = this.routeNames.has(currentRouteName);
-  }
-
-  get _isInbox() {
-    return this.type === INBOX;
+    this.setDisplayState = this.routeNames.has(currentRouteName);
   }
 }

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

@@ -70,6 +70,7 @@ const Topic = RestModel.extend({
 
   lastPosterUser: alias("lastPoster.user"),
   lastPosterGroup: alias("lastPoster.primary_group"),
+  allowedGroups: alias("details.allowed_groups"),
 
   @discourseComputed("posters.[]", "participants.[]", "allowed_user_count")
   featuredUsers(posters, participants, allowedUserCount) {

app/assets/javascripts/discourse/app/templates/components/sidebar/messages-section.hbs

@@ -11,6 +11,7 @@
     {{#if personalMessageSectionLink.shouldDisplay}}
       <Sidebar::SectionLink
         @linkName={{personalMessageSectionLink.name}}
+        @class={{personalMessageSectionLink.class}}
         @route={{personalMessageSectionLink.route}}
         @model={{personalMessageSectionLink.model}}
         @currentWhen={{personalMessageSectionLink.currentWhen}}

app/assets/javascripts/discourse/tests/acceptance/sidebar-messages-section-test.js

@@ -287,5 +287,73 @@ acceptance(
         );
       });
     });
+
+    test("viewing personal message topic with a group the user is a part of", async function (assert) {
+      updateCurrentUser({
+        groups: [
+          {
+            name: "foo_group", // based on fixtures
+            has_messages: true,
+          },
+        ],
+      });
+
+      await visit("/t/130");
+
+      assert.strictEqual(
+        queryAll(".sidebar-section-messages .sidebar-section-link").length,
+        5,
+        "5 section links are displayed"
+      );
+
+      assert.strictEqual(
+        queryAll(
+          ".sidebar-section-messages .sidebar-section-link.personal-messages"
+        ).length,
+        1,
+        "personal messages inbox filter links are not shown"
+      );
+
+      assert.strictEqual(
+        queryAll(".sidebar-section-messages .sidebar-section-link.foo_group")
+          .length,
+        4,
+        "foo_group messages inbox filter links are shown"
+      );
+    });
+
+    test("viewing personal message topic", async function (assert) {
+      updateCurrentUser({
+        groups: [
+          {
+            name: "foo_group", // based on fixtures
+            has_messages: true,
+          },
+        ],
+      });
+
+      await visit("/t/34");
+
+      assert.strictEqual(
+        queryAll(".sidebar-section-messages .sidebar-section-link").length,
+        6,
+        "6 section links are displayed"
+      );
+
+      assert.strictEqual(
+        queryAll(
+          ".sidebar-section-messages .sidebar-section-link.personal-messages"
+        ).length,
+        5,
+        "personal messages inbox filter links are shown"
+      );
+
+      assert.strictEqual(
+        queryAll(".sidebar-section-messages .sidebar-section-link.foo_group")
+          .length,
+        1,
+        "foo_group messages inbox filter links are not shown"
+      );
+    });
   }
 );