From d446ad32901fcaaf875e5f122a2ecdb6ee7c29de Mon Sep 17 00:00:00 2001
From: Alan Guo Xiang Tan <gxtan1990@gmail.com>
Date: Thu, 3 Nov 2022 07:37:39 +0800
Subject: [PATCH] UX: Muted style for entire chat section link when muted
 (#18852)

---
 .../app/components/sidebar/user/sections.hbs  |  1 +
 .../base-custom-sidebar-section-link.js       |  7 ++++++
 .../acceptance/sidebar-plugin-api-test.js     |  9 +++++++
 .../discourse/initializers/chat-sidebar.js    | 24 +++++++++----------
 .../stylesheets/sidebar-extensions.scss       |  4 ++--
 .../acceptance/core-sidebar-test.js           |  8 +++----
 6 files changed, 35 insertions(+), 18 deletions(-)

diff --git a/app/assets/javascripts/discourse/app/components/sidebar/user/sections.hbs b/app/assets/javascripts/discourse/app/components/sidebar/user/sections.hbs
index f3a01651bd6..0a47f551497 100644
--- a/app/assets/javascripts/discourse/app/components/sidebar/user/sections.hbs
+++ b/app/assets/javascripts/discourse/app/components/sidebar/user/sections.hbs
@@ -24,6 +24,7 @@
       {{#each customSection.links as |link|}}
         <Sidebar::SectionLink
           @linkName={{link.name}}
+          @class={{link.classNames}}
           @route={{link.route}}
           @model={{link.model}}
           @models={{link.models}}
diff --git a/app/assets/javascripts/discourse/app/lib/sidebar/base-custom-sidebar-section-link.js b/app/assets/javascripts/discourse/app/lib/sidebar/base-custom-sidebar-section-link.js
index 5de827a5516..750c83fcd5d 100644
--- a/app/assets/javascripts/discourse/app/lib/sidebar/base-custom-sidebar-section-link.js
+++ b/app/assets/javascripts/discourse/app/lib/sidebar/base-custom-sidebar-section-link.js
@@ -9,6 +9,13 @@ export default class BaseCustomSidebarSectionLink {
     this._notImplemented();
   }
 
+  /**
+   * @returns {string} The classnames of the section link.
+   */
+  get classNames() {
+    return "";
+  }
+
   /**
    * @returns {string} The Ember route which the section link should link to.
    */
diff --git a/app/assets/javascripts/discourse/tests/acceptance/sidebar-plugin-api-test.js b/app/assets/javascripts/discourse/tests/acceptance/sidebar-plugin-api-test.js
index 553e4daaea3..c6c79373a4e 100644
--- a/app/assets/javascripts/discourse/tests/acceptance/sidebar-plugin-api-test.js
+++ b/app/assets/javascripts/discourse/tests/acceptance/sidebar-plugin-api-test.js
@@ -69,6 +69,10 @@ acceptance("Sidebar - Plugin API", function (needs) {
                     return "random-channel";
                   }
 
+                  get classNames() {
+                    return "my-class-name";
+                  }
+
                   get route() {
                     return "topic";
                   }
@@ -243,6 +247,11 @@ acceptance("Sidebar - Plugin API", function (needs) {
       "displays first link with correct text"
     );
 
+    assert.ok(
+      exists(".sidebar-section-link.my-class-name"),
+      "sets the custom class name for the section link"
+    );
+
     assert.strictEqual(
       links[0].title,
       "random channel title",
diff --git a/plugins/chat/assets/javascripts/discourse/initializers/chat-sidebar.js b/plugins/chat/assets/javascripts/discourse/initializers/chat-sidebar.js
index 0bdae015b27..a523b2cea6b 100644
--- a/plugins/chat/assets/javascripts/discourse/initializers/chat-sidebar.js
+++ b/plugins/chat/assets/javascripts/discourse/initializers/chat-sidebar.js
@@ -61,6 +61,12 @@ export default {
               return dasherize(slugifyChannel(this.title));
             }
 
+            get classNames() {
+              return this.channel.current_user_membership.muted
+                ? "sidebar-section-link--muted"
+                : "";
+            }
+
             get route() {
               return "chat.channel";
             }
@@ -108,12 +114,6 @@ export default {
                 ? "urgent"
                 : "unread";
             }
-
-            get contentCSSClass() {
-              return this.channel.current_user_membership.muted
-                ? "sidebar-section-link-content-muted"
-                : "";
-            }
           };
 
           const SidebarChatChannelsSection = class extends BaseCustomSidebarSection {
@@ -243,6 +243,12 @@ export default {
               return slugifyChannel(this.title);
             }
 
+            get classNames() {
+              return this.channel.current_user_membership.muted
+                ? "sidebar-section-link--muted"
+                : "";
+            }
+
             get route() {
               return "chat.channel";
             }
@@ -307,12 +313,6 @@ export default {
               return "";
             }
 
-            get contentCSSClass() {
-              return this.channel.current_user_membership.muted
-                ? "sidebar-section-link-content-muted"
-                : "";
-            }
-
             get suffixType() {
               return "icon";
             }
diff --git a/plugins/chat/assets/stylesheets/sidebar-extensions.scss b/plugins/chat/assets/stylesheets/sidebar-extensions.scss
index a3826778884..990ec6a1389 100644
--- a/plugins/chat/assets/stylesheets/sidebar-extensions.scss
+++ b/plugins/chat/assets/stylesheets/sidebar-extensions.scss
@@ -162,7 +162,7 @@
     }
   }
 
-  .sidebar-section-link-content-muted {
-    opacity: 0.65;
+  .sidebar-section-link--muted {
+    opacity: 0.3;
   }
 }
diff --git a/plugins/chat/test/javascripts/acceptance/core-sidebar-test.js b/plugins/chat/test/javascripts/acceptance/core-sidebar-test.js
index 1107f967cd8..0af71d60502 100644
--- a/plugins/chat/test/javascripts/acceptance/core-sidebar-test.js
+++ b/plugins/chat/test/javascripts/acceptance/core-sidebar-test.js
@@ -310,9 +310,9 @@ acceptance("Discourse Chat - Core Sidebar", function (needs) {
 
     assert.ok(
       exists(
-        ".sidebar-section-chat-dms .sidebar-section-link-sam .sidebar-section-link-content-muted"
+        ".sidebar-section-chat-dms .sidebar-section-link-sam.sidebar-section-link--muted"
       ),
-      "muted direct chat channel has right CSS class configured"
+      "muted direct chat channel section link has right classname configured"
     );
   });
 
@@ -321,9 +321,9 @@ acceptance("Discourse Chat - Core Sidebar", function (needs) {
 
     assert.ok(
       exists(
-        ".sidebar-section-chat-channels .sidebar-section-link-random .sidebar-section-link-content-muted"
+        ".sidebar-section-chat-channels .sidebar-section-link-random.sidebar-section-link--muted"
       ),
-      "muted random chat channel has right CSS class configured"
+      "muted random chat channel section link has right classname configured"
     );
   });