feat(app): Only display instrument settings for selected robot

app/src/components/ConnectPanel/RobotItem.js

@@ -1,19 +1,22 @@
 // @flow
 // item in a RobotList
-import {connect} from 'react-redux'
-import {withRouter} from 'react-router'
+import { connect } from 'react-redux'
+import { withRouter, type Match } from 'react-router'
 
-import type {State, Dispatch} from '../../types'
-import type {Robot} from '../../robot'
-import {actions as robotActions} from '../../robot'
-import {makeGetRobotUpdateInfo} from '../../http-api-client'
+import type { State, Dispatch } from '../../types'
+import type { Robot } from '../../robot'
+import { actions as robotActions } from '../../robot'
+import { makeGetRobotUpdateInfo } from '../../http-api-client'
 
-import {RobotListItem} from './RobotList.js'
+import { RobotListItem } from './RobotListItem.js'
 
-type OP = Robot
+type OP = Robot & {
+  match: Match,
+}
 
 type SP = {
   upgradable: boolean,
+  selected: boolean,
 }
 
 type DP = {
@@ -22,14 +25,18 @@ type DP = {
 }
 
 export default withRouter(
-  connect(makeMapStateToProps, mapDispatchToProps)(RobotListItem)
+  connect(
+    makeMapStateToProps,
+    mapDispatchToProps
+  )(RobotListItem)
 )
 
 function makeMapStateToProps () {
   const getUpdateInfo = makeGetRobotUpdateInfo()
 
   return (state: State, ownProps: OP): SP => ({
     upgradable: getUpdateInfo(state, ownProps).type === 'upgrade',
+    selected: ownProps.match.params.name === ownProps.name,
   })
 }
 

app/src/components/ConnectPanel/RobotList.js

@@ -1,77 +1,12 @@
 // @flow
 // list of robots
 import * as React from 'react'
-
-import {
-  NotificationIcon,
-  Icon,
-} from '@opentrons/components'
-
-import type {Robot} from '../../robot'
-import {ToggleButton} from '../controls'
-import RobotLink from './RobotLink'
 import styles from './connect-panel.css'
 
 type ListProps = {
   children: React.Node,
 }
 
-type ItemProps = Robot & {
-  upgradable: ?string,
-  connect: () => mixed,
-  disconnect: () => mixed,
-}
-
 export default function RobotList (props: ListProps) {
-  return (
-    <ol className={styles.robot_list}>
-      {props.children}
-    </ol>
-  )
-}
-
-export function RobotListItem (props: ItemProps) {
-  const {name, wired, isConnected, upgradable, connect, disconnect} = props
-  const onClick = isConnected
-    ? disconnect
-    : connect
-
-  return (
-    <li className={styles.robot_group}>
-      <RobotLink
-        url={`/robots/${name}`}
-        className={styles.robot_item}
-        exact
-      >
-        <NotificationIcon
-          name={wired ? 'usb' : 'wifi'}
-          className={styles.robot_item_icon}
-          childName={upgradable ? 'circle' : null}
-          childClassName={styles.notification}
-        />
-
-        <p className={styles.link_text}>
-          {name}
-        </p>
-
-        <ToggleButton
-          toggledOn={isConnected}
-          onClick={onClick}
-          className={styles.robot_item_icon}
-        />
-      </RobotLink>
-      <RobotLink
-        url={`/robots/${name}/instruments`}
-        className={styles.instrument_item}
-      >
-        <p className={styles.link_text}>
-          Pipettes & Modules
-        </p>
-        <Icon
-          name='chevron-right'
-          className={styles.robot_item_icon}
-        />
-      </RobotLink>
-    </li>
-  )
+  return <ol className={styles.robot_list}>{props.children}</ol>
 }

app/src/components/ConnectPanel/RobotListItem.js

@@ -0,0 +1,59 @@
+// @flow
+// list of robots
+import * as React from 'react'
+import { NotificationIcon, Icon } from '@opentrons/components'
+
+import type { Robot } from '../../robot'
+import { ToggleButton } from '../controls'
+import RobotLink from './RobotLink'
+import styles from './connect-panel.css'
+
+type ItemProps = Robot & {
+  upgradable: ?string,
+  selected: boolean,
+  connect: () => mixed,
+  disconnect: () => mixed,
+}
+
+export function RobotListItem (props: ItemProps) {
+  const {
+    name,
+    wired,
+    selected,
+    isConnected,
+    upgradable,
+    connect,
+    disconnect,
+  } = props
+  const onClick = isConnected ? disconnect : connect
+
+  return (
+    <li className={styles.robot_group}>
+      <RobotLink url={`/robots/${name}`} className={styles.robot_item} exact>
+        <NotificationIcon
+          name={wired ? 'usb' : 'wifi'}
+          className={styles.robot_item_icon}
+          childName={upgradable ? 'circle' : null}
+          childClassName={styles.notification}
+        />
+
+        <p className={styles.link_text}>{name}</p>
+
+        <ToggleButton
+          toggledOn={isConnected}
+          onClick={onClick}
+          className={styles.robot_item_icon}
+        />
+      </RobotLink>
+      {selected && (
+        <RobotLink
+          url={`/robots/${name}/instruments`}
+          className={styles.instrument_item}
+        >
+          <p className={styles.link_text}>Pipettes & Modules</p>
+          <Icon name="chevron-right" className={styles.robot_item_icon} />
+        </RobotLink>
+      )}
+    </li>
+  )
+}

app/src/pages/SidePanel.js

@@ -12,7 +12,7 @@ import RunPanel from '../components/RunPanel'
 export default function NavPanel () {
   return (
     <Switch>
-      <Route path='/robots' component={ConnectPanel} />
+      <Route path='/robots/:name?' component={ConnectPanel} />
       <Route path='/menu' component={MenuPanel} />
       <Route path='/upload' component={UploadPanel} />
       <Route path='/calibrate' component={CalibratePanel} />