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

…nsfer fix PLAT-227
Opentrons · May 15, 2024 · f798a95 · f798a95
1 parent 643a9dd
commit f798a95
Show file tree

Hide file tree

Showing 16 changed files with 398 additions and 46 deletions.
diff --git a/app/src/organisms/QuickTransferFlow/Overview.tsx b/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,18 @@ export function Overview(props: OverviewProps): JSX.Element | null {
   const displayItems = [
     {
       option: t('pipette'),
-      value: state.pipette?.displayName,
+      value: state.pipette.displayName,
     },
     {
       option: t('source_labware'),
-      value: state.source?.metadata.displayName,
+      value: state.sourceLabware.metadata.displayName,
     },
     {
       option: t('destination_labware'),
       value:
-        state.destination === 'source'
-          ? state.source?.metadata.displayName
-          : state.destination?.metadata.displayName,
+        state.destinationLabware === 'source'
+          ? state.sourceLabware.metadata.displayName
+          : state.destinationLabware.metadata.displayName,
     },
     {
       option: transferCopy,

diff --git a/app/src/organisms/QuickTransferFlow/SelectDestLabware.tsx b/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>
 }
 

diff --git a/app/src/organisms/QuickTransferFlow/SelectDestWells.tsx b/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>
 }
 

diff --git a/app/src/organisms/QuickTransferFlow/SelectPipette.tsx b/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>
 }
 

diff --git a/app/src/organisms/QuickTransferFlow/SelectSourceLabware.tsx b/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>
 }
 

diff --git a/app/src/organisms/QuickTransferFlow/SelectSourceWells.tsx b/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>
 }
 

diff --git a/app/src/organisms/QuickTransferFlow/SelectTipRack.tsx b/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>
 }
 

diff --git a/app/src/organisms/QuickTransferFlow/SummaryAndSettings.tsx b/app/src/organisms/QuickTransferFlow/SummaryAndSettings.tsx
@@ -13,20 +13,21 @@ import {
 import { TabbedButton } from '../../atoms/buttons'
 import { ChildNavigation } from '../ChildNavigation'
 import { Overview } from './Overview'
+import { getInitialSummaryState, quickTransferSummaryReducer } from './utils'
 
 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 +37,22 @@ export function SummaryAndSettings(
   const [selectedCategory, setSelectedCategory] = React.useState<string>(
     'overview'
   )
+  // if any value from the wizard flow hasn't been set, return null
+  // this should never happen but allows us to strictly type summary state
+  // @ts-expect-error figure out how to make this type non-null
+  const initialSummaryState = getInitialSummaryState(wizardFlowState)
+  const [state] = React.useReducer(
+    quickTransferSummaryReducer,
+    initialSummaryState
+  )
+  if (Object.values(wizardFlowState).some(value => value == null)) {
+    return null
+  }
 
   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}

diff --git a/app/src/organisms/QuickTransferFlow/VolumeEntry.tsx b/app/src/organisms/QuickTransferFlow/VolumeEntry.tsx
@@ -15,15 +15,15 @@ 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>
 }
 

diff --git a/app/src/organisms/QuickTransferFlow/__tests__/Overview.test.tsx b/app/src/organisms/QuickTransferFlow/__tests__/Overview.test.tsx
@@ -21,19 +21,19 @@ describe('Overview', () => {
         pipette: {
           displayName: 'Pipette display name',
         } as any,
-        source: {
+        sourceLabware: {
           metadata: {
             displayName: 'Source labware name',
           },
         } as any,
-        destination: {
+        destinationLabware: {
           metadata: {
             displayName: 'Destination labware name',
           },
         } as any,
         transferType: 'transfer',
         volume: 25,
-      },
+      } as any,
     }
   })
   afterEach(() => {
@@ -57,19 +57,19 @@ describe('Overview', () => {
         pipette: {
           displayName: 'Pipette display name',
         } as any,
-        source: {
+        sourceLabware: {
           metadata: {
             displayName: 'Source labware name',
           },
         } as any,
-        destination: {
+        destinationLabware: {
           metadata: {
             displayName: 'Destination labware name',
           },
         } as any,
         transferType: 'consolidate',
         volume: 25,
-      },
+      } as any,
     }
     render(props)
     screen.getByText('Aspirate volume per well')
@@ -80,19 +80,19 @@ describe('Overview', () => {
         pipette: {
           displayName: 'Pipette display name',
         } as any,
-        source: {
+        sourceLabware: {
           metadata: {
             displayName: 'Source labware name',
           },
         } as any,
-        destination: {
+        destinationLabware: {
           metadata: {
             displayName: 'Destination labware name',
           },
         } as any,
         transferType: 'distribute',
         volume: 25,
-      },
+      } as any,
     }
     render(props)
     screen.getByText('Dispense volume per well')

diff --git a/app/src/organisms/QuickTransferFlow/__tests__/SummaryAndSettings.test.tsx b/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,
       },
     }

diff --git a/app/src/organisms/QuickTransferFlow/__tests__/utils.test.ts b/app/src/organisms/QuickTransferFlow/__tests__/utils.test.ts
@@ -6,10 +6,10 @@ import {
   NINETY_SIX_CHANNEL_COMPATIBLE_LABWARE,
 } from '../constants'
 
-import type { QuickTransferSetupState } from '../types'
+import type { QuickTransferWizardState } from '../types'
 
 describe('getVolumeLimits', () => {
-  const state: QuickTransferSetupState = {
+  const state: QuickTransferWizardState = {
     pipette: {
       liquids: [
         {

diff --git a/app/src/organisms/QuickTransferFlow/constants.ts b/app/src/organisms/QuickTransferFlow/constants.ts
@@ -6,6 +6,24 @@ export const ACTIONS = {
   SET_DEST_LABWARE: 'SET_DEST_LABWARE',
   SET_DEST_WELLS: 'SET_DEST_WELLS',
   SET_VOLUME: 'SET_VOLUME',
+  SUMMARY_SETUP: 'SUMMARY_SETUP',
+  SET_ASPIRATE_FLOW_RATE: 'SET_ASPIRATE_FLOW_RATE',
+  SET_DISPENSE_FLOW_RATE: 'SET_DISPENSE_FLOW_RATE',
+  SET_PIPETTE_PATH: 'SET_PIPETTE_PATH',
+  SET_ASPIRATE_TIP_POSITION: 'SET_ASPIRATE_TIP_POSITION',
+  SET_PRE_WET_TIP: 'SET_PRE_WET_TIP',
+  SET_MIX_ON_ASPIRATE: 'SET_MIX_ON_ASPIRATE',
+  SET_DELAY_ASPIRATE: 'SET_DELAY_ASPIRATE',
+  SET_TOUCH_TIP_ASPIRATE: 'SET_TOUCH_TIP_ASPIRATE',
+  SET_AIR_GAP_ASPIRATE: 'SET_AIR_GAP_ASPIRATE',
+  SET_DISPENSE_TIP_POSITION: 'SET_DISPENSE_TIP_POSITION',
+  SET_MIX_ON_DISPENSE: 'SET_MIX_ON_DISPENSE',
+  SET_DELAY_DISPENSE: 'SET_DELAY_DISPENSE',
+  SET_TOUCH_TIP_DISPENSE: 'SET_TOUCH_TIP_DISPENSE',
+  SET_BLOW_OUT: 'SET_BLOW_OUT',
+  SET_AIR_GAP_DISPENSE: 'SET_AIR_GAP_DISPENSE',
+  SET_CHANGE_TIP: 'SET_CHANGE_TIP',
+  SET_DROP_TIP_LOCATION: 'SET_DROP_TIP_LOCATION',
 } as const
 
 export const DISTRIBUTE = 'distribute'

diff --git a/app/src/organisms/QuickTransferFlow/index.tsx b/app/src/organisms/QuickTransferFlow/index.tsx
@@ -16,19 +16,19 @@ import { SelectDestLabware } from './SelectDestLabware'
 import { SelectDestWells } from './SelectDestWells'
 import { VolumeEntry } from './VolumeEntry'
 import { SummaryAndSettings } from './SummaryAndSettings'
-import { quickTransferReducer } from './utils'
+import { quickTransferWizardReducer } from './utils'
 
 import type { SmallButton } from '../../atoms/buttons'
-import type { QuickTransferSetupState } from './types'
+import type { QuickTransferWizardState } from './types'
 
 const QUICK_TRANSFER_WIZARD_STEPS = 8
-const initialQuickTransferState: QuickTransferSetupState = {}
+const initialQuickTransferState: QuickTransferWizardState = {}
 
 export const QuickTransferFlow = (): JSX.Element => {
   const history = useHistory()
   const { i18n, t } = useTranslation(['quick_transfer', 'shared'])
   const [state, dispatch] = React.useReducer(
-    quickTransferReducer,
+    quickTransferWizardReducer,
     initialQuickTransferState
   )
   const [currentStep, setCurrentStep] = React.useState(0)