refactor(app): Add update in progress and restart screens (#2728)

app/src/components/RobotSettings/UpdateRobot/RestartRobotModal.js

@@ -0,0 +1,58 @@
+// @flow
+import * as React from 'react'
+import {connect} from 'react-redux'
+import {push} from 'react-router-redux'
+
+import {restartRobotServer, clearUpdateResponse} from '../../../http-api-client'
+import {AlertModal} from '@opentrons/components'
+
+import type {Dispatch} from '../../../types'
+import type {ViewableRobot} from '../../../discovery'
+
+type OP = {robot: ViewableRobot}
+
+type DP = {|
+  restart: () => mixed,
+  close: () => mixed,
+|}
+
+type Props = {...$Exact<OP>, ...DP}
+
+export default connect(
+  null,
+  mapDispatchToProps
+)(RestartRobotModal)
+
+// TODO (ka 2018-11-27): Clarify heading and messaging with UX
+const RESTART_HEADING = 'Update installed'
+
+function RestartRobotModal (props: Props) {
+  return (
+    <AlertModal
+      heading={RESTART_HEADING}
+      buttons={[
+        {onClick: props.close, children: 'not now'},
+        {onClick: props.restart, children: 'restart'},
+      ]}
+      alertOverlay
+    >
+      Restart your robot to finish the update. It may take several minutes for
+      your robot to restart.
+    </AlertModal>
+  )
+}
+
+function mapDispatchToProps (dispatch: Dispatch, ownProps: OP): DP {
+  const {robot} = ownProps
+
+  const close = () => dispatch(push(`/robots/${robot.name}`))
+
+  return {
+    close,
+    restart: () => {
+      dispatch(restartRobotServer(robot))
+        .then(() => dispatch(clearUpdateResponse(robot)))
+        .then(close)
+    },
+  }
+}

app/src/components/RobotSettings/UpdateRobotModal/index.js → app/src/components/RobotSettings/UpdateRobot/UpdateRobotModal.js

@@ -72,6 +72,7 @@ class UpdateRobotModal extends React.Component<Props, UpdateRobotState> {
 
   render () {
     const {
+      update,
       ignoreUpdate,
       appVersion,
       robotVersion,
@@ -95,7 +96,7 @@ class UpdateRobotModal extends React.Component<Props, UpdateRobotState> {
     if (showReleaseNotes) {
       button = {
         children: 'Upgrade Robot',
-        onClick: () => console.log('install'),
+        onClick: update,
       }
     } else if (appUpdateAvailable) {
       message = <UpdateAppMessage {...versionProps} />
@@ -122,14 +123,14 @@ class UpdateRobotModal extends React.Component<Props, UpdateRobotState> {
       } else if (robotUpdateInfo.type === 'downgrade') {
         button = {
           children: 'Downgrade Robot',
-          onClick: () => console.log('install'),
+          onClick: update,
         }
       }
     } else {
       message = <ReinstallMessage />
       button = {
         children: 'Reinstall',
-        onClick: () => console.log('install'),
+        onClick: update,
       }
     }
 

app/src/components/RobotSettings/UpdateRobot/index.js

@@ -0,0 +1,54 @@
+// @flow
+import * as React from 'react'
+import {connect} from 'react-redux'
+
+import {makeGetRobotUpdateRequest} from '../../../http-api-client'
+
+import {SpinnerModal} from '@opentrons/components'
+import UpdateRobotModal from './UpdateRobotModal'
+import RestartRobotModal from './RestartRobotModal'
+
+import type {State} from '../../../types'
+import type {ViewableRobot} from '../../../discovery'
+import type {RobotServerUpdate} from '../../../http-api-client'
+
+type OP = {robot: ViewableRobot}
+
+type SP = {|
+  updateRequest: RobotServerUpdate,
+|}
+
+type Props = {
+  ...$Exact<OP>,
+  ...SP,
+}
+
+export default connect(
+  makeMapStateToProps,
+  null
+)(UpdateRobot)
+
+function UpdateRobot (props: Props) {
+  const {updateRequest, robot} = props
+  if (updateRequest.response) {
+    return <RestartRobotModal robot={robot} />
+  }
+  if (updateRequest.inProgress) {
+    // TODO (ka 2018-11-27): Clarify update message with UX
+    return <SpinnerModal message="Robot is updating" alertOverlay />
+  } else {
+    return <UpdateRobotModal robot={robot} />
+  }
+}
+
+function makeMapStateToProps (): (State, OP) => Props {
+  const getRobotUpdateRequest = makeGetRobotUpdateRequest()
+
+  return (state, ownProps) => {
+    const {robot} = ownProps
+    return {
+      robot,
+      updateRequest: getRobotUpdateRequest(state, ownProps.robot),
+    }
+  }
+}

app/src/pages/Robots/RobotSettings.js

@@ -23,7 +23,7 @@ import RobotSettings, {
   ConnectAlertModal,
   RobotUpdateModal,
 } from '../../components/RobotSettings'
-import UpdateRobotModal from '../../components/RobotSettings/UpdateRobotModal'
+import UpdateRobot from '../../components/RobotSettings/UpdateRobot'
 import CalibrateDeck from '../../components/CalibrateDeck'
 import ConnectBanner from '../../components/RobotSettings/ConnectBanner'
 import ReachableRobotBanner from '../../components/RobotSettings/ReachableRobotBanner'
@@ -108,7 +108,7 @@ function RobotSettingsPage (props: Props) {
           path={`${path}/${UPDATE_FRAGMENT}`}
           render={() => {
             if (props.__featureEnabled) {
-              return <UpdateRobotModal robot={robot} />
+              return <UpdateRobot robot={robot} />
             } else {
               return <RobotUpdateModal robot={robot} />
             }