Improve broadcast message style and align with style-guide

app/assets/javascripts/broadcast_notification.js

@@ -13,9 +13,7 @@ const handleOnDismiss = ({ currentTarget }) => {
 };
 
 export default () => {
-  const dismissButton = document.querySelector('.js-dismiss-current-broadcast-notification');
-
-  if (dismissButton) {
-    dismissButton.addEventListener('click', handleOnDismiss);
-  }
+  document
+    .querySelectorAll('.js-dismiss-current-broadcast-notification')
+    .forEach(dismissButton => dismissButton.addEventListener('click', handleOnDismiss));
 };

app/assets/stylesheets/framework/broadcast_messages.scss

@@ -42,6 +42,7 @@
   }
 
   .broadcast-message-dismiss {
+    height: 100%;
     color: $gray-800;
   }
 }

app/views/shared/_broadcast_message.html.haml

 %div{ class: "broadcast-#{message.broadcast_type}-message #{opts[:preview] && 'preview'} js-broadcast-notification-#{message.id} d-flex",
   style: broadcast_message_style(message), dir: 'auto' }
-  %div
+  .flex-grow-1.text-right.pr-2
     = sprite_icon('bullhorn', size: 16, css_class: 'vertical-align-text-top')
+  %div{ class: !fluid_layout && 'container-limited' }
     = render_broadcast_message(message)
-  - if (message.notification? || message.dismissable?) && opts[:preview].blank?
-    %button.broadcast-message-dismiss.js-dismiss-current-broadcast-notification.btn.btn-link.pl-2.pr-2{ 'aria-label' => _('Close'), :type => 'button', data: { id: message.id } }
-      %i.fa.fa-times
+  .flex-grow-1.text-right{ style: 'flex-basis: 0' }
+    - if (message.notification? || message.dismissable?) && opts[:preview].blank?
+      %button.broadcast-message-dismiss.js-dismiss-current-broadcast-notification.btn.btn-link.pl-2.pr-2{ 'aria-label' => _('Close'), :type => 'button', data: { id: message.id } }
+        %i.fa.fa-times

spec/features/admin/admin_broadcast_messages_spec.rb

@@ -18,7 +18,6 @@ describe 'Admin Broadcast Messages' do
     fill_in 'broadcast_message_color', with: '#f2dede'
     fill_in 'broadcast_message_target_path', with: '*/user_onboarded'
     fill_in 'broadcast_message_font', with: '#b94a48'
-    check 'broadcast_message_dismissable'
     select Date.today.next_year.year, from: 'broadcast_message_ends_at_1i'
     click_button 'Add broadcast message'
 
@@ -27,7 +26,6 @@ describe 'Admin Broadcast Messages' do
     expect(page).to have_content '*/user_onboarded'
     expect(page).to have_selector 'strong', text: '4:00 CST to 5:00 CST'
     expect(page).to have_selector %(div[style="background-color: #f2dede; color: #b94a48"])
-    expect(page).to have_selector 'a', text: 'Dismiss'
   end
 
   it 'creates a customized broadcast notification message' do

spec/features/broadcast_messages_spec.rb

@@ -6,7 +6,7 @@ describe 'Broadcast Messages' do
   shared_examples 'a Broadcast Messages' do
     it 'shows broadcast message' do
       visit root_path
-  
+
       expect(page).to have_content 'SampleMessage'
     end
   end
@@ -14,18 +14,18 @@ describe 'Broadcast Messages' do
   shared_examples 'a dismissable Broadcast Messages' do
     it 'hides broadcast message after dismiss', :js do
       visit root_path
-  
+
       find('.js-dismiss-current-broadcast-notification').click
-  
+
       expect(page).not_to have_content 'SampleMessage'
     end
-  
+
     it 'broadcast message is still hidden after refresh', :js do
       visit root_path
-  
+
       find('.js-dismiss-current-broadcast-notification').click
       visit root_path
-  
+
       expect(page).not_to have_content 'SampleMessage'
     end
   end

spec/helpers/broadcast_messages_helper_spec.rb

@@ -29,6 +29,10 @@ describe BroadcastMessagesHelper do
   describe 'broadcast_message' do
     let(:current_broadcast_message) { BroadcastMessage.new(message: 'Current Message') }
 
+    before do
+      allow(helper).to receive(:current_user).and_return(create(:user))
+    end
+
     it 'returns nil when no current message' do
       expect(helper.broadcast_message(nil)).to be_nil
     end

spec/requests/api/broadcast_messages_spec.rb

@@ -117,7 +117,7 @@ describe API::BroadcastMessages do
 
         post api('/broadcast_messages', admin), params: attrs
 
-        expect(response).to have_gitlab_http_status(201)
+        expect(response).to have_gitlab_http_status(:created)
         expect(json_response['dismissable']).to eq true
       end
     end
@@ -202,7 +202,7 @@ describe API::BroadcastMessages do
 
         put api("/broadcast_messages/#{message.id}", admin), params: attrs
 
-        expect(response).to have_gitlab_http_status(200)
+        expect(response).to have_gitlab_http_status(:ok)
         expect(json_response['dismissable']).to eq true
       end
     end