feat(app): oDD firmware update modal for pipettes and gripper (#13062)

fix RLIQ-284

api-client/src/instruments/__fixtures__/index.ts

@@ -22,6 +22,8 @@ export const instrumentsResponseFixture = {
         cursor: 0,
         totalLength: 1,
       },
+      ok: true,
+      subsystem: 'gripper',
     },
   ],
 }

api-client/src/instruments/types.ts

@@ -8,6 +8,7 @@ export interface GripperData {
       last_modified?: string
     }
   }
+  firmwareVersion?: string
   instrumentModel: string
   instrumentType: 'gripper'
   mount: string
@@ -26,6 +27,7 @@ export interface PipetteData {
       last_modified?: string
     }
   }
+  firmwareVersion?: string
   instrumentName: string
   instrumentModel: string
   instrumentType: 'pipette'

app/src/App/OnDeviceDisplayApp.tsx

@@ -18,6 +18,7 @@ import { BackButton } from '../atoms/buttons'
 import { SleepScreen } from '../atoms/SleepScreen'
 import { ToasterOven } from '../organisms/ToasterOven'
 import { MaintenanceRunTakeover } from '../organisms/TakeoverModal'
+import { FirmwareUpdateTakeover } from '../organisms/FirmwareUpdateModal/FirmwareUpdateTakeover'
 import { ConnectViaEthernet } from '../pages/OnDeviceDisplay/ConnectViaEthernet'
 import { ConnectViaUSB } from '../pages/OnDeviceDisplay/ConnectViaUSB'
 import { ConnectViaWifi } from '../pages/OnDeviceDisplay/ConnectViaWifi'
@@ -253,6 +254,7 @@ export const OnDeviceDisplayApp = (): JSX.Element => {
     }
   }, [dispatch, isIdle, usersBrightness])
 
+  // TODO (sb:6/12/23) Create a notification manager to set up preference and order of takeover modals
   return (
     <ApiHostProvider hostname="localhost">
       <ErrorBoundary FallbackComponent={OnDeviceDisplayAppFallback}>
@@ -261,6 +263,7 @@ export const OnDeviceDisplayApp = (): JSX.Element => {
             <SleepScreen />
           ) : (
             <MaintenanceRunTakeover>
+              <FirmwareUpdateTakeover />
               <ToasterOven>
                 <ProtocolReceiptToasts />
                 <Switch>

app/src/assets/localization/en/device_details.json

@@ -1,13 +1,17 @@
 {
+  "about_flex_gripper": "About Flex Gripper",
+  "about_gripper": "About gripper",
   "about_module": "About {{name}}",
   "about_pipette_name": "About {{name}} Pipette",
   "about_pipette": "About pipette",
   "an_error_occurred_while_updating_module": "An error occurred while updating your {{moduleName}}. Please try again.",
   "an_error_occurred_while_updating_please_try_again": "An error occurred while updating your pipette's settings. Please try again.",
   "an_error_occurred_while_updating": "An error occurred while updating your pipette's settings.",
+  "attach_gripper": "Attach gripper",
   "attach_pipette": "Attach pipette",
   "both_mounts": "Both Mounts",
   "bundle_firmware_file_not_found": "Bundled fw file not found for module of type: {{module}}",
+  "calibrate_gripper": "Calibrate gripper",
   "calibrate_now": "Calibrate now",
   "calibrate_pipette_offset": "Calibrate pipette offset",
   "calibrate_pipette": "Calibrate pipette",
@@ -24,13 +28,15 @@
   "deck_cal_missing": "Pipette Offset calibration missing. Calibrate deck first.",
   "deck_slot": "deck slot {{slot}}",
   "delete_run": "Delete protocol run record",
+  "detach_gripper": "Detach gripper",
   "detach_pipette": "Detach pipette",
   "disengaged": "Disengaged",
   "download_run_log": "Download run log",
   "empty": "Empty",
   "error_details": "error details",
   "failed": "failed",
   "firmware_update_available": "Firmware update available.",
+  "firmware_update_available_now": "Firmware update available. <updateLink>Update now</updateLink>",
   "firmware_update_failed": "Failed to update module firmware",
   "firmware_update_installation_successful": "Installation successful",
   "got_it": "Got it",
@@ -41,6 +47,7 @@
   "hot_to_the_touch": "<block>Module is <bold>hot</bold> to the touch</block>",
   "input_out_of_range": "Input out of range",
   "instruments_and_modules": "Instruments and Modules",
+  "instrument_attached": "Instrument attached",
   "labware_bottom": "Labware Bottom",
   "last_run_time": "last run {{number}}",
   "left_right": "Left+Right Mounts",
@@ -89,6 +96,7 @@
   "protocol": "Protocol",
   "ready_to_run": "ready to run",
   "ready": "Ready",
+  "recalibrate_gripper": "Recalibrate gripper",
   "recalibrate_now": "Recalibrate now",
   "recalibrate_pipette_offset": "Recalibrate pipette offset",
   "recalibrate_pipette": "Recalibrate pipette",

app/src/assets/localization/en/firmware_update.json

@@ -0,0 +1,10 @@
+{
+  "download_logs": "Download the robot logs from the Opentrons App and send them to [email protected] for assistance.",
+  "firmware_out_of_date": "The firmware for <bold>{{mount}} {{instrument}}</bold> is out of date. You need to update it before running protocols that use this instrument.",
+  "ready_to_use": "Your <bold>{{instrument}}</bold> is ready to use!",
+  "successful_update": "Successful update!",
+  "update_failed": "Update failed",
+  "update_firmware": "Update firmware",
+  "update_needed": "Instrument firmware update needed",
+  "updating_firmware": "Updating firmware..."
+}

app/src/assets/localization/en/gripper_wizard_flows.json

@@ -1,7 +1,7 @@
 {
   "are_you_sure_exit": "Are you sure you want to exit before completing {{flow}}?",
   "attach_gripper": "Attach Gripper",
-  "attached_gripper_and_screw_in": "Attach the gripper to the robot by alinging the connector and ensuring a secure connection. Hold the gripper in place and use the hex screwdriver to tighten the gripper screws. Then test that the gripper is securely attached by gently pulling it side to side.",
+  "attached_gripper_and_screw_in": "Attach the gripper to the robot by aligning the connector and ensuring a secure connection. Hold the gripper in place and use the hex screwdriver to tighten the gripper screws. Then test that the gripper is securely attached by gently pulling it side to side.",
   "before_you_begin": "Before you begin",
   "begin_calibration": "Begin calibration",
   "calibrate_gripper": "Calibrate gripper",

app/src/assets/localization/en/index.ts

@@ -5,6 +5,7 @@ import protocol_command_text from './protocol_command_text.json'
 import device_details from './device_details.json'
 import device_settings from './device_settings.json'
 import devices_landing from './devices_landing.json'
+import firmware_update from './firmware_update.json'
 import gripper_wizard_flows from './gripper_wizard_flows.json'
 import heater_shaker from './heater_shaker.json'
 import instruments_dashboard from './instruments_dashboard.json'
@@ -35,6 +36,7 @@ export const en = {
   device_details,
   device_settings,
   devices_landing,
+  firmware_update,
   gripper_wizard_flows,
   heater_shaker,
   instruments_dashboard,

app/src/molecules/InstrumentCard/index.tsx

@@ -14,7 +14,7 @@ import {
   SPACING,
   TYPOGRAPHY,
 } from '@opentrons/components'
-import flexGripper from '../../assets/images/flex_gripper.svg'
+import flexGripper from '../../assets/images/flex_gripper.png'
 
 import { useMenuHandleClickOutside } from '../../atoms/MenuList/hooks'
 import { OverflowBtn } from '../../atoms/MenuList/OverflowBtn'
@@ -27,7 +27,7 @@ import type { MenuOverlayItemProps } from './MenuOverlay'
 interface InstrumentCardProps extends StyleProps {
   description: string
   label: string
-  menuOverlayItems: MenuOverlayItemProps[]
+  menuOverlayItems?: MenuOverlayItemProps[]
   hasDivider?: boolean
   instrumentDiagramProps?: InstrumentDiagramProps
   // special casing the gripper at least for now
@@ -75,7 +75,7 @@ export function InstrumentCard(props: InstrumentCardProps): JSX.Element {
           width="3.75rem"
           height="3.75rem"
         >
-          <img src={flexGripper} />
+          <img src={flexGripper} alt="flex gripper" />
         </Flex>
       ) : null}
       {instrumentDiagramProps?.pipetteSpecs != null ? (
@@ -106,21 +106,26 @@ export function InstrumentCard(props: InstrumentCardProps): JSX.Element {
           {description}
         </StyledText>
       </Flex>
-      <Box
-        position={POSITION_ABSOLUTE}
-        top={SPACING.spacing4}
-        right={SPACING.spacing4}
-      >
-        <OverflowBtn onClick={handleOverflowClick} />
-        {menuOverlay}
-        {showOverflowMenu ? (
-          <MenuOverlay
-            hasDivider={hasDivider}
-            menuOverlayItems={menuOverlayItems}
-            setShowMenuOverlay={setShowOverflowMenu}
+      {menuOverlayItems != null && (
+        <Box
+          position={POSITION_ABSOLUTE}
+          top={SPACING.spacing4}
+          right={SPACING.spacing4}
+        >
+          <OverflowBtn
+            onClick={handleOverflowClick}
+            aria-label="InstrumentCard_overflowMenu"
           />
-        ) : null}
-      </Box>
+          {menuOverlay}
+          {showOverflowMenu ? (
+            <MenuOverlay
+              hasDivider={hasDivider}
+              menuOverlayItems={menuOverlayItems}
+              setShowMenuOverlay={setShowOverflowMenu}
+            />
+          ) : null}
+        </Box>
+      )}
     </Flex>
   )
 }

app/src/molecules/WizardRequiredEquipmentList/equipmentImages.ts

@@ -8,5 +8,5 @@ export const equipmentImages = {
   flex_pipette: require('../../assets/images/change-pip/single_mount_pipettes.png'),
   pipette_96: require('../../assets/images/change-pip/ninety-six-channel.png'),
   mounting_plate_96_channel: require('../../assets/images/change-pip/mounting-plate-96-channel.png'),
-  flex_gripper: require('../../assets/images/flex_gripper.svg'),
+  flex_gripper: require('../../assets/images/flex_gripper.png'),
 }