-
Notifications
You must be signed in to change notification settings - Fork 179
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(app): Implement LPC Redesign Header on ODD (#17449)
Closes EXEC-1131
- Loading branch information
Showing
30 changed files
with
793 additions
and
610 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
150 changes: 0 additions & 150 deletions
150
app/src/organisms/LabwarePositionCheck/ExitConfirmation.tsx
This file was deleted.
Oops, something went wrong.
47 changes: 47 additions & 0 deletions
47
app/src/organisms/LabwarePositionCheck/LPCContentContainer.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,47 @@ | ||
| import { css } from 'styled-components' | ||
|
|
||
| import { DIRECTION_COLUMN, Flex, SPACING } from '@opentrons/components' | ||
|
|
||
| import { StepMeter } from '/app/atoms/StepMeter' | ||
| // TODO(jh, 02-05-25): Move ChildNavigation to molecules. | ||
| // eslint-disable-next-line opentrons/no-imports-across-applications | ||
| import { ChildNavigation } from '/app/organisms/ODD/ChildNavigation' | ||
| import { useSelector } from 'react-redux' | ||
| import { selectStepInfo } from '/app/redux/protocol-runs' | ||
|
|
||
| // eslint-disable-next-line opentrons/no-imports-across-applications | ||
| import type { ChildNavigationProps } from '/app/organisms/ODD/ChildNavigation' | ||
| import type { LPCWizardContentProps } from '/app/organisms/LabwarePositionCheck/types' | ||
|
|
||
| type LPCContentContainerProps = LPCWizardContentProps & | ||
| Partial<ChildNavigationProps> & { | ||
| children: JSX.Element | ||
| header: string | ||
| } | ||
|
|
||
| export function LPCContentContainer({ | ||
| children, | ||
| runId, | ||
| ...rest | ||
| }: LPCContentContainerProps): JSX.Element { | ||
| const { currentStepIndex, totalStepCount } = useSelector( | ||
| selectStepInfo(runId) | ||
| ) | ||
|
|
||
| return ( | ||
| <> | ||
| <StepMeter totalSteps={totalStepCount} currentStep={currentStepIndex} /> | ||
| <ChildNavigation {...rest} css={CHILD_NAV_STYLE} /> | ||
| <Flex css={CHILDREN_CONTAINER_STYLE}>{children}</Flex> | ||
| </> | ||
| ) | ||
| } | ||
|
|
||
| // TODO(jh, 02-05-25): Investigate whether we can remove the position: fixed styling from ChildNav. | ||
| const CHILD_NAV_STYLE = css` | ||
| top: ${SPACING.spacing8}; | ||
| ` | ||
| const CHILDREN_CONTAINER_STYLE = css` | ||
| margin-top: 7.75rem; | ||
| flex-direction: ${DIRECTION_COLUMN}; | ||
| ` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -22,62 +22,61 @@ import { | |
| import { i18n } from '/app/i18n' | ||
|
|
||
| import type { LPCWizardContentProps } from '/app/organisms/LabwarePositionCheck/types' | ||
| import { LPCContentContainer } from '/app/organisms/LabwarePositionCheck/LPCContentContainer' | ||
|
|
||
| const SUPPORT_EMAIL = '[email protected]' | ||
|
|
||
| export function LPCErrorModal({ | ||
| commandUtils, | ||
| onCloseClick, | ||
| }: LPCWizardContentProps): JSX.Element { | ||
| export function LPCErrorModal(props: LPCWizardContentProps): JSX.Element { | ||
| const { t } = useTranslation(['labware_position_check', 'shared', 'branded']) | ||
| const { errorMessage, toggleRobotMoving } = commandUtils | ||
|
|
||
| const handleClose = (): void => { | ||
| void toggleRobotMoving(true).then(() => { | ||
| onCloseClick() | ||
| }) | ||
| } | ||
| const { errorMessage, headerCommands } = props.commandUtils | ||
|
|
||
| return ( | ||
| <ModalContainer | ||
| padding={SPACING.spacing32} | ||
| flexDirection={DIRECTION_COLUMN} | ||
| alignItems={ALIGN_CENTER} | ||
| justifyContent={JUSTIFY_SPACE_BETWEEN} | ||
| gridGap={SPACING.spacing16} | ||
| <LPCContentContainer | ||
| {...props} | ||
| header={t('labware_position_check_title')} | ||
| onClickButton={headerCommands.handleClose} | ||
| buttonText={t('exit')} | ||
| > | ||
| <Icon | ||
| name="ot-alert" | ||
| size="2.5rem" | ||
| color={COLORS.red50} | ||
| aria-label="alert" | ||
| /> | ||
| <ErrorHeader> | ||
| {i18n.format(t('shared:something_went_wrong'), 'sentenceCase')} | ||
| </ErrorHeader> | ||
| <ContentWrapper> | ||
| <LegacyStyledText | ||
| as="p" | ||
| fontWeight={TYPOGRAPHY.fontWeightSemiBold} | ||
| textAlign={TEXT_ALIGN_CENTER} | ||
| > | ||
| {t('remove_probe_before_exit')} | ||
| </LegacyStyledText> | ||
| <LegacyStyledText as="p" textAlign={TEXT_ALIGN_CENTER}> | ||
| {t('branded:help_us_improve_send_error_report', { | ||
| support_email: SUPPORT_EMAIL, | ||
| })} | ||
| </LegacyStyledText> | ||
| </ContentWrapper> | ||
| <ErrorTextArea readOnly value={errorMessage ?? ''} spellCheck={false} /> | ||
| <PrimaryButton | ||
| textTransform={TEXT_TRANSFORM_CAPITALIZE} | ||
| alignSelf={ALIGN_FLEX_END} | ||
| onClick={handleClose} | ||
| <ModalContainer | ||
| padding={SPACING.spacing32} | ||
| flexDirection={DIRECTION_COLUMN} | ||
| alignItems={ALIGN_CENTER} | ||
| justifyContent={JUSTIFY_SPACE_BETWEEN} | ||
| gridGap={SPACING.spacing16} | ||
| > | ||
| {t('shared:exit')} | ||
| </PrimaryButton> | ||
| </ModalContainer> | ||
| <Icon | ||
| name="ot-alert" | ||
| size="2.5rem" | ||
| color={COLORS.red50} | ||
| aria-label="alert" | ||
| /> | ||
| <ErrorHeader> | ||
| {i18n.format(t('shared:something_went_wrong'), 'sentenceCase')} | ||
| </ErrorHeader> | ||
| <ContentWrapper> | ||
| <LegacyStyledText | ||
| as="p" | ||
| fontWeight={TYPOGRAPHY.fontWeightSemiBold} | ||
| textAlign={TEXT_ALIGN_CENTER} | ||
| > | ||
| {t('remove_probe_before_exit')} | ||
| </LegacyStyledText> | ||
| <LegacyStyledText as="p" textAlign={TEXT_ALIGN_CENTER}> | ||
| {t('branded:help_us_improve_send_error_report', { | ||
| support_email: SUPPORT_EMAIL, | ||
| })} | ||
| </LegacyStyledText> | ||
| </ContentWrapper> | ||
| <ErrorTextArea readOnly value={errorMessage ?? ''} spellCheck={false} /> | ||
| <PrimaryButton | ||
| textTransform={TEXT_TRANSFORM_CAPITALIZE} | ||
| alignSelf={ALIGN_FLEX_END} | ||
| onClick={headerCommands.handleClose} | ||
| > | ||
| {t('shared:exit')} | ||
| </PrimaryButton> | ||
| </ModalContainer> | ||
| </LPCContentContainer> | ||
| ) | ||
| } | ||
|
|
||
|
|
||
37 changes: 37 additions & 0 deletions
37
app/src/organisms/LabwarePositionCheck/LPCProbeNotAttached.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,37 @@ | ||
| import { useSelector } from 'react-redux' | ||
| import { useTranslation } from 'react-i18next' | ||
|
|
||
| import { ProbeNotAttached } from '/app/organisms/PipetteWizardFlows/ProbeNotAttached' | ||
| import { getIsOnDevice } from '/app/redux/config' | ||
| import { LPCContentContainer } from '/app/organisms/LabwarePositionCheck/LPCContentContainer' | ||
|
|
||
| import type { LPCWizardContentProps } from '/app/organisms/LabwarePositionCheck/types' | ||
|
|
||
| // TODO(jh, 02-05-25): EXEC-1190. | ||
| export function LPCProbeNotAttached(props: LPCWizardContentProps): JSX.Element { | ||
| const { t } = useTranslation('labware_position_check') | ||
| const { commandUtils } = props | ||
| const { setShowUnableToDetect, headerCommands } = commandUtils | ||
| const isOnDevice = useSelector(getIsOnDevice) | ||
|
|
||
| return ( | ||
| <LPCContentContainer | ||
| {...props} | ||
| header={t('labware_position_check_title')} | ||
| buttonText={t('try_again')} | ||
| onClickButton={headerCommands.handleAttachProbeCheck} | ||
| secondaryButtonProps={{ | ||
| buttonText: t('exit'), | ||
| buttonCategory: 'rounded', | ||
| buttonType: 'tertiaryLowLight', | ||
| onClick: headerCommands.handleNavToDetachProbe, | ||
| }} | ||
| > | ||
| <ProbeNotAttached | ||
| handleOnClick={() => null} | ||
| setShowUnableToDetect={setShowUnableToDetect} | ||
| isOnDevice={isOnDevice} | ||
| /> | ||
| </LPCContentContainer> | ||
| ) | ||
| } |
Oops, something went wrong.