app(fix): Fix error recovery on desktop DQA

app/src/molecules/InterventionModal/index.tsx

@@ -179,14 +179,12 @@ export function InterventionModal({
 }
 
 const ICON_STYLE = css`
-  width: ${SPACING.spacing16};
-  height: ${SPACING.spacing16};
+  width: ${SPACING.spacing32};
+  height: ${SPACING.spacing32};
   margin: ${SPACING.spacing4};
   cursor: ${CURSOR_POINTER};
 
   @media (${RESPONSIVENESS.touchscreenMediaQuerySpecs}) {
-    width: ${SPACING.spacing32};
-    height: ${SPACING.spacing32};
     margin: ${SPACING.spacing12};
   }
 `

app/src/organisms/ErrorRecoveryFlows/ErrorRecoveryWizard.tsx

@@ -119,10 +119,7 @@ export function ErrorRecoveryComponent(
   const buildTitleHeading = (): JSX.Element => {
     const titleText = hasLaunchedRecovery ? t('recovery_mode') : t('cancel_run')
     return (
-      <StyledText
-        oddStyle="level4HeaderBold"
-        desktopStyle="headingSmallRegular"
-      >
+      <StyledText oddStyle="level4HeaderBold" desktopStyle="bodyLargeSemiBold">
         {titleText}
       </StyledText>
     )

app/src/organisms/ErrorRecoveryFlows/RecoveryTakeover.tsx

@@ -120,9 +120,17 @@ export function RecoveryTakeoverDesktop({
 }: RecoveryTakeoverProps): JSX.Element {
   const { t } = useTranslation('error_recovery')
 
+  const buildTitleHeadingDesktop = (): JSX.Element => {
+    return (
+      <StyledText desktopStyle="bodyLargeSemiBold">
+        {t('error_on_robot', { robot: robotName })}
+      </StyledText>
+    )
+  }
+
   return (
     <RecoveryInterventionModal
-      titleHeading={t('error_on_robot', { robot: robotName })}
+      titleHeading={buildTitleHeadingDesktop()}
       desktopType={'desktop-small'}
       isOnDevice={false}
     >

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

@@ -94,13 +94,13 @@ describe('useRecoveryToasts', () => {
 
     result.current.makeSuccessToast()
     expect(mockMakeToast).toHaveBeenCalledWith(
-      'Retrying step 1 succeeded.',
+      'test command',
       'success',
       expect.objectContaining({
         closeButton: true,
         disableTimeout: true,
         displayType: 'desktop',
-        heading: expect.any(String),
+        heading: 'Retrying step 1 succeeded.',
       })
     )
   })
@@ -209,8 +209,8 @@ describe('useRecoveryFullCommandText', () => {
     const { result } = renderHook(() =>
       useRecoveryFullCommandText({
         robotType: FLEX_ROBOT_TYPE,
-        stepNumber: 0,
-        commandTextData: { commands: [TEST_COMMAND] } as any,
+        stepNumber: 1,
+        commandTextData: { commands: [TEST_COMMAND, {}] } as any,
         allRunDefs: [],
       })
     )
@@ -259,7 +259,7 @@ describe('useRecoveryFullCommandText', () => {
     const { result } = renderHook(() =>
       useRecoveryFullCommandText({
         robotType: FLEX_ROBOT_TYPE,
-        stepNumber: 0,
+        stepNumber: 1,
         commandTextData: {
           commands: [TC_COMMAND],
         } as any,
@@ -279,9 +279,9 @@ describe('useRecoveryFullCommandText', () => {
     const { result } = renderHook(() =>
       useRecoveryFullCommandText({
         robotType: FLEX_ROBOT_TYPE,
-        stepNumber: 0,
+        stepNumber: 1,
         commandTextData: {
-          commands: [TC_COMMAND],
+          commands: [TC_COMMAND, {}],
         } as any,
         allRunDefs: [],
       })

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

@@ -110,8 +110,9 @@ export function useRecoveryFullCommandText(
 ): string | null {
   const { commandTextData, stepNumber } = props
 
+  // TODO TOME: I think you are looking one command to far, for some reason.
   const relevantCmdIdx = stepNumber ?? -1
-  const relevantCmd = commandTextData?.commands[relevantCmdIdx] ?? null
+  const relevantCmd = commandTextData?.commands[relevantCmdIdx - 1] ?? null
 
   const { commandText, kind } = useCommandTextString({
     ...props,

app/src/organisms/ErrorRecoveryFlows/index.tsx

@@ -1,4 +1,4 @@
-import { useMemo, useEffect, useState } from 'react'
+import { useMemo, useLayoutEffect, useState } from 'react'
 import { useSelector } from 'react-redux'
 
 import {
@@ -65,13 +65,15 @@ export function useErrorRecoveryFlows(
   runStatus: RunStatus | null
 ): UseErrorRecoveryResult {
   const [isERActive, setIsERActive] = useState(false)
-  const [hasSeenAwaitingRecovery, setHasSeenAwaitingRecovery] = useState(false)
   const failedCommand = useCurrentlyRecoveringFrom(runId, runStatus)
 
   // The complexity of this logic exists to persist Error Recovery screens past the server's definition of Error Recovery.
   // Ex, show a "cancelling run" modal in Error Recovery flows despite the robot no longer being in a recoverable state.
 
-  const isValidERStatus = (status: RunStatus | null): boolean => {
+  const isValidERStatus = (
+    status: RunStatus | null,
+    hasSeenAwaitingRecovery: boolean
+  ): boolean => {
     return (
       status !== null &&
       (status === RUN_STATUS_AWAITING_RECOVERY ||
@@ -81,31 +83,20 @@ export function useErrorRecoveryFlows(
 
   // If client accesses a valid ER runs status besides AWAITING_RECOVERY but accesses it outside of Error Recovery flows,
   // don't show ER.
-  useEffect(() => {
+  useLayoutEffect(() => {
     if (runStatus != null) {
       const isAwaitingRecovery =
         VALID_ER_RUN_STATUSES.includes(runStatus) &&
-        runStatus !== RUN_STATUS_STOP_REQUESTED
+        runStatus !== RUN_STATUS_STOP_REQUESTED &&
+        failedCommand != null // Prevents one render cycle of an unknown failed command.
 
-      if (isAwaitingRecovery && !hasSeenAwaitingRecovery) {
-        setHasSeenAwaitingRecovery(true)
+      if (isAwaitingRecovery) {
+        setIsERActive(isValidERStatus(runStatus, true))
       } else if (INVALID_ER_RUN_STATUSES.includes(runStatus)) {
-        setHasSeenAwaitingRecovery(false)
+        setIsERActive(isValidERStatus(runStatus, false))
       }
     }
-  }, [runStatus, hasSeenAwaitingRecovery])
-
-  // Manage isERActive state, the condition that actually renders Error Recovery.
-  useEffect(() => {
-    const shouldBeActive =
-      isValidERStatus(runStatus) &&
-      // The failedCommand is null when a stop is requested, but we still want to persist Error Recovery in specific circumstances.
-      (failedCommand !== null || runStatus === RUN_STATUS_STOP_REQUESTED)
-
-    if (shouldBeActive !== isERActive) {
-      setIsERActive(shouldBeActive)
-    }
-  }, [runStatus, failedCommand, hasSeenAwaitingRecovery, isERActive])
+  }, [runStatus, failedCommand])
 
   return {
     isERActive,

app/src/organisms/InterventionModal/PauseInterventionContent.tsx

@@ -10,9 +10,8 @@ import {
   Flex,
   RESPONSIVENESS,
   SPACING,
-  TYPOGRAPHY,
   useInterval,
-  LegacyStyledText,
+  StyledText,
 } from '@opentrons/components'
 
 import { EMPTY_TIMESTAMP } from '/app/resources/runs'
@@ -61,20 +60,6 @@ const PAUSE_HEADER_STYLE = css`
   }
 `
 
-const PAUSE_TEXT_STYLE = css`
-  ${TYPOGRAPHY.h1Default}
-  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
-    ${TYPOGRAPHY.level4HeaderSemiBold}
-  }
-`
-
-const PAUSE_TIME_STYLE = css`
-  ${TYPOGRAPHY.h1Default}
-  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
-    ${TYPOGRAPHY.level1Header}
-  }
-`
-
 interface PauseHeaderProps {
   startedAt: string | null
 }
@@ -95,10 +80,15 @@ function PauseHeader({ startedAt }: PauseHeaderProps): JSX.Element {
 
   return (
     <Flex css={PAUSE_HEADER_STYLE}>
-      <LegacyStyledText css={PAUSE_TEXT_STYLE}>
+      <StyledText
+        desktopStyle="bodyDefaultSemiBold"
+        oddStyle="level4HeaderSemiBold"
+      >
         {i18n.format(t('paused_for'), 'capitalize')}
-      </LegacyStyledText>
-      <LegacyStyledText css={PAUSE_TIME_STYLE}>{runTime}</LegacyStyledText>
+      </StyledText>
+      <StyledText desktopStyle="bodyDefaultSemiBold" oddStyle="level1Header">
+        {runTime}
+      </StyledText>
     </Flex>
   )
 }