Add networks settings routes

ui/app/helpers/constants/routes.js

@@ -9,6 +9,7 @@ const SECURITY_ROUTE = '/settings/security'
 const ABOUT_US_ROUTE = '/settings/about-us'
 const ALERTS_ROUTE = '/settings/alerts'
 const NETWORKS_ROUTE = '/settings/networks'
+const NETWORKS_FORM_ROUTE = '/settings/networks/form'
 const CONTACT_LIST_ROUTE = '/settings/contact-list'
 const CONTACT_EDIT_ROUTE = '/settings/contact-list/edit-contact'
 const CONTACT_ADD_ROUTE = '/settings/contact-list/add-contact'
@@ -75,6 +76,7 @@ const PATH_NAME_MAP = {
   [ABOUT_US_ROUTE]: 'About Us Page',
   [ALERTS_ROUTE]: 'Alerts Settings Page',
   [NETWORKS_ROUTE]: 'Network Settings Page',
+  [NETWORKS_FORM_ROUTE]: 'Network Settings Page Form',
   [CONTACT_LIST_ROUTE]: 'Contact List Settings Page',
   [`${CONTACT_EDIT_ROUTE}/:address`]: 'Edit Contact Settings Page',
   [CONTACT_ADD_ROUTE]: 'Add Contact Settings Page',
@@ -172,6 +174,7 @@ export {
   CONTACT_MY_ACCOUNTS_VIEW_ROUTE,
   CONTACT_MY_ACCOUNTS_EDIT_ROUTE,
   NETWORKS_ROUTE,
+  NETWORKS_FORM_ROUTE,
   INITIALIZE_BACKUP_SEED_PHRASE_ROUTE,
   CONNECT_ROUTE,
   CONNECT_CONFIRM_PERMISSIONS_ROUTE,

ui/app/pages/settings/networks-tab/network-form/network-form.component.js

@@ -68,7 +68,7 @@ export default class NetworkForm extends PureComponent {
   }
 
   componentWillUnmount () {
-    this.props.onClear()
+    this.props.onClear(false)
     this.setState({
       rpcUrl: '',
       chainId: '',

ui/app/pages/settings/networks-tab/networks-tab.component.js

@@ -1,13 +1,12 @@
 import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
 import classnames from 'classnames'
-import {
-  ENVIRONMENT_TYPE_FULLSCREEN,
-  ENVIRONMENT_TYPE_POPUP,
-} from '../../../../../app/scripts/lib/enums'
-import { getEnvironmentType } from '../../../../../app/scripts/lib/util'
 import Button from '../../../components/ui/button'
 import LockIcon from '../../../components/ui/lock-icon'
+import {
+  NETWORKS_ROUTE,
+  NETWORKS_FORM_ROUTE,
+} from '../../../helpers/constants/routes'
 import NetworkDropdownIcon from '../../../components/app/dropdowns/components/network-dropdown-icon'
 import NetworkForm from './network-form'
 
@@ -31,11 +30,9 @@ export default class NetworksTab extends PureComponent {
     providerUrl: PropTypes.string,
     providerType: PropTypes.string,
     networkDefaultedToProvider: PropTypes.bool,
-  }
-
-  state = {
-    isFullScreen: getEnvironmentType() === ENVIRONMENT_TYPE_FULLSCREEN,
-    isPopup: getEnvironmentType() === ENVIRONMENT_TYPE_POPUP,
+    history: PropTypes.object.isRequired,
+    shouldRenderNetworkForm: PropTypes.bool.isRequired,
+    isFullScreen: PropTypes.bool.isRequired,
   }
 
   componentWillUnmount () {
@@ -79,6 +76,8 @@ export default class NetworksTab extends PureComponent {
       providerUrl,
       providerType,
       networksTabIsInAddMode,
+      history,
+      isFullScreen,
     } = this.props
     const {
       border,
@@ -99,9 +98,10 @@ export default class NetworksTab extends PureComponent {
       <div
         key={`settings-network-list-item:${rpcUrl}`}
         className="networks-tab__networks-list-item"
-        onClick={ () => {
+        onClick={() => {
           setNetworksTabAddMode(false)
           setSelectedSettingsRpcUrl(rpcUrl)
+          !isFullScreen && history.push(NETWORKS_FORM_ROUTE)
         }}
       >
         <NetworkDropdownIcon
@@ -160,7 +160,7 @@ export default class NetworksTab extends PureComponent {
     )
   }
 
-  renderNetworksTabContent (isPopup) {
+  renderNetworksTabContent () {
     const { t } = this.context
     const {
       setRpcTarget,
@@ -179,13 +179,12 @@ export default class NetworksTab extends PureComponent {
       },
       networksTabIsInAddMode,
       editRpc,
-      networkDefaultedToProvider,
       providerUrl,
       networksToRender,
+      history,
+      isFullScreen,
+      shouldRenderNetworkForm,
     } = this.props
-    const { isFullScreen } = this.state
-
-    const shouldRenderNetworkForm = networksTabIsInAddMode || !isPopup || (isPopup && !networkDefaultedToProvider)
 
     return (
       <>
@@ -201,9 +200,12 @@ export default class NetworksTab extends PureComponent {
                 rpcUrl={rpcUrl}
                 chainId={chainId}
                 ticker={ticker}
-                onClear={() => {
+                onClear={(shouldUpdateHistory = true) => {
                   setNetworksTabAddMode(false)
                   setSelectedSettingsRpcUrl('')
+                  if (shouldUpdateHistory && !isFullScreen) {
+                    history.push(NETWORKS_ROUTE)
+                  }
                 }}
                 showConfirmDeleteNetworkModal={showConfirmDeleteNetworkModal}
                 viewOnly={viewOnly}
@@ -221,14 +223,20 @@ export default class NetworksTab extends PureComponent {
   }
 
   render () {
-    const { setNetworksTabAddMode, setSelectedSettingsRpcUrl, networkIsSelected, networksTabIsInAddMode } = this.props
-    const { isFullScreen, isPopup } = this.state
+    const {
+      setNetworksTabAddMode,
+      setSelectedSettingsRpcUrl,
+      networkIsSelected,
+      networksTabIsInAddMode,
+      history,
+      isFullScreen,
+    } = this.props
 
     return (
       <div className="networks-tab__body">
         {isFullScreen && this.renderSubHeader()}
         <div className="networks-tab__content">
-          {this.renderNetworksTabContent(isPopup)}
+          {this.renderNetworksTabContent()}
           {!networkIsSelected && !networksTabIsInAddMode
             ? (
               <div className="networks-tab__add-network-button-wrapper">
@@ -238,6 +246,7 @@ export default class NetworksTab extends PureComponent {
                     event.preventDefault()
                     setSelectedSettingsRpcUrl('')
                     setNetworksTabAddMode(true)
+                    history.push(NETWORKS_FORM_ROUTE)
                   }}
                 >
                   { this.context.t('addNetwork') }

ui/app/pages/settings/networks-tab/networks-tab.container.js

@@ -9,12 +9,23 @@ import {
   editRpc,
   showModal,
 } from '../../../store/actions'
+import { NETWORKS_FORM_ROUTE } from '../../../helpers/constants/routes'
+import { ENVIRONMENT_TYPE_FULLSCREEN } from '../../../../../app/scripts/lib/enums'
+import { getEnvironmentType } from '../../../../../app/scripts/lib/util'
 import NetworksTab from './networks-tab.component'
 import { defaultNetworksData } from './networks-tab.constants'
 
 const defaultNetworks = defaultNetworksData.map((network) => ({ ...network, viewOnly: true }))
 
-const mapStateToProps = (state) => {
+const mapStateToProps = (state, ownProps) => {
+  const { location: { pathname } } = ownProps
+
+  const environmentType = getEnvironmentType()
+  const isFullScreen = environmentType === ENVIRONMENT_TYPE_FULLSCREEN
+  const shouldRenderNetworkForm = (
+    isFullScreen || Boolean(pathname.match(NETWORKS_FORM_ROUTE))
+  )
+
   const {
     frequentRpcListDetail,
     provider,
@@ -56,6 +67,8 @@ const mapStateToProps = (state) => {
     providerType: provider.type,
     providerUrl: provider.rpcUrl,
     networkDefaultedToProvider,
+    isFullScreen,
+    shouldRenderNetworkForm,
   }
 }
 

ui/app/pages/settings/settings.component.js

@@ -11,6 +11,7 @@ import {
   ABOUT_US_ROUTE,
   SETTINGS_ROUTE,
   NETWORKS_ROUTE,
+  NETWORKS_FORM_ROUTE,
   CONTACT_LIST_ROUTE,
   CONTACT_ADD_ROUTE,
   CONTACT_EDIT_ROUTE,
@@ -204,6 +205,11 @@ class SettingsPage extends PureComponent {
           path={NETWORKS_ROUTE}
           component={NetworksTab}
         />
+        <Route
+          exact
+          path={NETWORKS_FORM_ROUTE}
+          component={NetworksTab}
+        />
         <Route
           exact
           path={SECURITY_ROUTE}

ui/app/pages/settings/settings.container.js

@@ -19,6 +19,7 @@ import {
   CONTACT_MY_ACCOUNTS_VIEW_ROUTE,
   CONTACT_VIEW_ROUTE,
   GENERAL_ROUTE,
+  NETWORKS_FORM_ROUTE,
   NETWORKS_ROUTE,
   SECURITY_ROUTE,
   SETTINGS_ROUTE,
@@ -36,6 +37,7 @@ const ROUTES_TO_I18N_KEYS = {
   [CONTACT_MY_ACCOUNTS_ROUTE]: 'myAccounts',
   [CONTACT_VIEW_ROUTE]: 'viewContact',
   [NETWORKS_ROUTE]: 'networks',
+  [NETWORKS_FORM_ROUTE]: 'networks',
   [SECURITY_ROUTE]: 'securityAndPrivacy',
 }
 
@@ -49,6 +51,7 @@ const mapStateToProps = (state, ownProps) => {
   const isAddContactPage = Boolean(pathname.match(CONTACT_ADD_ROUTE))
   const isEditContactPage = Boolean(pathname.match(CONTACT_EDIT_ROUTE))
   const isEditMyAccountsContactPage = Boolean(pathname.match(CONTACT_MY_ACCOUNTS_EDIT_ROUTE))
+  const isNetworksFormPage = Boolean(pathname.match(NETWORKS_FORM_ROUTE))
 
   const isPopupView = getEnvironmentType() === ENVIRONMENT_TYPE_POPUP
   const pathnameI18nKey = ROUTES_TO_I18N_KEYS[pathname]
@@ -62,6 +65,8 @@ const mapStateToProps = (state, ownProps) => {
     backRoute = `${CONTACT_MY_ACCOUNTS_VIEW_ROUTE}/${pathNameTail}`
   } else if (isAddressEntryPage || isMyAccountsPage || isAddContactPage) {
     backRoute = CONTACT_LIST_ROUTE
+  } else if (isNetworksFormPage) {
+    backRoute = NETWORKS_ROUTE
   }
 
   let initialBreadCrumbRoute