FIX: Hide 'My Threads' if no followed channels have threads (#25470)

Co-authored-by: Joffrey JAFFEUX <j.jaffeux@gmail.com>

plugins/chat/assets/javascripts/discourse/components/channels-list-public.gjs

@@ -8,6 +8,7 @@ import PluginOutlet from "discourse/components/plugin-outlet";
 import concatClass from "discourse/helpers/concat-class";
 import dIcon from "discourse-common/helpers/d-icon";
 import i18n from "discourse-common/helpers/i18n";
+import and from "truth-helpers/helpers/and";
 import ChatChannelRow from "./chat-channel-row";
 
 export default class ChannelsListPublic extends Component {
@@ -44,13 +45,19 @@ export default class ChannelsListPublic extends Component {
     return this.chatTrackingStateManager.hasUnreadThreads;
   }
 
+  get isThreadEnabledInAnyChannel() {
+    return this.currentUser?.chat_channels?.public_channels?.some(
+      (channel) => channel.threading_enabled
+    );
+  }
+
   @action
   toggleChannelSection(section) {
     this.args.toggleSection(section);
   }
 
   <template>
-    {{#if this.site.desktopView}}
+    {{#if (and this.site.desktopView this.isThreadEnabledInAnyChannel)}}
       <LinkTo @route="chat.threads" class="chat-channel-row --threads">
         <span class="chat-channel-title">
           {{dIcon "discourse-threads" class="chat-user-threads__icon"}}

plugins/chat/assets/javascripts/discourse/components/user-threads/index.gjs

@@ -1,6 +1,7 @@
 import Component from "@glimmer/component";
 import { cached } from "@glimmer/tracking";
 import { inject as service } from "@ember/service";
+import i18n from "discourse-common/helpers/i18n";
 import { bind } from "discourse-common/utils/decorators";
 import ChannelTitle from "discourse/plugins/chat/discourse/components/channel-title";
 import List from "discourse/plugins/chat/discourse/components/chat/list";
@@ -50,6 +51,11 @@ export default class UserThreads extends Component {
           />
         </div>
       </list.Item>
+      <list.EmptyState>
+        <div class="empty-state-threads">
+          {{i18n "chat.empty_state.my_threads"}}
+        </div>
+      </list.EmptyState>
     </List>
   </template>
 }

plugins/chat/assets/javascripts/discourse/initializers/chat-sidebar.js

@@ -26,6 +26,7 @@ export default {
     }
 
     this.siteSettings = container.lookup("service:site-settings");
+    this.currentUser = container.lookup("service:current-user");
 
     withPluginApi("1.8.0", (api) => {
       api.addSidebarPanel(
@@ -42,62 +43,69 @@ export default {
     });
 
     withPluginApi("1.3.0", (api) => {
-      api.addSidebarSection(
-        (BaseCustomSidebarSection, BaseCustomSidebarSectionLink) => {
-          const SidebarChatMyThreadsSectionLink = class extends BaseCustomSidebarSectionLink {
-            route = "chat.threads";
-            text = I18n.t("chat.my_threads.title");
-            title = I18n.t("chat.my_threads.title");
-            name = "user-threads";
-            prefixType = "icon";
-            prefixValue = "discourse-threads";
-            suffixType = "icon";
-            suffixCSSClass = "unread";
+      const isThreadEnabledInAnyChannel =
+        this.currentUser?.chat_channels?.public_channels?.some(
+          (channel) => channel.threading_enabled === true
+        );
 
-            constructor() {
-              super(...arguments);
+      if (isThreadEnabledInAnyChannel) {
+        api.addSidebarSection(
+          (BaseCustomSidebarSection, BaseCustomSidebarSectionLink) => {
+            const SidebarChatMyThreadsSectionLink = class extends BaseCustomSidebarSectionLink {
+              route = "chat.threads";
+              text = I18n.t("chat.my_threads.title");
+              title = I18n.t("chat.my_threads.title");
+              name = "user-threads";
+              prefixType = "icon";
+              prefixValue = "discourse-threads";
+              suffixType = "icon";
+              suffixCSSClass = "unread";
 
-              if (container.isDestroyed) {
-                return;
+              constructor() {
+                super(...arguments);
+
+                if (container.isDestroyed) {
+                  return;
+                }
+
+                this.chatChannelsManager = container.lookup(
+                  "service:chat-channels-manager"
+                );
               }
 
-              this.chatChannelsManager = container.lookup(
-                "service:chat-channels-manager"
-              );
-            }
+              get suffixValue() {
+                return this.chatChannelsManager.publicMessageChannels.some(
+                  (channel) => channel.unreadThreadsCount > 0
+                )
+                  ? "circle"
+                  : "";
+              }
+            };
 
-            get suffixValue() {
-              return this.chatChannelsManager.publicMessageChannels.some(
-                (channel) => channel.unreadThreadsCount > 0
-              )
-                ? "circle"
-                : "";
-            }
-          };
+            const SidebarChatMyThreadsSection = class extends BaseCustomSidebarSection {
+              // we only show `My Threads` link
+              hideSectionHeader = true;
 
-          const SidebarChatMyThreadsSection = class extends BaseCustomSidebarSection {
-            // we only show `My Threads` link
-            hideSectionHeader = true;
+              name = "user-threads";
 
-            name = "user-threads";
+              // sidebar API doesn’t let you have undefined values
+              // even if you don't show the section’s header
+              title = "";
 
-            // sidebar API doesn’t let you have undefined values
-            // even if you don't show the section’s header
-            title = "";
+              get links() {
+                return [new SidebarChatMyThreadsSectionLink()];
+              }
 
-            get links() {
-              return [new SidebarChatMyThreadsSectionLink()];
-            }
+              get text() {
+                return null;
+              }
+            };
 
-            get text() {
-              return null;
-            }
-          };
-
-          return SidebarChatMyThreadsSection;
-        },
-        CHAT_PANEL
-      );
+            return SidebarChatMyThreadsSection;
+          },
+          CHAT_PANEL
+        );
+      }
 
       if (this.siteSettings.enable_public_channels) {
         api.addSidebarSection(

plugins/chat/assets/stylesheets/common/chat-user-threads.scss

@@ -31,6 +31,14 @@
   }
 }
 
+.c-user-threads .empty-state-threads {
+  display: flex;
+  justify-content: center;
+  padding: 1.25rem 1rem;
+  font-size: var(--font-up-1-rem);
+  color: var(--primary);
+}
+
 //sidebar
 #sidebar-section-content-user-threads {
   padding-bottom: 0.5rem;

plugins/chat/config/locales/client.en.yml

@@ -115,6 +115,7 @@ en:
         direct_message_cta: "Start a personal Chat"
         direct_message: "You can also start a personal chat with one or more users."
         title: "No channels found"
+        my_threads: "You don't have any threads yet. Threads you participate in will be displayed here."
       email_frequency:
         description: "We'll only email you if we haven't seen you in the last 15 minutes."
         never: "Never"

plugins/chat/spec/system/page_objects/chat_drawer/chat_drawer.rb

@@ -41,6 +41,10 @@ module PageObjects
         has_css?(".chat-channel-row.--threads[href='/chat/threads']")
       end
 
+      def has_no_user_threads_section?
+        has_no_css?(".chat-channel-row.--threads[href='/chat/threads']")
+      end
+
       def has_unread_user_threads?
         has_css?(".chat-channel-row.--threads .c-unread-indicator")
       end

plugins/chat/spec/system/page_objects/sidebar/sidebar.rb

@@ -44,6 +44,13 @@ module PageObjects
         )
       end
 
+      def has_no_user_threads_section?
+        has_no_css?(
+          ".sidebar-section-link[data-link-name='user-threads'][href='/chat/threads']",
+          text: I18n.t("js.chat.my_threads.title"),
+        )
+      end
+
       def has_unread_user_threads?
         has_css?(
           ".sidebar-section-link[data-link-name='user-threads'] .sidebar-section-link-suffix.icon.unread",

plugins/chat/spec/system/user_threads_spec.rb

@@ -17,10 +17,27 @@ RSpec.describe "User threads", type: :system do
   end
 
   context "when in sidebar" do
-    it "shows a link to user threads" do
-      visit("/")
+    context "when user is a member of at least one channel with threads" do
+      before { channel_1.add(current_user) }
 
-      expect(sidebar_page).to have_user_threads_section
+      it "shows a link to user threads" do
+        visit("/")
+
+        expect(sidebar_page).to have_user_threads_section
+      end
+    end
+
+    context "when user is not a member of any channel with threads" do
+      before do
+        channel_1.update!(threading_enabled: false)
+        channel_1.add(current_user)
+      end
+
+      it "does not show a link to user threads" do
+        visit("/")
+
+        expect(sidebar_page).to have_no_user_threads_section
+      end
     end
 
     context "when user has unreads" do
@@ -100,11 +117,29 @@ RSpec.describe "User threads", type: :system do
   end
 
   context "when in drawer" do
-    it "shows a link to user threads" do
-      visit("/")
-      chat_page.open_from_header
+    context "when user is a member of at least one channel with threads" do
+      before { channel_1.add(current_user) }
 
-      expect(drawer_page).to have_user_threads_section
+      it "shows a link to user threads" do
+        visit("/")
+        chat_page.open_from_header
+
+        expect(drawer_page).to have_user_threads_section
+      end
+    end
+
+    context "when user is not a member of any channel with threads" do
+      before do
+        channel_1.update!(threading_enabled: false)
+        channel_1.add(current_user)
+      end
+
+      it "does not show a link to user threads" do
+        visit("/")
+        chat_page.open_from_header
+
+        expect(drawer_page).to have_no_user_threads_section
+      end
     end
 
     context "when user has unreads" do