Skip to content

Commit db4640f

Browse files
mjhuffmjhuff
authored
feat(app): Implement LPC Redesign Header on ODD (#17449)
Closes EXEC-1131
1 parent 94bd0e9 commit db4640f

File tree

30 files changed

+793
-610
lines changed

30 files changed

+793
-610
lines changed

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

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,13 +23,17 @@
2323
"confirm_detached": "Confirm removal",
2424
"confirm_pick_up_tip_modal_title": "Did the pipette pick up a tip successfully?",
2525
"confirm_pick_up_tip_modal_try_again_text": "No, try again",
26+
"confirm_placement": "Confirm placement",
2627
"confirm_position_and_move": "Confirm position, move to slot {{next_slot}}",
2728
"confirm_position_and_pick_up_tip": "Confirm position, pick up tip",
2829
"confirm_position_and_return_tip": "Confirm position, return tip to Slot {{next_slot}} and home",
30+
"confirm_removal": "Confirm removal",
31+
"continue": "Continue",
2932
"default_labware_offset": "Default Labware Offset",
3033
"detach_probe": "Remove calibration probe",
3134
"ensure_nozzle_position_desktop": "<block>Ensure that the {{tip_type}} is centered above and level with {{item_location}}. If it isn't, use the controls below or your keyboard to jog the pipette until it is properly aligned.</block>",
3235
"ensure_nozzle_position_odd": "<block>Ensure that the {{tip_type}} is centered above and level with {{item_location}}. If it isn't, tap <bold>Move pipette</bold> and then jog the pipette until it is properly aligned.</block>",
36+
"exit": "Exit",
3337
"exit_screen_confirm_exit": "Exit and discard all labware offsets",
3438
"exit_screen_go_back": "Go back to labware position check",
3539
"exit_screen_subtitle": "If you exit now, all labware offsets will be discarded. This cannot be undone.",
@@ -104,6 +108,7 @@
104108
"robot_in_motion": "Stand back, robot is in motion.",
105109
"run": "Run",
106110
"run_labware_position_check": "run labware position check",
111+
"save": "Save",
107112
"secondary_pipette_tipracks_section": "Check tip racks with {{secondary_mount}} Pipette",
108113
"see_how_offsets_work": "See how labware offsets work",
109114
"select_labware_from_list": "Select a labware from the list to check its stored offset data",
@@ -115,6 +120,7 @@
115120
"stored_offsets_for_this_protocol": "Stored Labware Offset data that applies to this protocol",
116121
"table_view": "Table View",
117122
"tip_rack": "tip rack",
123+
"try_again": "Try again",
118124
"view_current_offsets": "view current offsets",
119125
"view_data": "View data",
120126
"what_is_labware_offset_data": "What is labware offset data?"

‎app/src/organisms/LabwarePositionCheck/ExitConfirmation.tsx

Lines changed: 0 additions & 150 deletions
This file was deleted.

‎app/src/organisms/LabwarePositionCheck/LPCContentContainer.tsx

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
import { css } from 'styled-components'
2+
3+
import { DIRECTION_COLUMN, Flex, SPACING } from '@opentrons/components'
4+
5+
import { StepMeter } from '/app/atoms/StepMeter'
6+
// TODO(jh, 02-05-25): Move ChildNavigation to molecules.
7+
// eslint-disable-next-line opentrons/no-imports-across-applications
8+
import { ChildNavigation } from '/app/organisms/ODD/ChildNavigation'
9+
import { useSelector } from 'react-redux'
10+
import { selectStepInfo } from '/app/redux/protocol-runs'
11+
12+
// eslint-disable-next-line opentrons/no-imports-across-applications
13+
import type { ChildNavigationProps } from '/app/organisms/ODD/ChildNavigation'
14+
import type { LPCWizardContentProps } from '/app/organisms/LabwarePositionCheck/types'
15+
16+
type LPCContentContainerProps = LPCWizardContentProps &
17+
Partial<ChildNavigationProps> & {
18+
children: JSX.Element
19+
header: string
20+
}
21+
22+
export function LPCContentContainer({
23+
children,
24+
runId,
25+
...rest
26+
}: LPCContentContainerProps): JSX.Element {
27+
const { currentStepIndex, totalStepCount } = useSelector(
28+
selectStepInfo(runId)
29+
)
30+
31+
return (
32+
<>
33+
<StepMeter totalSteps={totalStepCount} currentStep={currentStepIndex} />
34+
<ChildNavigation {...rest} css={CHILD_NAV_STYLE} />
35+
<Flex css={CHILDREN_CONTAINER_STYLE}>{children}</Flex>
36+
</>
37+
)
38+
}
39+
40+
// TODO(jh, 02-05-25): Investigate whether we can remove the position: fixed styling from ChildNav.
41+
const CHILD_NAV_STYLE = css`
42+
top: ${SPACING.spacing8};
43+
`
44+
const CHILDREN_CONTAINER_STYLE = css`
45+
margin-top: 7.75rem;
46+
flex-direction: ${DIRECTION_COLUMN};
47+
`

‎app/src/organisms/LabwarePositionCheck/LPCErrorModal.tsx

Lines changed: 47 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -22,62 +22,61 @@ import {
2222
import { i18n } from '/app/i18n'
2323

2424
import type { LPCWizardContentProps } from '/app/organisms/LabwarePositionCheck/types'
25+
import { LPCContentContainer } from '/app/organisms/LabwarePositionCheck/LPCContentContainer'
2526

2627
const SUPPORT_EMAIL = '[email protected]'
2728

28-
export function LPCErrorModal({
29-
commandUtils,
30-
onCloseClick,
31-
}: LPCWizardContentProps): JSX.Element {
29+
export function LPCErrorModal(props: LPCWizardContentProps): JSX.Element {
3230
const { t } = useTranslation(['labware_position_check', 'shared', 'branded'])
33-
const { errorMessage, toggleRobotMoving } = commandUtils
34-
35-
const handleClose = (): void => {
36-
void toggleRobotMoving(true).then(() => {
37-
onCloseClick()
38-
})
39-
}
31+
const { errorMessage, headerCommands } = props.commandUtils
4032

4133
return (
42-
<ModalContainer
43-
padding={SPACING.spacing32}
44-
flexDirection={DIRECTION_COLUMN}
45-
alignItems={ALIGN_CENTER}
46-
justifyContent={JUSTIFY_SPACE_BETWEEN}
47-
gridGap={SPACING.spacing16}
34+
<LPCContentContainer
35+
{...props}
36+
header={t('labware_position_check_title')}
37+
onClickButton={headerCommands.handleClose}
38+
buttonText={t('exit')}
4839
>
49-
<Icon
50-
name="ot-alert"
51-
size="2.5rem"
52-
color={COLORS.red50}
53-
aria-label="alert"
54-
/>
55-
<ErrorHeader>
56-
{i18n.format(t('shared:something_went_wrong'), 'sentenceCase')}
57-
</ErrorHeader>
58-
<ContentWrapper>
59-
<LegacyStyledText
60-
as="p"
61-
fontWeight={TYPOGRAPHY.fontWeightSemiBold}
62-
textAlign={TEXT_ALIGN_CENTER}
63-
>
64-
{t('remove_probe_before_exit')}
65-
</LegacyStyledText>
66-
<LegacyStyledText as="p" textAlign={TEXT_ALIGN_CENTER}>
67-
{t('branded:help_us_improve_send_error_report', {
68-
support_email: SUPPORT_EMAIL,
69-
})}
70-
</LegacyStyledText>
71-
</ContentWrapper>
72-
<ErrorTextArea readOnly value={errorMessage ?? ''} spellCheck={false} />
73-
<PrimaryButton
74-
textTransform={TEXT_TRANSFORM_CAPITALIZE}
75-
alignSelf={ALIGN_FLEX_END}
76-
onClick={handleClose}
40+
<ModalContainer
41+
padding={SPACING.spacing32}
42+
flexDirection={DIRECTION_COLUMN}
43+
alignItems={ALIGN_CENTER}
44+
justifyContent={JUSTIFY_SPACE_BETWEEN}
45+
gridGap={SPACING.spacing16}
7746
>
78-
{t('shared:exit')}
79-
</PrimaryButton>
80-
</ModalContainer>
47+
<Icon
48+
name="ot-alert"
49+
size="2.5rem"
50+
color={COLORS.red50}
51+
aria-label="alert"
52+
/>
53+
<ErrorHeader>
54+
{i18n.format(t('shared:something_went_wrong'), 'sentenceCase')}
55+
</ErrorHeader>
56+
<ContentWrapper>
57+
<LegacyStyledText
58+
as="p"
59+
fontWeight={TYPOGRAPHY.fontWeightSemiBold}
60+
textAlign={TEXT_ALIGN_CENTER}
61+
>
62+
{t('remove_probe_before_exit')}
63+
</LegacyStyledText>
64+
<LegacyStyledText as="p" textAlign={TEXT_ALIGN_CENTER}>
65+
{t('branded:help_us_improve_send_error_report', {
66+
support_email: SUPPORT_EMAIL,
67+
})}
68+
</LegacyStyledText>
69+
</ContentWrapper>
70+
<ErrorTextArea readOnly value={errorMessage ?? ''} spellCheck={false} />
71+
<PrimaryButton
72+
textTransform={TEXT_TRANSFORM_CAPITALIZE}
73+
alignSelf={ALIGN_FLEX_END}
74+
onClick={headerCommands.handleClose}
75+
>
76+
{t('shared:exit')}
77+
</PrimaryButton>
78+
</ModalContainer>
79+
</LPCContentContainer>
8180
)
8281
}
8382

‎app/src/organisms/LabwarePositionCheck/LPCProbeNotAttached.tsx

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import { useSelector } from 'react-redux'
2+
import { useTranslation } from 'react-i18next'
3+
4+
import { ProbeNotAttached } from '/app/organisms/PipetteWizardFlows/ProbeNotAttached'
5+
import { getIsOnDevice } from '/app/redux/config'
6+
import { LPCContentContainer } from '/app/organisms/LabwarePositionCheck/LPCContentContainer'
7+
8+
import type { LPCWizardContentProps } from '/app/organisms/LabwarePositionCheck/types'
9+
10+
// TODO(jh, 02-05-25): EXEC-1190.
11+
export function LPCProbeNotAttached(props: LPCWizardContentProps): JSX.Element {
12+
const { t } = useTranslation('labware_position_check')
13+
const { commandUtils } = props
14+
const { setShowUnableToDetect, headerCommands } = commandUtils
15+
const isOnDevice = useSelector(getIsOnDevice)
16+
17+
return (
18+
<LPCContentContainer
19+
{...props}
20+
header={t('labware_position_check_title')}
21+
buttonText={t('try_again')}
22+
onClickButton={headerCommands.handleAttachProbeCheck}
23+
secondaryButtonProps={{
24+
buttonText: t('exit'),
25+
buttonCategory: 'rounded',
26+
buttonType: 'tertiaryLowLight',
27+
onClick: headerCommands.handleNavToDetachProbe,
28+
}}
29+
>
30+
<ProbeNotAttached
31+
handleOnClick={() => null}
32+
setShowUnableToDetect={setShowUnableToDetect}
33+
isOnDevice={isOnDevice}
34+
/>
35+
</LPCContentContainer>
36+
)
37+
}

0 commit comments

Comments
 (0)