diff --git a/app/src/organisms/ErrorRecoveryFlows/RecoveryOptions/IgnoreErrorSkipStep.tsx b/app/src/organisms/ErrorRecoveryFlows/RecoveryOptions/IgnoreErrorSkipStep.tsx index c5ecf84a61b..b2c6e167f6f 100644 --- a/app/src/organisms/ErrorRecoveryFlows/RecoveryOptions/IgnoreErrorSkipStep.tsx +++ b/app/src/organisms/ErrorRecoveryFlows/RecoveryOptions/IgnoreErrorSkipStep.tsx @@ -1,19 +1,27 @@ import * as React from 'react' import head from 'lodash/head' +import { css } from 'styled-components' import { useTranslation } from 'react-i18next' import { DIRECTION_COLUMN, Flex, SPACING, - LegacyStyledText, + StyledText, + RESPONSIVENESS, } from '@opentrons/components' -import { ODD_SECTION_TITLE_STYLE, RECOVERY_MAP } from '../constants' +import { + ODD_SECTION_TITLE_STYLE, + RECOVERY_MAP, + ODD_ONLY, + DESKTOP_ONLY, +} from '../constants' import { SelectRecoveryOption } from './SelectRecoveryOption' import { RecoveryFooterButtons, RecoverySingleColumnContentWrapper, + RecoveryRadioGroup, } from '../shared' import { RadioButton } from '../../../atoms/buttons' @@ -81,17 +89,50 @@ export function IgnoreErrorStepHome({ } return ( - - + + {t('ignore_similar_errors_later_in_run')} - - + + + + ) => { + setSelectedOption(e.currentTarget.value as IgnoreOption) + }} + options={IGNORE_OPTIONS_IN_ORDER.map(option => { + return { + value: option, + children: ( + + {t(option)} + + ), + } + })} + /> + ) => { setSelected(e.currentTarget.value as RemovalOptions) diff --git a/app/src/organisms/ErrorRecoveryFlows/RecoveryOptions/SelectRecoveryOption.tsx b/app/src/organisms/ErrorRecoveryFlows/RecoveryOptions/SelectRecoveryOption.tsx index a33f2fb7abc..ed9de710db8 100644 --- a/app/src/organisms/ErrorRecoveryFlows/RecoveryOptions/SelectRecoveryOption.tsx +++ b/app/src/organisms/ErrorRecoveryFlows/RecoveryOptions/SelectRecoveryOption.tsx @@ -148,6 +148,7 @@ export function DesktopRecoveryOptions({ }: RecoveryOptionsProps): JSX.Element { return ( { setSelectedRoute(e.currentTarget.value) }} @@ -221,3 +222,7 @@ export const GENERAL_ERROR_OPTIONS: RecoveryRoute[] = [ RECOVERY_MAP.RETRY_FAILED_COMMAND.ROUTE, RECOVERY_MAP.CANCEL_RUN.ROUTE, ] + +const RADIO_GAP = ` + gap: ${SPACING.spacing4}; +` diff --git a/app/src/organisms/ErrorRecoveryFlows/RecoveryOptions/__tests__/IgnoreErrorSkipStep.test.tsx b/app/src/organisms/ErrorRecoveryFlows/RecoveryOptions/__tests__/IgnoreErrorSkipStep.test.tsx index d6241b7dcd9..466c9f65dc7 100644 --- a/app/src/organisms/ErrorRecoveryFlows/RecoveryOptions/__tests__/IgnoreErrorSkipStep.test.tsx +++ b/app/src/organisms/ErrorRecoveryFlows/RecoveryOptions/__tests__/IgnoreErrorSkipStep.test.tsx @@ -105,7 +105,7 @@ describe('IgnoreErrorStepHome', () => { it('calls ignoreOnce when "ignore_only_this_error" is selected and primary button is clicked', async () => { renderIgnoreErrorStepHome(props) - fireEvent.click(screen.getByText('Ignore only this error')) + fireEvent.click(screen.queryAllByText('Ignore only this error')[0]) clickButtonLabeled('Continue') await waitFor(() => { expect(mockProceedToRouteAndStep).toHaveBeenCalledWith( @@ -117,7 +117,7 @@ describe('IgnoreErrorStepHome', () => { it('calls ignoreAlways when "ignore_all_errors_of_this_type" is selected and primary button is clicked', async () => { renderIgnoreErrorStepHome(props) - fireEvent.click(screen.getByText('Ignore all errors of this type')) + fireEvent.click(screen.queryAllByText('Ignore all errors of this type')[0]) clickButtonLabeled('Continue') await waitFor(() => { expect(mockIgnoreErrorKindThisRun).toHaveBeenCalled() diff --git a/app/src/organisms/ErrorRecoveryFlows/shared/TwoColTextAndFailedStepNextStep.tsx b/app/src/organisms/ErrorRecoveryFlows/shared/TwoColTextAndFailedStepNextStep.tsx index 4ed62e8ff8d..a1f959c72fb 100644 --- a/app/src/organisms/ErrorRecoveryFlows/shared/TwoColTextAndFailedStepNextStep.tsx +++ b/app/src/organisms/ErrorRecoveryFlows/shared/TwoColTextAndFailedStepNextStep.tsx @@ -46,9 +46,9 @@ export function TwoColTextAndFailedStepNextStep(