fix(app): Various quick transfer fixes (#15904)

Fix RQA-2908, RQA-2848, RQA-2906

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

@@ -3,7 +3,6 @@
   "__dev_internal__protocolStats": "Protocol Stats",
   "__dev_internal__protocolTimeline": "Protocol Timeline",
   "__dev_internal__enableRunNotes": "Display Notes During a Protocol Run",
-  "__dev_internal__enableQuickTransfer": "Enable Quick Transfer",
   "__dev_internal__enableLabwareCreator": "Enable App Labware Creator",
   "add_folder_button": "Add labware source folder",
   "add_ip_button": "Add",

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

@@ -47,6 +47,7 @@
   "deleted_transfer": "Deleted quick transfer",
   "destination": "Destination",
   "destination_labware": "Destination labware",
+  "disabled": "Disabled",
   "dispense_flow_rate": "Dispense flow rate",
   "dispense_flow_rate_µL": "Dispense flow rate (µL/s)",
   "dispense_settings": "Dispense Settings",
@@ -90,7 +91,8 @@
   "pipette_currently_attached": "Quick transfer options depend on the pipettes currently attached to your robot.",
   "pipette_path": "Pipette path",
   "pipette_path_multi_aspirate": "Multi-aspirate",
-  "pipette_path_multi_dispense": "Multi-dispense, {{volume}} disposal volume, blowout into {{blowOutLocation}}",
+  "pipette_path_multi_dispense": "Multi-dispense",
+  "pipette_path_multi_dispense_volume_blowout": "Multi-dispense, {{volume}} disposal volume, blowout into {{blowOutLocation}}",
   "pipette_path_single": "Single transfers",
   "pre_wet_tip": "Pre-wet tip",
   "quick_transfer": "Quick transfer",

app/src/organisms/Navigation/__tests__/Navigation.test.tsx

@@ -2,20 +2,17 @@ import * as React from 'react'
 import { MemoryRouter } from 'react-router-dom'
 import { fireEvent, screen } from '@testing-library/react'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
-import { when } from 'vitest-when'
 
 import { renderWithProviders } from '../../../__testing-utils__'
 import { i18n } from '../../../i18n'
 import { getLocalRobot } from '../../../redux/discovery'
 import { mockConnectedRobot } from '../../../redux/discovery/__fixtures__'
-import { useFeatureFlag } from '../../../redux/config'
 import { useNetworkConnection } from '../../../resources/networking/hooks/useNetworkConnection'
 import { NavigationMenu } from '../NavigationMenu'
 import { Navigation } from '..'
 
 vi.mock('../../../resources/networking/hooks/useNetworkConnection')
 vi.mock('../../../redux/discovery')
-vi.mock('../../../redux/config')
 vi.mock('../NavigationMenu')
 
 mockConnectedRobot.name = '12345678901234567'
@@ -66,6 +63,9 @@ describe('Navigation', () => {
     const allProtocols = screen.getByRole('link', { name: 'Protocols' })
     expect(allProtocols).toHaveAttribute('href', '/protocols')
 
+    const quickTransfer = screen.getByRole('link', { name: 'Quick Transfer' })
+    expect(quickTransfer).toHaveAttribute('href', '/quick-transfer')
+
     const instruments = screen.getByRole('link', { name: 'Instruments' })
     expect(instruments).toHaveAttribute('href', '/instruments')
 
@@ -75,15 +75,6 @@ describe('Navigation', () => {
     expect(screen.queryByText('Get started')).not.toBeInTheDocument()
     expect(screen.queryByLabelText('network icon')).not.toBeInTheDocument()
   })
-  it('should render quick transfer tab if feature flag is on', () => {
-    when(vi.mocked(useFeatureFlag))
-      .calledWith('enableQuickTransfer')
-      .thenReturn(true)
-    render(props)
-    screen.getByRole('link', { name: '123456789012...' }) // because of the truncate function
-    const quickTransfer = screen.getByRole('link', { name: 'Quick Transfer' })
-    expect(quickTransfer).toHaveAttribute('href', '/quick-transfer')
-  })
   it('should render a network icon', () => {
     vi.mocked(useNetworkConnection).mockReturnValue({
       isEthernetConnected: false,

app/src/organisms/Navigation/index.tsx

@@ -29,12 +29,12 @@ import { ODD_FOCUS_VISIBLE } from '../../atoms/buttons/constants'
 
 import { useNetworkConnection } from '../../resources/networking/hooks/useNetworkConnection'
 import { getLocalRobot } from '../../redux/discovery'
-import { useFeatureFlag } from '../../redux/config'
 import { NavigationMenu } from './NavigationMenu'
 import type { ON_DEVICE_DISPLAY_PATHS } from '../../App/OnDeviceDisplayApp'
 
-let NAV_LINKS: Array<typeof ON_DEVICE_DISPLAY_PATHS[number]> = [
+const NAV_LINKS: Array<typeof ON_DEVICE_DISPLAY_PATHS[number]> = [
   '/protocols',
+  '/quick-transfer',
   '/instruments',
   '/robot-settings',
 ]
@@ -68,15 +68,6 @@ export function Navigation(props: NavigationProps): JSX.Element {
   const localRobot = useSelector(getLocalRobot)
   const [showNavMenu, setShowNavMenu] = React.useState<boolean>(false)
   const robotName = localRobot?.name != null ? localRobot.name : 'no name'
-  const enableQuickTransferFF = useFeatureFlag('enableQuickTransfer')
-  if (enableQuickTransferFF) {
-    NAV_LINKS = [
-      '/protocols',
-      '/quick-transfer',
-      '/instruments',
-      '/robot-settings',
-    ]
-  }
 
   // We need to display an icon for what type of network connection (if any)
   // is active next to the robot's name. The designs call for it to change color

app/src/organisms/QuickTransferFlow/QuickTransferAdvancedSettings/Mix.tsx

@@ -85,6 +85,7 @@ export function Mix(props: MixProps): JSX.Element {
           type: mixAction,
           mixSettings: undefined,
         })
+        onBack()
       } else {
         setCurrentStep(2)
       }

app/src/organisms/QuickTransferFlow/QuickTransferAdvancedSettings/index.tsx

@@ -74,7 +74,7 @@ export function QuickTransferAdvancedSettings(
   } else if (state.path === 'multiAspirate') {
     pipettePathValue = t('pipette_path_multi_aspirate')
   } else if (state.path === 'multiDispense') {
-    pipettePathValue = t('pipette_path_multi_dispense', {
+    pipettePathValue = t('pipette_path_multi_dispense_volume_blowout', {
       volume: state.disposalVolume,
       blowOutLocation: getBlowoutValueCopy(),
     })
@@ -160,7 +160,10 @@ export function QuickTransferAdvancedSettings(
         state.transferType === 'transfer' ||
         state.transferType === 'distribute',
       onClick: () => {
-        if (state.transferType === 'transfer') {
+        if (
+          state.transferType === 'transfer' ||
+          state.transferType === 'distribute'
+        ) {
           setSelectedSetting('aspirate_mix')
         } else {
           makeSnackbar(t('advanced_setting_disabled') as string)
@@ -240,7 +243,10 @@ export function QuickTransferAdvancedSettings(
         state.transferType === 'transfer' ||
         state.transferType === 'consolidate',
       onClick: () => {
-        if (state.transferType === 'transfer') {
+        if (
+          state.transferType === 'transfer' ||
+          state.transferType === 'consolidate'
+        ) {
           setSelectedSetting('dispense_mix')
         } else {
           makeSnackbar(t('advanced_setting_disabled') as string)
@@ -293,7 +299,10 @@ export function QuickTransferAdvancedSettings(
     {
       option: 'dispense_blow_out',
       copy: t('blow_out'),
-      value: i18n.format(getBlowoutValueCopy(), 'capitalize'),
+      value:
+        state.transferType === 'distribute'
+          ? t('disabled')
+          : i18n.format(getBlowoutValueCopy(), 'capitalize'),
       enabled: state.transferType !== 'distribute',
       onClick: () => {
         if (state.transferType === 'distribute') {

app/src/organisms/QuickTransferFlow/SelectDestWells.tsx

@@ -10,12 +10,17 @@ import {
   LegacyStyledText,
   JUSTIFY_CENTER,
 } from '@opentrons/components'
+import { getAllDefinitions } from '@opentrons/shared-data'
 
 import { getTopPortalEl } from '../../App/portal'
 import { Modal } from '../../molecules/Modal'
 import { ChildNavigation } from '../../organisms/ChildNavigation'
 import { useToaster } from '../../organisms/ToasterOven'
 import { WellSelection } from '../../organisms/WellSelection'
+import {
+  CIRCULAR_WELL_96_PLATE_DEFINITION_URI,
+  RECTANGULAR_WELL_96_PLATE_DEFINITION_URI,
+} from './SelectSourceWells'
 
 import type { SmallButton } from '../../atoms/buttons'
 import type { ModalHeaderBaseProps } from '../../molecules/Modal/types'
@@ -107,9 +112,17 @@ export function SelectDestWells(props: SelectDestWellsProps): JSX.Element {
       setSelectedWells({})
     },
   }
-  const labwareDefinition =
+  let labwareDefinition =
     state.destination === 'source' ? state.source : state.destination
-
+  if (labwareDefinition?.parameters.format === '96Standard') {
+    const allDefinitions = getAllDefinitions()
+    if (Object.values(labwareDefinition.wells)[0].shape === 'circular') {
+      labwareDefinition = allDefinitions[CIRCULAR_WELL_96_PLATE_DEFINITION_URI]
+    } else {
+      labwareDefinition =
+        allDefinitions[RECTANGULAR_WELL_96_PLATE_DEFINITION_URI]
+    }
+  }
   return (
     <>
       {createPortal(
@@ -143,7 +156,7 @@ export function SelectDestWells(props: SelectDestWellsProps): JSX.Element {
         left="0"
         width="100%"
       >
-        {state.destination != null && state.source != null ? (
+        {labwareDefinition != null ? (
           <Flex
             width={
               labwareDefinition?.parameters.format === '384Standard'
@@ -152,11 +165,7 @@ export function SelectDestWells(props: SelectDestWellsProps): JSX.Element {
             }
           >
             <WellSelection
-              definition={
-                state.destination === 'source'
-                  ? state.source
-                  : state.destination
-              }
+              definition={labwareDefinition}
               deselectWells={(wells: string[]) => {
                 setSelectedWells(prevWells =>
                   without(Object.keys(prevWells), ...wells).reduce(

app/src/organisms/QuickTransferFlow/SelectSourceWells.tsx

@@ -7,6 +7,7 @@ import {
   POSITION_FIXED,
   SPACING,
 } from '@opentrons/components'
+import { getAllDefinitions } from '@opentrons/shared-data'
 
 import { ChildNavigation } from '../../organisms/ChildNavigation'
 import { WellSelection } from '../../organisms/WellSelection'
@@ -24,6 +25,11 @@ interface SelectSourceWellsProps {
   dispatch: React.Dispatch<QuickTransferWizardAction>
 }
 
+export const CIRCULAR_WELL_96_PLATE_DEFINITION_URI =
+  'opentrons/thermoscientificnunc_96_wellplate_2000ul/1'
+export const RECTANGULAR_WELL_96_PLATE_DEFINITION_URI =
+  'opentrons/usascientific_96_wellplate_2.4ml_deep/1'
+
 export function SelectSourceWells(props: SelectSourceWellsProps): JSX.Element {
   const { onNext, onBack, state, dispatch } = props
   const { i18n, t } = useTranslation(['quick_transfer', 'shared'])
@@ -50,6 +56,17 @@ export function SelectSourceWells(props: SelectSourceWellsProps): JSX.Element {
       setSelectedWells({})
     },
   }
+  let displayLabwareDefinition = state.source
+  if (state.source?.parameters.format === '96Standard') {
+    const allDefinitions = getAllDefinitions()
+    if (Object.values(state.source.wells)[0].shape === 'circular') {
+      displayLabwareDefinition =
+        allDefinitions[CIRCULAR_WELL_96_PLATE_DEFINITION_URI]
+    } else {
+      displayLabwareDefinition =
+        allDefinitions[RECTANGULAR_WELL_96_PLATE_DEFINITION_URI]
+    }
+  }
 
   return (
     <>
@@ -71,14 +88,14 @@ export function SelectSourceWells(props: SelectSourceWellsProps): JSX.Element {
         left="0"
         width="100%"
       >
-        {state.source != null ? (
+        {state.source != null && displayLabwareDefinition != null ? (
           <Flex
             width={
               state.source.parameters.format === '384Standard' ? '100%' : '75%'
             }
           >
             <WellSelection
-              definition={state.source}
+              definition={displayLabwareDefinition}
               deselectWells={(wells: string[]) => {
                 setSelectedWells(prevWells =>
                   without(Object.keys(prevWells), ...wells).reduce(

app/src/redux/config/constants.ts

@@ -4,7 +4,6 @@ export const DEV_INTERNAL_FLAGS: DevInternalFlag[] = [
   'forceHttpPolling',
   'protocolStats',
   'enableRunNotes',
-  'enableQuickTransfer',
   'protocolTimeline',
   'enableLabwareCreator',
 ]

app/src/redux/config/schema-types.ts

@@ -11,7 +11,6 @@ export type DevInternalFlag =
   | 'forceHttpPolling'
   | 'protocolStats'
   | 'enableRunNotes'
-  | 'enableQuickTransfer'
   | 'protocolTimeline'
   | 'enableLabwareCreator'