make greeting notifications global

Auditors: @bscfliton
fix #11256

app/common/state/notificationBarState.js

@@ -0,0 +1,85 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this file,
+ * You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+const assert = require('assert')
+const Immutable = require('immutable')
+const {getOrigin} = require('../../../js/lib/urlutil')
+const {makeImmutable, isMap} = require('./immutableUtil')
+const {getActiveFrame} = require('../../../js/state/frameStateUtil')
+
+const api = {
+  validateState: function (state) {
+    state = makeImmutable(state)
+    assert.ok(isMap(state), 'state must be an Immutable.Map')
+    return state
+  },
+
+  /**
+   * Gets an immutable list of notifications
+   * @param {Map} appState - The app state object
+   * @return {List} - immutable list of notifications
+   */
+  getNotifications: (state) => {
+    state = api.validateState(state)
+    return state.get('notifications', Immutable.List())
+  },
+
+  /**
+   * Checks if the active frame origin match the current notification origin
+   * @param {Map} appState - The app state object
+   * @return {Boolean} - whether or not the active notification
+   * origin match the current frame origin
+   */
+  isNotificationSameOrigin: (state, item) => {
+    state = api.validateState(state)
+    const activeFrame = getActiveFrame(state.get('currentWindow')) || Immutable.Map()
+
+    if (!item.has('frameOrigin')) {
+      return false
+    }
+    return getOrigin(activeFrame.get('location')) === item.get('frameOrigin')
+  }
+}
+
+const notificationBarState = {
+  /**
+   * Gets the notifications that should be visible in the active tab
+   * @param {Map} appState - The app state object
+   * @return {List} - list of the current active tab's notification
+   */
+  getActiveTabNotifications: (state) => {
+    const notifications = api.getNotifications(state)
+    return notifications.filter(item => api.isNotificationSameOrigin(state, item))
+  },
+
+  /**
+   * Checks whether or not the notification should be shown in a per-tab basis
+   * @param {Map} appState - The app state object
+   * @param {Boolean} - whether or not the notification should be shown per tab
+   */
+  isPerTab: (state) => {
+    return !notificationBarState.getActiveTabNotifications(state).isEmpty()
+  },
+
+  /**
+   * Get an immutable list of global notifications
+   * @param {Map} appState - The app state object
+   * @return {List} - list of all global notifications
+   */
+  getGlobalNotifications: (state) => {
+    const notifications = api.getNotifications(state)
+    return notifications.filter(item => item.has('greeting'))
+  },
+
+  /**
+   * Get an immutable list of global notifications
+   * @param {Map} appState - The app state object
+   * @param {Boolean} - whether or not the notification should be shown in as global
+   */
+  isGlobal: (state) => {
+    return !notificationBarState.getGlobalNotifications(state).isEmpty()
+  }
+}
+
+module.exports = notificationBarState

app/renderer/components/main/main.js

@@ -23,7 +23,7 @@ const TabPages = require('../tabs/tabPages')
 const TabsToolbar = require('../tabs/tabsToolbar')
 const FindBar = require('./findbar')
 const UpdateBar = require('./updateBar')
-const {NotificationBar} = require('./notificationBar')
+const {NotificationBar, BraveNotificationBar} = require('./notificationBar')
 const DownloadsBar = require('../download/downloadsBar')
 const SiteInfo = require('./siteInfo')
 const BraveryPanel = require('./braveryPanel')
@@ -683,6 +683,9 @@ class Main extends React.Component {
             ? <CheckDefaultBrowserDialog />
             : null
         }
+        {
+          <BraveNotificationBar />
+        }
         {
           this.props.showUpdate
           ? <UpdateBar />

app/renderer/components/main/notificationBar.js

@@ -13,6 +13,7 @@ const NotificationItem = require('./notificationItem')
 // Utils
 const {getOrigin} = require('../../../../js/lib/urlutil')
 const frameStateUtil = require('../../../../js/state/frameStateUtil')
+const notificationBarState = require('../../../common/state/notificationBarState')
 
 // Styles
 const commonStyles = require('../styles/commonStyles')
@@ -26,19 +27,24 @@ class NotificationBar extends React.Component {
     const notifications = state.get('notifications', Immutable.List())
 
     const props = {}
+    // TODO: Make use of getActiveTabNotifications API instead
     props.activeNotifications = notifications
       .filter((item) => {
         return item.get('frameOrigin')
           ? activeOrigin === item.get('frameOrigin')
-          : true
+          : !item.get('greeting') // greetings indicate a global notification
       })
       .takeLast(3)
       .map((notification) => notification.get('message'))
 
+    props.isPerTab = notificationBarState.isPerTab(state)
     return props
   }
 
   render () {
+    if (!this.props.isPerTab) {
+      return null
+    }
     return <div className={css(commonStyles.notificationBar)} data-test-id='notificationBar'>
       {
         this.props.activeNotifications.map((message) =>
@@ -49,6 +55,32 @@ class NotificationBar extends React.Component {
   }
 }
 
+// TODO maybe this should be merged in <NotificationBar /> and defined
+// per conditional prop such as isGlobal={conditional}
+class BraveNotificationBar extends React.Component {
+  mergeProps (state, ownProps) {
+    const props = {}
+    props.notifications = notificationBarState.getGlobalNotifications(state)
+    props.isGlobal = notificationBarState.isGlobal(state)
+    return props
+  }
+
+  render () {
+    if (!this.props.isGlobal) {
+      return null
+    }
+    return (
+      <div className={css(commonStyles.notificationBar)} data-test-id='braveNotificationBar'>
+        {
+          this.props.notifications.map((notification) =>
+            <NotificationItem message={notification.get('message')} />
+          )
+        }
+      </div>
+    )
+  }
+}
+
 class NotificationBarCaret extends React.Component {
   render () {
     return <div className={css(styles.caretWrapper)}>
@@ -86,5 +118,6 @@ const styles = StyleSheet.create({
 
 module.exports = {
   NotificationBar: ReduxComponent.connect(NotificationBar),
+  BraveNotificationBar: ReduxComponent.connect(BraveNotificationBar),
   NotificationBarCaret
 }