New notification fixes (#6955)

* Replace use of backup-notification with use of home notification

* Pin notifications relative to window

* Remove unneeded isRequired condition on some home.component properties

* Refactor rendering of home notifications

* UX for multiple notifications

* Adds dismissal to provider request notification.

* Fix test failures

The e2e tests have been updated to reference `home-notification`
classnames instead of the removed `background-notification`. The
active tab proptypes and default values were updated as well.

1 files changed, 27 insertions, 4 deletions

diff --git a/app/scripts/controllers/provider-approval.js b/app/scripts/controllers/provider-approval.js
index 00ec0aea1..5d565c385 100644
--- a/app/scripts/controllers/provider-approval.js
+++ b/app/scripts/controllers/provider-approval.js
@@ -24,6 +24,7 @@ class ProviderApprovalController extends SafeEventEmitter {
     this.preferencesController = preferencesController
     this.store = new ObservableStore({
       approvedOrigins: {},
+      dismissedOrigins: {},
       providerRequests: [],
     })
   }
@@ -66,7 +67,9 @@ class ProviderApprovalController extends SafeEventEmitter {
   _handleProviderRequest (origin, siteTitle, siteImage) {
     this.store.updateState({ providerRequests: [{ origin, siteTitle, siteImage }] })
     const isUnlocked = this.keyringController.memStore.getState().isUnlocked
-    if (this.store.getState().approvedOrigins[origin] && this.caching && isUnlocked) {
+    const { approvedOrigins, dismissedOrigins } = this.store.getState()
+    const originAlreadyHandled = approvedOrigins[origin] || dismissedOrigins[origin]
+    if (originAlreadyHandled && this.caching && isUnlocked) {
       return
     }
     this.openPopup && this.openPopup()
@@ -82,13 +85,21 @@ class ProviderApprovalController extends SafeEventEmitter {
       this.closePopup()
     }
 
-    const { approvedOrigins, providerRequests } = this.store.getState()
+    const { approvedOrigins, dismissedOrigins, providerRequests } = this.store.getState()
+
+    let _dismissedOrigins = dismissedOrigins
+    if (dismissedOrigins[origin]) {
+      _dismissedOrigins = Object.assign({}, dismissedOrigins)
+      delete _dismissedOrigins[origin]
+    }
+
     const remainingProviderRequests = providerRequests.filter(request => request.origin !== origin)
     this.store.updateState({
       approvedOrigins: {
         ...approvedOrigins,
         [origin]: true,
       },
+      dismissedOrigins: _dismissedOrigins,
       providerRequests: remainingProviderRequests,
     })
     this.emit(`resolvedRequest:${origin}`, { approved: true })
@@ -104,7 +115,7 @@ class ProviderApprovalController extends SafeEventEmitter {
       this.closePopup()
     }
 
-    const { approvedOrigins, providerRequests } = this.store.getState()
+    const { approvedOrigins, providerRequests, dismissedOrigins } = this.store.getState()
     const remainingProviderRequests = providerRequests.filter(request => request.origin !== origin)
 
     // We're cloning and deleting keys here because we don't want to keep unneeded keys
@@ -114,6 +125,10 @@ class ProviderApprovalController extends SafeEventEmitter {
     this.store.putState({
       approvedOrigins: _approvedOrigins,
       providerRequests: remainingProviderRequests,
+      dismissedOrigins: {
+        ...dismissedOrigins,
+        [origin]: true,
+      },
     })
     this.emit(`resolvedRequest:${origin}`, { approved: false })
   }
@@ -124,13 +139,21 @@ class ProviderApprovalController extends SafeEventEmitter {
    * @param {string} origin - origin of the domain that had provider access approved
    */
   forceApproveProviderRequestByOrigin (origin) {
-    const { approvedOrigins, providerRequests } = this.store.getState()
+    const { approvedOrigins, dismissedOrigins, providerRequests } = this.store.getState()
     const remainingProviderRequests = providerRequests.filter(request => request.origin !== origin)
+
+    let _dismissedOrigins = dismissedOrigins
+    if (dismissedOrigins[origin]) {
+      _dismissedOrigins = Object.assign({}, dismissedOrigins)
+      delete _dismissedOrigins[origin]
+    }
+
     this.store.updateState({
       approvedOrigins: {
         ...approvedOrigins,
         [origin]: true,
       },
+      dismissedOrigins: _dismissedOrigins,
       providerRequests: remainingProviderRequests,
     })