feat(app): Display reachable non connectable robots

closes #2345
Opentrons · Oct 10, 2018 · 5362210 · 5362210
1 parent c8bf371
commit 5362210
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 31 deletions.
diff --git a/app/src/components/RobotSettings/InformationCard.js b/app/src/components/RobotSettings/InformationCard.js
@@ -55,7 +55,7 @@ const getFirmwareVersion = robot =>
 function InformationCard (props: Props) {
   const {robot, updateInfo, fetchHealth, updateUrl, checkAppUpdate} = props
 
-  const {name} = robot
+  const {name, serverOk} = robot
   const version = getApiVersion(robot)
   const firmwareVersion = getFirmwareVersion(robot)
   const updateText = updateInfo.type || 'Reinstall'
@@ -72,7 +72,12 @@ function InformationCard (props: Props) {
         <LabeledValue label={FIRMWARE_VERSION_LABEL} value={firmwareVersion} />
       </CardContentQuarter>
       <CardContentQuarter>
-        <OutlineButton Component={Link} to={updateUrl} onClick={checkAppUpdate}>
+        <OutlineButton
+          Component={Link}
+          to={updateUrl}
+          onClick={checkAppUpdate}
+          disabled={!serverOk}
+        >
           {updateText}
         </OutlineButton>
       </CardContentQuarter>

diff --git a/app/src/components/RobotSettings/RobotUpdateModal.js b/app/src/components/RobotSettings/RobotUpdateModal.js
@@ -3,9 +3,6 @@ import * as React from 'react'
 import {connect} from 'react-redux'
 import {push} from 'react-router-redux'
 
-import type {State, Dispatch} from '../../types'
-import type {Robot} from '../../robot'
-import type {RobotServerUpdate, RobotServerRestart, RobotUpdateInfo} from '../../http-api-client'
 import {
   updateRobotServer,
   restartRobotServer,
@@ -16,9 +13,7 @@ import {
   setIgnoredUpdate,
 } from '../../http-api-client'
 
-import {
-  getShellUpdateState,
-} from '../../shell'
+import {getShellUpdateState} from '../../shell'
 
 import type {ShellUpdateState} from '../../shell'
 
@@ -28,7 +23,13 @@ import UpdateAppMessage from './UpdateAppMessage'
 import UpdateRobotMessage from './UpdateRobotMessage'
 import ReleaseNotes from '../ReleaseNotes'
 
+import type {State, Dispatch} from '../../types'
 import type {ViewableRobot} from '../../discovery'
+import type {
+  RobotServerUpdate,
+  RobotServerRestart,
+  RobotUpdateInfo,
+} from '../../http-api-client'
 
 type OP = {robot: ViewableRobot}
 
@@ -49,15 +50,23 @@ type Props = {
   ignoreUpdate: () => mixed,
 }
 
-const DOWNGRADE_MSG = 'Your app is at an older version than your robot. You may want to downgrade your robot to ensure compatability.'
-const UPGRADE_MSG = 'Your robot is at an older version than your app. We recommend you upgrade your robot to ensure compatability.'
-const ALREADY_UPDATED_MSG = "It looks like your robot is already up to date, but if you're experiencing issues you can re-apply the latest update."
-const RESTART_MSG = 'Restart your robot to finish the update. It may take several minutes for your robot to restart.'
+const DOWNGRADE_MSG =
+  'Your app is at an older version than your robot. You may want to downgrade your robot to ensure compatability.'
+const UPGRADE_MSG =
+  'Your robot is at an older version than your app. We recommend you upgrade your robot to ensure compatability.'
+const ALREADY_UPDATED_MSG =
+  "It looks like your robot is already up to date, but if you're experiencing issues you can re-apply the latest update."
+const RESTART_MSG =
+  'Restart your robot to finish the update. It may take several minutes for your robot to restart.'
 
 // TODO(mc, 2018-03-19): prop or component for text-height icons
-const Spinner = () => (<Icon name='ot-spinner' height='1em' spin />)
+const Spinner = () => <Icon name="ot-spinner" height="1em" spin />
 
-export default connect(makeMapStateToProps, null, mergeProps)(RobotUpdateModal)
+export default connect(
+  makeMapStateToProps,
+  null,
+  mergeProps
+)(RobotUpdateModal)
 
 function RobotUpdateModal (props: Props) {
   const {
@@ -83,9 +92,7 @@ function RobotUpdateModal (props: Props) {
   if (!updateRequest.response) {
     buttonAction = update
     if (updateInfo.type) {
-      message = updateInfo.type === 'upgrade'
-        ? UPGRADE_MSG
-        : DOWNGRADE_MSG
+      message = updateInfo.type === 'upgrade' ? UPGRADE_MSG : DOWNGRADE_MSG
       buttonText = updateInfo.type
     } else {
       message = ALREADY_UPDATED_MSG
@@ -98,20 +105,16 @@ function RobotUpdateModal (props: Props) {
   }
 
   button = inProgress
-    ? {disabled: true, children: (<Spinner />)}
+    ? {disabled: true, children: <Spinner />}
     : {onClick: buttonAction, children: buttonText}
 
-  let source = info && info.releaseNotes
-    ? removeAppNotes(info.releaseNotes)
-    : null
+  let source =
+    info && info.releaseNotes ? removeAppNotes(info.releaseNotes) : null
 
   return (
     <ScrollableAlertModal
       heading={heading}
-      buttons={[
-        {onClick: ignoreUpdate, children: closeButtonText},
-        button,
-      ]}
+      buttons={[{onClick: ignoreUpdate, children: closeButtonText}, button]}
       alertOverlay
     >
       {available && <UpdateAppMessage />}

diff --git a/app/src/components/RobotSettings/StatusCard.js b/app/src/components/RobotSettings/StatusCard.js
@@ -37,7 +37,6 @@ export default connect(
 
 function StatusCard (props: Props) {
   const {status, connectButtonText, onClick} = props
-
   return (
     <Card title={TITLE}>
       <CardContentHalf>

diff --git a/app/src/components/RobotSettings/index.js b/app/src/components/RobotSettings/index.js
@@ -18,29 +18,30 @@ type Props = {robot: ViewableRobot}
 
 export default function RobotSettings (props: Props) {
   const {robot} = props
+  const disabled = robot.status !== 'connectable'
   const updateUrl = `/robots/${robot.name}/update`
 
   return (
     <CardContainer>
       <CardRow>
-        <StatusCard robot={robot} />
+        <StatusCard robot={robot} disabled={disabled} />
       </CardRow>
       <CardRow>
         <InformationCard robot={robot} updateUrl={updateUrl} />
       </CardRow>
       <CardRow>
-        <ControlsCard robot={robot} />
+        <ControlsCard robot={robot} disabled={disabled} />
       </CardRow>
       <CardRow>
         <CardColumn>
-          <ConnectivityCard robot={robot} />
+          <ConnectivityCard robot={robot} disabled={disabled} />
         </CardColumn>
         <CardColumn>
-          <CalibrationCard robot={robot} />
+          <CalibrationCard robot={robot} disabled={disabled} />
         </CardColumn>
       </CardRow>
       <CardRow>
-        <AdvancedSettingsCard robot={robot} />
+        <AdvancedSettingsCard robot={robot} disabled={disabled} />
       </CardRow>
     </CardContainer>
   )