Merge branch 'nicolasdular/hide-broadcast-notification-until-end-date' into 'master'

Hide broadcast messages till end of period

See merge request gitlab-org/gitlab!30432

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),
+    });
+  });
+});