refactor(app): Add connnect to unsecured on select to ConnectionCard

app/src/components/RobotSettings/ConnectionCard.js

@@ -6,30 +6,19 @@ import {getIn} from '@thi.ng/paths'
 import find from 'lodash/find'
 
 import {getConfig} from '../../config'
-import {
-  makeGetRobotNetworkingStatus,
-  makeGetRobotWifiList,
-} from '../../http-api-client'
-import {RefreshCard} from '@opentrons/components'
-import {
-  ConnectionStatusMessage,
-  ConnectionInfo,
-  AvailableNetworks,
-} from './connection'
+import {makeGetRobotNetworkingStatus} from '../../http-api-client'
+import {Card} from '@opentrons/components'
+import SelectNetwork from './SelectNetwork'
+import {ConnectionStatusMessage, ConnectionInfo} from './connection'
 
 import type {State} from '../../types'
 import type {ViewableRobot} from '../../discovery'
-import type {
-  WifiNetworkList,
-  InternetStatus,
-  NetworkInterface,
-} from '../../http-api-client'
+import type {InternetStatus, NetworkInterface} from '../../http-api-client'
 
 type OP = {robot: ViewableRobot}
 
 type SP = {|
   __featureEnabled: boolean,
-  wifiList: ?WifiNetworkList,
   internetStatus: ?InternetStatus,
   wifiNetwork: ?NetworkInterface,
   ethernetNetwork: ?NetworkInterface,
@@ -39,46 +28,40 @@ type Props = {...$Exact<OP>, ...SP}
 
 const __FEATURE_FLAG = 'devInternal.manageRobotConnection.newCard'
 
-export default connect(
-  makeMapStateToProps
-  /* mapDispatchToProps */
-)(ConnectionCard)
+export default connect(makeSTP)(ConnectionCard)
 
 const TITLE = 'Connectivity'
 function ConnectionCard (props: Props) {
   // TODO(mc, 2018-10-15): remove feature flag
   if (!props.__featureEnabled) return null
 
-  const {robot, wifiList, internetStatus, wifiNetwork, ethernetNetwork} = props
+  const {robot, internetStatus, wifiNetwork, ethernetNetwork} = props
 
   return (
-    <RefreshCard title={TITLE} refresh={() => console.log('placeholder')}>
+    <Card title={TITLE}>
       <ConnectionStatusMessage
         type={robot.local ? 'USB' : 'Wi-Fi'}
         status={internetStatus}
       />
       <ConnectionInfo connection={wifiNetwork} title="Wi-Fi">
-        <AvailableNetworks list={wifiList} />
+        <SelectNetwork key={robot.name} robot={robot} />
       </ConnectionInfo>
       <ConnectionInfo connection={ethernetNetwork} title="USB" wired />
-    </RefreshCard>
+    </Card>
   )
 }
 
-function makeMapStateToProps (): (State, OP) => SP {
+function makeSTP (): (State, OP) => SP {
   const getNetworkingStatusCall = makeGetRobotNetworkingStatus()
-  const getWifiListCall = makeGetRobotWifiList()
 
   return (state, ownProps) => {
     const {robot} = ownProps
     const {response: statusResponse} = getNetworkingStatusCall(state, robot)
-    const {response: listResponse} = getWifiListCall(state, robot)
     const internetStatus = statusResponse && statusResponse.status
     const interfaces = statusResponse && statusResponse.interfaces
 
     return {
       internetStatus,
-      wifiList: listResponse && listResponse.list,
       wifiNetwork: find(interfaces, {type: 'wifi'}),
       ethernetNetwork: find(interfaces, {type: 'ethernet'}),
       __featureEnabled: !!getIn(getConfig(state), __FEATURE_FLAG),

app/src/components/RobotSettings/SelectNetwork.js

@@ -0,0 +1,122 @@
+// @flow
+import * as React from 'react'
+import {connect} from 'react-redux'
+import find from 'lodash/find'
+
+import {
+  NO_SECURITY,
+  fetchWifiList,
+  configureWifi,
+  makeGetRobotWifiList,
+  makeGetRobotWifiConfigure,
+} from '../../http-api-client'
+import {NetworkDropdown} from './connection'
+import {Portal} from '../portal'
+import {IntervalWrapper, SpinnerModal} from '@opentrons/components'
+
+import type {State, Dispatch} from '../../types'
+import type {ViewableRobot} from '../../discovery'
+import type {WifiNetwork, WifiNetworkList} from '../../http-api-client'
+
+type OP = {robot: ViewableRobot}
+
+type SP = {|list: ?WifiNetworkList, connectingTo: ?string|}
+
+type DP = {|
+  getList: () => mixed,
+  configure: (network: WifiNetwork) => mixed,
+|}
+
+type Props = {...$Exact<OP>, ...SP, ...DP}
+
+type SelectNetworkState = {value: ?string}
+
+const LIST_REFRESH_MS = 15000
+
+class SelectNetwork extends React.Component<Props, SelectNetworkState> {
+  constructor (props) {
+    super(props)
+    // prepopulate selected SSID with currently connected network, if any
+    this.state = {value: this.getActiveSsid()}
+  }
+
+  onChange = (network: WifiNetwork) => {
+    this.setState({value: network.ssid})
+    this.props.configure(network)
+  }
+
+  getActiveSsid (): ?string {
+    const activeNetwork = find(this.props.list, 'active')
+    return activeNetwork && activeNetwork.ssid
+  }
+
+  componentDidUpdate (prevProps) {
+    // if we don't have a selected network in component state and the list has
+    // updated, seed component state with active ssid from props
+    if (!this.state.value && this.props.list !== prevProps.list) {
+      this.setState({value: this.getActiveSsid()})
+    }
+  }
+
+  render () {
+    const {list, connectingTo, getList} = this.props
+    const {value} = this.state
+
+    return (
+      <IntervalWrapper refresh={getList} interval={LIST_REFRESH_MS}>
+        <NetworkDropdown
+          list={list}
+          value={value}
+          disabled={connectingTo != null}
+          onChange={this.onChange}
+        />
+        {connectingTo && (
+          <Portal>
+            <SpinnerModal
+              message={`Attempting to connect to network ${connectingTo}`}
+            />
+          </Portal>
+        )}
+      </IntervalWrapper>
+    )
+  }
+}
+
+function makeSTP (): (State, OP) => SP {
+  const getWifiListCall = makeGetRobotWifiList()
+  const getWifiConfigureCall = makeGetRobotWifiConfigure()
+
+  return (state, ownProps) => {
+    const {robot} = ownProps
+    const {response: listResponse} = getWifiListCall(state, robot)
+    const {
+      request: cfgRequest,
+      inProgress: cfgInProgress,
+      error: cfgError,
+    } = getWifiConfigureCall(state, robot)
+
+    return {
+      list: listResponse && listResponse.list,
+      connectingTo:
+        !cfgError && cfgInProgress && cfgRequest ? cfgRequest.ssid : null,
+    }
+  }
+}
+
+function DTP (dispatch: Dispatch, ownProps: OP): DP {
+  const {robot} = ownProps
+
+  return {
+    getList: () => dispatch(fetchWifiList(robot)),
+    configure: network => {
+      if (network.securityType === NO_SECURITY) {
+        return dispatch(configureWifi(robot, {ssid: network.ssid}))
+      }
+    },
+  }
+}
+
+export default connect(
+  makeSTP,
+  DTP
+)(SelectNetwork)

app/src/components/RobotSettings/connection.js

@@ -2,6 +2,7 @@
 // UI components for displaying connection info
 import * as React from 'react'
 import Select from 'react-select'
+import find from 'lodash/find'
 import {Icon} from '@opentrons/components'
 import {CardContentHalf} from '../layout'
 import styles from './styles.css'
@@ -68,22 +69,37 @@ export function ConnectionInfo (props: ConnectionInfoProps) {
   )
 }
 
-type AvailableNetworksProps = {list: ?WifiNetworkList}
+type SelectNetworkOption = {
+  ...$Exact<WifiNetwork>,
+  value: string,
+  label: React.Node,
+}
+
+type NetworkDropdownProps = {
+  list: ?WifiNetworkList,
+  value: ?string,
+  disabled: boolean,
+  onChange: SelectNetworkOption => mixed,
+}
 
-export function AvailableNetworks (props: AvailableNetworksProps) {
+export function NetworkDropdown (props: NetworkDropdownProps) {
+  const {value, disabled, onChange} = props
   const list = props.list || []
   const options = list.map(NetworkOption)
+  const selectedOption = find(options, {value})
+
   return (
     <Select
-      value={options[0]}
       className={styles.wifi_dropdown}
-      onChange={e => console.log(e)}
+      isDisabled={disabled}
+      value={selectedOption}
+      onChange={onChange}
       options={options}
     />
   )
 }
 
-function NetworkOption (nw: WifiNetwork): {value: string, label: React.Node} {
+function NetworkOption (nw: WifiNetwork): SelectNetworkOption {
   const value = nw.ssid
   const connectedIcon = nw.active ? (
     <Icon name="check" className={styles.wifi_option_icon} />
@@ -121,7 +137,7 @@ function NetworkOption (nw: WifiNetwork): {value: string, label: React.Node} {
     </div>
   )
 
-  return {value, label}
+  return {...nw, value, label}
 }
 
 type NetworkAddressProps = {

app/src/http-api-client/networking.js

@@ -76,6 +76,10 @@ const STATUS: NetworkingStatusPath = 'networking/status'
 const LIST: WifiListPath = 'wifi/list'
 const CONFIGURE: WifiConfigurePath = 'wifi/configure'
 
+export const NO_SECURITY: SecurityType = 'none'
+export const WPA_PSK_SECURITY: SecurityType = 'wpa-psk'
+export const WPA_EAP_SECURITY: SecurityType = 'wpa-eap'
+
 export const fetchNetworkingStatus = buildRequestMaker('GET', STATUS)
 export const fetchWifiList = buildRequestMaker('GET', LIST)
 export const configureWifi = buildRequestMaker('POST', CONFIGURE)

components/src/interaction-enhancers/IntervalWrapper.js

@@ -25,18 +25,14 @@ export default class IntervalWrapper extends React.Component<Props, State> {
   render () {
     const {children} = this.props
 
-    return (
-      <React.Fragment>
-        {children}
-      </React.Fragment>
-    )
+    return <React.Fragment>{children}</React.Fragment>
   }
 
   componentDidMount () {
-    const intervalId = setInterval(() => {
-      this.props.refresh()
-    }, this.props.interval)
+    const {refresh, interval} = this.props
+    const intervalId = setInterval(refresh, interval)
     this.setState({intervalId: intervalId})
+    refresh()
   }
 
   componentWillUnmount () {