Add networks settings routes

4 years ago · 8a1820c537
parent 27118fdd98
commit 8a1820c537
6 changed files with 58 additions and 22 deletions
--- a/ui/app/helpers/constants/routes.js
+++ b/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,
--- a/ui/app/pages/settings/networks-tab/network-form/network-form.component.js
+++ b/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: '',
--- a/ui/app/pages/settings/networks-tab/networks-tab.component.js
+++ b/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') }
--- a/ui/app/pages/settings/networks-tab/networks-tab.container.js
+++ b/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,
  }
 }

--- a/ui/app/pages/settings/settings.component.js
+++ b/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}
--- a/ui/app/pages/settings/settings.container.js
+++ b/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