Handle one specific permissions request per tab (#7620)

The connect route now takes a route parameter: the permissions request
id. This id is set whenever the permissions connect screen is opened,
ensuring that that tab is for that specific request alone.

This makes handling of multiple permissions requests a bit more
intuitive. Previously whenever opening multiple permissions requests,
the first one would be shown on each successive tab, whereas you
would expect each tab to show the request that prompted the tab to
open. Users may now address permissions request in whichever order
they'd like to, rather than being forced to deal with them
chronologically.

app/scripts/controllers/permissions/index.js

@@ -368,7 +368,7 @@ class PermissionsController {
       requestUserApproval: async (req) => {
         const { metadata: { id } } = req
 
-        this._platform.openExtensionInBrowser('connect')
+        this._platform.openExtensionInBrowser(`connect/${id}`)
 
         return new Promise((resolve, reject) => {
           this.pendingApprovals[id] = { resolve, reject }

ui/app/pages/home/home.component.js

@@ -42,18 +42,18 @@ export default class Home extends PureComponent {
     setShowRestorePromptToFalse: PropTypes.func,
     threeBoxLastUpdated: PropTypes.number,
     hasDaiV1Token: PropTypes.bool,
-    hasPermissionRequests: PropTypes.bool,
+    firstPermissionsRequestId: PropTypes.string,
   }
 
   componentWillMount () {
     const {
       history,
       unconfirmedTransactionsCount = 0,
-      hasPermissionRequests,
+      firstPermissionsRequestId,
     } = this.props
 
-    if (hasPermissionRequests) {
-      history.push(CONNECT_ROUTE)
+    if (firstPermissionsRequestId) {
+      history.push(`${CONNECT_ROUTE}/${firstPermissionsRequestId}`)
     }
 
     if (unconfirmedTransactionsCount > 0) {

ui/app/pages/home/home.container.js

@@ -3,7 +3,7 @@ import { compose } from 'recompose'
 import { connect } from 'react-redux'
 import { withRouter } from 'react-router-dom'
 import { unconfirmedTransactionsCountSelector } from '../../selectors/confirm-transaction'
-import { getCurrentEthBalance, getDaiV1Token, hasPermissionRequests } from '../../selectors/selectors'
+import { getCurrentEthBalance, getDaiV1Token, getFirstPermissionRequest } from '../../selectors/selectors'
 import {
   restoreFromThreeBox,
   turnThreeBoxSyncingOn,
@@ -28,6 +28,10 @@ const mapStateToProps = state => {
   const { forgottenPassword, threeBoxLastUpdated } = appState
 
   const isPopup = getEnvironmentType(window.location.href) === ENVIRONMENT_TYPE_POPUP
+  const firstPermissionsRequest = getFirstPermissionRequest(state)
+  const firstPermissionsRequestId = (firstPermissionsRequest && firstPermissionsRequest.metadata)
+    ? firstPermissionsRequest.metadata.id
+    : null
 
   return {
     forgottenPassword,
@@ -41,7 +45,7 @@ const mapStateToProps = state => {
     selectedAddress,
     threeBoxLastUpdated,
     hasDaiV1Token: Boolean(getDaiV1Token(state)),
-    hasPermissionRequests: hasPermissionRequests(state),
+    firstPermissionsRequestId,
   }
 }
 

ui/app/pages/permissions-connect/permissions-connect.component.js

@@ -68,10 +68,10 @@ export default class PermissionConnect extends Component {
   }
 
   componentDidUpdate (prevProps) {
-    const { domains, permissionsRequestId } = this.props
+    const { domains, permissionsRequest } = this.props
     const { originName, page } = this.state
 
-    if (!permissionsRequestId && prevProps.permissionsRequestId && page !== null) {
+    if (!permissionsRequest && prevProps.permissionsRequest && page !== null) {
       const permissionDataForDomain = domains && domains[originName] || {}
       const permissionsForDomain = permissionDataForDomain.permissions || []
       const prevPermissionDataForDomain = prevProps.domains && prevProps.domains[originName] || {}
@@ -82,12 +82,6 @@ export default class PermissionConnect extends Component {
       } else {
         this.redirectFlow(false)
       }
-    } else if (permissionsRequestId && prevProps.permissionsRequestId &&
-      permissionsRequestId !== prevProps.permissionsRequestId && page !== null) {
-      this.setState({
-        originName: this.props.originName,
-        page: 1,
-      })
     }
   }
 
@@ -130,10 +124,16 @@ export default class PermissionConnect extends Component {
     const {
       getCurrentWindowTab,
       getRequestAccountTabIds,
+      permissionsRequest,
+      history,
     } = this.props
     getCurrentWindowTab()
     getRequestAccountTabIds()
 
+    if (!permissionsRequest) {
+      return history.push(DEFAULT_ROUTE)
+    }
+
     if (getEnvironmentType(window.location.href) === ENVIRONMENT_TYPE_FULLSCREEN) {
       window.addEventListener('beforeunload', this.beforeUnload)
     }

ui/app/pages/permissions-connect/permissions-connect.container.js

@@ -1,9 +1,9 @@
 import { connect } from 'react-redux'
 import { compose } from 'recompose'
-import { withRouter } from 'react-router-dom'
+import PropTypes from 'prop-types'
 import PermissionApproval from './permissions-connect.component'
 import {
-  getFirstPermissionRequest,
+  getPermissionsRequests,
   getNativeCurrency,
   getAccountsWithLabels,
   getLastConnectedInfo,
@@ -12,8 +12,13 @@ import {
 import { formatDate } from '../../helpers/utils/util'
 import { approvePermissionsRequest, rejectPermissionsRequest, showModal, getCurrentWindowTab, getRequestAccountTabIds } from '../../store/actions'
 
-const mapStateToProps = state => {
-  const permissionsRequest = getFirstPermissionRequest(state)
+const mapStateToProps = (state, ownProps) => {
+  const { match: { params: { id: permissionsRequestId } } } = ownProps
+  const permissionsRequests = getPermissionsRequests(state)
+
+  const permissionsRequest = permissionsRequests
+    .find(permissionsRequest => permissionsRequest.metadata.id === permissionsRequestId)
+
   const { metadata = {} } = permissionsRequest || {}
   const { origin } = metadata
   const nativeCurrency = getNativeCurrency(state)
@@ -29,8 +34,6 @@ const mapStateToProps = state => {
     addressLastConnectedMap[key] = formatDate(addressLastConnectedMap[key], 'yyyy-M-d')
   })
 
-  const permissionsRequestId = (permissionsRequest && permissionsRequest.metadata) ? permissionsRequest.metadata.id : null
-
   return {
     permissionsRequest,
     permissionsRequestId,
@@ -60,7 +63,17 @@ const mapDispatchToProps = dispatch => {
   }
 }
 
-export default compose(
-  withRouter,
+const PermissionApprovalContainer = compose(
   connect(mapStateToProps, mapDispatchToProps)
 )(PermissionApproval)
+
+PermissionApprovalContainer.propTypes = {
+  history: PropTypes.object.isRequired,
+  match: PropTypes.shape({
+    params: PropTypes.shape({
+      id: PropTypes.string,
+    }).isRequired,
+  }).isRequired,
+}
+
+export default PermissionApprovalContainer

ui/app/pages/routes/index.js

@@ -139,7 +139,7 @@ class Routes extends Component {
         <Authenticated path={CONFIRM_ADD_TOKEN_ROUTE} component={ConfirmAddTokenPage} exact />
         <Authenticated path={CONFIRM_ADD_SUGGESTED_TOKEN_ROUTE} component={ConfirmAddSuggestedTokenPage} exact />
         <Authenticated path={NEW_ACCOUNT_ROUTE} component={CreateAccountPage} />
-        <Authenticated path={CONNECT_ROUTE} component={PermissionsConnect} exact />
+        <Authenticated path={`${CONNECT_ROUTE}/:id`} component={PermissionsConnect} exact />
         <Authenticated path={CONNECTED_ROUTE} component={ConnectedSites} exact />
         <Authenticated path={DEFAULT_ROUTE} component={Home} exact />
       </Switch>