feat(app): add tiprack selection step to quick transfer flow

app/src/organisms/QuickTransferFlow/SelectPipette.tsx

@@ -79,9 +79,12 @@ export function SelectPipette(props: SelectPipetteProps): JSX.Element {
         marginTop={SPACING.spacing120}
         flexDirection={DIRECTION_COLUMN}
         padding={`${SPACING.spacing16} ${SPACING.spacing60} ${SPACING.spacing40} ${SPACING.spacing60}`}
-        gridGap={SPACING.spacing16}
+        gridGap={SPACING.spacing4}
       >
-        <StyledText css={TYPOGRAPHY.level4HeaderRegular}>
+        <StyledText
+          css={TYPOGRAPHY.level4HeaderRegular}
+          paddingBottom={SPACING.spacing8}
+        >
           {t('pipette_currently_attached')}
         </StyledText>
         {leftPipetteSpecs != null ? (

app/src/organisms/QuickTransferFlow/SelectTipRack.tsx

@@ -0,0 +1,80 @@
+import * as React from 'react'
+import { useTranslation } from 'react-i18next'
+import { Flex, SPACING, DIRECTION_COLUMN } from '@opentrons/components'
+import { getAllDefinitions } from '@opentrons/shared-data'
+import { SmallButton, LargeButton } from '../../atoms/buttons'
+import { ChildNavigation } from '../ChildNavigation'
+
+import type { LabwareDefinition2 } from '@opentrons/shared-data'
+import type {
+  QuickTransferSetupState,
+  QuickTransferWizardAction,
+} from './types'
+
+interface SelectTipRackProps {
+  onNext: () => void
+  onBack: () => void
+  exitButtonProps: React.ComponentProps<typeof SmallButton>
+  state: QuickTransferSetupState
+  dispatch: React.Dispatch<QuickTransferWizardAction>
+}
+
+export function SelectTipRack(props: SelectTipRackProps): JSX.Element {
+  const { onNext, onBack, exitButtonProps, state, dispatch } = props
+  const { i18n, t } = useTranslation(['quick_transfer', 'shared'])
+
+  const allLabwareDefinitionsByUri = getAllDefinitions()
+  const selectedPipetteDefaultTipracks =
+    state.pipette?.liquids.default.defaultTipracks ?? []
+
+  const [selectedTipRack, setSelectedTipRack] = React.useState<
+    LabwareDefinition2 | undefined
+  >(state.tipRack)
+
+  const handleClickNext = (): void => {
+    // the button will be disabled if this values is null
+    if (selectedTipRack != null) {
+      dispatch({
+        type: 'SELECT_TIP_RACK',
+        tipRack: selectedTipRack,
+      })
+      onNext()
+    }
+  }
+  return (
+    <Flex>
+      <ChildNavigation
+        header={t('select_tip_rack')}
+        buttonText={i18n.format(t('shared:continue'), 'capitalize')}
+        onClickBack={onBack}
+        onClickButton={handleClickNext}
+        secondaryButtonProps={exitButtonProps}
+        top={SPACING.spacing8}
+        buttonIsDisabled={selectedTipRack == null}
+      />
+      <Flex
+        marginTop={SPACING.spacing120}
+        flexDirection={DIRECTION_COLUMN}
+        padding={`${SPACING.spacing16} ${SPACING.spacing60} ${SPACING.spacing40} ${SPACING.spacing60}`}
+        gridGap={SPACING.spacing4}
+        width="100%"
+      >
+        {selectedPipetteDefaultTipracks.map(tipRack => {
+          const tipRackDef = allLabwareDefinitionsByUri[tipRack]
+
+          return tipRackDef != null ? (
+            <LargeButton
+              buttonType={
+                selectedTipRack === tipRackDef ? 'primary' : 'secondary'
+              }
+              onClick={() => {
+                setSelectedTipRack(tipRackDef)
+              }}
+              buttonText={tipRackDef.metadata.displayName}
+            />
+          ) : null
+        })}
+      </Flex>
+    </Flex>
+  )
+}

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

@@ -0,0 +1,86 @@
+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 { SelectTipRack } from '../SelectTipRack'
+
+vi.mock('@opentrons/react-api-client')
+const render = (props: React.ComponentProps<typeof SelectTipRack>) => {
+  return renderWithProviders(<SelectTipRack {...props} />, {
+    i18nInstance: i18n,
+  })
+}
+
+describe('SelectTipRack', () => {
+  let props: React.ComponentProps<typeof SelectTipRack>
+
+  beforeEach(() => {
+    props = {
+      onNext: vi.fn(),
+      onBack: vi.fn(),
+      exitButtonProps: {
+        buttonType: 'tertiaryLowLight',
+        buttonText: 'Exit',
+        onClick: vi.fn(),
+      },
+      state: {
+        mount: 'left',
+        pipette: {
+          liquids: {
+            default: {
+              defaultTipracks: [
+                'opentrons/opentrons_flex_96_tiprack_1000ul/1',
+                'opentrons/opentrons_flex_96_tiprack_200ul/1',
+                'opentrons/opentrons_flex_96_tiprack_50ul/1',
+                'opentrons/opentrons_flex_96_filtertiprack_1000ul/1',
+                'opentrons/opentrons_flex_96_filtertiprack_200ul/1',
+                'opentrons/opentrons_flex_96_filtertiprack_50ul/1',
+              ],
+            },
+          },
+        } as any,
+      },
+      dispatch: vi.fn(),
+    }
+  })
+  afterEach(() => {
+    vi.resetAllMocks()
+  })
+
+  it('renders the select tip rack screen, header, and exit button', () => {
+    render(props)
+    screen.getByText('Select tip rack')
+    const exitBtn = screen.getByText('Exit')
+    fireEvent.click(exitBtn)
+    expect(props.exitButtonProps.onClick).toHaveBeenCalled()
+  })
+
+  it('renders continue button and it is disabled if no tip rack is selected', () => {
+    render(props)
+    screen.getByText('Continue')
+    const continueBtn = screen.getByTestId('ChildNavigation_Primary_Button')
+    expect(continueBtn).toBeDisabled()
+  })
+
+  it('selects tip rack by default if there is one in state, button will be enabled', () => {
+    render({ ...props, state: { tipRack: { def: 'definition' } as any } })
+    const continueBtn = screen.getByTestId('ChildNavigation_Primary_Button')
+    expect(continueBtn).toBeEnabled()
+    fireEvent.click(continueBtn)
+    expect(props.onNext).toHaveBeenCalled()
+  })
+
+  it('enables continue button if you click a tip rack', () => {
+    render(props)
+    const continueBtn = screen.getByTestId('ChildNavigation_Primary_Button')
+    expect(continueBtn).toBeDisabled()
+    const tipRackButton = screen.getByText('Opentrons Flex 96 Tip Rack 200 µL')
+    fireEvent.click(tipRackButton)
+    expect(continueBtn).toBeEnabled()
+    fireEvent.click(continueBtn)
+    expect(props.dispatch).toHaveBeenCalled()
+    expect(props.onNext).toHaveBeenCalled()
+  })
+})

app/src/organisms/QuickTransferFlow/index.tsx

@@ -1,11 +1,17 @@
 import * as React from 'react'
 import { useHistory } from 'react-router-dom'
 import { useTranslation } from 'react-i18next'
-import { Flex, StepMeter, SPACING } from '@opentrons/components'
+import {
+  Flex,
+  StepMeter,
+  SPACING,
+  POSITION_STICKY,
+} from '@opentrons/components'
 import { SmallButton } from '../../atoms/buttons'
 import { ChildNavigation } from '../ChildNavigation'
 import { CreateNewTransfer } from './CreateNewTransfer'
 import { SelectPipette } from './SelectPipette'
+import { SelectTipRack } from './SelectTipRack'
 import { quickTransferReducer } from './utils'
 
 import type { QuickTransferSetupState } from './types'
@@ -66,6 +72,16 @@ export const QuickTransferFlow = (): JSX.Element => {
         exitButtonProps={exitButtonProps}
       />
     )
+  } else if (currentStep === 3) {
+    modalContent = (
+      <SelectTipRack
+        state={state}
+        dispatch={dispatch}
+        onBack={() => setCurrentStep(prevStep => prevStep - 1)}
+        onNext={() => setCurrentStep(prevStep => prevStep + 1)}
+        exitButtonProps={exitButtonProps}
+      />
+    )
   } else {
     modalContent = null
   }
@@ -76,6 +92,8 @@ export const QuickTransferFlow = (): JSX.Element => {
       <StepMeter
         totalSteps={QUICK_TRANSFER_WIZARD_STEPS}
         currentStep={currentStep}
+        position={POSITION_STICKY}
+        top="0"
       />
       {modalContent == null ? (
         <Flex>

app/src/organisms/QuickTransferFlow/types.ts

@@ -1,14 +1,14 @@
 import { ACTIONS } from './constants'
 import type { Mount } from '@opentrons/api-client'
-import type { LabwareDefinition1, PipetteV2Specs } from '@opentrons/shared-data'
+import type { LabwareDefinition2, PipetteV2Specs } from '@opentrons/shared-data'
 
 export interface QuickTransferSetupState {
   pipette?: PipetteV2Specs
   mount?: Mount
-  tipRack?: LabwareDefinition1
-  source?: LabwareDefinition1
+  tipRack?: LabwareDefinition2
+  source?: LabwareDefinition2
   sourceWells?: string[]
-  destination?: LabwareDefinition1
+  destination?: LabwareDefinition2
   destinationWells?: string[]
   volume?: number
 }
@@ -29,19 +29,19 @@ interface SelectPipetteAction {
 }
 interface SelectTipRackAction {
   type: typeof ACTIONS.SELECT_TIP_RACK
-  tipRack: LabwareDefinition1
+  tipRack: LabwareDefinition2
 }
 interface SetSourceLabwareAction {
   type: typeof ACTIONS.SET_SOURCE_LABWARE
-  labware: LabwareDefinition1
+  labware: LabwareDefinition2
 }
 interface SetSourceWellsAction {
   type: typeof ACTIONS.SET_SOURCE_WELLS
   wells: string[]
 }
 interface SetDestLabwareAction {
   type: typeof ACTIONS.SET_DEST_LABWARE
-  labware: LabwareDefinition1
+  labware: LabwareDefinition2
 }
 interface SetDestWellsAction {
   type: typeof ACTIONS.SET_DEST_WELLS

components/src/atoms/StepMeter/index.tsx

@@ -5,13 +5,15 @@ import { RESPONSIVENESS, SPACING } from '../../ui-style-constants'
 import { COLORS } from '../../helix-design-system'
 import { POSITION_ABSOLUTE, POSITION_RELATIVE } from '../../styles'
 
-interface StepMeterProps {
+import type { StyleProps } from '../../primitives'
+
+interface StepMeterProps extends StyleProps {
   totalSteps: number
   currentStep: number | null
 }
 
 export const StepMeter = (props: StepMeterProps): JSX.Element => {
-  const { totalSteps, currentStep } = props
+  const { totalSteps, currentStep, ...styleProps } = props
   const progress = currentStep != null ? currentStep : 0
   const percentComplete = `${
     //    this logic puts a cap at 100% percentComplete which we should never run into
@@ -21,7 +23,7 @@ export const StepMeter = (props: StepMeterProps): JSX.Element => {
   }%`
 
   const StepMeterContainer = css`
-    position: ${POSITION_RELATIVE};
+    position: ${styleProps.position ? styleProps.position : POSITION_RELATIVE};
     height: ${SPACING.spacing4};
     background-color: ${COLORS.grey30};
     @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
@@ -41,7 +43,11 @@ export const StepMeter = (props: StepMeterProps): JSX.Element => {
   `
 
   return (
-    <Box data-testid="StepMeter_StepMeterContainer" css={StepMeterContainer}>
+    <Box
+      data-testid="StepMeter_StepMeterContainer"
+      css={StepMeterContainer}
+      {...styleProps}
+    >
       <Box data-testid="StepMeter_StepMeterBar" css={StepMeterBar} />
     </Box>
   )