Skip to content

Commit 0b50d03

Browse files
vegano1vegano1
authored
fix(app): various fixes and improvements to module setup flow (#18427)
1 parent 6031ab8 commit 0b50d03

21 files changed

+557
-393
lines changed

‎app/src/assets/localization/en/module_wizard_flows.json

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@
2323
"error_stacker_not_installed": "Stacker installed incorrectly",
2424
"error_stacker_not_installed_message": "There was an issue with install of a stacker. Ensure that all side panels have been replaced and the Stacker door is closed. Please try installing again or contact support.",
2525
"exit": "Exit",
26+
"finish": "Finish",
2627
"firmware_up_to_date": "{{module}} firmware up to date.",
2728
"firmware_update_found": "Firmware update found",
2829
"firmware_update_to_latest": "Update to the latest firmware for the {{module}} before proceeding",
@@ -58,6 +59,7 @@
5859
"recalibrate": "Recalibrate",
5960
"select_location": "Select module location",
6061
"select_the_slot": "Select the slot where you installed the {{module}} on the deck map to the right. The location must be correct for successful calibration.",
62+
"setup_another_module": "Setup another module",
6163
"skip": "Skip",
6264
"slot_unavailable": "Slot unavailable",
6365
"stand_back": "Stand back, calibration in progress",

‎app/src/molecules/SimpleWizardBody/index.tsx

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { SimpleWizardBodyContainer } from './SimpleWizardBodyContainer'
22
import { SimpleWizardBodyContent } from './SimpleWizardBodyContent'
33
import { SimpleWizardInProgressBody } from './SimpleWizardInProgressBody'
44

5-
import type { ComponentProps } from 'react'
5+
import type { ComponentProps, ReactNode } from 'react'
66

77
export {
88
SimpleWizardBodyContainer,
@@ -11,8 +11,13 @@ export {
1111
}
1212

1313
export function SimpleWizardBody(
14-
props: ComponentProps<typeof SimpleWizardBodyContent> &
15-
ComponentProps<typeof SimpleWizardBodyContainer>
14+
props: Omit<
15+
ComponentProps<typeof SimpleWizardBodyContent> &
16+
ComponentProps<typeof SimpleWizardBodyContainer>,
17+
'children'
18+
> & {
19+
children?: ReactNode
20+
}
1621
): JSX.Element {
1722
const { children, ...rest } = props
1823
return (

‎app/src/organisms/ModuleWizardFlows/AttachProbe.tsx

Lines changed: 39 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ const BODY_STYLE = css`
3636
}
3737
`
3838

39-
export const AttachProbe = (props: AttachProbeProps): JSX.Element | null => {
39+
export function AttachProbe(props: AttachProbeProps): JSX.Element {
4040
const {
4141
proceed,
4242
goBack,
@@ -76,46 +76,6 @@ export const AttachProbe = (props: AttachProbeProps): JSX.Element | null => {
7676
WASTE_CHUTE_FIXTURES.includes(cc.cutoutFixtureId)
7777
)
7878

79-
const pipetteAttachProbeVid = (
80-
<Flex height="13.25rem" paddingTop={SPACING.spacing4}>
81-
<AnimationVideo
82-
css={css`
83-
max-width: 100%;
84-
max-height: 100%;
85-
`}
86-
>
87-
<source src={pipetteAttachProbeVideoSource} />
88-
</AnimationVideo>
89-
</Flex>
90-
)
91-
92-
const bodyText = (
93-
<>
94-
<LegacyStyledText css={BODY_STYLE}>
95-
<Trans
96-
t={t}
97-
i18nKey={'pipette_wizard_flows:install_probe'}
98-
values={{ location: probeLocation }}
99-
components={{
100-
bold: <strong />,
101-
}}
102-
/>
103-
</LegacyStyledText>
104-
105-
{wasteChuteConflictWith96Channel && (
106-
<Banner
107-
type={isWasteChuteOnDeck ? 'error' : 'warning'}
108-
size={isOnDevice ? '1.5rem' : '1rem'}
109-
marginTop={isOnDevice ? SPACING.spacing24 : SPACING.spacing16}
110-
>
111-
{isWasteChuteOnDeck
112-
? t('pipette_wizard_flows:waste_chute_error')
113-
: t('pipette_wizard_flows:waste_chute_warning')}
114-
</Banner>
115-
)}
116-
</>
117-
)
118-
11979
const handleBeginCalibration = (): void => {
12080
if (adapterId == null) {
12181
setErrorMessage('calibration adapter has not been loaded yet')
@@ -166,8 +126,44 @@ export const AttachProbe = (props: AttachProbeProps): JSX.Element | null => {
166126
return (
167127
<GenericWizardTile
168128
header={i18n.format(t('attach_probe'), 'capitalize')}
169-
rightHandBody={pipetteAttachProbeVid}
170-
bodyText={bodyText}
129+
rightHandBody={
130+
<Flex height="13.25rem" paddingTop={SPACING.spacing4}>
131+
<AnimationVideo
132+
css={css`
133+
max-width: 100%;
134+
max-height: 100%;
135+
`}
136+
>
137+
<source src={pipetteAttachProbeVideoSource} />
138+
</AnimationVideo>
139+
</Flex>
140+
}
141+
bodyText={
142+
<>
143+
<LegacyStyledText css={BODY_STYLE}>
144+
<Trans
145+
t={t}
146+
i18nKey="pipette_wizard_flows:install_probe"
147+
values={{ location: probeLocation }}
148+
components={{
149+
bold: <strong />,
150+
}}
151+
/>
152+
</LegacyStyledText>
153+
154+
{wasteChuteConflictWith96Channel && (
155+
<Banner
156+
type={isWasteChuteOnDeck ? 'error' : 'warning'}
157+
size={isOnDevice ? '1.5rem' : '1rem'}
158+
marginTop={isOnDevice ? SPACING.spacing24 : SPACING.spacing16}
159+
>
160+
{isWasteChuteOnDeck
161+
? t('pipette_wizard_flows:waste_chute_error')
162+
: t('pipette_wizard_flows:waste_chute_warning')}
163+
</Banner>
164+
)}
165+
</>
166+
}
171167
proceedButtonText={t('begin_calibration')}
172168
proceed={handleBeginCalibration}
173169
back={goBack}

‎app/src/organisms/ModuleWizardFlows/BeforeBeginning.tsx

Lines changed: 7 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -20,18 +20,16 @@ interface EqipmentItem {
2020
subtitle?: string
2121
}
2222

23-
type BeforeBeginningProps = ModuleSetupWizardStepProps
23+
interface BeforeBeginningProps extends ModuleSetupWizardStepProps {}
2424

25-
export const BeforeBeginning = (
26-
props: BeforeBeginningProps
27-
): JSX.Element | null => {
28-
const { proceed, attachedModule } = props
25+
export function BeforeBeginning(props: BeforeBeginningProps): JSX.Element {
26+
const { proceed, attachedModule, setErrorMessage } = props
2927
const { t } = useTranslation(['module_wizard_flows', 'shared'])
3028

3129
const moduleDisplayName = getModuleDisplayName(attachedModule.moduleModel)
3230

33-
let adapterLoadname: string
34-
let adapterDisplaynameKey: string
31+
let adapterLoadname: string = ''
32+
let adapterDisplaynameKey: string = ''
3533
const equipmentList = useAddEquipmentToSpecificModules([], attachedModule)
3634
if (
3735
THERMOCYCLER_MODULE_MODELS.some(
@@ -55,11 +53,9 @@ export const BeforeBeginning = (
5553
adapterLoadname = 'calibration_adapter_temperature'
5654
adapterDisplaynameKey = 'calibration_adapter_temperature'
5755
} else {
58-
adapterLoadname = ''
59-
console.error(
56+
setErrorMessage(
6057
`Invalid module type for calibration: ${attachedModule.moduleModel}`
6158
)
62-
return null
6359
}
6460
equipmentList.push(
6561
...[
@@ -77,7 +73,7 @@ export const BeforeBeginning = (
7773
bodyText={
7874
<Trans
7975
t={t}
80-
i18nKey={'branded:module_calibration_get_started'}
76+
i18nKey="branded:module_calibration_get_started"
8177
values={{ module: moduleDisplayName }}
8278
components={{ block: <LegacyStyledText as="p" /> }}
8379
/>

‎app/src/organisms/ModuleWizardFlows/CloseStackerDoor.tsx

Lines changed: 18 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
11
import { useTranslation } from 'react-i18next'
22

3-
import { COLORS, PrimaryButton } from '@opentrons/components'
3+
import { COLORS, JUSTIFY_FLEX_END, PrimaryButton } from '@opentrons/components'
44
import {
55
FLEX_SINGLE_SLOT_BY_CUTOUT_ID,
66
FLEX_STACKER_MODULE_TYPE,
77
} from '@opentrons/shared-data'
88

9+
import { SmallButton } from '/app/atoms/buttons'
910
import {
1011
SimpleWizardBody,
1112
SimpleWizardInProgressBody,
@@ -18,13 +19,14 @@ interface CloseDoorProps extends ModuleSetupWizardStepProps {
1819
deckConfig: DeckConfiguration
1920
}
2021

21-
export const CloseDoor = (props: CloseDoorProps): JSX.Element | null => {
22+
export function CloseDoor(props: CloseDoorProps): JSX.Element {
2223
const {
2324
proceed,
2425
isRobotMoving,
2526
attachedModule,
2627
chainRunCommands,
2728
setErrorMessage,
29+
isOnDevice,
2830
} = props
2931
const { t, i18n } = useTranslation(['module_wizard_flows', 'shared'])
3032

@@ -37,18 +39,17 @@ export const CloseDoor = (props: CloseDoorProps): JSX.Element | null => {
3739
cutoutId != null ? FLEX_SINGLE_SLOT_BY_CUTOUT_ID[cutoutId] : null
3840

3941
if (slotName == null) {
40-
console.error(
42+
setErrorMessage(
4143
`could not load module ${attachedModule.moduleModel} into location ${slotName}`
4244
)
43-
return null
4445
}
4546

4647
const handleHomeShuttle = (): void => {
4748
const homeCommands: CreateCommand[] = [
4849
{
4950
commandType: 'loadModule',
5051
params: {
51-
location: { slotName },
52+
location: { slotName: slotName ?? '' },
5253
model: attachedModule.moduleModel,
5354
moduleId: attachedModule.id,
5455
},
@@ -78,18 +79,23 @@ export const CloseDoor = (props: CloseDoorProps): JSX.Element | null => {
7879
} else {
7980
return (
8081
<SimpleWizardBody
82+
justifyContentForOddButton={JUSTIFY_FLEX_END}
8183
isSuccess={false}
8284
iconColor={COLORS.yellow50}
8385
header={t('close_doors')}
8486
subHeader={t('close_doors_description')}
8587
>
86-
<PrimaryButton
87-
onClick={() => {
88-
handleHomeShuttle()
89-
}}
90-
>
91-
{i18n.format(t('shared:continue'), 'capitalize')}
92-
</PrimaryButton>
88+
{isOnDevice ? (
89+
<SmallButton
90+
buttonType="primary"
91+
onClick={handleHomeShuttle}
92+
buttonText={i18n.format(t('shared:continue'), 'capitalize')}
93+
/>
94+
) : (
95+
<PrimaryButton disabled={isRobotMoving} onClick={handleHomeShuttle}>
96+
{i18n.format(t('shared:continue'), 'capitalize')}
97+
</PrimaryButton>
98+
)}
9399
</SimpleWizardBody>
94100
)
95101
}

‎app/src/organisms/ModuleWizardFlows/DetachProbe.tsx

Lines changed: 18 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -26,9 +26,7 @@ const BODY_STYLE = css`
2626
}
2727
`
2828

29-
export const DetachProbe = (
30-
props: ModuleSetupWizardStepProps
31-
): JSX.Element | null => {
29+
export function DetachProbe(props: ModuleSetupWizardStepProps): JSX.Element {
3230
const { attachedPipette, proceed, goBack } = props
3331
const { t, i18n } = useTranslation('module_wizard_flows')
3432

@@ -46,30 +44,26 @@ export const DetachProbe = (
4644
break
4745
}
4846

49-
const pipetteDetachProbeVid = (
50-
<Flex height="13.25rem" paddingTop={SPACING.spacing4}>
51-
<AnimationVideo
52-
css={css`
53-
max-width: 100%;
54-
max-height: 100%;
55-
`}
56-
>
57-
<source src={pipetteDetachProbeVideoSource} />
58-
</AnimationVideo>
59-
</Flex>
60-
)
61-
62-
const bodyText = (
63-
<LegacyStyledText css={BODY_STYLE}>
64-
{t('detach_probe_description')}
65-
</LegacyStyledText>
66-
)
67-
6847
return (
6948
<GenericWizardTile
7049
header={i18n.format(t('detach_probe'), 'capitalize')}
71-
rightHandBody={pipetteDetachProbeVid}
72-
bodyText={bodyText}
50+
rightHandBody={
51+
<Flex height="13.25rem" paddingTop={SPACING.spacing4}>
52+
<AnimationVideo
53+
css={css`
54+
max-width: 100%;
55+
max-height: 100%;
56+
`}
57+
>
58+
<source src={pipetteDetachProbeVideoSource} />
59+
</AnimationVideo>
60+
</Flex>
61+
}
62+
bodyText={
63+
<LegacyStyledText css={BODY_STYLE}>
64+
{t('detach_probe_description')}
65+
</LegacyStyledText>
66+
}
7367
proceedButtonText={t('complete_calibration')}
7468
proceed={proceed}
7569
back={goBack}

0 commit comments

Comments
 (0)