diff --git a/app/src/components/ConnectPanel/RobotItem.js b/app/src/components/ConnectPanel/RobotItem.js index 99128d2e2ff..c3835c39610 100644 --- a/app/src/components/ConnectPanel/RobotItem.js +++ b/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 {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 {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,7 +25,10 @@ type DP = { } export default withRouter( - connect(makeMapStateToProps, mapDispatchToProps)(RobotListItem) + connect( + makeMapStateToProps, + mapDispatchToProps + )(RobotListItem) ) function makeMapStateToProps () { @@ -30,6 +36,7 @@ function makeMapStateToProps () { return (state: State, ownProps: OP): SP => ({ upgradable: getUpdateInfo(state, ownProps).type === 'upgrade', + selected: ownProps.match.params.name === ownProps.name, }) } diff --git a/app/src/components/ConnectPanel/RobotList.js b/app/src/components/ConnectPanel/RobotList.js index 47c41c8a4e9..51bf8c9af4b 100644 --- a/app/src/components/ConnectPanel/RobotList.js +++ b/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 ( -
    - {props.children} -
- ) -} - -export function RobotListItem (props: ItemProps) { - const {name, wired, isConnected, upgradable, connect, disconnect} = props - const onClick = isConnected - ? disconnect - : connect - - return ( -
  • - - - -

    - {name} -

    - - -
    - -

    - Pipettes & Modules -

    - -
    -
  • - ) + return
      {props.children}
    } diff --git a/app/src/components/ConnectPanel/RobotListItem.js b/app/src/components/ConnectPanel/RobotListItem.js new file mode 100644 index 00000000000..1e4650ed3a0 --- /dev/null +++ b/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 ( +
  • + + + +

    {name}

    + + +
    + {selected && ( + +

    Pipettes & Modules

    + +
    + )} +
  • + ) +} diff --git a/app/src/pages/SidePanel.js b/app/src/pages/SidePanel.js index 71fbc1c56e4..9d5170fde67 100644 --- a/app/src/pages/SidePanel.js +++ b/app/src/pages/SidePanel.js @@ -12,7 +12,7 @@ import RunPanel from '../components/RunPanel' export default function NavPanel () { return ( - +