WIP

app/src/App/OnDeviceDisplayApp.tsx

@@ -42,6 +42,7 @@ import { InstrumentDetail } from '../pages/InstrumentDetail'
 import { Welcome } from '../pages/Welcome'
 import { InitialLoadingScreen } from '../pages/InitialLoadingScreen'
 import { DeckConfigurationEditor } from '../pages/DeckConfiguration'
+import { ErrorRecoveryFlows } from '../pages/ErrorRecoveryFlows'
 import { PortalRoot as ModalPortalRoot } from './portal'
 import { getOnDeviceDisplaySettings, updateConfigValue } from '../redux/config'
 import { updateBrightness } from '../redux/shell'
@@ -85,12 +86,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,8 @@
 {
-  "run_paused": "Run paused"
+  "before_you_begin": "Before you begin",
+  "general_error": "General error",
+  "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>",
+  "run_paused": "Run paused",
+  "view_recovery_options": "View recovery options"
 }

app/src/organisms/OnDeviceDisplay/RunningProtocol/RunPausedSplash.tsx

@@ -18,13 +18,13 @@ import {
 } from '@opentrons/components'
 
 interface RunPausedSplashProps {
-  onClose: () => void
+  onClick: () => void
   errorType?: string
   protocolName?: string
 }
 
 export function RunPausedSplash({
-  onClose,
+  onClick,
   errorType,
   protocolName,
 }: RunPausedSplashProps): JSX.Element {
@@ -48,7 +48,7 @@ export function RunPausedSplash({
       gridGap={SPACING.spacing40}
       padding={SPACING.spacing120}
       backgroundColor={COLORS.grey50}
-      onClick={onClose}
+      onClick={onClick}
     >
       <SplashFrame>
         <Flex gridGap={SPACING.spacing32} alignItems={ALIGN_CENTER}>

app/src/organisms/OnDeviceDisplay/RunningProtocol/__tests__/RunPausedSplash.test.tsx

@@ -28,7 +28,7 @@ describe('ConfirmCancelRunModal', () => {
 
   beforeEach(() => {
     props = {
-      onClose: mockOnClose,
+      onClick: mockOnClose,
       protocolName: MOCK_PROTOCOL_NAME,
       errorType: '',
     }

app/src/pages/ErrorRecoveryFlows/BeforeBeginning.tsx

@@ -0,0 +1,59 @@
+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, MediumButton } from '../../atoms/buttons'
+import {
+  RECOVERY_COLOR_STYLE,
+  BODY_TEXT_STYLE,
+  ODD_SECTION_TITLE_STYLE,
+} from './constants'
+
+interface BeforeBeginningProps {
+  isOnDevice: boolean
+  proceed: () => void
+}
+export function BeforeBeginning({
+  isOnDevice,
+  proceed,
+}: BeforeBeginningProps): JSX.Element | null {
+  const { t } = useTranslation('error_recovery')
+
+  if (isOnDevice) {
+    return (
+      <Flex
+        padding={SPACING.spacing32}
+        flexDirection={DIRECTION_COLUMN}
+        justifyContent={JUSTIFY_SPACE_BETWEEN}
+        height="100%"
+      >
+        <Flex flexDirection={DIRECTION_COLUMN} height="100%">
+          <Flex css={ODD_SECTION_TITLE_STYLE}>{t('before_you_begin')}</Flex>
+          <Trans
+            t={t}
+            i18nKey={'error_recovery:recovery_mode_explanation'}
+            components={{ block: <StyledText as="p" css={BODY_TEXT_STYLE} /> }}
+          />
+          <SmallButton
+            buttonType="primary"
+            css={RECOVERY_COLOR_STYLE}
+            buttonText={t('view_recovery_options')}
+            justifyContent={JUSTIFY_CENTER}
+            onClick={proceed}
+            marginTop="auto"
+          />
+        </Flex>
+      </Flex>
+    )
+  } else {
+    return null
+  }
+}

app/src/pages/ErrorRecoveryFlows/ErrorRecoveryHeader.tsx

@@ -0,0 +1,82 @@
+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'
+
+// TOME: You'll need the util here for getting this string.
+export function ErrorRecoveryHeader(): JSX.Element {
+  const { t } = useTranslation('error_recovery')
+
+  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}>
+              {t('general_error')}
+            </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: ${COLORS.black90};
+  @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/pages/ErrorRecoveryFlows/SelectRecoveryOption.tsx

@@ -0,0 +1,5 @@
+import * as React from 'react'
+
+export function SelectRecoveryOption(): JSX.Element {
+  return <div>RECOVERY OPTION</div>
+}

app/src/pages/ErrorRecoveryFlows/constants.ts

@@ -0,0 +1,71 @@
+import { css } from 'styled-components'
+
+import { COLORS, SPACING, TYPOGRAPHY } from '@opentrons/components'
+
+import type { RouteStep } from './types'
+
+// A recovery route represents a flow accessible within Error Recovery.
+export const RECOVERY_ROUTES = {
+  OPTION_SELECTION: 'OPTION_SELECTION',
+  BEFORE_BEGINNING: 'BEFORE_BEGINNING',
+  DROP_TIP: 'DROP_TIP',
+  ROBOT_IN_MOTION: 'ROBOT_IN_MOTION',
+} as const
+
+// Valid steps for a particular route.
+export const STEPS = {
+  OPTION_SELECTION: {
+    SELECT: 'SELECT',
+  },
+  BEFORE_BEGINNING: {
+    RECOVERY_DESCRIPTION: 'RECOVERY_DESCRIPTION',
+  },
+  ROBOT_IN_MOTION: {
+    IN_MOTION: 'IN_MOTION',
+  },
+  INVALID: 'INVALID',
+} as const
+
+const { BEFORE_BEGINNING, OPTION_SELECTION, ROBOT_IN_MOTION } = STEPS
+
+export const OPTION_SELECTION_STEPS: RouteStep[] = [OPTION_SELECTION.SELECT]
+export const BEFORE_BEGINNING_STEPS: RouteStep[] = [
+  BEFORE_BEGINNING.RECOVERY_DESCRIPTION,
+]
+export const ROBOT_IN_MOTION_STEPS: RouteStep[] = [ROBOT_IN_MOTION.IN_MOTION]
+
+// Possible recovery options.
+export const RECOVERY_OPTIONS = {
+  REFILL_AND_RESUME: 'REFILL_AND_RESUME',
+  IGNORE_AND_RESUME: 'IGNORE_AND_RESUME',
+  CANCEL_RUN: 'CANCEL_RUN',
+} as const
+
+// Styling
+
+// These colors are temp and will be removed as design does design things.
+const NON_DESIGN_SANCTIONED_COLOR_1 = '#56FF00'
+const NON_DESIGN_SANCTIONED_COLOR_2 = '#FF00EF'
+
+export const RECOVERY_COLOR_STYLE = css`
+  background-color: ${COLORS.black90};
+
+  &:active {
+    background-color: ${NON_DESIGN_SANCTIONED_COLOR_2};
+  }
+  &:hover {
+    background-color: ${NON_DESIGN_SANCTIONED_COLOR_1};
+  }
+  &:focus {
+    background-color: ${NON_DESIGN_SANCTIONED_COLOR_2};
+  }
+`
+
+export const BODY_TEXT_STYLE = css`
+  ${TYPOGRAPHY.bodyTextRegular};
+`
+
+export const ODD_SECTION_TITLE_STYLE = css`
+  ${TYPOGRAPHY.level4HeaderSemiBold}
+  margin-bottom: ${SPACING.spacing16};
+`