WIP

app/src/App/OnDeviceDisplayApp.tsx

@@ -85,12 +85,13 @@ export const ON_DEVICE_DISPLAY_PATHS = [
   '/welcome',
 ] as const
 
+// TOME: THIS IS FOR DEV PURPOSES ONLY - DO NOT COMMIT THIS!
 function getPathComponent(
   path: typeof ON_DEVICE_DISPLAY_PATHS[number]
 ): JSX.Element {
   switch (path) {
     case '/dashboard':
-      return <RobotDashboard />
+      return <RunningProtocol />
     case '/deck-configuration':
       return <DeckConfigurationEditor />
     case '/emergency-stop':

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

@@ -1,3 +1,18 @@
 {
-  "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",
+  "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,88 @@
+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'
+
+interface ErrorRecoveryHeaderProps {
+  errorType?: string
+}
+export function ErrorRecoveryHeader({
+  errorType,
+}: ErrorRecoveryHeaderProps): JSX.Element {
+  const { t } = useTranslation('error_recovery')
+  const errorName = useErrorName(errorType)
+
+  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/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,114 @@
+import * as React from 'react'
+import { useTranslation } from 'react-i18next'
+
+import {
+  DIRECTION_COLUMN,
+  Flex,
+  JUSTIFY_SPACE_BETWEEN,
+  SPACING,
+  StyledText,
+} from '@opentrons/components'
+
+import { getErrorKind } from '../utils'
+import {
+  ERROR_KINDS,
+  RECOVERY_ROUTES,
+  GENERAL_ERROR_OPTIONS,
+  ODD_SECTION_TITLE_STYLE,
+} from '../constants'
+import { RadioButton } from '../../../atoms/buttons'
+
+import type { RecoveryContentProps, RecoveryRoute } from '../types'
+import { RecoveryFooterButtons } from './shared'
+
+// 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,
+  errorType,
+  routeUpdateActions,
+}: RecoveryContentProps): JSX.Element | null {
+  const { t } = useTranslation('error_recovery')
+  const { proceedToRoute } = routeUpdateActions
+  const [selectedRoute, setSelectedRoute] = React.useState<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
+            setSelectedRoute={setSelectedRoute}
+            selectedRoute={selectedRoute}
+            errorType={errorType}
+          />
+        </Flex>
+        <RecoveryFooterButtons
+          isOnDevice={isOnDevice}
+          primaryBtnOnClick={() =>
+            proceedToRoute(selectedRoute as RecoveryRoute)
+          }
+          secondaryBtnOnClick={() =>
+            proceedToRoute(RECOVERY_ROUTES.BEFORE_BEGINNING)
+          }
+        />
+      </Flex>
+    )
+  } else {
+    return null
+  }
+}
+
+interface RecoveryOptionsProps {
+  setSelectedRoute: (route: RecoveryRoute) => void
+  selectedRoute?: RecoveryRoute
+  errorType?: string
+}
+export function RecoveryOptions({
+  errorType,
+  selectedRoute,
+  setSelectedRoute,
+}: RecoveryOptionsProps): JSX.Element[] {
+  const validRecoveryOptions = getRecoveryOptions(errorType)
+  const { t } = useTranslation('error_recovery')
+
+  return validRecoveryOptions.map((recoveryOption: RecoveryRoute) => {
+    const buildOptionName = (): string => {
+      switch (recoveryOption) {
+        case RECOVERY_ROUTES.RESUME:
+          return t('resume')
+        case RECOVERY_ROUTES.CANCEL_RUN:
+          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(errorType?: string): RecoveryRoute[] {
+  const errorKind = getErrorKind(errorType)
+
+  switch (errorKind) {
+    case ERROR_KINDS.GENERAL_ERROR:
+      return GENERAL_ERROR_OPTIONS
+  }
+}