feat(app): add labware selection and volume entry screens

app/src/assets/localization/en/quick_transfer.json

@@ -1,8 +1,14 @@
 {
+ "all": "All labware",
+ "aspirate_volume": "Aspirate volume per well (µL)",
  "create_new_transfer": "Create new quick transfer",
  "left_mount": "Left Mount",
  "both_mounts": "Left + Right Mount",
+ "dispense_volume": "Dispense volume per well (µL)",
+ "exit_quick_transfer": "Exit quick transfer?",
+ "lose_all_progress": "You will lose all progress on this quick transfer.",
  "right_mount": "Right Mount",
+ "reservoir": "Reservoirs",
  "select_attached_pipette": "Select attached pipette",
  "select_dest_labware": "Select destination labware",
  "select_dest_wells": "Select destination wells",
@@ -12,10 +18,15 @@
  "set_aspirate_volume": "Set aspirate volume",
  "set_dispense_volume": "Set dispense volume",
  "set_transfer_volume": "Set transfer volume",
+ "source_labware": "Source labware in D2",
  "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",
+ "tubeRack": "Tube racks",
+ "volume_per_well": "Volume per well (µL)",
+ "value_out_of_range": "Value must be between {{min}}-{{max}}",
  "labware": "Labware",
  "pipette_currently_attached": "Quick transfer options depend on the pipettes currently attached to your robot.",
+ "wellPlate": "Well plates",
  "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)."
 }

app/src/atoms/SoftwareKeyboard/NumericalKeyboard/index.css

@@ -10,6 +10,7 @@
 .simple-keyboard.oddTheme1.hg-theme-default {
  width: 100%;
  height: 100%;
+ border-radius: 0;
  background-color: #cbcccc; /* grey35 */
  font-family: 'Public Sans', sans-serif;
  padding: 8px;

app/src/organisms/QuickTransferFlow/ConfirmExitModal.tsx

@@ -0,0 +1,54 @@
+import * as React from 'react'
+import { useTranslation } from 'react-i18next'
+import {
+ SPACING,
+ COLORS,
+ StyledText,
+ Flex,
+ DIRECTION_COLUMN,
+ TYPOGRAPHY,
+} from '@opentrons/components'
+import { Modal } from '../../molecules/Modal'
+import { SmallButton } from '../../atoms/buttons'
+
+interface ConfirmExitModalProps {
+ confirmExit: () => void
+ cancelExit: () => void
+}
+
+export const ConfirmExitModal = (props: ConfirmExitModalProps): JSX.Element => {
+ const { i18n, t } = useTranslation(['quick_transfer', 'shared'])
+
+ return (
+ <Modal
+ header={{
+ title: t('exit_quick_transfer'),
+ iconName: 'alert-circle',
+ iconColor: COLORS.yellow50,
+ }}
+ >
+ <Flex
+ flexDirection={DIRECTION_COLUMN}
+ gridGap={SPACING.spacing10}
+ width="100%"
+ >
+ <StyledText css={TYPOGRAPHY.bodyTextRegular}>
+ {t('lose_all_progress')}
+ </StyledText>
+ <Flex gridGap={SPACING.spacing8}>
+ <SmallButton
+ width="50%"
+ buttonText={i18n.format(t('shared:cancel'), 'capitalize')}
+ onClick={props.cancelExit}
+ />
+ <SmallButton
+ width="50%"
+ buttonText={i18n.format(t('shared:delete'), 'capitalize')}
+ onClick={props.confirmExit}
+ buttonType="alert"
+ />
+ </Flex>
+ </Flex>
+ </Modal>
+ )
+}

app/src/organisms/QuickTransferFlow/SelectDestLabware.tsx

@@ -0,0 +1,147 @@
+import * as React from 'react'
+import { useTranslation } from 'react-i18next'
+import {
+ Flex,
+ SPACING,
+ DIRECTION_COLUMN,
+ DIRECTION_ROW,
+ COLORS,
+ POSITION_FIXED,
+ ALIGN_CENTER,
+} from '@opentrons/components'
+
+import { SmallButton, LargeButton, TabbedButton } from '../../atoms/buttons'
+import { ChildNavigation } from '../ChildNavigation'
+import { getCompatibleLabwareByCategory } from './utils'
+
+import type { LabwareDefinition2 } from '@opentrons/shared-data'
+import type {
+ QuickTransferSetupState,
+ QuickTransferWizardAction,
+} from './types'
+import { LabwareFilter } from '../../pages/Labware/types'
+
+interface SelectDestLabwareProps {
+ onNext: () => void
+ onBack: () => void
+ exitButtonProps: React.ComponentProps<typeof SmallButton>
+ state: QuickTransferSetupState
+ dispatch: React.Dispatch<QuickTransferWizardAction>
+}
+
+export function SelectDestLabware(
+ props: SelectDestLabwareProps
+): JSX.Element | null {
+ const { onNext, onBack, exitButtonProps, state, dispatch } = props
+ const { i18n, t } = useTranslation(['quick_transfer', 'shared'])
+ const labwareDisplayCategoryFilters: LabwareFilter[] = [
+ 'all',
+ 'wellPlate',
+ 'reservoir',
+ ]
+ if (state.pipette?.channels === 1) {
+ labwareDisplayCategoryFilters.push('tubeRack')
+ }
+ const [selectedCategory, setSelectedCategory] = React.useState<LabwareFilter>(
+ 'all'
+ )
+ const [selectedLabware, setSelectedLabware] = React.useState<
+ LabwareDefinition2 | 'source' | undefined
+ >(state.destination)
+
+ if (state.pipette == null) return null
+
+ const compatibleLabwareDefinitions = getCompatibleLabwareByCategory(
+ state.pipette.channels,
+ selectedCategory
+ )
+
+ const handleClickNext = (): void => {
+ // the button will be disabled if this values is null
+ if (selectedLabware != null) {
+ dispatch({
+ type: 'SET_DEST_LABWARE',
+ labware: selectedLabware,
+ })
+ onNext()
+ }
+ }
+ return (
+ <Flex>
+ <ChildNavigation
+ header={t('select_dest_labware')}
+ buttonText={i18n.format(t('shared:continue'), 'capitalize')}
+ onClickBack={onBack}
+ onClickButton={handleClickNext}
+ secondaryButtonProps={exitButtonProps}
+ top={SPACING.spacing8}
+ buttonIsDisabled={selectedLabware == null}
+ />
+ <Flex
+ flexDirection={DIRECTION_COLUMN}
+ padding={`${SPACING.spacing16} ${SPACING.spacing60} ${SPACING.spacing40} ${SPACING.spacing60}`}
+ width="100%"
+ >
+ <Flex
+ gridGap={SPACING.spacing8}
+ height={SPACING.spacing80}
+ backgroundColor={COLORS.white}
+ width="100%"
+ flexDirection={DIRECTION_ROW}
+ position={POSITION_FIXED}
+ top={SPACING.spacing120}
+ marginBottom={SPACING.spacing24}
+ alignItems={ALIGN_CENTER}
+ >
+ {labwareDisplayCategoryFilters.map(category => (
+ <TabbedButton
+ key={category}
+ title={category}
+ isSelected={category === selectedCategory}
+ onClick={() => setSelectedCategory(category)}
+ height={SPACING.spacing60}
+ >
+ {t(category)}
+ </TabbedButton>
+ ))}
+ </Flex>
+ <Flex
+ gridGap={SPACING.spacing4}
+ flexDirection={DIRECTION_COLUMN}
+ marginTop="175px"
+ >
+ {selectedCategory === 'all' && state?.source != null ? (
+ <LargeButton
+ buttonType={
+ selectedLabware === 'source' ? 'primary' : 'secondary'
+ }
+ onClick={() => {
+ setSelectedLabware('source')
+ }}
+ buttonText={t('source_labware')}
+ subtext={state.source.metadata.displayName}
+ />
+ ) : null}
+ {compatibleLabwareDefinitions?.map(definition => {
+ return definition.metadata.displayName != null ? (
+ <LargeButton
+ key={`${selectedCategory}-${definition.metadata.displayName}`}
+ buttonType={
+ selectedLabware !== 'source' &&
+ selectedLabware?.metadata.displayName ===
+ definition.metadata.displayName
+ ? 'primary'
+ : 'secondary'
+ }
+ onClick={() => {
+ setSelectedLabware(definition)
+ }}
+ buttonText={definition.metadata.displayName}
+ />
+ ) : null
+ })}
+ </Flex>
+ </Flex>
+ </Flex>
+ )
+}

app/src/organisms/QuickTransferFlow/SelectDestWells.tsx

@@ -0,0 +1,59 @@
+import * as React from 'react'
+import { useTranslation } from 'react-i18next'
+import { Flex, SPACING } from '@opentrons/components'
+
+import { SmallButton } from '../../atoms/buttons'
+import { ChildNavigation } from '../ChildNavigation'
+
+import type {
+ QuickTransferSetupState,
+ QuickTransferWizardAction,
+} from './types'
+
+interface SelectDestWellsProps {
+ onNext: () => void
+ onBack: () => void
+ exitButtonProps: React.ComponentProps<typeof SmallButton>
+ state: QuickTransferSetupState
+ dispatch: React.Dispatch<QuickTransferWizardAction>
+}
+
+export function SelectDestWells(props: SelectDestWellsProps): JSX.Element {
+ const { onNext, onBack, exitButtonProps, state, dispatch } = props
+ const { i18n, t } = useTranslation(['quick_transfer', 'shared'])
+
+ const handleClickNext = (): void => {
+ // until well selection is implemented, select all wells and proceed to the next step
+ if (state.destination === 'source' && state.source != null) {
+ dispatch({
+ type: 'SET_DEST_WELLS',
+ wells: Object.keys(state.source.wells),
+ })
+ } else if (state.destination !== 'source' && state.destination != null) {
+ dispatch({
+ type: 'SET_DEST_WELLS',
+ wells: Object.keys(state.destination.wells),
+ })
+ }
+ onNext()
+ }
+ return (
+ <Flex>
+ <ChildNavigation
+ header={t('select_dest_wells')}
+ onClickBack={onBack}
+ buttonText={i18n.format(t('shared:continue'), 'capitalize')}
+ onClickButton={handleClickNext}
+ buttonIsDisabled={false}
+ secondaryButtonProps={exitButtonProps}
+ top={SPACING.spacing8}
+ />
+ <Flex
+ marginTop={SPACING.spacing120}
+ padding={`${SPACING.spacing16} ${SPACING.spacing60} ${SPACING.spacing40} ${SPACING.spacing60}`}
+ >
+ TODO: Add destination well selection deck map
+ </Flex>
+ </Flex>
+ )
+}