-
Notifications
You must be signed in to change notification settings - Fork 178
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(app): orchestration component for new quick transfer flow (#14808)
- Loading branch information
1 parent
8212642
commit 683c72a
Showing
16 changed files
with
535 additions
and
10 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
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
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,18 @@ | ||
| { | ||
| "create_new_transfer": "Create new quick transfer", | ||
| "select_attached_pipette": "Select attached pipette", | ||
| "select_dest_labware": "Select destination labware", | ||
| "select_dest_wells": "Select destination wells", | ||
| "select_source_labware": "Select source labware", | ||
| "select_source_wells": "Select source wells", | ||
| "select_tip_rack": "Select tip rack", | ||
| "set_aspirate_volume": "Set aspirate volume", | ||
| "set_dispense_volume": "Set dispense volume", | ||
| "set_transfer_volume": "Set transfer volume", | ||
| "use_deck_slots": "<block>Quick transfers use deck slots B2-D2. These slots hold a tip rack, a source labware, and a destination labware.</block><block>Make sure that your deck configuration is up to date to avoid collisions.</block>", | ||
| "tip_rack": "Tip rack", | ||
| "labware": "Labware", | ||
| "pipette_currently_attached": "Quick transfer options depend on the pipettes currently attached to your robot.", | ||
| "well_selection": "Well selection", | ||
| "well_ratio": "Quick transfers with multiple source wells can either be one-to-one (select {{wells}} for this transfer) or consolidate (select 1 destination well)." | ||
| } |
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
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
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
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,74 @@ | ||
| import * as React from 'react' | ||
| import { useTranslation, Trans } from 'react-i18next' | ||
| import { | ||
| Flex, | ||
| SPACING, | ||
| StyledText, | ||
| DeckConfigurator, | ||
| TYPOGRAPHY, | ||
| DIRECTION_COLUMN, | ||
| } from '@opentrons/components' | ||
| import { SmallButton } from '../../atoms/buttons' | ||
| import { useDeckConfigurationQuery } from '@opentrons/react-api-client' | ||
| import { ChildNavigation } from '../ChildNavigation' | ||
|
|
||
| interface CreateNewTransferProps { | ||
| onNext: () => void | ||
| exitButtonProps: React.ComponentProps<typeof SmallButton> | ||
| } | ||
|
|
||
| export function CreateNewTransfer(props: CreateNewTransferProps): JSX.Element { | ||
| const { i18n, t } = useTranslation(['quick_transfer', 'shared']) | ||
| const deckConfig = useDeckConfigurationQuery().data ?? [] | ||
| return ( | ||
| <Flex> | ||
| <ChildNavigation | ||
| header={t('create_new_transfer')} | ||
| buttonText={i18n.format(t('shared:continue'), 'capitalize')} | ||
| onClickButton={props.onNext} | ||
| secondaryButtonProps={props.exitButtonProps} | ||
| top={SPACING.spacing8} | ||
| /> | ||
| <Flex | ||
| marginTop={SPACING.spacing80} | ||
| flexDirection={DIRECTION_COLUMN} | ||
| padding={`0 ${SPACING.spacing60} ${SPACING.spacing40} ${SPACING.spacing60}`} | ||
| > | ||
| <Flex gridGap={SPACING.spacing16}> | ||
| <Flex | ||
| width="50%" | ||
| paddingTop={SPACING.spacing32} | ||
| marginTop={SPACING.spacing32} | ||
| flexDirection={DIRECTION_COLUMN} | ||
| > | ||
| <Trans | ||
| t={t} | ||
| i18nKey="use_deck_slots" | ||
| components={{ | ||
| block: ( | ||
| <StyledText | ||
| css={TYPOGRAPHY.level4HeaderRegular} | ||
| marginBottom={SPACING.spacing16} | ||
| /> | ||
| ), | ||
| }} | ||
| /> | ||
| </Flex> | ||
| <Flex width="50%"> | ||
| <DeckConfigurator | ||
| deckConfig={deckConfig} | ||
| readOnly | ||
| handleClickAdd={() => {}} | ||
| handleClickRemove={() => {}} | ||
| additionalStaticFixtures={[ | ||
| { location: 'cutoutB2', label: t('tip_rack') }, | ||
| { location: 'cutoutC2', label: t('labware') }, | ||
| { location: 'cutoutD2', label: t('labware') }, | ||
| ]} | ||
| /> | ||
| </Flex> | ||
| </Flex> | ||
| </Flex> | ||
| </Flex> | ||
| ) | ||
| } |
62 changes: 62 additions & 0 deletions
62
app/src/organisms/QuickTransferFlow/__tests__/CreateNewTransfer.test.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,62 @@ | ||
| import * as React from 'react' | ||
| import { fireEvent, screen } from '@testing-library/react' | ||
| import { describe, it, expect, afterEach, vi, beforeEach } from 'vitest' | ||
| import { DeckConfigurator } from '@opentrons/components' | ||
|
|
||
| import { renderWithProviders } from '../../../__testing-utils__' | ||
| import { i18n } from '../../../i18n' | ||
| import { CreateNewTransfer } from '../CreateNewTransfer' | ||
|
|
||
| import type * as OpentronsComponents from '@opentrons/components' | ||
|
|
||
| vi.mock('@opentrons/components', async importOriginal => { | ||
| const actual = await importOriginal<typeof OpentronsComponents>() | ||
| return { | ||
| ...actual, | ||
| DeckConfigurator: vi.fn(), | ||
| } | ||
| }) | ||
| const render = (props: React.ComponentProps<typeof CreateNewTransfer>) => { | ||
| return renderWithProviders(<CreateNewTransfer {...props} />, { | ||
| i18nInstance: i18n, | ||
| }) | ||
| } | ||
|
|
||
| describe('CreateNewTransfer', () => { | ||
| let props: React.ComponentProps<typeof CreateNewTransfer> | ||
|
|
||
| beforeEach(() => { | ||
| props = { | ||
| onNext: vi.fn(), | ||
| exitButtonProps: { | ||
| buttonType: 'tertiaryLowLight', | ||
| buttonText: 'Exit', | ||
| onClick: vi.fn(), | ||
| }, | ||
| } | ||
| }) | ||
| afterEach(() => { | ||
| vi.resetAllMocks() | ||
| }) | ||
|
|
||
| it('renders the create new transfer screen and header', () => { | ||
| render(props) | ||
| screen.getByText('Create new quick transfer') | ||
| screen.getByText( | ||
| 'Quick transfers use deck slots B2-D2. These slots hold a tip rack, a source labware, and a destination labware.' | ||
| ) | ||
| screen.getByText( | ||
| 'Make sure that your deck configuration is up to date to avoid collisions.' | ||
| ) | ||
| expect(vi.mocked(DeckConfigurator)).toHaveBeenCalled() | ||
| }) | ||
| it('renders exit and continue buttons and they work as expected', () => { | ||
| render(props) | ||
| const exitBtn = screen.getByText('Exit') | ||
| fireEvent.click(exitBtn) | ||
| expect(props.exitButtonProps.onClick).toHaveBeenCalled() | ||
| const continueBtn = screen.getByText('Continue') | ||
| fireEvent.click(continueBtn) | ||
| expect(props.onNext).toHaveBeenCalled() | ||
| }) | ||
| }) |
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,9 @@ | ||
| export const ACTIONS = { | ||
| SELECT_PIPETTE: 'SELECT_PIPETTE', | ||
| SELECT_TIP_RACK: 'SELECT_TIP_RACK', | ||
| SET_SOURCE_LABWARE: 'SET_SOURCE_LABWARE', | ||
| SET_SOURCE_WELLS: 'SET_SOURCE_WELLS', | ||
| SET_DEST_LABWARE: 'SET_DEST_LABWARE', | ||
| SET_DEST_WELLS: 'SET_DEST_WELLS', | ||
| SET_VOLUME: 'SET_VOLUME', | ||
| } as const |
Oops, something went wrong.