Add ability to dismiss notification messages

Users are capable of hiding notification messages forever because
these messages can overlap on content.

app/assets/javascripts/broadcast_notification.js

+import Cookies from 'js-cookie';
+
+const handleOnDismiss = ({ currentTarget }) => {
+  currentTarget.removeEventListener('click', handleOnDismiss);
+  const {
+    dataset: { id },
+  } = currentTarget;
+
+  Cookies.set(`hide_broadcast_notification_message_${id}`, true);
+
+  const notification = document.querySelector(`.js-broadcast-notification-${id}`);
+  notification.parentNode.removeChild(notification);
+};
+
+export default () => {
+  const dismissButton = document.querySelector('.js-dismiss-current-broadcast-notification');
+
+  if (dismissButton) {
+    dismissButton.addEventListener('click', handleOnDismiss);
+  }
+};

app/assets/javascripts/main.js

@@ -35,6 +35,7 @@ import initPerformanceBar from './performance_bar';
 import initSearchAutocomplete from './search_autocomplete';
 import GlFieldErrors from './gl_field_errors';
 import initUserPopovers from './user_popovers';
+import initBroadcastNotifications from './broadcast_notification';
 import { initUserTracking } from './tracking';
 import { __ } from './locale';
 
@@ -105,6 +106,7 @@ function deferredInitialisation() {
   initUsagePingConsent();
   initUserPopovers();
   initUserTracking();
+  initBroadcastNotifications();
 
   if (document.querySelector('.search')) initSearchAutocomplete();
 

app/helpers/broadcast_messages_helper.rb

@@ -6,13 +6,16 @@ module BroadcastMessagesHelper
   end
 
   def current_broadcast_notification_message
-    BroadcastMessage.current_notification_messages(request.path).last
+    not_hidden_messages = BroadcastMessage.current_notification_messages(request.path).select do |message|
+      cookies["hide_broadcast_notification_message_#{message.id}"].blank?
+    end
+    not_hidden_messages.last
   end
 
   def broadcast_message(message, opts = {})
     return unless message.present?
 
-    render 'shared/broadcast_message', { message: message, opts: opts }
+    render "shared/broadcast_message", { message: message, opts: opts }
   end
 
   def broadcast_message_style(broadcast_message)

app/views/shared/_broadcast_message.html.haml

-- classes = "broadcast-#{message.broadcast_type}-message #{opts[:preview] && 'preview'}"
-
-%div{classs: classes, style: broadcast_message_style(message), dir: 'auto'}
-  = sprite_icon('bullhorn', size: 16, css_class: 'vertical-align-text-top')
-  = ' '
-  = render_broadcast_message(message)
+%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
+    = sprite_icon('bullhorn', size: 16, css_class: 'vertical-align-text-top')
+    = render_broadcast_message(message)
+  - if message.notification? && opts[:preview].blank?
+    %button.js-dismiss-current-broadcast-notification.btn.btn-link.text-dark.pl-2.pr-2{ 'aria-label' => _('Close'), :type => 'button', data: { id: message.id } }
+      %i.fa.fa-times

spec/features/broadcast_messages_spec.rb

+# frozen_string_literal: true
+
+require 'spec_helper'
+
+describe 'Broadcast Messages' do
+  let!(:broadcast_message) { create(:broadcast_message, broadcast_type: 'notification', message: 'SampleMessage') }
+
+  it 'shows broadcast message' do
+    visit root_path
+
+    expect(page).to have_content 'SampleMessage'
+  end
+
+  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

@@ -3,6 +3,29 @@
 require 'spec_helper'
 
 describe BroadcastMessagesHelper do
+  describe 'current_broadcast_notification_message' do
+    subject { helper.current_broadcast_notification_message }
+
+    context 'with available broadcast notification messages' do
+      let!(:broadcast_message_1) { create(:broadcast_message, broadcast_type: 'notification', starts_at: Time.now - 1.day) }
+      let!(:broadcast_message_2) { create(:broadcast_message, broadcast_type: 'notification', starts_at: Time.now) }
+
+      it { is_expected.to eq broadcast_message_2 }
+
+      context 'when last broadcast message is hidden' do
+        before do
+          helper.request.cookies["hide_broadcast_notification_message_#{broadcast_message_2.id}"] = 'true'
+        end
+
+        it { is_expected.to eq broadcast_message_1 }
+      end
+    end
+
+    context 'without broadcast notification messages' do
+      it { is_expected.to be_nil }
+    end
+  end
+
   describe 'broadcast_message' do
     let(:current_broadcast_message) { BroadcastMessage.new(message: 'Current Message') }