feat(app): Implement new connectivity card (#2608)

Closes #2555
Opentrons · Nov 7, 2018 · a4b26a2 · a4b26a2
1 parent 8e7530c
commit a4b26a2
Show file tree

Hide file tree

Showing 14 changed files with 178 additions and 309 deletions.
diff --git a/app/src/components/RobotSettings/ConnectionCard.js b/app/src/components/RobotSettings/ConnectionCard.js
@@ -2,11 +2,10 @@
 // RobotSettings card for wifi status
 import * as React from 'react'
 import {connect} from 'react-redux'
-import {getIn} from '@thi.ng/paths'
 import find from 'lodash/find'
 
-import {getConfig} from '../../config'
 import {makeGetRobotNetworkingStatus} from '../../http-api-client'
+import {CONNECTABLE} from '../../discovery'
 import {Card} from '@opentrons/components'
 import SelectNetwork from './SelectNetwork'
 import {ConnectionStatusMessage, ConnectionInfo} from './connection'
@@ -18,35 +17,39 @@ import type {InternetStatus, NetworkInterface} from '../../http-api-client'
 type OP = {robot: ViewableRobot}
 
 type SP = {|
-  __featureEnabled: boolean,
   internetStatus: ?InternetStatus,
   wifiNetwork: ?NetworkInterface,
   ethernetNetwork: ?NetworkInterface,
 |}
 
 type Props = {...$Exact<OP>, ...SP}
 
-const __FEATURE_FLAG = 'devInternal.manageRobotConnection.newCard'
-
 export default connect(makeMapStateToProps)(ConnectionCard)
 
 const TITLE = 'Connectivity'
 function ConnectionCard (props: Props) {
-  // TODO(mc, 2018-10-15): remove feature flag
-  if (!props.__featureEnabled) return null
-
   const {robot, internetStatus, wifiNetwork, ethernetNetwork} = props
+  const disabled = robot.status !== CONNECTABLE
 
   return (
-    <Card title={TITLE}>
+    <Card title={TITLE} disabled={disabled}>
       <ConnectionStatusMessage
         type={robot.local ? 'USB' : 'Wi-Fi'}
         status={internetStatus}
       />
-      <ConnectionInfo connection={wifiNetwork} title="Wi-Fi">
+      <ConnectionInfo
+        connection={wifiNetwork}
+        title="Wi-Fi"
+        disabled={disabled}
+      >
         <SelectNetwork key={robot.name} robot={robot} />
       </ConnectionInfo>
-      <ConnectionInfo connection={ethernetNetwork} title="USB" wired />
+      <ConnectionInfo
+        connection={ethernetNetwork}
+        title="USB"
+        wired
+        disabled={disabled}
+      />
     </Card>
   )
 }
@@ -64,7 +67,6 @@ function makeMapStateToProps (): (State, OP) => SP {
       internetStatus,
       wifiNetwork: find(interfaces, {type: 'wifi'}),
       ethernetNetwork: find(interfaces, {type: 'ethernet'}),
-      __featureEnabled: !!getIn(getConfig(state), __FEATURE_FLAG),
     }
   }
 }
diff --git a/app/src/components/RobotSettings/ConnectivityCard.js b/app/src/components/RobotSettings/ConnectivityCard.js
diff --git a/app/src/components/RobotSettings/SelectNetwork/ConnectForm.js b/app/src/components/RobotSettings/SelectNetwork/ConnectForm.js
@@ -98,12 +98,17 @@ const UNKNOWN_SECURITY_OPTIONS: Array<SelectOption> = [
 ]
 
 const getEapType = (v: FormValues): ?string => get(v, EAP_TYPE_FIELD)
-const makeEapOpt = (o: WifiEapOption) => ({label: o.displayName, value: o.name})
-const makeEapField = (o: WifiAuthField) => ({
-  type: o.type,
-  name: `${EAP_CONFIG_FIELD}.${o.name}`,
-  label: o.displayName,
-  required: o.required,
+
+const makeEapOpt = (opt: WifiEapOption) => ({
+  label: opt.displayName || opt.name,
+  value: opt.name,
+})
+
+const makeEapField = (opt: WifiAuthField) => ({
+  type: opt.type,
+  name: `${EAP_CONFIG_FIELD}.${opt.name}`,
+  label: opt.displayName,
+  required: opt.required,
 })
 
 const getEapFields = (

diff --git a/...ponents/RobotSettings/WifiConnectModal.js → ...ettings/SelectNetwork/WifiConnectModal.js b/...ponents/RobotSettings/WifiConnectModal.js → ...ettings/SelectNetwork/WifiConnectModal.js
@@ -3,32 +3,35 @@
 import * as React from 'react'
 
 import type {
+  WifiConfigureRequest,
   WifiConfigureResponse,
   ApiRequestError,
-} from '../../http-api-client'
+} from '../../../http-api-client'
 
 import {AlertModal} from '@opentrons/components'
-import {Portal} from '../portal'
-import {ErrorModal} from '../modals'
+import {ErrorModal} from '../../modals'
 
 type Props = {
   close: () => mixed,
-  error: ?ApiRequestError,
+  request: WifiConfigureRequest,
   response: ?WifiConfigureResponse,
+  error: ?ApiRequestError,
 }
 
-const SUCCESS_TITLE = 'Successfully connected to '
-const FAILURE_TITLE = 'Could not join network'
+const SUCCESS_TITLE = 'Successfully connected to Wi-Fi'
+const FAILURE_TITLE = 'Unable to connect to Wi-Fi'
+
+const success = ssid =>
+  `Your robot has successfully connected to Wi-Fi network ${ssid}.`
 
-const SUCCESS_MESSAGE =
-  'Your robot has successfully connected to WiFi and should appear in the robot list shortly. If not, try refreshing the list manually or rebooting the robot.'
-const FAILURE_MESSAGE =
-  'The robot was unable to connect to the selected WiFi network. Please double check your network credentials.'
+const failure = ssid =>
+  `Your robot was unable to connect to ${ssid}. Please double-check your network credentials.`
 
 const ERROR_MESSAGE_RE = /Error: (.*)$/
 
 export default function WifiConnectModal (props: Props) {
-  const {response, error, close} = props
+  const {request, response, error, close} = props
+  const {ssid} = request
 
   if (error || !response) {
     let errorMessage = 'An unknown error occurred'
@@ -47,24 +50,22 @@ export default function WifiConnectModal (props: Props) {
     return (
       <ErrorModal
         heading={FAILURE_TITLE}
-        description={FAILURE_MESSAGE}
+        description={failure(ssid)}
         close={close}
         error={modalError}
       />
     )
   }
 
   return (
-    <Portal>
-      <AlertModal
-        iconName="wifi"
-        heading={`${SUCCESS_TITLE} ${response.ssid}`}
-        onCloseClick={close}
-        buttons={[{onClick: close, children: 'close'}]}
-        alertOverlay
-      >
-        {SUCCESS_MESSAGE}
-      </AlertModal>
-    </Portal>
+    <AlertModal
+      iconName="wifi"
+      heading={SUCCESS_TITLE}
+      onCloseClick={close}
+      buttons={[{onClick: close, children: 'close'}]}
+      alertOverlay
+    >
+      {success(ssid)}
+    </AlertModal>
   )
 }