feat(app): Enable adding manual robot IP addresses in app settings

closes #2741
Opentrons · Mar 29, 2019 · 5935347 · 5935347
1 parent 51a6cc3
commit 5935347
Show file tree

Hide file tree

Showing 7 changed files with 78 additions and 41 deletions.
diff --git a/app/src/components/AppSettings/AddManualIp/IpField.js b/app/src/components/AppSettings/AddManualIp/IpField.js
@@ -24,7 +24,7 @@ export default function IpField (props: Props) {
         ref={inputRef}
       />
       <IconButton
-        className={styles.ip_button}
+        className={styles.add_ip_button}
         name="plus"
         type="submit"
         disabled={!dirty}

diff --git a/app/src/components/AppSettings/AddManualIp/IpItem.js b/app/src/components/AppSettings/AddManualIp/IpItem.js
@@ -1,23 +1,40 @@
 // @flow
 import * as React from 'react'
-import {IconButton} from '@opentrons/components'
+import {IconButton, Icon} from '@opentrons/components'
 import styles from './styles.css'
+
+import type {IconName} from '@opentrons/components'
 type Props = {
   candidate: string,
+  discovered: boolean,
   removeIp: (ip: string) => mixed,
 }
 export default class IpItem extends React.Component<Props> {
   remove = () => this.props.removeIp(this.props.candidate)
   render () {
+    const iconName = this.props.discovered ? 'check' : 'ot-spinner'
     return (
       <div className={styles.ip_item_group}>
         <div className={styles.ip_item}>{this.props.candidate}</div>
+        <DiscoveryIcon iconName={iconName} />
         <IconButton
-          className={styles.ip_button}
+          className={styles.remove_ip_button}
           name="minus"
           onClick={this.remove}
         />
       </div>
     )
   }
 }
+
+type DiscoveryIconProps = {
+  iconName: IconName,
+}
+function DiscoveryIcon (props: DiscoveryIconProps) {
+  const spin = props.iconName === 'ot-spinner'
+  return (
+    <div className={styles.discovery_icon}>
+      <Icon name={props.iconName} spin={spin} />
+    </div>
+  )
+}
diff --git a/app/src/components/AppSettings/AddManualIp/IpList.js b/app/src/components/AppSettings/AddManualIp/IpList.js
@@ -1,14 +1,19 @@
 // @flow
 import * as React from 'react'
 import {connect} from 'react-redux'
+import find from 'lodash/find'
 import {getConfig, removeManualIp} from '../../../config'
+import {getConnectableRobots, getReachableRobots} from '../../../discovery'
 
 import type {State, Dispatch} from '../../../types'
 import type {DiscoveryCandidates} from '../../../config'
+import type {Robot, ReachableRobot} from '../../../discovery'
 
 import IpItem from './IpItem'
 
 type SP = {|
+  connectableRobots: Array<Robot>,
+  reachableRobots: Array<ReachableRobot>,
   candidates: DiscoveryCandidates,
 |}
 
@@ -19,13 +24,23 @@ type DP = {|
 type Props = {...SP, ...DP}
 
 function IpList (props: Props) {
-  const {candidates, removeManualIp} = props
+  const {candidates, removeManualIp, connectableRobots, reachableRobots} = props
   const candidateList = [].concat(candidates)
+  const robots = connectableRobots.concat(reachableRobots)
+  console.log(robots)
   return (
     <div>
-      {candidateList.map((c, index) => (
-        <IpItem candidate={c} key={index} removeIp={removeManualIp} />
-      ))}
+      {candidateList.map((c, index) => {
+        const discovered = !!find(robots, r => r.ip === c)
+        return (
+          <IpItem
+            candidate={c}
+            key={index}
+            removeIp={removeManualIp}
+            discovered={discovered}
+          />
+        )
+      })}
     </div>
   )
 }
@@ -37,6 +52,8 @@ export default connect(
 
 function STP (state: State): SP {
   return {
+    connectableRobots: getConnectableRobots(state),
+    reachableRobots: getReachableRobots(state),
     candidates: getConfig(state).discovery.candidates,
   }
 }

diff --git a/app/src/components/AppSettings/AddManualIp/ManualIpForm.js b/app/src/components/AppSettings/AddManualIp/ManualIpForm.js
@@ -2,6 +2,7 @@
 import * as React from 'react'
 import {connect} from 'react-redux'
 import {getConfig, addManualIp} from '../../../config'
+import {startDiscovery} from '../../../discovery'
 
 import {Formik, Form, Field} from 'formik'
 import IpField from './IpField'
@@ -62,6 +63,9 @@ function STP (state: State): SP {
 
 function DTP (dispatch: Dispatch): DP {
   return {
-    addManualIp: ip => dispatch(addManualIp(ip)),
+    addManualIp: ip => {
+      dispatch(addManualIp(ip))
+      dispatch(startDiscovery())
+    },
   }
 }
diff --git a/app/src/components/AppSettings/AddManualIp/styles.css b/app/src/components/AppSettings/AddManualIp/styles.css
@@ -1,18 +1,6 @@
 @import '@opentrons/components';
 
 :root {
-  --ip-group: {
-    display: flex;
-    justify-content: flex-start;
-    border: 1px solid var(--c-med-gray);
-    height: 2rem;
-
-    &:focus-within {
-      background-color: var(--c-white);
-      box-shadow: 0 0.125rem 0.25rem 0 color(var(--c-black) alpha(0.5));
-    }
-  }
-
   --ip-item: {
     flex: 1 0 100%;
     padding: 0 1rem;
@@ -40,7 +28,7 @@
   }
 }
 
-.ip_button {
+.add_ip_button {
   padding: 0.25rem;
   flex: 0 0 2rem;
   border-radius: 0;
@@ -66,4 +54,17 @@
 
 .ip_item {
   @apply --ip-item;
+
+  flex: 1 1 calc(100% - 4rem);
+}
+
+.remove_ip_button {
+  padding: 0.25rem;
+  flex: 0 0 2rem;
+  border-radius: 0;
+}
+
+.discovery_icon {
+  padding: 0.5rem;
+  flex: 0 0 2rem;
 }
diff --git a/app/src/components/AppSettings/AdvancedSettingsCard.js b/app/src/components/AppSettings/AdvancedSettingsCard.js
@@ -21,7 +21,6 @@ type OP = {
 type SP = {|
   devToolsOn: boolean,
   channel: UpdateChannel,
-  __ffShowManualIp: boolean,
 |}
 
 type DP = {|
@@ -74,21 +73,19 @@ function AdvancedSettingsCard (props: Props) {
             logging.
           </p>
         </LabeledToggle>
-        {props.__ffShowManualIp && (
-          <LabeledButton
-            label="Manually Add Robot Network Addresses"
-            buttonProps={{
-              Component: Link,
-              children: 'manage',
-              to: `${props.match.url}/add-ip`,
-            }}
-          >
-            <p>
-              If your app is unable to automatically discover your robot, you
-              can manually add its IP address or hostname here
-            </p>
-          </LabeledButton>
-        )}
+        <LabeledButton
+          label="Manually Add Robot Network Addresses"
+          buttonProps={{
+            Component: Link,
+            children: 'manage',
+            to: `${props.match.url}/add-ip`,
+          }}
+        >
+          <p>
+            If your app is unable to automatically discover your robot, you can
+            manually add its IP address or hostname here
+          </p>
+        </LabeledButton>
       </Card>
       <Route
         path={`${props.match.path}/add-ip`}
@@ -104,7 +101,6 @@ function mapStateToProps (state: State): SP {
   return {
     devToolsOn: config.devtools,
     channel: config.update.channel,
-    __ffShowManualIp: Boolean(config.devInternal?.manualIp),
   }
 }
 

diff --git a/app/src/components/ConnectPanel/index.js b/app/src/components/ConnectPanel/index.js
@@ -3,8 +3,6 @@ import * as React from 'react'
 import {connect} from 'react-redux'
 import orderBy from 'lodash/orderBy'
 
-import type {State, Dispatch} from '../../types'
-
 import {
   startDiscovery,
   getScanning,
@@ -13,6 +11,8 @@ import {
   getUnreachableRobots,
 } from '../../discovery'
 
+import type {State, Dispatch} from '../../types'
+
 import {SidePanel} from '@opentrons/components'
 import RobotList from './RobotList'
 import RobotItem from './RobotItem'
@@ -48,7 +48,9 @@ function ConnectPanel (props: Props) {
     <SidePanel title="Robots">
       <ScanStatus {...props} />
       <RobotList>
-        {props.robots.map(robot => <RobotItem key={robot.name} {...robot} />)}
+        {props.robots.map(robot => (
+          <RobotItem key={robot.name} {...robot} />
+        ))}
         {props.reachableRobots.map(robot => (
           <RobotItem key={robot.name} {...robot} />
         ))}