From 720cf24659ef7d9adf1c1be9dc71efbc9cb7db62 Mon Sep 17 00:00:00 2001
From: Joffrey JAFFEUX <j.jaffeux@gmail.com>
Date: Fri, 7 Apr 2023 20:29:33 +0200
Subject: [PATCH] FIX: shows a message as hovered when hovering actions
 (#21026)

When hovering the chat message actions we are technically not hovering the message anymore, which was removing the background and is slightly unexpected. This commit ensures we keep this background until closing the message actions.
---
 .../discourse/components/chat-message.hbs     |  1 +
 .../stylesheets/common/chat-message.scss      |  2 ++
 .../stylesheets/desktop/base-desktop.scss     | 20 --------------
 plugins/chat/spec/system/chat_message_spec.rb | 26 +++++++++++++++++++
 4 files changed, 29 insertions(+), 20 deletions(-)
 create mode 100644 plugins/chat/spec/system/chat_message_spec.rb

diff --git a/plugins/chat/assets/javascripts/discourse/components/chat-message.hbs b/plugins/chat/assets/javascripts/discourse/components/chat-message.hbs
index 636b572a6da..38354c79690 100644
--- a/plugins/chat/assets/javascripts/discourse/components/chat-message.hbs
+++ b/plugins/chat/assets/javascripts/discourse/components/chat-message.hbs
@@ -64,6 +64,7 @@
           (if this.hideUserInfo "user-info-hidden")
           (if @message.error "errored")
           (if @message.bookmark "chat-message-bookmarked")
+          (if (eq @message.id this.chat.activeMessage.model.id) "is-active")
         }}
       >
         {{#unless this.hideReplyToInfo}}
diff --git a/plugins/chat/assets/stylesheets/common/chat-message.scss b/plugins/chat/assets/stylesheets/common/chat-message.scss
index 45cd25ac9dd..2b8505747d3 100644
--- a/plugins/chat/assets/stylesheets/common/chat-message.scss
+++ b/plugins/chat/assets/stylesheets/common/chat-message.scss
@@ -207,6 +207,7 @@
     }
 
     .no-touch & {
+      &.is-active,
       &:hover,
       &:active {
         background: var(--primary-very-low);
@@ -219,6 +220,7 @@
       }
 
       &.chat-message-bookmarked {
+        &.is-active,
         &:hover {
           background: var(--highlight-medium);
         }
diff --git a/plugins/chat/assets/stylesheets/desktop/base-desktop.scss b/plugins/chat/assets/stylesheets/desktop/base-desktop.scss
index 3214e03ceb9..3eb8d02902b 100644
--- a/plugins/chat/assets/stylesheets/desktop/base-desktop.scss
+++ b/plugins/chat/assets/stylesheets/desktop/base-desktop.scss
@@ -90,16 +90,6 @@
     .chat-live-pane {
       border-radius: unset;
     }
-
-    .chat-live-pane,
-    .chat-messages-scroll,
-    .chat-message:not(.highlighted):not(.deleted):not(.chat-message-bookmarked) {
-      background-color: transparent;
-    }
-
-    .chat-message:not(.highlighted):not(.deleted):not(.chat-message-bookmarked):hover {
-      background-color: var(--primary-very-low);
-    }
   }
 
   @media screen and (max-width: var(--max-chat-width)) {
@@ -126,18 +116,8 @@
       border-radius: 0;
     }
 
-    .chat-live-pane,
-    .chat-messages-scroll,
-    .chat-message:not(.highlighted):not(.deleted):not(.chat-message-bookmarked) {
-      background: transparent;
-    }
-
     .chat-message {
       padding-left: 1em;
-
-      &:hover {
-        background-color: var(--primary-very-low);
-      }
     }
 
     .chat-messages-container .chat-message-deleted {
diff --git a/plugins/chat/spec/system/chat_message_spec.rb b/plugins/chat/spec/system/chat_message_spec.rb
new file mode 100644
index 00000000000..c8cbf2dedcd
--- /dev/null
+++ b/plugins/chat/spec/system/chat_message_spec.rb
@@ -0,0 +1,26 @@
+# frozen_string_literal: true
+
+RSpec.describe "Chat message", type: :system, js: true do
+  fab!(:current_user) { Fabricate(:user) }
+  fab!(:channel_1) { Fabricate(:chat_channel) }
+  fab!(:message_1) { Fabricate(:chat_message, chat_channel: channel_1) }
+
+  let(:chat) { PageObjects::Pages::Chat.new }
+  let(:channel) { PageObjects::Pages::ChatChannel.new }
+
+  before { chat_system_bootstrap }
+
+  context "when hovering a message" do
+    before do
+      channel_1.add(current_user)
+      sign_in(current_user)
+    end
+
+    it "adds an active class" do
+      chat.visit_channel(channel_1)
+      channel.hover_message(message_1)
+
+      expect(page).to have_css("[data-id='#{message_1.id}'] .chat-message.is-active")
+    end
+  end
+end