Skip to content

Commit 4c4cb09

Browse files
ahiuchingauahiuchingau
authored
fix(app): stacker error recovery should re-engage latch + small cosmetic fixes (#18989)
# Overview This PR: 1. fixes a bug where we have been mistakenly re-engaging the stacker latch in the wrong recovery steps 2. updates the size of stacker animations for error recovery in ODD 3. replaces the old radio button pattern in HoldingLabware screen for the desktop app 4. fixes the stacker icon (the arrow is now filled in)
1 parent 0087438 commit 4c4cb09

18 files changed

+176
-418
lines changed

‎app/src/organisms/ErrorRecoveryFlows/RecoveryOptions/StackerHopperEmptyRetry.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import { RECOVERY_MAP } from '../constants'
22
import {
33
RetryStepInfo,
4+
StackerEnsureShuttleEmpty,
45
StackerHopperLwInfo,
5-
TwoColTextAndImage,
66
} from '../shared'
77
import { SelectRecoveryOption } from './SelectRecoveryOption'
88

@@ -19,7 +19,7 @@ export function StackerHopperEmptyRetry(
1919
case STACKER_HOPPER_EMPTY_RETRY.STEPS.FILL_HOPPER:
2020
return <StackerHopperLwInfo {...props} />
2121
case STACKER_HOPPER_EMPTY_RETRY.STEPS.ENSURE_SHUTTLE_EMPTY:
22-
return <TwoColTextAndImage {...props} />
22+
return <StackerEnsureShuttleEmpty {...props} />
2323
case STACKER_HOPPER_EMPTY_RETRY.STEPS.RETRY:
2424
return <RetryStepInfo {...props} />
2525
default:

‎app/src/organisms/ErrorRecoveryFlows/RecoveryOptions/StackerShuttleEmptyRetry.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,10 @@ import {
44
ReleaseLabware,
55
RetryStepInfo,
66
StackerEmptyHopper,
7+
StackerEnsureShuttleEmpty,
78
StackerHomeShuttle,
89
StackerHopperLwInfo,
910
StackerReengageLatch,
10-
TwoColTextAndImage,
1111
} from '../shared'
1212
import { SelectRecoveryOption } from './SelectRecoveryOption'
1313

@@ -34,7 +34,7 @@ export function StackerShuttleEmptyRetry(
3434
case STACKER_SHUTTLE_EMPTY_RETRY.STEPS.FILL_HOPPER:
3535
return <StackerHopperLwInfo {...props} />
3636
case STACKER_SHUTTLE_EMPTY_RETRY.STEPS.ENSURE_SHUTTLE_EMPTY:
37-
return <TwoColTextAndImage {...props} />
37+
return <StackerEnsureShuttleEmpty {...props} />
3838
case STACKER_SHUTTLE_EMPTY_RETRY.STEPS.RETRY:
3939
return <RetryStepInfo {...props} />
4040
default:

‎app/src/organisms/ErrorRecoveryFlows/RecoveryOptions/StackerShuttleMissing.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
import { RECOVERY_MAP } from '../constants'
22
import {
33
RetryStepInfo,
4+
StackerEnsureShuttleEmpty,
45
StackerHomeShuttle,
56
StackerHopperLwInfo,
67
StackerLoadShuttle,
7-
TwoColTextAndImage,
88
} from '../shared'
99
import { SelectRecoveryOption } from './SelectRecoveryOption'
1010

@@ -25,7 +25,7 @@ export function StackerShuttleMissing(
2525
case STACKER_SHUTTLE_MISSING_RETRY.STEPS.CHECK_HOPPER:
2626
return <StackerHopperLwInfo {...props} />
2727
case STACKER_SHUTTLE_MISSING_RETRY.STEPS.ENSURE_SHUTTLE_EMPTY:
28-
return <TwoColTextAndImage {...props} />
28+
return <StackerEnsureShuttleEmpty {...props} />
2929
case STACKER_SHUTTLE_MISSING_RETRY.STEPS.RETRY:
3030
return <RetryStepInfo {...props} />
3131
default:

‎app/src/organisms/ErrorRecoveryFlows/RecoveryOptions/StackerStalledRetry.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import { RECOVERY_MAP } from '../constants'
22
import {
33
RetryStepInfo,
4+
StackerEnsureShuttleEmpty,
45
StackerHomeShuttle,
56
StackerHopperLwInfo,
6-
TwoColTextAndImage,
77
} from '../shared'
88
import { SelectRecoveryOption } from './SelectRecoveryOption'
99

@@ -23,7 +23,7 @@ export function StackerStalledRetry(props: RecoveryContentProps): JSX.Element {
2323
case STACKER_STALLED_RETRY.STEPS.RETRY:
2424
return <RetryStepInfo {...props} />
2525
case STACKER_STALLED_RETRY.STEPS.ENSURE_SHUTTLE_EMPTY:
26-
return <TwoColTextAndImage {...props} />
26+
return <StackerEnsureShuttleEmpty {...props} />
2727
default:
2828
console.warn(
2929
`StackerStalledRetry: ${step} in ${route} not explicitly handled. Rerouting.`

‎app/src/organisms/ErrorRecoveryFlows/RecoveryOptions/__tests__/StackerHopperEmptyRetry.test.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,8 @@ import { mockRecoveryContentProps } from '../../__fixtures__'
88
import { RECOVERY_MAP } from '../../constants'
99
import {
1010
RetryStepInfo,
11+
StackerEnsureShuttleEmpty,
1112
StackerHopperLwInfo,
12-
TwoColTextAndImage,
1313
} from '../../shared'
1414
import { SelectRecoveryOption } from '../SelectRecoveryOption'
1515
import { StackerHopperEmptyRetry } from '../StackerHopperEmptyRetry'
@@ -42,7 +42,7 @@ describe('StackerHopperEmptyRetry', () => {
4242
<div>MOCK_STACKER_HOPPER_LW_INFO</div>
4343
)
4444
vi.mocked(RetryStepInfo).mockReturnValue(<div>MOCK_RETRY_STEP_INFO</div>)
45-
vi.mocked(TwoColTextAndImage).mockReturnValue(
45+
vi.mocked(StackerEnsureShuttleEmpty).mockReturnValue(
4646
<div>MOCK_TWO_COLUMN_AND_IMAGE</div>
4747
)
4848
})

‎app/src/organisms/ErrorRecoveryFlows/RecoveryOptions/__tests__/StackerShuttleEmptyRetry.test.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,10 +11,10 @@ import {
1111
ReleaseLabware,
1212
RetryStepInfo,
1313
StackerEmptyHopper,
14+
StackerEnsureShuttleEmpty,
1415
StackerHomeShuttle,
1516
StackerHopperLwInfo,
1617
StackerReengageLatch,
17-
TwoColTextAndImage,
1818
} from '../../shared'
1919
import { SelectRecoveryOption } from '../SelectRecoveryOption'
2020
import { StackerShuttleEmptyRetry } from '../StackerShuttleEmptyRetry'
@@ -58,7 +58,7 @@ describe('StackerShuttleEmptyRetry', () => {
5858
<div>MOCK_STACKER_HOPPER_LW_INFO</div>
5959
)
6060
vi.mocked(RetryStepInfo).mockReturnValue(<div>MOCK_RETRY_STEP_INFO</div>)
61-
vi.mocked(TwoColTextAndImage).mockReturnValue(
61+
vi.mocked(StackerEnsureShuttleEmpty).mockReturnValue(
6262
<div>MOCK_TWO_COLUMN_AND_IMAGE</div>
6363
)
6464
})

‎app/src/organisms/ErrorRecoveryFlows/RecoveryOptions/__tests__/StackerShuttleMissing.test.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,12 +11,12 @@ import {
1111
ReleaseLabware,
1212
RetryStepInfo,
1313
StackerEmptyHopper,
14+
StackerEnsureShuttleEmpty,
1415
StackerHomeShuttle,
1516
StackerHopperLwInfo,
1617
StackerLoadShuttle,
1718
StackerReengageLatch,
1819
StackerShuttleLwInfo,
19-
TwoColTextAndImage,
2020
} from '../../shared'
2121
import { SelectRecoveryOption } from '../SelectRecoveryOption'
2222
import { StackerShuttleMissing } from '../StackerShuttleMissing'
@@ -67,7 +67,7 @@ describe('StackerShuttleMissing', () => {
6767
<div>MOCK_STACKER_HOPPER_LW_INFO</div>
6868
)
6969
vi.mocked(RetryStepInfo).mockReturnValue(<div>MOCK_RETRY_STEP_INFO</div>)
70-
vi.mocked(TwoColTextAndImage).mockReturnValue(
70+
vi.mocked(StackerEnsureShuttleEmpty).mockReturnValue(
7171
<div>MOCK_TWO_COLUMN_AND_IMAGE</div>
7272
)
7373
})

‎app/src/organisms/ErrorRecoveryFlows/RecoveryOptions/__tests__/StackerStalledRetry.test.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,9 @@ import { mockRecoveryContentProps } from '../../__fixtures__'
88
import { RECOVERY_MAP } from '../../constants'
99
import {
1010
RetryStepInfo,
11+
StackerEnsureShuttleEmpty,
1112
StackerHomeShuttle,
1213
StackerHopperLwInfo,
13-
TwoColTextAndImage,
1414
} from '../../shared'
1515
import { SelectRecoveryOption } from '../SelectRecoveryOption'
1616
import { StackerStalledRetry } from '../StackerStalledRetry'
@@ -46,7 +46,7 @@ describe('StackerStalledRetry', () => {
4646
<div>MOCK_STACKER_HOPPER_LW_INFO</div>
4747
)
4848
vi.mocked(RetryStepInfo).mockReturnValue(<div>MOCK_RETRY_STEP_INFO</div>)
49-
vi.mocked(TwoColTextAndImage).mockReturnValue(
49+
vi.mocked(StackerEnsureShuttleEmpty).mockReturnValue(
5050
<div>MOCK_TWO_COLUMN_AND_IMAGE</div>
5151
)
5252
})

‎app/src/organisms/ErrorRecoveryFlows/shared/HoldingLabware.tsx

Lines changed: 11 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -11,9 +11,7 @@ import {
1111
StyledText,
1212
} from '@opentrons/components'
1313

14-
import { RecoveryRadioGroup } from '/app/organisms/ErrorRecoveryFlows/shared/RecoveryRadioGroup'
15-
16-
import { DESKTOP_ONLY, ODD_ONLY, RECOVERY_MAP } from '../constants'
14+
import { RECOVERY_MAP } from '../constants'
1715
import { RecoverySingleColumnContentWrapper } from './RecoveryContentWrapper'
1816
import { RecoveryFooterButtons } from './RecoveryFooterButtons'
1917

@@ -32,6 +30,7 @@ export function HoldingLabware({
3230
currentRecoveryOptionUtils,
3331
recoveryCommands,
3432
recoveryMap,
33+
isOnDevice,
3534
}: RecoveryContentProps): JSX.Element {
3635
const {
3736
proceedNextStep,
@@ -123,18 +122,12 @@ export function HoldingLabware({
123122
>
124123
{buildTitle()}
125124
</StyledText>
126-
<Flex css={ODD_ONLY}>
127-
<ODDGripperHoldingLwOptions
128-
selectedOption={selectedOption}
129-
setSelectedOption={setSelectionOption}
130-
t={t}
131-
/>
132-
</Flex>
133-
<Flex css={DESKTOP_ONLY}>
134-
<DesktopGripperHoldingLwOptions
125+
<Flex>
126+
<GripperHoldingLwOptions
135127
selectedOption={selectedOption}
136128
setSelectedOption={setSelectionOption}
137129
t={t}
130+
isOnDevice={isOnDevice}
138131
/>
139132
</Flex>
140133
</Flex>
@@ -150,15 +143,17 @@ interface GripperHoldingOptionsProps {
150143
t: TFunction
151144
selectedOption: HoldingLabwareOption
152145
setSelectedOption: (option: HoldingLabwareOption) => void
146+
isOnDevice: boolean
153147
}
154148

155-
function ODDGripperHoldingLwOptions({
149+
function GripperHoldingLwOptions({
156150
t,
157151
selectedOption,
158152
setSelectedOption,
153+
isOnDevice,
159154
}: GripperHoldingOptionsProps): JSX.Element {
160155
return (
161-
<Flex css={ODD_OPTIONS_STLYE}>
156+
<Flex css={OPTIONS_STLYE}>
162157
{HOLDING_LABWARE_OPTIONS.map(option => {
163158
const optionCopy = getCopyFromOption(option, t)
164159
return (
@@ -171,44 +166,14 @@ function ODDGripperHoldingLwOptions({
171166
}}
172167
isSelected={option === selectedOption}
173168
radioButtonType="large"
169+
largeDesktopBorderRadius={!isOnDevice}
174170
/>
175171
)
176172
})}
177173
</Flex>
178174
)
179175
}
180176

181-
function DesktopGripperHoldingLwOptions({
182-
t,
183-
selectedOption,
184-
setSelectedOption,
185-
}: GripperHoldingOptionsProps): JSX.Element {
186-
return (
187-
<RecoveryRadioGroup
188-
css={RADIO_GAP}
189-
onChange={e => {
190-
setSelectedOption(e.currentTarget.value as HoldingLabwareOption)
191-
}}
192-
value={selectedOption}
193-
options={HOLDING_LABWARE_OPTIONS.map(
194-
option =>
195-
({
196-
value: option,
197-
children: (
198-
<StyledText
199-
desktopStyle="bodyDefaultRegular"
200-
role="label"
201-
htmlFor={option}
202-
>
203-
{getCopyFromOption(option, t)}
204-
</StyledText>
205-
),
206-
} as const)
207-
)}
208-
/>
209-
)
210-
}
211-
212177
export function getCopyFromOption(
213178
option: HoldingLabwareOption,
214179
t: TFunction
@@ -229,12 +194,8 @@ const CONTAINER_STYLE = css`
229194
flex-direction: ${DIRECTION_COLUMN};
230195
`
231196

232-
const ODD_OPTIONS_STLYE = css`
197+
const OPTIONS_STLYE = css`
233198
flex-direction: ${DIRECTION_COLUMN};
234199
width: 100%;
235200
gap: ${SPACING.spacing8};
236201
`
237-
238-
const RADIO_GAP = `
239-
gap: ${SPACING.spacing4};
240-
`

‎app/src/organisms/ErrorRecoveryFlows/shared/RightColumnAnimation.tsx

Lines changed: 6 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,6 @@
11
import { css } from 'styled-components'
22

3-
import {
4-
AnimationVideo,
5-
Flex,
6-
JUSTIFY_CENTER,
7-
RESPONSIVENESS,
8-
} from '@opentrons/components'
3+
import { AnimationVideo, RESPONSIVENESS } from '@opentrons/components'
94

105
import type { JSX } from 'react'
116

@@ -19,21 +14,15 @@ export function RightColumnAnimation(
1914
const { animationSrc } = props
2015

2116
return (
22-
<Flex css={ANIMATION_CONTAINER_STYLE}>
23-
<AnimationVideo role="presentation" css={ANIMATION_STYLE}>
24-
<source src={animationSrc} data-testid="animation" />
25-
</AnimationVideo>
26-
</Flex>
17+
<AnimationVideo role="presentation" css={ANIMATION_STYLE}>
18+
<source src={animationSrc} data-testid="animation" />
19+
</AnimationVideo>
2720
)
2821
}
2922

30-
const ANIMATION_CONTAINER_STYLE = css`
31-
justify-content: ${JUSTIFY_CENTER};
32-
overflow: hidden;
33-
max-height: 13.25rem;
34-
`
35-
3623
const ANIMATION_STYLE = css`
24+
width: 100%;
25+
3726
@media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
3827
width: 27rem;
3928
height: 20.25rem;

0 commit comments

Comments
 (0)