feat(app): Add Error Recovery ErrorDetails desktop support (#15784)

Closes EXEC-627

Author: mjhuff

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

@@ -16,6 +16,7 @@
   "continue_run_now": "Continue run now",
   "continue_to_drop_tip": "Continue to drop tip",
   "error": "Error",
+  "error_details": "Error details",
   "error_on_robot": "Error on {{robot}}",
   "failed_dispense_step_not_completed": "<block>The failed dispense step will not be completed. The run will continue from the next step with the attached tips.</block><block>Close the robot door before proceeding.</block>",
   "failed_step": "Failed step",
@@ -40,6 +41,7 @@
   "recovery_action_failed": "{{action}} failed",
   "recovery_mode": "Recovery Mode",
   "recovery_mode_explanation": "<block>Recovery Mode provides you with guided and manual controls for handling errors at runtime.</block><br/><block>You can make changes to ensure the step in progress when the error occurred can be completed or choose to cancel the protocol. When changes are made and no subsequent errors are detected, the method completes. Depending on the conditions that caused the error, you will only be provided with appropriate options.</block>",
+  "remove_tips_from_pipette": "Remove tips from {{mount}} pipette before canceling the run?",
   "replace_tips_and_select_location": "It's best to replace tips and select the last location used for tip pickup.",
   "replace_used_tips_in_rack_location": "Replace used tips in rack location {{location}} in slot {{slot}}",
   "replace_with_new_tip_rack": "Replace with new tip rack in slot {{slot}}",
@@ -72,6 +74,5 @@
   "tip_not_detected": "Tip not detected",
   "view_error_details": "View error details",
   "view_recovery_options": "View recovery options",
-  "you_can_still_drop_tips": "You can still drop the attached tips before proceeding to tip selection.",
-  "remove_tips_from_pipette": "Remove tips from {{mount}} pipette before canceling the run?"
+  "you_can_still_drop_tips": "You can still drop the attached tips before proceeding to tip selection."
 }

app/src/molecules/InterventionModal/index.tsx

@@ -179,6 +179,8 @@ const ICON_STYLE = css`
   width: ${SPACING.spacing16};
   height: ${SPACING.spacing16};
   margin: ${SPACING.spacing4};
+  cursor: pointer;
+
   @media (${RESPONSIVENESS.touchscreenMediaQuerySpecs}) {
     width: ${SPACING.spacing32};
     height: ${SPACING.spacing32};

app/src/organisms/Devices/ProtocolRun/ProtocolRunHeader.tsx

@@ -297,7 +297,6 @@ export function ProtocolRunHeader({
     <>
       {isERActive ? (
         <ErrorRecoveryFlows
-          isFlex={true}
           runStatus={runStatus}
           runId={runId}
           failedCommand={failedCommand}

app/src/organisms/ErrorRecoveryFlows/ErrorRecoveryWizard.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
+import { css } from 'styled-components'
 
 import { StyledText } from '@opentrons/components'
 
@@ -101,7 +102,13 @@ export function ErrorRecoveryComponent(
   }
 
   const buildIconHeading = (): JSX.Element => (
-    <StyledText oddStyle="bodyTextSemiBold" desktopStyle="bodyDefaultSemiBold">
+    <StyledText
+      oddStyle="bodyTextSemiBold"
+      desktopStyle="bodyDefaultSemiBold"
+      css={css`
+        cursor: pointer;
+      `}
+    >
       {t('view_error_details')}
     </StyledText>
   )
@@ -119,18 +126,23 @@ export function ErrorRecoveryComponent(
     !isDoorOpen &&
     route === RECOVERY_MAP.DROP_TIP_FLOWS.ROUTE &&
     step !== RECOVERY_MAP.DROP_TIP_FLOWS.STEPS.BEGIN_REMOVAL
+  const desktopType = isLargeDesktopStyle ? 'desktop-large' : 'desktop-small'
 
   return (
     <RecoveryInterventionModal
       iconHeading={buildIconHeading()}
       titleHeading={buildTitleHeading()}
       iconHeadingOnClick={toggleModal}
       iconName="information"
-      desktopType={isLargeDesktopStyle ? 'desktop-large' : 'desktop-small'}
+      desktopType={desktopType}
       isOnDevice={isOnDevice}
     >
       {showModal ? (
-        <ErrorDetailsModal {...props} toggleModal={toggleModal} />
+        <ErrorDetailsModal
+          {...props}
+          toggleModal={toggleModal}
+          desktopType={desktopType}
+        />
       ) : null}
       {buildInterventionContent()}
     </RecoveryInterventionModal>

app/src/organisms/ErrorRecoveryFlows/RecoveryOptions/ManageTips.tsx

@@ -11,7 +11,6 @@ import {
   StyledText,
   RESPONSIVENESS,
 } from '@opentrons/components'
-import { FLEX_ROBOT_TYPE, OT2_ROBOT_TYPE } from '@opentrons/shared-data'
 
 import { RadioButton } from '../../../atoms/buttons'
 import {
@@ -187,10 +186,10 @@ function DropTipFlowsContainer(
   props: RecoveryContentProps
 ): JSX.Element | null {
   const {
+    robotType,
     tipStatusUtils,
     routeUpdateActions,
     recoveryCommands,
-    isFlex,
     currentRecoveryOptionUtils,
   } = props
   const { DROP_TIP_FLOWS, ROBOT_CANCELING, RETRY_NEW_TIPS } = RECOVERY_MAP
@@ -229,7 +228,7 @@ function DropTipFlowsContainer(
   return (
     <RecoverySingleColumnContentWrapper>
       <DropTipWizardFlows
-        robotType={isFlex ? FLEX_ROBOT_TYPE : OT2_ROBOT_TYPE}
+        robotType={robotType}
         closeFlow={onCloseFlow}
         mount={mount}
         instrumentModelSpecs={specs}

app/src/organisms/ErrorRecoveryFlows/RunPausedSplash.tsx

@@ -20,7 +20,6 @@ import {
   StyledText,
   JUSTIFY_END,
   PrimaryButton,
-  ALIGN_FLEX_END,
   SecondaryButton,
 } from '@opentrons/components'
 
@@ -115,7 +114,7 @@ export function RunPausedSplash(
           <Flex width="49rem" justifyContent={JUSTIFY_CENTER}>
             <StepInfo
               {...props}
-              textStyle="level3HeaderBold"
+              oddStyle="level3HeaderBold"
               overflow="hidden"
               overflowWrap={OVERFLOW_WRAP_BREAK_WORD}
               color={COLORS.white}
@@ -155,7 +154,6 @@ export function RunPausedSplash(
           <Flex
             gridGap={SPACING.spacing24}
             flexDirection={DIRECTION_COLUMN}
-            alignItems={ALIGN_FLEX_END}
             justifyContent={JUSTIFY_SPACE_BETWEEN}
           >
             <Flex
@@ -180,7 +178,7 @@ export function RunPausedSplash(
                 <StyledText desktopStyle="headingSmallBold">{title}</StyledText>
                 <StepInfo
                   {...props}
-                  textStyle="bodyDefaultRegular"
+                  desktopStyle="bodyDefaultRegular"
                   overflow="hidden"
                   overflowWrap={OVERFLOW_WRAP_BREAK_WORD}
                   textAlign={TEXT_ALIGN_CENTER}

app/src/organisms/ErrorRecoveryFlows/__fixtures__/index.ts

@@ -58,7 +58,6 @@ export const mockRecoveryContentProps: RecoveryContentProps = {
   robotType: FLEX_ROBOT_TYPE,
   runId: 'MOCK_RUN_ID',
   isDoorOpen: false,
-  isFlex: true,
   isOnDevice: true,
   runStatus: RUN_STATUS_AWAITING_RECOVERY,
   recoveryMap: {

app/src/organisms/ErrorRecoveryFlows/__tests__/ErrorRecoveryFlows.test.tsx

@@ -129,7 +129,6 @@ describe('ErrorRecovery', () => {
       runStatus: RUN_STATUS_AWAITING_RECOVERY,
       failedCommand: mockFailedCommand,
       runId: 'MOCK_RUN_ID',
-      isFlex: true,
       protocolAnalysis: {} as any,
     }
     vi.mocked(ErrorRecoveryWizard).mockReturnValue(<div>MOCK WIZARD</div>)

app/src/organisms/ErrorRecoveryFlows/constants.ts

@@ -1,6 +1,6 @@
 import { css } from 'styled-components'
 
-import { SPACING, TYPOGRAPHY, RESPONSIVENESS } from '@opentrons/components'
+import { SPACING, RESPONSIVENESS } from '@opentrons/components'
 
 import type { StepOrder } from './types'
 
@@ -204,10 +204,6 @@ export const INVALID = 'INVALID' as const
  * Styling
  */
 
-export const BODY_TEXT_STYLE = css`
-  ${TYPOGRAPHY.bodyTextRegular};
-`
-
 export const ODD_SECTION_TITLE_STYLE = css`
   margin-bottom: ${SPACING.spacing16};
 `

app/src/organisms/ErrorRecoveryFlows/hooks/useERUtils.ts

@@ -1,4 +1,5 @@
 import { useInstrumentsQuery } from '@opentrons/react-api-client'
+import { FLEX_ROBOT_TYPE } from '@opentrons/shared-data'
 
 import { useRouteUpdateActions } from './useRouteUpdateActions'
 import { useRecoveryCommands } from './useRecoveryCommands'
@@ -56,7 +57,6 @@ export interface ERUtilsResults {
 const SUBSEQUENT_COMMAND_DEPTH = 2
 // Builds various Error Recovery utilities.
 export function useERUtils({
-  isFlex,
   failedCommand,
   runId,
   toggleERWizard,
@@ -96,7 +96,7 @@ export function useERUtils({
 
   const tipStatusUtils = useRecoveryTipStatus({
     runId,
-    isFlex,
+    isFlex: robotType === FLEX_ROBOT_TYPE,
     runRecord,
     attachedInstruments,
   })