feat(app): setup advanced settings/tip management state for quick tra…

…nsfer (#15192)

fix PLAT-227

app/src/organisms/QuickTransferFlow/Overview.tsx

@@ -13,10 +13,10 @@ import {
 import { ListItem } from '../../atoms/ListItem'
 import { CONSOLIDATE, DISTRIBUTE } from './constants'
 
-import type { QuickTransferSetupState } from './types'
+import type { QuickTransferSummaryState } from './types'
 
 interface OverviewProps {
-  state: QuickTransferSetupState
+  state: QuickTransferSummaryState
 }
 
 export function Overview(props: OverviewProps): JSX.Element | null {
@@ -33,18 +33,22 @@ export function Overview(props: OverviewProps): JSX.Element | null {
   const displayItems = [
     {
       option: t('pipette'),
-      value: state.pipette?.displayName,
+      value: state.pipette.displayName,
+    },
+    {
+      option: t('tip_rack'),
+      value: state.tipRack.metadata.displayName,
     },
     {
       option: t('source_labware'),
-      value: state.source?.metadata.displayName,
+      value: state.source.metadata.displayName,
     },
     {
       option: t('destination_labware'),
       value:
         state.destination === 'source'
-          ? state.source?.metadata.displayName
-          : state.destination?.metadata.displayName,
+          ? state.source.metadata.displayName
+          : state.destination.metadata.displayName,
     },
     {
       option: transferCopy,
@@ -61,7 +65,7 @@ export function Overview(props: OverviewProps): JSX.Element | null {
       {displayItems.map(displayItem => (
         <ListItem type="noActive" key={displayItem.option}>
           <Flex justifyContent={JUSTIFY_SPACE_BETWEEN} width="100%">
-            <StyledText css={TYPOGRAPHY.level4HeaderSemiBold} width="30rem">
+            <StyledText css={TYPOGRAPHY.level4HeaderSemiBold} width="20rem">
               {displayItem.option}
             </StyledText>
             <StyledText

app/src/organisms/QuickTransferFlow/SelectDestLabware.tsx

@@ -18,15 +18,15 @@ import type { LabwareDefinition2 } from '@opentrons/shared-data'
 import type { SmallButton } from '../../atoms/buttons'
 import type { LabwareFilter } from '../../pages/Labware/types'
 import type {
-  QuickTransferSetupState,
+  QuickTransferWizardState,
   QuickTransferWizardAction,
 } from './types'
 
 interface SelectDestLabwareProps {
   onNext: () => void
   onBack: () => void
   exitButtonProps: React.ComponentProps<typeof SmallButton>
-  state: QuickTransferSetupState
+  state: QuickTransferWizardState
   dispatch: React.Dispatch<QuickTransferWizardAction>
 }
 

app/src/organisms/QuickTransferFlow/SelectDestWells.tsx

@@ -6,15 +6,15 @@ import { ChildNavigation } from '../ChildNavigation'
 
 import type { SmallButton } from '../../atoms/buttons'
 import type {
-  QuickTransferSetupState,
+  QuickTransferWizardState,
   QuickTransferWizardAction,
 } from './types'
 
 interface SelectDestWellsProps {
   onNext: () => void
   onBack: () => void
   exitButtonProps: React.ComponentProps<typeof SmallButton>
-  state: QuickTransferSetupState
+  state: QuickTransferWizardState
   dispatch: React.Dispatch<QuickTransferWizardAction>
 }
 

app/src/organisms/QuickTransferFlow/SelectPipette.tsx

@@ -15,15 +15,15 @@ import { ChildNavigation } from '../ChildNavigation'
 import type { PipetteData, Mount } from '@opentrons/api-client'
 import type { SmallButton } from '../../atoms/buttons'
 import type {
-  QuickTransferSetupState,
+  QuickTransferWizardState,
   QuickTransferWizardAction,
 } from './types'
 
 interface SelectPipetteProps {
   onNext: () => void
   onBack: () => void
   exitButtonProps: React.ComponentProps<typeof SmallButton>
-  state: QuickTransferSetupState
+  state: QuickTransferWizardState
   dispatch: React.Dispatch<QuickTransferWizardAction>
 }
 

app/src/organisms/QuickTransferFlow/SelectSourceLabware.tsx

@@ -18,15 +18,15 @@ import type { LabwareDefinition2 } from '@opentrons/shared-data'
 import type { SmallButton } from '../../atoms/buttons'
 import type { LabwareFilter } from '../../pages/Labware/types'
 import type {
-  QuickTransferSetupState,
+  QuickTransferWizardState,
   QuickTransferWizardAction,
 } from './types'
 
 interface SelectSourceLabwareProps {
   onNext: () => void
   onBack: () => void
   exitButtonProps: React.ComponentProps<typeof SmallButton>
-  state: QuickTransferSetupState
+  state: QuickTransferWizardState
   dispatch: React.Dispatch<QuickTransferWizardAction>
 }
 

app/src/organisms/QuickTransferFlow/SelectSourceWells.tsx

@@ -6,15 +6,15 @@ import { ChildNavigation } from '../ChildNavigation'
 
 import type { SmallButton } from '../../atoms/buttons'
 import type {
-  QuickTransferSetupState,
+  QuickTransferWizardState,
   QuickTransferWizardAction,
 } from './types'
 
 interface SelectSourceWellsProps {
   onNext: () => void
   onBack: () => void
   exitButtonProps: React.ComponentProps<typeof SmallButton>
-  state: QuickTransferSetupState
+  state: QuickTransferWizardState
   dispatch: React.Dispatch<QuickTransferWizardAction>
 }
 

app/src/organisms/QuickTransferFlow/SelectTipRack.tsx

@@ -8,15 +8,15 @@ import { ChildNavigation } from '../ChildNavigation'
 import type { LabwareDefinition2 } from '@opentrons/shared-data'
 import type { SmallButton } from '../../atoms/buttons'
 import type {
-  QuickTransferSetupState,
+  QuickTransferWizardState,
   QuickTransferWizardAction,
 } from './types'
 
 interface SelectTipRackProps {
   onNext: () => void
   onBack: () => void
   exitButtonProps: React.ComponentProps<typeof SmallButton>
-  state: QuickTransferSetupState
+  state: QuickTransferWizardState
   dispatch: React.Dispatch<QuickTransferWizardAction>
 }
 

app/src/organisms/QuickTransferFlow/SummaryAndSettings.tsx

@@ -13,20 +13,22 @@ import {
 import { TabbedButton } from '../../atoms/buttons'
 import { ChildNavigation } from '../ChildNavigation'
 import { Overview } from './Overview'
+import { getInitialSummaryState } from './utils'
+import { quickTransferSummaryReducer } from './reducers'
 
 import type { SmallButton } from '../../atoms/buttons'
-import type { QuickTransferSetupState } from './types'
+import type { QuickTransferWizardState } from './types'
 
 interface SummaryAndSettingsProps {
   onNext: () => void
   exitButtonProps: React.ComponentProps<typeof SmallButton>
-  state: QuickTransferSetupState
+  state: QuickTransferWizardState
 }
 
 export function SummaryAndSettings(
   props: SummaryAndSettingsProps
 ): JSX.Element | null {
-  const { onNext, exitButtonProps, state } = props
+  const { onNext, exitButtonProps, state: wizardFlowState } = props
   const { t } = useTranslation(['quick_transfer', 'shared'])
   const displayCategory: string[] = [
     'overview',
@@ -36,11 +38,18 @@ export function SummaryAndSettings(
   const [selectedCategory, setSelectedCategory] = React.useState<string>(
     'overview'
   )
+  // @ts-expect-error TODO figure out how to make this type non-null as we know
+  // none of these values will be undefined
+  const initialSummaryState = getInitialSummaryState(wizardFlowState)
+  const [state] = React.useReducer(
+    quickTransferSummaryReducer,
+    initialSummaryState
+  )
 
   return (
     <Flex>
       <ChildNavigation
-        header={t('quick_transfer_volume', { volume: state.volume })}
+        header={t('quick_transfer_volume', { volume: wizardFlowState.volume })}
         buttonText={t('create_transfer')}
         onClickButton={onNext}
         secondaryButtonProps={exitButtonProps}

app/src/organisms/QuickTransferFlow/VolumeEntry.tsx

@@ -10,20 +10,20 @@ import {
 import { ChildNavigation } from '../ChildNavigation'
 import { InputField } from '../../atoms/InputField'
 import { NumericalKeyboard } from '../../atoms/SoftwareKeyboard'
-import { getVolumeLimits } from './utils'
+import { getVolumeRange } from './utils'
 import { CONSOLIDATE, DISTRIBUTE } from './constants'
 
 import type { SmallButton } from '../../atoms/buttons'
 import type {
-  QuickTransferSetupState,
+  QuickTransferWizardState,
   QuickTransferWizardAction,
 } from './types'
 
 interface VolumeEntryProps {
   onNext: () => void
   onBack: () => void
   exitButtonProps: React.ComponentProps<typeof SmallButton>
-  state: QuickTransferSetupState
+  state: QuickTransferWizardState
   dispatch: React.Dispatch<QuickTransferWizardAction>
 }
 
@@ -35,7 +35,7 @@ export function VolumeEntry(props: VolumeEntryProps): JSX.Element {
   const [volume, setVolume] = React.useState<string>(
     state.volume ? state.volume.toString() : ''
   )
-  const volumeRange = getVolumeLimits(state)
+  const volumeRange = getVolumeRange(state)
   let headerCopy = t('set_transfer_volume')
   let textEntryCopy = t('volume_per_well_µL')
   if (state.transferType === CONSOLIDATE) {

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

@@ -21,6 +21,11 @@ describe('Overview', () => {
         pipette: {
           displayName: 'Pipette display name',
         } as any,
+        tipRack: {
+          metadata: {
+            displayName: 'Tip rack display name',
+          },
+        } as any,
         source: {
           metadata: {
             displayName: 'Source labware name',
@@ -33,7 +38,7 @@ describe('Overview', () => {
         } as any,
         transferType: 'transfer',
         volume: 25,
-      },
+      } as any,
     }
   })
   afterEach(() => {
@@ -44,6 +49,8 @@ describe('Overview', () => {
     render(props)
     screen.getByText('Pipette')
     screen.getByText('Pipette display name')
+    screen.getByText('Tip rack')
+    screen.getByText('Tip rack display name')
     screen.getByText('Source labware')
     screen.getByText('Source labware name')
     screen.getByText('Destination labware')
@@ -57,6 +64,11 @@ describe('Overview', () => {
         pipette: {
           displayName: 'Pipette display name',
         } as any,
+        tipRack: {
+          metadata: {
+            displayName: 'Tip rack display name',
+          },
+        } as any,
         source: {
           metadata: {
             displayName: 'Source labware name',
@@ -69,7 +81,7 @@ describe('Overview', () => {
         } as any,
         transferType: 'consolidate',
         volume: 25,
-      },
+      } as any,
     }
     render(props)
     screen.getByText('Aspirate volume per well')
@@ -80,6 +92,11 @@ describe('Overview', () => {
         pipette: {
           displayName: 'Pipette display name',
         } as any,
+        tipRack: {
+          metadata: {
+            displayName: 'Tip rack display name',
+          },
+        } as any,
         source: {
           metadata: {
             displayName: 'Source labware name',
@@ -92,7 +109,7 @@ describe('Overview', () => {
         } as any,
         transferType: 'distribute',
         volume: 25,
-      },
+      } as any,
     }
     render(props)
     screen.getByText('Dispense volume per well')

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

@@ -8,6 +8,13 @@ import { SummaryAndSettings } from '../SummaryAndSettings'
 import { Overview } from '../Overview'
 
 vi.mock('../Overview')
+vi.mock('../utils', async () => {
+  const actual = await vi.importActual('../utils')
+  return {
+    ...actual,
+    getInitialSummaryState: vi.fn(),
+  }
+})
 
 const render = (props: React.ComponentProps<typeof SummaryAndSettings>) => {
   return renderWithProviders(<SummaryAndSettings {...props} />, {
@@ -27,6 +34,14 @@ describe('SummaryAndSettings', () => {
         onClick: vi.fn(),
       },
       state: {
+        pipette: {} as any,
+        mount: 'left',
+        tipRack: {} as any,
+        source: {} as any,
+        sourceWells: ['A1'],
+        destination: {} as any,
+        destinationWells: ['A1'],
+        transferType: 'transfer',
         volume: 25,
       },
     }

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

@@ -6,7 +6,7 @@ import { renderWithProviders } from '../../../__testing-utils__'
 import { i18n } from '../../../i18n'
 import { InputField } from '../../../atoms/InputField'
 import { NumericalKeyboard } from '../../../atoms/SoftwareKeyboard'
-import { getVolumeLimits } from '../utils'
+import { getVolumeRange } from '../utils'
 import { VolumeEntry } from '../VolumeEntry'
 
 vi.mock('../../../atoms/InputField')
@@ -42,7 +42,7 @@ describe('VolumeEntry', () => {
       },
       dispatch: vi.fn(),
     }
-    vi.mocked(getVolumeLimits).mockReturnValue({ min: 5, max: 50 })
+    vi.mocked(getVolumeRange).mockReturnValue({ min: 5, max: 50 })
   })
   afterEach(() => {
     vi.resetAllMocks()

app/src/organisms/QuickTransferFlow/__tests__/utils/generateCompatibleLabwareForPipette.test.ts

@@ -0,0 +1,30 @@
+import { describe, it, expect } from 'vitest'
+import { generateCompatibleLabwareForPipette } from '../../utils'
+import {
+  SINGLE_CHANNEL_COMPATIBLE_LABWARE,
+  EIGHT_CHANNEL_COMPATIBLE_LABWARE,
+  NINETY_SIX_CHANNEL_COMPATIBLE_LABWARE,
+} from '../../constants'
+
+// if one of these fails, it is likely that a new definition has been added
+// and you need to regenerate the lists stored at ../constants
+describe('generateCompatibleLabwareForPipette', () => {
+  it('generates the list for single channel pipettes', () => {
+    const compatibleLabwareUris = generateCompatibleLabwareForPipette({
+      channels: 1,
+    } as any)
+    expect(compatibleLabwareUris).toEqual(SINGLE_CHANNEL_COMPATIBLE_LABWARE)
+  })
+  it('generates the list for eight channel pipettes', () => {
+    const compatibleLabwareUris = generateCompatibleLabwareForPipette({
+      channels: 8,
+    } as any)
+    expect(compatibleLabwareUris).toEqual(EIGHT_CHANNEL_COMPATIBLE_LABWARE)
+  })
+  it('generates the list for 96 channel pipettes', () => {
+    const compatibleLabwareUris = generateCompatibleLabwareForPipette({
+      channels: 96,
+    } as any)
+    expect(compatibleLabwareUris).toEqual(NINETY_SIX_CHANNEL_COMPATIBLE_LABWARE)
+  })
+})