Merge branch...

Merge branch '474513-broadcast-notifications-affects-the-broadcast-message-height-style-property' into 'master' 

Make sure broadcast notifications do not affect broadcast message height

See merge request https://gitlab.com/gitlab-org/gitlab/-/merge_requests/160787



Merged-by: Eduardo Sanz García <esanz-garcia@gitlab.com>
Approved-by: Eduardo Sanz García <esanz-garcia@gitlab.com>
Reviewed-by: Eduardo Sanz García <esanz-garcia@gitlab.com>
Co-authored-by: Chad Lavimoniere <clavimoniere@gitlab.com>

app/assets/javascripts/broadcast_notification.js

@@ -11,7 +11,7 @@ const dismissUserBroadcastMessage = (id, expireDate, dismissalPath) => {
 };
 
 const setBroadcastMessageHeightOffset = () => {
-  const broadcastMessages = [...document.querySelectorAll('.gl-broadcast-message')];
+  const broadcastMessages = [...document.querySelectorAll('[data-broadcast-banner]')];
   const broadcastMessageHeight = broadcastMessages.reduce(
     (acc, banner) => acc + banner.getBoundingClientRect().height,
     0,

app/components/pajamas/broadcast_banner_component.html.haml

 .gl-broadcast-message.broadcast-banner-message.banner{ role: 'alert',
-  class: "js-broadcast-notification-#{@id} #{@theme}", data: { testid: 'banner-broadcast-message' } }
+  class: "js-broadcast-notification-#{@id} #{@theme}", data: { testid: 'banner-broadcast-message', 'broadcast-banner': @banner } }
   .gl-broadcast-message-content
     .gl-broadcast-message-icon
       = sprite_icon('bullhorn')

app/components/pajamas/broadcast_banner_component.rb

@@ -12,7 +12,7 @@ class BroadcastBannerComponent < Pajamas::Component
     # @param [String] button_testid
     def initialize(
       message:, id:, theme:, dismissable:, expire_date:, cookie_key:, dismissal_path: nil,
-      button_testid: nil)
+      button_testid: nil, banner: nil)
       @message = message
       @id = id
       @theme = theme
@@ -21,6 +21,7 @@ def initialize(
       @cookie_key = cookie_key
       @dismissal_path = dismissal_path
       @button_testid = button_testid
+      @banner = banner
     end
 
     delegate :sprite_icon, to: :helpers

app/views/shared/_broadcast_message.html.haml

@@ -8,4 +8,4 @@
     = render Pajamas::BroadcastBannerComponent.new(message: content, id: message.id, theme: nil, dismissable: true, expire_date: expire_date, cookie_key: cookie_key, dismissal_path: dismissal_path, button_testid: 'close-button')
 
 - else
-  = render Pajamas::BroadcastBannerComponent.new(message: content, id: message.id, theme: message.theme, dismissable: message.dismissable?, expire_date: expire_date, cookie_key: cookie_key, dismissal_path: dismissal_path)
+  = render Pajamas::BroadcastBannerComponent.new(message: content, id: message.id, theme: message.theme, dismissable: message.dismissable?, expire_date: expire_date, cookie_key: cookie_key, dismissal_path: dismissal_path, banner: true)

spec/components/pajamas/broadcast_banner_component_spec.rb

@@ -11,7 +11,8 @@
       expire_date: expire_date,
       cookie_key: cookie_key,
       dismissal_path: dismissal_path,
-      button_testid: button_testid
+      button_testid: button_testid,
+      banner: banner
     )
   end
 
@@ -23,6 +24,7 @@
   let(:cookie_key) { '_cookie_key_' }
   let(:dismissal_path) { '/-/my-path' }
   let(:button_testid) { 'my-close-button' }
+  let(:banner) { true }
 
   it 'sets the correct classes' do
     expect(page).to have_selector(".js-broadcast-notification-#{id}")
@@ -66,4 +68,8 @@
   it 'sets the button testid' do
     expect(page).to have_selector("button[data-testid='#{button_testid}']")
   end
+
+  it 'adds data-broadcast-banner when banner is true' do
+    expect(page).to have_selector("[data-broadcast-banner]")
+  end
 end

spec/frontend/broadcast_notification_spec.js

@@ -113,10 +113,10 @@ describe('broadcast message on dismiss', () => {
 describe('setBroadcastMessageHeightOffset', () => {
   beforeEach(() => {
     setHTMLFixture(`
-        <div class="gl-broadcast-message">
+        <div data-broadcast-banner class="gl-broadcast-message">
           Here is a broadcast message
         </div>
-        <div class="gl-broadcast-message">
+        <div data-broadcast-banner class="gl-broadcast-message">
           Here is another broadcast message
         </div>
       `);