feat(app): enable module firmware update button when update available

Building on previous work to get the newest module fw on the robot per each release, this adds functionality to the app allowing the user to update an attached module of their connected robot, if that module has an available firmware update. re #4576, Closes #4575
Opentrons · Feb 5, 2020 · f72543f · f72543f
1 parent 587a0c9
commit f72543f
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 7 deletions.
diff --git a/app/src/components/InstrumentSettings/ModulesCardContents.js b/app/src/components/InstrumentSettings/ModulesCardContents.js
@@ -16,8 +16,8 @@ export function ModulesCardContents(props: Props) {
 
   return (
     <>
-      {modules.map((mod, index) => (
-        <ModuleItem key={index} module={mod} canControl={canControl} />
+      {modules.map(mod => (
+        <ModuleItem key={mod.serial} module={mod} canControl={canControl} />
       ))}
     </>
   )

diff --git a/app/src/components/ModuleItem/ModuleUpdate.js b/app/src/components/ModuleItem/ModuleUpdate.js
@@ -1,7 +1,12 @@
 // @flow
 import * as React from 'react'
 import { useSelector, useDispatch } from 'react-redux'
-import { OutlineButton, HoverTooltip } from '@opentrons/components'
+import {
+  OutlineButton,
+  HoverTooltip,
+  SpinnerModalPage,
+  Icon,
+} from '@opentrons/components'
 import { getConnectedRobotName } from '../../robot/selectors'
 import { updateModule } from '../../modules/actions'
 import type { Dispatch } from '../../types'
@@ -19,21 +24,31 @@ export function ModuleUpdate(props: Props) {
   const { hasAvailableUpdate, moduleId } = props
   const robotName = useSelector(getConnectedRobotName)
   const dispatch = useDispatch<Dispatch>()
+  const [updateInProgress, setUpdateInProgress] = React.useState(false)
   const buttonText = hasAvailableUpdate ? 'update' : 'updated'
 
   return (
     <div className={styles.module_update_wrapper}>
-      <HoverTooltip tooltipComponent={robotName ? null : CONNECT_TO_UPDATE}>
+      <HoverTooltip
+        tooltipComponent={
+          !robotName && hasAvailableUpdate ? CONNECT_TO_UPDATE : null
+        }
+      >
         {hoverTooltipHandlers => (
           <div {...hoverTooltipHandlers}>
             <OutlineButton
               className={styles.module_update_button}
-              onClick={() =>
+              onClick={() => {
+                setUpdateInProgress(true)
                 robotName && dispatch(updateModule(robotName, moduleId))
-              }
+              }}
               disabled={!robotName || !hasAvailableUpdate}
             >
-              {buttonText}
+              {updateInProgress ? (
+                <Icon name="ot-spinner" height="1em" spin />
+              ) : (
+                buttonText
+              )}
             </OutlineButton>
           </div>
         )}