feat(app): Add Error Recovery orchestrator

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

@@ -1,3 +1,19 @@
 {
-  "run_paused": "Run paused"
+  "are_you_sure_you_want_to_resume": "Are you sure you want to resume?",
+  "before_you_begin": "Before you begin",
+  "cancel_run": "Cancel run",
+  "confirm": "Confirm",
+  "continue": "Continue",
+  "general_error": "General error",
+  "general_error_message": "<Placeholder>",
+  "go_back": "Go back",
+  "how_do_you_want_to_proceed": "How do you want to proceed?",
+  "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>",
+  "resume": "Resume",
+  "run_paused": "Run paused",
+  "run_will_resume": "The run will resume from the point at which the error occurred. Take any necessary actions to correct the problem first. If the step is completed successfully, the protocol continues.",
+  "stand_back": "Stand back, robot is in motion",
+  "stand_back_resuming": "Stand back, resuming current step",
+  "view_recovery_options": "View recovery options"
 }

app/src/organisms/ErrorRecoveryFlows/BeforeBeginning.tsx

@@ -0,0 +1,60 @@
+import * as React from 'react'
+import { Trans, useTranslation } from 'react-i18next'
+
+import {
+  DIRECTION_COLUMN,
+  Flex,
+  JUSTIFY_SPACE_BETWEEN,
+  SPACING,
+  JUSTIFY_CENTER,
+  StyledText,
+} from '@opentrons/components'
+
+import { SmallButton } from '../../atoms/buttons'
+import {
+  NON_SANCTIONED_RECOVERY_COLOR_STYLE_PRIMARY,
+  BODY_TEXT_STYLE,
+  ODD_SECTION_TITLE_STYLE,
+} from './constants'
+
+import type { RecoveryContentProps } from './types'
+
+export function BeforeBeginning({
+  isOnDevice,
+  routeUpdateActions,
+}: RecoveryContentProps): JSX.Element | null {
+  const { t } = useTranslation('error_recovery')
+  const { proceedNextStep } = routeUpdateActions
+
+  if (isOnDevice) {
+    return (
+      <Flex
+        padding={SPACING.spacing32}
+        flexDirection={DIRECTION_COLUMN}
+        justifyContent={JUSTIFY_SPACE_BETWEEN}
+        height="100%"
+      >
+        <Flex flexDirection={DIRECTION_COLUMN} height="100%">
+          <StyledText css={ODD_SECTION_TITLE_STYLE} as="h4SemiBold">
+            {t('before_you_begin')}
+          </StyledText>
+          <Trans
+            t={t}
+            i18nKey={'error_recovery:recovery_mode_explanation'}
+            components={{ block: <StyledText as="p" css={BODY_TEXT_STYLE} /> }}
+          />
+          <SmallButton
+            buttonType="primary"
+            css={NON_SANCTIONED_RECOVERY_COLOR_STYLE_PRIMARY}
+            buttonText={t('view_recovery_options')}
+            justifyContent={JUSTIFY_CENTER}
+            onClick={proceedNextStep}
+            marginTop="auto"
+          />
+        </Flex>
+      </Flex>
+    )
+  } else {
+    return null
+  }
+}

app/src/organisms/ErrorRecoveryFlows/ErrorRecoveryHeader.tsx

@@ -0,0 +1,90 @@
+import * as React from 'react'
+import { useTranslation } from 'react-i18next'
+import { css } from 'styled-components'
+
+import {
+  Box,
+  DIRECTION_ROW,
+  BORDERS,
+  ALIGN_CENTER,
+  Flex,
+  JUSTIFY_SPACE_BETWEEN,
+  TYPOGRAPHY,
+  COLORS,
+  SPACING,
+  RESPONSIVENESS,
+  StyledText,
+  Icon,
+} from '@opentrons/components'
+
+import { useErrorName } from './utils'
+import { NON_DESIGN_SANCTIONED_COLOR_1 } from './constants'
+
+import type { ErrorKind } from './types'
+
+interface ErrorRecoveryHeaderProps {
+  errorKind: ErrorKind
+}
+export function ErrorRecoveryHeader({
+  errorKind,
+}: ErrorRecoveryHeaderProps): JSX.Element {
+  const { t } = useTranslation('error_recovery')
+  const errorName = useErrorName(errorKind)
+
+  return (
+    <Box css={BOX_STYLE}>
+      <Flex css={HEADER_CONTAINER_STYLE}>
+        <Flex
+          flexDirection={DIRECTION_ROW}
+          justifyContent={JUSTIFY_SPACE_BETWEEN}
+          alignItems={ALIGN_CENTER}
+          width="100%"
+        >
+          <StyledText css={HEADER_TEXT_STYLE}>{t('recovery_mode')}</StyledText>
+          <Flex gridGap={SPACING.spacing8}>
+            <AlertHeaderIcon />
+            <StyledText css={HEADER_TEXT_STYLE}>{errorName}</StyledText>
+          </Flex>
+        </Flex>
+      </Flex>
+    </Box>
+  )
+}
+
+function AlertHeaderIcon(): JSX.Element {
+  return (
+    <Icon
+      name="ot-alert"
+      css={css`
+        color: ${COLORS.white};
+      `}
+      size="1.75rem"
+    />
+  )
+}
+
+const BOX_STYLE = css`
+  background-color: ${NON_DESIGN_SANCTIONED_COLOR_1};
+  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+    border-radius: ${BORDERS.borderRadius12} ${BORDERS.borderRadius12} 0 0;
+  }
+`
+const HEADER_CONTAINER_STYLE = css`
+  flex-direction: ${DIRECTION_ROW};
+  justify-content: ${JUSTIFY_SPACE_BETWEEN};
+  padding: ${SPACING.spacing16} ${SPACING.spacing32};
+  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+    padding: 1.75rem ${SPACING.spacing32};
+  }
+`
+const HEADER_TEXT_STYLE = css`
+  ${TYPOGRAPHY.pSemiBold}
+  color: ${COLORS.white};
+  cursor: default;
+
+  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+    font-size: ${TYPOGRAPHY.fontSize22};
+    font-weight: ${TYPOGRAPHY.fontWeightBold};
+    line-height: ${TYPOGRAPHY.lineHeight28};
+  }
+`

app/src/organisms/ErrorRecoveryFlows/RecoveryInProgress.tsx

@@ -0,0 +1,30 @@
+import * as React from 'react'
+import { useTranslation } from 'react-i18next'
+
+import { InProgressModal } from '../../molecules/InProgressModal/InProgressModal'
+import { RECOVERY_MAP } from './constants'
+
+import type { RobotMovingRoute, RecoveryContentProps } from './types'
+
+export function RecoveryInProgress({
+  recoveryMap,
+}: RecoveryContentProps): JSX.Element {
+  const { ROBOT_IN_MOTION, ROBOT_RESUMING } = RECOVERY_MAP
+  const { t } = useTranslation('error_recovery')
+  const { route } = recoveryMap
+
+  const buildDescription = (): RobotMovingRoute => {
+    switch (route) {
+      case ROBOT_IN_MOTION.ROUTE:
+        return t('stand_back')
+      case ROBOT_RESUMING.ROUTE:
+        return t('stand_back_resuming')
+      default:
+        return t('stand_back')
+    }
+  }
+
+  const description = buildDescription()
+
+  return <InProgressModal description={description} />
+}

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

@@ -0,0 +1,62 @@
+import * as React from 'react'
+import { useTranslation } from 'react-i18next'
+
+import {
+  ALIGN_CENTER,
+  DIRECTION_COLUMN,
+  Flex,
+  Icon,
+  JUSTIFY_SPACE_BETWEEN,
+  SPACING,
+  StyledText,
+} from '@opentrons/components'
+
+import { RecoveryFooterButtons } from './shared'
+
+import type { RecoveryContentProps } from '../types'
+
+export function ResumeRun({
+  isOnDevice,
+  onComplete,
+  routeUpdateActions,
+}: RecoveryContentProps): JSX.Element | null {
+  const { t } = useTranslation('error_recovery')
+  const { goBackPrevStep } = routeUpdateActions
+
+  if (isOnDevice) {
+    return (
+      <Flex
+        padding={SPACING.spacing32}
+        gridGap={SPACING.spacing24}
+        flexDirection={DIRECTION_COLUMN}
+        justifyContent={JUSTIFY_SPACE_BETWEEN}
+        alignItems={ALIGN_CENTER}
+        height="100%"
+      >
+        <Flex
+          flexDirection={DIRECTION_COLUMN}
+          alignItems={ALIGN_CENTER}
+          gridGap={SPACING.spacing24}
+          height="100%"
+          width="848px"
+        >
+          <Icon name="ot-alert" size="3.75rem" marginTop={SPACING.spacing24} />
+          <StyledText as="h3Bold">
+            {t('are_you_sure_you_want_to_resume')}
+          </StyledText>
+          <StyledText as="h4" textAlign={ALIGN_CENTER}>
+            {t('run_will_resume')}
+          </StyledText>
+        </Flex>
+        <RecoveryFooterButtons
+          isOnDevice={isOnDevice}
+          primaryBtnOnClick={onComplete}
+          secondaryBtnOnClick={goBackPrevStep}
+          primaryBtnTextOverride={t('confirm')}
+        />
+      </Flex>
+    )
+  } else {
+    return null
+  }
+}

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

@@ -0,0 +1,118 @@
+import * as React from 'react'
+import head from 'lodash/head'
+import { useTranslation } from 'react-i18next'
+
+import {
+  DIRECTION_COLUMN,
+  Flex,
+  JUSTIFY_SPACE_BETWEEN,
+  SPACING,
+  StyledText,
+} from '@opentrons/components'
+
+import {
+  RECOVERY_MAP,
+  ERROR_KINDS,
+  ODD_SECTION_TITLE_STYLE,
+} from '../constants'
+import { RadioButton } from '../../../atoms/buttons'
+import { RecoveryFooterButtons } from './shared'
+
+import type { ErrorKind, RecoveryContentProps, RecoveryRoute } from '../types'
+
+// The "home" screen within Error Recovery. When a user completes a non-terminal flow or presses "Go back" enough
+// to escape the boundaries of a route, they will be redirected here.
+export function SelectRecoveryOption({
+  isOnDevice,
+  errorKind,
+  routeUpdateActions,
+}: RecoveryContentProps): JSX.Element | null {
+  const { t } = useTranslation('error_recovery')
+  const { proceedToRoute } = routeUpdateActions
+  const validRecoveryOptions = getRecoveryOptions(errorKind)
+  const [selectedRoute, setSelectedRoute] = React.useState<RecoveryRoute>(
+    head(validRecoveryOptions) as RecoveryRoute
+  )
+
+  if (isOnDevice) {
+    return (
+      <Flex
+        padding={SPACING.spacing32}
+        flexDirection={DIRECTION_COLUMN}
+        justifyContent={JUSTIFY_SPACE_BETWEEN}
+        height="100%"
+      >
+        <StyledText css={ODD_SECTION_TITLE_STYLE} as="h4SemiBold">
+          {t('how_do_you_want_to_proceed')}
+        </StyledText>
+        <Flex flexDirection={DIRECTION_COLUMN} gridGap={SPACING.spacing4}>
+          <RecoveryOptions
+            validRecoveryOptions={validRecoveryOptions}
+            setSelectedRoute={setSelectedRoute}
+            selectedRoute={selectedRoute}
+          />
+        </Flex>
+        <RecoveryFooterButtons
+          isOnDevice={isOnDevice}
+          primaryBtnOnClick={() =>
+            proceedToRoute(selectedRoute as RecoveryRoute)
+          }
+          secondaryBtnOnClick={() =>
+            proceedToRoute(RECOVERY_MAP.BEFORE_BEGINNING.ROUTE)
+          }
+        />
+      </Flex>
+    )
+  } else {
+    return null
+  }
+}
+
+interface RecoveryOptionsProps {
+  validRecoveryOptions: RecoveryRoute[]
+  setSelectedRoute: (route: RecoveryRoute) => void
+  selectedRoute?: RecoveryRoute
+}
+export function RecoveryOptions({
+  validRecoveryOptions,
+  selectedRoute,
+  setSelectedRoute,
+}: RecoveryOptionsProps): JSX.Element[] {
+  const { t } = useTranslation('error_recovery')
+
+  return validRecoveryOptions.map((recoveryOption: RecoveryRoute) => {
+    const buildOptionName = (): string => {
+      switch (recoveryOption) {
+        case RECOVERY_MAP.RESUME.ROUTE:
+          return t('resume')
+        case RECOVERY_MAP.CANCEL_RUN.ROUTE:
+          return t('cancel_run')
+        default:
+          return 'INVALID_OPTION'
+      }
+    }
+    const optionName = buildOptionName()
+
+    return (
+      <RadioButton
+        key={`recovery_option_${optionName}`}
+        buttonLabel={optionName}
+        buttonValue={optionName}
+        onChange={() => setSelectedRoute(recoveryOption)}
+        isSelected={recoveryOption === selectedRoute}
+      />
+    )
+  })
+}
+
+export function getRecoveryOptions(errorKind: ErrorKind): RecoveryRoute[] {
+  switch (errorKind) {
+    case ERROR_KINDS.GENERAL_ERROR:
+      return GENERAL_ERROR_OPTIONS
+  }
+}
+
+export const GENERAL_ERROR_OPTIONS: RecoveryRoute[] = [
+  RECOVERY_MAP.RESUME.ROUTE,
+  RECOVERY_MAP.CANCEL_RUN.ROUTE,
+]