From 478c4b1a7469ab05de4d70c4cc003a8c97299ee0 Mon Sep 17 00:00:00 2001
From: Joffrey JAFFEUX <j.jaffeux@gmail.com>
Date: Thu, 6 Jul 2023 01:33:39 +0200
Subject: [PATCH] DEV: prevents message actions to hide drawer's header
 (#22448)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

In specific conditions (generally a small drawer, with a long message) it is possible to have the message’s actions menu to be displayed hover the drawer's header.

This is particularly hard to fix correctly using popper due to our positioning which is slightly at the limit of the container.

The proposed fix targets mostly the specs by ensuring the messages actions will be hidden before attempting to click any header's button.
---
 .../stylesheets/desktop/chat-message-actions.scss  |  4 ++--
 plugins/chat/spec/system/drawer_spec.rb            |  2 +-
 .../system/page_objects/chat_drawer/chat_drawer.rb | 14 ++++++++++++++
 3 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/plugins/chat/assets/stylesheets/desktop/chat-message-actions.scss b/plugins/chat/assets/stylesheets/desktop/chat-message-actions.scss
index 3d015632e7c..64b2a7382de 100644
--- a/plugins/chat/assets/stylesheets/desktop/chat-message-actions.scss
+++ b/plugins/chat/assets/stylesheets/desktop/chat-message-actions.scss
@@ -1,5 +1,5 @@
-.chat-message-actions[data-popper-reference-hidden],
-.chat-message-actions[data-popper-escaped] {
+.chat-message-actions-container[data-popper-reference-hidden],
+.chat-message-actions-container[data-popper-escaped] {
   visibility: hidden;
   pointer-events: none;
 }
diff --git a/plugins/chat/spec/system/drawer_spec.rb b/plugins/chat/spec/system/drawer_spec.rb
index 9a099f3d23c..82ae5aa0542 100644
--- a/plugins/chat/spec/system/drawer_spec.rb
+++ b/plugins/chat/spec/system/drawer_spec.rb
@@ -80,7 +80,7 @@ RSpec.describe "Drawer", type: :system do
       drawer.open_channel(channel_1)
       channel_page.hover_message(message_1)
 
-      expect(page).to have_css(".chat-message-actions-container")
+      expect(page).to have_css(".chat-message-actions-container", visible: :all)
 
       drawer.close
 
diff --git a/plugins/chat/spec/system/page_objects/chat_drawer/chat_drawer.rb b/plugins/chat/spec/system/page_objects/chat_drawer/chat_drawer.rb
index 5366ec7a694..925e4e711ee 100644
--- a/plugins/chat/spec/system/page_objects/chat_drawer/chat_drawer.rb
+++ b/plugins/chat/spec/system/page_objects/chat_drawer/chat_drawer.rb
@@ -5,14 +5,17 @@ module PageObjects
     class ChatDrawer < PageObjects::Pages::Base
       VISIBLE_DRAWER = ".chat-drawer.is-expanded"
       def open_browse
+        mouseout
         find("#{VISIBLE_DRAWER} .open-browse-page-btn").click
       end
 
       def close
+        mouseout
         find("#{VISIBLE_DRAWER} .chat-drawer-header__close-btn").click
       end
 
       def back
+        mouseout
         find("#{VISIBLE_DRAWER} .chat-drawer-header__back-btn").click
       end
 
@@ -24,6 +27,7 @@ module PageObjects
       end
 
       def maximize
+        mouseout
         find("#{VISIBLE_DRAWER} .chat-drawer-header__full-screen-btn").click
       end
 
@@ -62,6 +66,16 @@ module PageObjects
       def has_no_unread_thread_indicator?
         has_no_css?("#{thread_list_button_selector}.has-unreads")
       end
+
+      private
+
+      def mouseout
+        # Ensure that the mouse is not hovering over the drawer
+        # and that the message actions menu is closed.
+        # This check is essential because the message actions menu might partially
+        # overlap with the header, making certain buttons inaccessible.
+        find("#site-logo").hover
+      end
     end
   end
 end