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

fix PLAT-176, PLAT-177

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

@@ -1,8 +1,10 @@
 {
   "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)",
   "right_mount": "Right Mount",
   "reservoir": "Reservoirs",
   "select_attached_pipette": "Select attached pipette",
@@ -18,6 +20,8 @@
   "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",

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/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>
+  )
+}

app/src/organisms/QuickTransferFlow/SelectSourceWells.tsx

@@ -0,0 +1,54 @@
+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 SelectSourceWellsProps {
+  onNext: () => void
+  onBack: () => void
+  exitButtonProps: React.ComponentProps<typeof SmallButton>
+  state: QuickTransferSetupState
+  dispatch: React.Dispatch<QuickTransferWizardAction>
+}
+
+export function SelectSourceWells(props: SelectSourceWellsProps): 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.source?.wells != null) {
+      dispatch({
+        type: 'SET_SOURCE_WELLS',
+        wells: Object.keys(state.source.wells),
+      })
+      onNext()
+    }
+  }
+  return (
+    <Flex>
+      <ChildNavigation
+        header={t('select_source_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 source well selection deck map
+      </Flex>
+    </Flex>
+  )
+}

app/src/organisms/QuickTransferFlow/SelectTipRack.tsx

@@ -34,7 +34,6 @@ export function SelectTipRack(props: SelectTipRackProps): JSX.Element {
   const handleClickNext = (): void => {
     // the button will be disabled if this values is null
     if (selectedTipRack != null) {
-      console.log('submitting tip rack')
       dispatch({
         type: 'SELECT_TIP_RACK',
         tipRack: selectedTipRack,

app/src/organisms/QuickTransferFlow/VolumeEntry.tsx

@@ -0,0 +1,125 @@
+import * as React from 'react'
+import { useTranslation } from 'react-i18next'
+import {
+  Flex,
+  SPACING,
+  DIRECTION_COLUMN,
+  ALIGN_CENTER,
+} from '@opentrons/components'
+
+import { SmallButton } from '../../atoms/buttons'
+import { ChildNavigation } from '../ChildNavigation'
+import { InputField } from '../../atoms/InputField'
+import { NumericalKeyboard } from '../../atoms/SoftwareKeyboard'
+import { getVolumeLimits } from './utils'
+
+import type {
+  QuickTransferSetupState,
+  QuickTransferWizardAction,
+} from './types'
+
+interface VolumeEntryProps {
+  onNext: () => void
+  onBack: () => void
+  exitButtonProps: React.ComponentProps<typeof SmallButton>
+  state: QuickTransferSetupState
+  dispatch: React.Dispatch<QuickTransferWizardAction>
+}
+
+export function VolumeEntry(props: VolumeEntryProps): JSX.Element {
+  const { onNext, onBack, exitButtonProps, state, dispatch } = props
+  const { i18n, t } = useTranslation(['quick_transfer', 'shared'])
+  const keyboardRef = React.useRef(null)
+
+  const [volume, setVolume] = React.useState<string>('')
+  const volumeRange = getVolumeLimits(state)
+  let headerCopy = t('set_transfer_volume')
+  let textEntryCopy = t('volume_per_well')
+  if (
+    state.sourceWells != null &&
+    state.destinationWells != null &&
+    state.sourceWells.length > state.destinationWells?.length
+  ) {
+    headerCopy = t('set_aspirate_volume')
+    textEntryCopy = t('aspirate_volume')
+  } else if (
+    state.sourceWells != null &&
+    state.destinationWells != null &&
+    state.sourceWells.length < state.destinationWells.length
+  ) {
+    headerCopy = t('set_dispense_volume')
+    textEntryCopy = t('dispense_volume')
+  }
+
+  const volumeAsNumber = Number(volume)
+
+  const handleClickNext = (): void => {
+    // the button will be disabled if this values is null
+    if (volumeAsNumber != null) {
+      dispatch({
+        type: 'SET_VOLUME',
+        volume: volumeAsNumber,
+      })
+      onNext()
+    }
+  }
+
+  const error =
+    volume != '' &&
+    (volumeAsNumber < volumeRange.min || volumeAsNumber > volumeRange.max)
+      ? t(`value_out_of_range`, {
+          min: volumeRange.min,
+          max: volumeRange.max,
+        })
+      : null
+
+  return (
+    <Flex>
+      <ChildNavigation
+        header={headerCopy}
+        buttonText={i18n.format(t('shared:continue'), 'capitalize')}
+        onClickBack={onBack}
+        onClickButton={handleClickNext}
+        secondaryButtonProps={exitButtonProps}
+        top={SPACING.spacing8}
+        buttonIsDisabled={error != null || volume == ''}
+      />
+      <Flex
+        alignSelf={ALIGN_CENTER}
+        gridGap={SPACING.spacing48}
+        paddingX={SPACING.spacing40}
+        padding={`${SPACING.spacing16} ${SPACING.spacing40} ${SPACING.spacing40}`}
+        marginTop="7.75rem" // using margin rather than justify due to content moving with error message
+        alignItems={ALIGN_CENTER}
+        height="22rem"
+      >
+        <Flex
+          width="30.5rem"
+          height="100%"
+          gridGap={SPACING.spacing24}
+          flexDirection={DIRECTION_COLUMN}
+          marginTop={SPACING.spacing68}
+        >
+          <InputField
+            type="text"
+            value={volume}
+            title={textEntryCopy}
+            error={error}
+            readOnly
+          />
+        </Flex>
+        <Flex
+          paddingX={SPACING.spacing24}
+          height="21.25rem"
+          marginTop="7.75rem"
+          borderRadius="0"
+        >
+          <NumericalKeyboard
+            keyboardRef={keyboardRef}
+            onChange={e => setVolume(e)}
+          />
+        </Flex>
+      </Flex>
+    </Flex>
+  )
+}

app/src/organisms/QuickTransferFlow/__tests__/SelectDestLabware.test.tsx

@@ -0,0 +1,102 @@
+import * as React from 'react'
+import { fireEvent, screen } from '@testing-library/react'
+import { describe, it, expect, afterEach, vi, beforeEach } from 'vitest'
+
+import { renderWithProviders } from '../../../__testing-utils__'
+import { i18n } from '../../../i18n'
+import { SelectDestLabware } from '../SelectDestLabware'
+
+vi.mock('@opentrons/react-api-client')
+const render = (props: React.ComponentProps<typeof SelectDestLabware>) => {
+  return renderWithProviders(<SelectDestLabware {...props} />, {
+    i18nInstance: i18n,
+  })
+}
+
+describe('SelectDestLabware', () => {
+  let props: React.ComponentProps<typeof SelectDestLabware>
+
+  beforeEach(() => {
+    props = {
+      onNext: vi.fn(),
+      onBack: vi.fn(),
+      exitButtonProps: {
+        buttonType: 'tertiaryLowLight',
+        buttonText: 'Exit',
+        onClick: vi.fn(),
+      },
+      state: {
+        mount: 'left',
+        pipette: {
+          channels: 1,
+        } as any,
+      },
+      dispatch: vi.fn(),
+    }
+  })
+  afterEach(() => {
+    vi.resetAllMocks()
+  })
+
+  it('renders the select destination labware screen, header, and exit button', () => {
+    render(props)
+    screen.getByText('Select destination labware')
+    const exitBtn = screen.getByText('Exit')
+    fireEvent.click(exitBtn)
+    expect(props.exitButtonProps.onClick).toHaveBeenCalled()
+  })
+
+  it('renders continue button and it is disabled if no labware is selected', () => {
+    render(props)
+    screen.getByText('Continue')
+    const continueBtn = screen.getByTestId('ChildNavigation_Primary_Button')
+    expect(continueBtn).toBeDisabled()
+  })
+
+  it('selects labware by default if there is one in state, button will be enabled', () => {
+    render({ ...props, state: { destination: { def: 'definition' } as any } })
+    const continueBtn = screen.getByTestId('ChildNavigation_Primary_Button')
+    expect(continueBtn).toBeEnabled()
+    fireEvent.click(continueBtn)
+    expect(props.onNext).toHaveBeenCalled()
+    expect(props.dispatch).toHaveBeenCalled()
+  })
+
+  it('renders all categories for a single channel pipette', () => {
+    render(props)
+    screen.getByText('All labware')
+    screen.getByText('Well plates')
+    screen.getByText('Reservoirs')
+    screen.getByText('Tube racks')
+  })
+
+  it.fails('does not render tube rack tab for multi channel pipette', () => {
+    render({ ...props, state: { pipette: { channels: 8 } as any } })
+    screen.getByText('Tube racks')
+  })
+
+  it('renders the source labware as the first option', () => {
+    render({
+      ...props,
+      state: {
+        source: { metadata: { displayName: 'source labware name' } } as any,
+      },
+    })
+    render(props)
+    screen.getByText('Source labware in D2')
+    screen.getByText('source labware name')
+  })
+  it('enables continue button if you select a labware', () => {
+    render({
+      ...props,
+      state: {
+        source: { metadata: { displayName: 'source labware name' } } as any,
+      },
+    })
+    const continueBtn = screen.getByTestId('ChildNavigation_Primary_Button')
+    expect(continueBtn).toBeDisabled()
+    const sourceLabware = screen.getByText('Source labware in D2')
+    fireEvent.click(sourceLabware)
+    expect(continueBtn).toBeEnabled()
+  })
+})