From 88ede43ec5b5dbd75dfe7a5b56fb3d8e06b77757 Mon Sep 17 00:00:00 2001
From: Joffrey JAFFEUX <j.jaffeux@gmail.com>
Date: Fri, 11 Nov 2022 22:32:06 +0100
Subject: [PATCH] FIX: correctly highlights active channel (#18991)

Prior to this change, only hovering the row would highlight it.
---
 .../discourse/components/topic-chat-float.js  |  1 +
 .../discourse/initializers/chat-sidebar.js    | 31 ++++++++++---
 .../stylesheets/sidebar-extensions.scss       |  4 ++
 plugins/chat/spec/system/navigation_spec.rb   | 45 +++++++++++++++++++
 4 files changed, 75 insertions(+), 6 deletions(-)

diff --git a/plugins/chat/assets/javascripts/discourse/components/topic-chat-float.js b/plugins/chat/assets/javascripts/discourse/components/topic-chat-float.js
index 414df2c98b9..d13ccf1eef7 100644
--- a/plugins/chat/assets/javascripts/discourse/components/topic-chat-float.js
+++ b/plugins/chat/assets/javascripts/discourse/components/topic-chat-float.js
@@ -253,6 +253,7 @@ export default Component.extend({
   close() {
     this.set("hidden", true);
     this.set("expanded", false);
+    this.chat.setActiveChannel(null);
     this.appEvents.trigger("chat:float-toggled", this.hidden);
   },
 
diff --git a/plugins/chat/assets/javascripts/discourse/initializers/chat-sidebar.js b/plugins/chat/assets/javascripts/discourse/initializers/chat-sidebar.js
index 32a002eeb0e..37790294a78 100644
--- a/plugins/chat/assets/javascripts/discourse/initializers/chat-sidebar.js
+++ b/plugins/chat/assets/javascripts/discourse/initializers/chat-sidebar.js
@@ -10,6 +10,7 @@ import { emojiUnescape } from "discourse/lib/text";
 import { decorateUsername } from "discourse/helpers/decorate-username-selector";
 import { until } from "discourse/lib/formatter";
 import { inject as service } from "@ember/service";
+import { computed } from "@ember/object";
 
 export default {
   name: "chat-sidebar",
@@ -60,10 +61,19 @@ export default {
               return dasherize(slugifyChannel(this.channel));
             }
 
+            @computed("chatService.activeChannel")
             get classNames() {
-              return this.channel.current_user_membership.muted
-                ? "sidebar-section-link--muted"
-                : "";
+              const classes = [];
+
+              if (this.channel.current_user_membership.muted) {
+                classes.push("sidebar-section-link--muted");
+              }
+
+              if (this.channel.id === this.chatService.activeChannel?.id) {
+                classes.push("sidebar-section-link--active");
+              }
+
+              return classes.join(" ");
             }
 
             get route() {
@@ -239,10 +249,19 @@ export default {
               return slugifyChannel(this.channel);
             }
 
+            @computed("chatService.activeChannel")
             get classNames() {
-              return this.channel.current_user_membership.muted
-                ? "sidebar-section-link--muted"
-                : "";
+              const classes = [];
+
+              if (this.channel.current_user_membership.muted) {
+                classes.push("sidebar-section-link--muted");
+              }
+
+              if (this.channel.id === this.chatService.activeChannel?.id) {
+                classes.push("sidebar-section-link--active");
+              }
+
+              return classes.join(" ");
             }
 
             get route() {
diff --git a/plugins/chat/assets/stylesheets/sidebar-extensions.scss b/plugins/chat/assets/stylesheets/sidebar-extensions.scss
index 74d8b9210d1..ea504c0f18e 100644
--- a/plugins/chat/assets/stylesheets/sidebar-extensions.scss
+++ b/plugins/chat/assets/stylesheets/sidebar-extensions.scss
@@ -162,6 +162,10 @@
     }
   }
 
+  .sidebar-section-link--active {
+    background: var(--primary-low);
+  }
+
   .sidebar-section-link--muted {
     opacity: 0.5;
 
diff --git a/plugins/chat/spec/system/navigation_spec.rb b/plugins/chat/spec/system/navigation_spec.rb
index 27818332e88..59f239cac6f 100644
--- a/plugins/chat/spec/system/navigation_spec.rb
+++ b/plugins/chat/spec/system/navigation_spec.rb
@@ -216,5 +216,50 @@ RSpec.describe "Navigation", type: :system, js: true do
         expect(page).to have_content(category_channel_2.title)
       end
     end
+
+    context "when opening a channel in full page" do
+      it "activates the channel in the sidebar" do
+        visit("/chat/channel/#{category_channel.id}/#{category_channel.slug}")
+        expect(page).to have_css(
+          ".sidebar-section-link-#{category_channel.slug}.sidebar-section-link--active",
+        )
+      end
+    end
+
+    context "when clicking logo from a channel in full page" do
+      it "deactivates the channel in the sidebar" do
+        visit("/chat/channel/#{category_channel.id}/#{category_channel.slug}")
+        find("#site-logo").click
+
+        expect(page).not_to have_css(
+          ".sidebar-section-link-#{category_channel.slug}.sidebar-section-link--active",
+        )
+      end
+    end
+
+    context "when opening a channel in drawer" do
+      it "activates the channel in the sidebar" do
+        visit("/")
+        chat_page.open_from_header
+        find("a[title='#{category_channel.title}']").click
+
+        expect(page).to have_css(
+          ".sidebar-section-link-#{category_channel.slug}.sidebar-section-link--active",
+        )
+      end
+    end
+
+    context "when closing drawer in a channel" do
+      it "deactivates the channel in the sidebar" do
+        visit("/")
+        chat_page.open_from_header
+        find("a[title='#{category_channel.title}']").click
+        chat_drawer_page.close
+
+        expect(page).not_to have_css(
+          ".sidebar-section-link-#{category_channel.slug}.sidebar-section-link--active",
+        )
+      end
+    end
   end
 end