feat(popup): add popup modal for important messages

scss/opensphere.scss

@@ -24,6 +24,7 @@
 @import 'os/dragdrop';
 @import 'os/duration';
 @import 'os/electron';
+@import 'os/sitemessage';
 @import 'os/formatter';
 @import 'os/glyph';
 @import 'os/iconpicker';

scss/os/_consent.scss

@@ -1,12 +1,4 @@
-// This is a rare exception to use +2 +3. We want the consent modal to always be above anything including alerts
-// (see alertpopup.scss)
-//
-// However we want alerts to be above normal modals and windows. Because of that change, this change was needed
 .c-consent {
-  .modal-backdrop.show {
-    z-index: $zindex-tooltip + 2;
-  }
-
   .modal.c-consent__modal.show {
     z-index: $zindex-tooltip + 3;
   }

scss/os/_sitemessage.scss

@@ -0,0 +1,5 @@
+.c-sitemessage {
+  .modal.c-sitemessage__modal.show {
+    z-index: $zindex-tooltip + 2;
+  }
+}

src/os/ui/abstractmainctrl.js

@@ -29,6 +29,7 @@ import EventType from './help/helpeventtype.js';
 import MetricsManager from './metrics/metricsmanager.js';
 import NotificationManager from './notification/notificationmanager.js';
 import OnboardingManager from './onboarding/onboardingmanager.js';
+import * as SiteMessageUI from './sitemessage/sitemessageui.js';
 import {apply, injector, setInjector} from './ui.js';
 
 import * as ConfirmUI from './window/confirm.js';
@@ -255,6 +256,7 @@ export default class Controller {
     // initialize variable replacers for time values in URI's
     replacers.init();
 
+    SiteMessageUI.launch();
     ConsentUI.launch();
 
     this.doCertNazi();

src/os/ui/help/helpeventtype.js

@@ -9,6 +9,7 @@ const EventType = {
   CONTROLS: 'controlsHelp',
   HELP: 'help',
   HELP_VIDEO: 'help_video',
+  SHOW_SITE_MESSAGE: 'showSiteMessage',
   SHOW_TIPS: 'showTips',
   VIDEO_CARD: 'videoCard',
   VIEW_ALERTS: 'viewAlerts',

src/os/ui/help/helpui.js

@@ -9,6 +9,8 @@ import MenuItemType from '../menu/menuitemtype.js';
 import {launchAboutModal} from '../modal/aboutmodal.js';
 import Module from '../module.js';
 import OnboardingManager from '../onboarding/onboardingmanager.js';
+import * as SiteMessageUI from '../sitemessage/sitemessageui.js';
+import {getSiteMessage} from '../sitemessage/sitemessageutils.js';
 import * as ResetSettings from '../util/resetsettings.js';
 import Controls from './controls.js';
 import {launchControlsHelp} from './controlsui.js';
@@ -121,6 +123,18 @@ export class Controller extends MenuButtonCtrl {
     });
     this.menu.listen(EventType.ABOUT, this.onHelpAction_, false, this);
 
+    var siteMessage = getSiteMessage();
+    if (siteMessage) {
+      root.addChild({
+        eventType: EventType.SHOW_SITE_MESSAGE,
+        label: siteMessage.getTitle(),
+        tooltip: 'Display information about ' + siteMessage.getTitle(),
+        icons: ['<i class="fa fa-fw fa-info-circle"></i>'],
+        sort: 105
+      });
+      this.menu.listen(EventType.SHOW_SITE_MESSAGE, this.onHelpAction_, false, this);
+    }
+
     // If there are controls set, display them
     if (!isEmpty(Controls.getInstance().getControls())) {
       root.addChild({
@@ -219,6 +233,9 @@ export class Controller extends MenuButtonCtrl {
       case EventType.CONTROLS:
         launchControlsHelp();
         break;
+      case EventType.SHOW_SITE_MESSAGE:
+        SiteMessageUI.launch(true);
+        break;
       default:
         break;
     }

src/os/ui/sitemessage/reminderschedule.js

@@ -0,0 +1,109 @@
+/**
+ * How often the popup appears
+ * @enum {string}
+ */
+export const ReminderFrequency = {
+  MONTHLY: 'MONTHLY',
+  WEEKLY: 'WEEKLY',
+  DAILY: 'DAILY'
+};
+
+/**
+ * Represents a siteMessage.reminder config object
+ *
+ */
+export default class ReminderSchedule {
+  /**
+   * Constructor.
+   * @param {!Date} startDate - when this reminder schedule goes into effect
+   * @param {?ReminderFrequency} frequency - the interval for this reminder
+   * @param {?number} day - (optional) The specific day to show the reminder
+   */
+  constructor(startDate, frequency = null, day = null) {
+    /**
+     * @type {!Date}
+     * @private
+     */
+    this.startDate_ = startDate;
+
+    /**
+     * @type {?ReminderFrequency}
+     * @private
+     */
+    this.frequency_ = frequency;
+
+    /**
+     * @type {?number}
+     * @private
+     */
+    this.day_ = null;
+    const parsedDay = parseInt(day, 10);
+    if (!isNaN(parsedDay)) {
+      this.day_ = parsedDay;
+    }
+  }
+
+  /**
+   * Parse a site message from data
+   * @param {*} data - the data to parse
+   * @return {?ReminderSchedule}
+   * @export
+   */
+  static parse(data) {
+    if (!data || typeof data != 'object' || !data['startDate']) {
+      return null;
+    }
+
+    const startDate = new Date(data['startDate']);
+    if (isNaN(startDate)) {
+      return null;
+    }
+
+    let frequency;
+    if (data['frequency'] && typeof data['frequency'] == 'string') {
+      frequency = data['frequency'].toUpperCase();
+      // Property names optimized out -- ReminderFrequency['val'] doesn't work
+      if (!Object.values(ReminderFrequency).includes(data['frequency'].trim().toUpperCase())) {
+        return null;
+      }
+    }
+
+    let day;
+    if (data['day']) {
+      day = parseInt(data['day'], 10);
+      if (isNaN(day)) {
+        return null;
+      }
+    }
+
+    return new ReminderSchedule(startDate, frequency, day);
+  }
+
+  /**
+   * Return the startDate
+   * @return {!Date}
+   * @export
+   */
+  getStartDate() {
+    return this.startDate_;
+  }
+
+  /**
+   * Return the frequency
+   * @return {?ReminderFrequency}
+   * @export
+   */
+  getFrequency() {
+    return this.frequency_;
+  }
+
+  /**
+   * Return the specific day to show the reminder
+   * @return {?number}
+   * @export
+   */
+  getDay() {
+    return this.day_;
+  }
+}
+

src/os/ui/sitemessage/sitemessage.js

@@ -0,0 +1,96 @@
+import ReminderSchedule from './reminderschedule.js';
+
+/**
+ * Represents the siteMessage config value
+ *
+ */
+export default class SiteMessage {
+  /**
+   * Constructor.
+   * @param {string} id - unique id for a given site message
+   * @param {string} title - the title of the message
+   * @param {string} text - the body of the message
+   * @param {Array<ReminderSchedule>} reminders - (optional) the reminder schedule for the message
+   */
+  constructor(id, title, text, reminders = null) {
+    /**
+     * @type {!string}
+     * @private
+     */
+    this.id_ = id;
+
+    /**
+     * @type {!string}
+     * @private
+     */
+    this.title_ = title;
+
+    /**
+     * @type {!string}
+     * @private
+     */
+    this.text_ = text;
+
+    /**
+     * @type {?Array<ReminderSchedule>}
+     * @private
+     */
+    this.reminders_ = reminders;
+  }
+
+  /**
+   * Parse a site message from data
+   * @param {*} data - the data to parse
+   * @return {?SiteMessage}
+   * @export
+   */
+  static parse(data) {
+    if (data && typeof data == 'object' && data['id'] && data['title'] && data['text']) {
+      let reminders = null;
+      if (data['reminders'] && Array.isArray(data['reminders'])) {
+        const parsedReminders = data['reminders']
+            .map(ReminderSchedule.parse)
+            .filter((reminder) => reminder != null);
+        reminders = parsedReminders.length > 0 ? parsedReminders : null;
+      }
+      return new SiteMessage(data['id'], data['title'], data['text'], reminders);
+    }
+    return null;
+  }
+
+  /**
+   * Return the id
+   * @return {!string}
+   * @export
+   */
+  getId() {
+    return this.id_;
+  }
+
+  /**
+   * Return the title
+   * @return {!string}
+   * @export
+   */
+  getTitle() {
+    return this.title_;
+  }
+
+  /**
+   * Return the text
+   * @return {!string}
+   * @export
+   */
+  getText() {
+    return this.text_;
+  }
+
+  /**
+   * Return the reminder schedule
+   * @return {Array<ReminderSchedule>}
+   * @export
+   */
+  getReminders() {
+    return this.reminders_;
+  }
+}