Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

refactor(app): update desktop RecoveryOptions #16528

Merged
merged 1 commit into from
Oct 18, 2024
Merged

refactor(app): update desktop RecoveryOptions #16528

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
86 changes: 18 additions & 68 deletions app/src/organisms/ErrorRecoveryFlows/RecoveryOptions/SelectRecoveryOption.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,14 +14,8 @@ import {
RECOVERY_MAP,
ERROR_KINDS,
ODD_SECTION_TITLE_STYLE,
ODD_ONLY,
DESKTOP_ONLY,
} from '../constants'
import {
RecoveryODDOneDesktopTwoColumnContentWrapper,
RecoveryRadioGroup,
FailedStepNextStep,
} from '../shared'
import { RecoverySingleColumnContentWrapper } from '../shared'

import type { ErrorKind, RecoveryContentProps, RecoveryRoute } from '../types'
import type { PipetteWithTip } from '/app/organisms/DropTipWizardFlows'
Expand Down Expand Up @@ -52,7 +46,7 @@ export function SelectRecoveryOptionHome({
currentRecoveryOptionUtils,
getRecoveryOptionCopy,
analytics,
...rest
isOnDevice,
}: RecoveryContentProps): JSX.Element | null {
const { t } = useTranslation('error_recovery')
const { proceedToRouteAndStep } = routeUpdateActions
Expand All @@ -66,7 +60,7 @@ export function SelectRecoveryOptionHome({
useCurrentTipStatus(determineTipStatus)

return (
<RecoveryODDOneDesktopTwoColumnContentWrapper
<RecoverySingleColumnContentWrapper
footerDetails={{
primaryBtnOnClick: () => {
analytics.reportActionSelectedEvent(selectedRoute)
Expand All @@ -83,44 +77,35 @@ export function SelectRecoveryOptionHome({
>
{t('choose_a_recovery_action')}
</StyledText>
<Flex css={ODD_ONLY}>
<ODDRecoveryOptions
validRecoveryOptions={validRecoveryOptions}
setSelectedRoute={setSelectedRoute}
selectedRoute={selectedRoute}
getRecoveryOptionCopy={getRecoveryOptionCopy}
errorKind={errorKind}
/>
</Flex>
<Flex css={DESKTOP_ONLY}>
<DesktopRecoveryOptions
validRecoveryOptions={validRecoveryOptions}
setSelectedRoute={setSelectedRoute}
selectedRoute={selectedRoute}
getRecoveryOptionCopy={getRecoveryOptionCopy}
errorKind={errorKind}
/>
</Flex>
<RecoveryOptions
validRecoveryOptions={validRecoveryOptions}
setSelectedRoute={setSelectedRoute}
selectedRoute={selectedRoute}
getRecoveryOptionCopy={getRecoveryOptionCopy}
errorKind={errorKind}
isOnDevice={isOnDevice}
/>
</Flex>
<FailedStepNextStep {...rest} />
</RecoveryODDOneDesktopTwoColumnContentWrapper>
</RecoverySingleColumnContentWrapper>
)
}

interface RecoveryOptionsProps {
validRecoveryOptions: RecoveryRoute[]
setSelectedRoute: (route: RecoveryRoute) => void
getRecoveryOptionCopy: RecoveryContentProps['getRecoveryOptionCopy']
errorKind: ErrorKind
errorKind: RecoveryContentProps['errorKind']
isOnDevice: RecoveryContentProps['isOnDevice']
selectedRoute?: RecoveryRoute
}
// For ODD use only.
export function ODDRecoveryOptions({

export function RecoveryOptions({
errorKind,
validRecoveryOptions,
selectedRoute,
setSelectedRoute,
getRecoveryOptionCopy,
isOnDevice,
}: RecoveryOptionsProps): JSX.Element {
return (
<Flex
Expand All @@ -140,45 +125,14 @@ export function ODDRecoveryOptions({
}}
isSelected={recoveryOption === selectedRoute}
radioButtonType="large"
largeDesktopBorderRadius={!isOnDevice}
/>
)
})}
</Flex>
)
}

export function DesktopRecoveryOptions({
errorKind,
validRecoveryOptions,
selectedRoute,
setSelectedRoute,
getRecoveryOptionCopy,
}: RecoveryOptionsProps): JSX.Element {
return (
<RecoveryRadioGroup
css={RADIO_GAP}
onChange={e => {
setSelectedRoute(e.currentTarget.value)
}}
value={selectedRoute}
options={validRecoveryOptions.map(
(option: RecoveryRoute) =>
({
value: option,
children: (
<StyledText
desktopStyle="bodyDefaultRegular"
role="label"
htmlFor={option}
>
{getRecoveryOptionCopy(option, errorKind)}
</StyledText>
),
} as const)
)}
/>
)
}
// Pre-fetch tip attachment status. Users are not blocked from proceeding at this step.
export function useCurrentTipStatus(
determineTipStatus: () => Promise<PipetteWithTip[]>
Expand Down Expand Up @@ -254,7 +208,3 @@ export const GENERAL_ERROR_OPTIONS: RecoveryRoute[] = [
RECOVERY_MAP.RETRY_STEP.ROUTE,
RECOVERY_MAP.CANCEL_RUN.ROUTE,
]

const RADIO_GAP = `
gap: ${SPACING.spacing4};
`
Loading
Loading