Chore: Allow notifications to persist (#605)

src/lib/Notification.js

@@ -43,9 +43,10 @@ class Notification {
      * @public
      * @param {string} message - Notification message
      * @param {string} [buttonText] - Optional text to show in button
+     * @param {boolean} persist - Should the notification show until dismissal or respect the timeout
      * @return {void}
      */
-    show(message, buttonText) {
+    show(message, buttonText, persist = false) {
         this.messageEl.textContent = message;
 
         if (buttonText) {
@@ -58,7 +59,7 @@ class Notification {
         this.notificationEl.focus();
 
         // Hide notification automatically after a delay
-        this.timeout = setTimeout(this.hide.bind(this), HIDE_TIMEOUT_MS);
+        this.timeout = persist ? null : setTimeout(this.hide.bind(this), HIDE_TIMEOUT_MS);
     }
 
     /**

src/lib/__tests__/Notification-test.js

@@ -1,7 +1,10 @@
 /* eslint-disable no-unused-expressions */
 import Notification from '../Notification';
 
+const HIDE_TIMEOUT_MS = 5000; // 5s
+
 let notif;
+let clock;
 
 const sandbox = sinon.sandbox.create();
 
@@ -41,6 +44,12 @@ describe('lib/Notification', () => {
     describe('show()', () => {
         beforeEach(() => {
             sandbox.stub(window, 'setTimeout');
+            sandbox.stub(notif, 'hide');
+            clock = sinon.useFakeTimers();
+        });
+
+        afterEach(() => {
+            clock.restore();
         });
 
         it('should properly show the notification', () => {
@@ -61,6 +70,18 @@ describe('lib/Notification', () => {
             assert.equal(notif.messageEl.textContent, 'test');
             assert.equal(notif.buttonEl.textContent, __('notification_button_default_text'));
         });
+
+        it('should hide after the timeout', () => {
+            notif.show('test', 'test');
+            clock.tick(HIDE_TIMEOUT_MS + 1);
+            expect(notif.hide).to.be.called;
+        });
+
+        it('should not hide after the timeout if the notification is set to persist', () => {
+            notif.show('test', 'test', true);
+            clock.tick(HIDE_TIMEOUT_MS + 1);
+            expect(notif.hide).to.not.be.called;
+        });
     });
 
     describe('hide()', () => {

src/lib/_common.scss

@@ -161,6 +161,10 @@ $header-height: 48px;
     visibility: hidden;
 }
 
+.bp-notifications-wrapper {
+    position: absolute; // Override _boxui.scss because Preview cannot assume taking up the full viewport
+}
+
 .bp-has-header .bp-notifications-wrapper {
     top: 48px;
 }