Hide broadcast messages till end of period

We're using cookies to hide broadcast messages, but didn't set an
expire date. This MR fixes this by adding an expire to the cookie
to the ends_at date of the broadcast message (which must be set).

app/assets/javascripts/broadcast_notification.js

@@ -3,10 +3,10 @@ import Cookies from 'js-cookie';
 const handleOnDismiss = ({ currentTarget }) => {
   currentTarget.removeEventListener('click', handleOnDismiss);
   const {
-    dataset: { id },
+    dataset: { id, expireDate },
   } = currentTarget;
 
-  Cookies.set(`hide_broadcast_message_${id}`, true);
+  Cookies.set(`hide_broadcast_message_${id}`, true, { expires: new Date(expireDate) });
 
   const notification = document.querySelector(`.js-broadcast-notification-${id}`);
   notification.parentNode.removeChild(notification);

app/views/shared/_broadcast_message.html.haml

@@ -6,5 +6,5 @@
     = render_broadcast_message(message)
   .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 } }
+      %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, expire_date: message.ends_at.iso8601 } }
         %i.fa.fa-times

changelogs/unreleased/nicolasdular-hide-broadcast-notification-until-end-date.yml

+---
+title: Hide broadcast messages until the end of the period
+merge_request: 30432
+author:
+type: changed

spec/frontend/broadcast_notification_spec.js

+import Cookies from 'js-cookie';
+import initBroadcastNotifications from '~/broadcast_notification';
+
+describe('broadcast message on dismiss', () => {
+  const dismiss = () => {
+    const button = document.querySelector('.js-dismiss-current-broadcast-notification');
+    button.click();
+  };
+  const endsAt = '2020-01-01T00:00:00Z';
+
+  beforeEach(() => {
+    setFixtures(`
+    <div class="js-broadcast-notification-1">
+      <button class="js-dismiss-current-broadcast-notification" data-id="1" data-expire-date="${endsAt}"></button>
+    </div>
+    `);
+
+    initBroadcastNotifications();
+  });
+
+  it('removes broadcast message', () => {
+    dismiss();
+
+    expect(document.querySelector('.js-broadcast-notification-1')).toBeNull();
+  });
+
+  it('calls Cookies.set', () => {
+    jest.spyOn(Cookies, 'set');
+    dismiss();
+
+    expect(Cookies.set).toHaveBeenCalledWith('hide_broadcast_message_1', true, {
+      expires: new Date(endsAt),
+    });
+  });
+});