feat(app): generate loadLiquidClass in JSON commands for QT (#18943)

closes AUTH-1988

Author: jerader

app/src/organisms/ODD/QuickTransferFlow/Overview.tsx

@@ -14,6 +14,7 @@ import {
 } from '@opentrons/components'
 import {
   FLEX_SINGLE_SLOT_BY_CUTOUT_ID,
+  getAllLiquidClassDefs,
   TRASH_BIN_ADAPTER_FIXTURE,
 } from '@opentrons/shared-data'
 
@@ -31,7 +32,7 @@ export function Overview(props: OverviewProps): JSX.Element | null {
   const { state } = props
   const { t } = useTranslation(['quick_transfer', 'shared'])
   const { makeSnackbar } = useToaster()
-
+  const allLiquidClasses = getAllLiquidClassDefs()
   let transferCopy = t('volume_per_well')
   if (state.transferType === CONSOLIDATE) {
     transferCopy = t('aspirate_volume')
@@ -90,7 +91,7 @@ export function Overview(props: OverviewProps): JSX.Element | null {
     },
     {
       option: t('liquid_class'),
-      value: state?.liquidClass?.displayName,
+      value: allLiquidClasses[state?.liquidClassName]?.displayName,
     },
   ]
 

app/src/organisms/ODD/QuickTransferFlow/QuickTransferAdvancedSettings/BlowOut.tsx

@@ -15,18 +15,15 @@ import {
   StyledText,
 } from '@opentrons/components'
 import {
-  ETHANOL_LIQUID_CLASS_NAME,
   FLEX_SINGLE_SLOT_BY_CUTOUT_ID,
   getAllLiquidClassDefs,
   getFlexNameConversion,
   getTipTypeFromTipRackDefinition,
-  GLYCEROL_LIQUID_CLASS_NAME,
   linearInterpolate,
   LOW_VOLUME_PIPETTES,
   NONE_LIQUID_CLASS_NAME,
   TRASH_BIN_ADAPTER_FIXTURE,
   WASTE_CHUTE_FIXTURES,
-  WATER_LIQUID_CLASS_NAME,
 } from '@opentrons/shared-data'
 import { getTransferPlanAndReferenceVolumes } from '@opentrons/step-generation'
 
@@ -217,16 +214,8 @@ export function BlowOut(props: BlowOutProps): JSX.Element {
       : liquidSpecs.default.supportedTips[tipType]
 
   const allLiquidClassDefs = getAllLiquidClassDefs()
-  const liquidClassMap = new Map<string, string>([
-    ['none', NONE_LIQUID_CLASS_NAME],
-    ['water', WATER_LIQUID_CLASS_NAME],
-    ['glycerol_50', GLYCEROL_LIQUID_CLASS_NAME],
-    ['ethanol_80', ETHANOL_LIQUID_CLASS_NAME],
-  ])
 
-  const selectedLiquidClass = liquidClassMap.get(
-    state.liquidClass?.liquidClassName ?? 'none'
-  )
+  const selectedLiquidClass = state.liquidClassName
   const liquidClassDef =
     allLiquidClassDefs[selectedLiquidClass ?? NONE_LIQUID_CLASS_NAME]
   const convertedPipetteName =

app/src/organisms/ODD/QuickTransferFlow/QuickTransferAdvancedSettings/ResetAdvancedSettingsModal.tsx

@@ -8,6 +8,7 @@ import {
   SPACING,
   StyledText,
 } from '@opentrons/components'
+import { getAllLiquidClassDefs } from '@opentrons/shared-data'
 
 import { getTopPortalEl } from '/app/App/portal'
 import { SmallButton } from '/app/atoms/buttons'
@@ -36,7 +37,11 @@ export function ResetAdvancedSettingsModal({
   onClose,
 }: ResetAdvancedSettingsModalProps): JSX.Element {
   const { i18n, t } = useTranslation(['quick_transfer', 'shared'])
-  const { liquidClass } = state
+  const { liquidClassName: stateLiquidClassName } = state
+  const liquidClass =
+    stateLiquidClassName != null && stateLiquidClassName !== 'none'
+      ? getAllLiquidClassDefs()[stateLiquidClassName]
+      : { displayName: 'none', liquidClassName: 'none' }
   const { displayName, liquidClassName } = liquidClass
   const modalHeader = {
     title: t('reset_kind_settings', { transferName: kind }),

app/src/organisms/ODD/QuickTransferFlow/QuickTransferAdvancedSettings/__tests__/ResetAdvancedSettingsModal.test.tsx

@@ -1,14 +1,15 @@
 import { fireEvent, screen } from '@testing-library/react'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 
+import { WATER_LIQUID_CLASS_NAME } from '@opentrons/shared-data'
+
 import { renderWithProviders } from '/app/__testing-utils__'
 import { i18n } from '/app/i18n'
 
 import QuickTransferState from '../__fixtures__/QuickTransferState.json'
 import { ResetAdvancedSettingsModal } from '../ResetAdvancedSettingsModal'
 
 import type { ComponentProps } from 'react'
-import type { LiquidClass } from '@opentrons/shared-data'
 
 vi.mock('../../utils/retrieveLiquidClassValues')
 
@@ -26,10 +27,7 @@ describe('ResetAdvancedSettingsModal', () => {
       kind: 'aspirate',
       state: {
         ...QuickTransferState,
-        liquidClass: {
-          displayName: 'Water',
-          liquidClassName: 'water',
-        } as LiquidClass,
+        liquidClassName: WATER_LIQUID_CLASS_NAME,
       } as any,
       dispatch: vi.fn(),
       onClose: vi.fn(),
@@ -40,17 +38,14 @@ describe('ResetAdvancedSettingsModal', () => {
     render(props)
     screen.getByText('Reset aspirate settings?')
     screen.getByText(
-      'Continuing will undo any changes and restore the aspirate settings to the values associated with the Water liquid class.'
+      'Continuing will undo any changes and restore the aspirate settings to the values associated with the Aqueous liquid class.'
     )
     screen.getByText('Cancel')
     screen.getByText('Continue')
   })
 
   it('renders the modal with correct title and description - aspirate', () => {
-    props.state.liquidClass = {
-      displayName: '',
-      liquidClassName: 'none',
-    } as LiquidClass
+    props.state.liquidClassName = 'none'
     render(props)
     screen.getByText('Reset aspirate settings?')
     screen.getByText(
@@ -65,18 +60,15 @@ describe('ResetAdvancedSettingsModal', () => {
     render(props)
     screen.getByText('Reset dispense settings?')
     screen.getByText(
-      'Continuing will undo any changes and restore the dispense settings to the values associated with the Water liquid class.'
+      'Continuing will undo any changes and restore the dispense settings to the values associated with the Aqueous liquid class.'
     )
     screen.getByText('Cancel')
     screen.getByText('Continue')
   })
 
   it('renders the modal with correct title and description - dispense', () => {
     props.kind = 'dispense'
-    props.state.liquidClass = {
-      displayName: '',
-      liquidClassName: 'none',
-    } as LiquidClass
+    props.state.liquidClassName = 'none'
     render(props)
     screen.getByText('Reset dispense settings?')
     screen.getByText(

app/src/organisms/ODD/QuickTransferFlow/README.md

@@ -78,7 +78,7 @@ export interface QuickTransferWizardState {
   path?: PathOption // this has been added
   changeTip?: ChangeTipOptions // this has been added
   dropTipLocation?: CutoutConfig // this has been added
-  liquidClass?: LiquidClass // this has been added
+  liquidClassName?: string // this has been added
 }
 ```
 
@@ -157,7 +157,7 @@ export interface QuickTransferSummaryState {
   airGapDispense?: number
   changeTip: ChangeTipOptions
   dropTipLocation: CutoutConfig
-  liquidClass: LiquidClass // this has been added
+  liquidClassName: string // this has been added
   conditionAspirate?: number // this has been added
   disposalVolumeDispenseSettings?: {
     volume: number

app/src/organisms/ODD/QuickTransferFlow/SelectLiquidClass.tsx

@@ -8,7 +8,13 @@ import {
   SPACING,
   StyledText,
 } from '@opentrons/components'
-import { getAllLiquidClassDefs } from '@opentrons/shared-data'
+import {
+  ETHANOL_LIQUID_CLASS_NAME,
+  getAllLiquidClassDefs,
+  GLYCEROL_LIQUID_CLASS_NAME,
+  NONE_LIQUID_CLASS_NAME,
+  WATER_LIQUID_CLASS_NAME,
+} from '@opentrons/shared-data'
 
 import { ChildNavigation } from '/app/organisms/ODD/ChildNavigation'
 import { useToaster } from '/app/organisms/ToasterOven'
@@ -52,13 +58,25 @@ export function SelectLiquidClass({
     schemaVersion: 1,
   }
 
+  const mapLiquidClassToInternalName: Record<
+    LiquidClass['liquidClassName'],
+    string
+  > = {
+    ethanol_80: ETHANOL_LIQUID_CLASS_NAME,
+    glycerol_50: GLYCEROL_LIQUID_CLASS_NAME,
+    water: WATER_LIQUID_CLASS_NAME,
+    none: NONE_LIQUID_CLASS_NAME,
+  }
+
   const liquidClassOptions = [noLiquidClass, ...Object.values(liquidClasses)]
   const handleClickNext = (): void => {
-    dispatch({
-      type: 'SET_LIQUID_CLASS',
-      liquidClass: selectedLiquidClass ?? noLiquidClass,
-    })
-
+    if (selectedLiquidClass != null) {
+      dispatch({
+        type: 'SET_LIQUID_CLASS',
+        liquidClassName:
+          mapLiquidClassToInternalName[selectedLiquidClass.liquidClassName],
+      })
+    }
     onNext()
   }
 

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

@@ -1,6 +1,8 @@
 import { screen } from '@testing-library/react'
 import { afterEach, beforeEach, describe, it, vi } from 'vitest'
 
+import { WATER_LIQUID_CLASS_NAME } from '@opentrons/shared-data'
+
 import { renderWithProviders } from '/app/__testing-utils__'
 import { i18n } from '/app/i18n'
 
@@ -42,14 +44,7 @@ describe('Overview', () => {
         } as any,
         transferType: 'transfer',
         volume: 25,
-        liquidClass: {
-          liquidClassName: 'dummyLiquidClass',
-          displayName: 'Dummy liquid class',
-          description: 'Dummy liquid class description',
-          schemaVersion: 0,
-          namespace: '',
-          byPipette: [],
-        },
+        liquidClassName: WATER_LIQUID_CLASS_NAME,
       } as any,
     }
   })
@@ -141,6 +136,6 @@ describe('Overview', () => {
     screen.getByText('Tip change frequency')
     screen.getByText('Tip drop location')
     screen.getByText('Liquid class')
-    screen.getByText('Dummy liquid class')
+    screen.getByText('Aqueous')
   })
 })

app/src/organisms/ODD/QuickTransferFlow/__tests__/SelectLiquidClass.test.tsx

@@ -1,7 +1,13 @@
 import { fireEvent, screen } from '@testing-library/react'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 
-import { getAllLiquidClassDefs } from '@opentrons/shared-data'
+import {
+  ETHANOL_LIQUID_CLASS_NAME,
+  getAllLiquidClassDefs,
+  GLYCEROL_LIQUID_CLASS_NAME,
+  NONE_LIQUID_CLASS_NAME,
+  WATER_LIQUID_CLASS_NAME,
+} from '@opentrons/shared-data'
 
 import { renderWithProviders } from '/app/__testing-utils__'
 import { i18n } from '/app/i18n'
@@ -23,15 +29,6 @@ vi.mock('@opentrons/shared-data', async importOriginal => {
 })
 const mockMakeSnackbar = vi.fn()
 
-const mockNoLiquidClass = {
-  byPipette: [],
-  description: 'Default',
-  displayName: "Don't use liquid class settings",
-  liquidClassName: 'none',
-  namespace: 'opentrons',
-  schemaVersion: 1,
-}
-
 const mockByPipette = [
   {
     tiprack: 'opentrons/opentrons_flex_96_tiprack_50ul/1',
@@ -58,25 +55,25 @@ const mockByPipette = [
 ]
 
 const mockLiquidClasses = {
-  ethanol: {
-    liquidClassName: 'mock ethanol',
+  [ETHANOL_LIQUID_CLASS_NAME]: {
+    liquidClassName: 'ethanol_80',
     displayName: 'Volatile',
     description: '80% ethanol',
     schemaVersion: 0,
     namespace: '',
     byPipette: mockByPipette,
   },
-  glyeral: {
-    liquidClassName: 'mock glyeral',
+  [GLYCEROL_LIQUID_CLASS_NAME]: {
+    liquidClassName: 'glycerol_50',
     displayName: 'Viscous',
     description: '50% glycerol',
     schemaVersion: 0,
     namespace: '',
     byPipette: mockByPipette,
   },
-  water: {
+  [WATER_LIQUID_CLASS_NAME]: {
     displayName: 'Aqueous',
-    liquidClassName: 'mock water',
+    liquidClassName: 'water',
     description: 'Deionized water',
     schemaVersion: 0,
     namespace: '',
@@ -211,7 +208,7 @@ describe('SelectLiquidClass', () => {
     expect(props.onNext).toHaveBeenCalled()
     expect(props.dispatch).toHaveBeenCalledWith({
       type: 'SET_LIQUID_CLASS',
-      liquidClass: mockNoLiquidClass,
+      liquidClassName: NONE_LIQUID_CLASS_NAME,
     })
   })
 
@@ -223,7 +220,7 @@ describe('SelectLiquidClass', () => {
     expect(props.onNext).toHaveBeenCalled()
     expect(props.dispatch).toHaveBeenCalledWith({
       type: 'SET_LIQUID_CLASS',
-      liquidClass: mockLiquidClasses.water,
+      liquidClassName: WATER_LIQUID_CLASS_NAME,
     })
   })
 

app/src/organisms/ODD/QuickTransferFlow/reducers.ts

@@ -111,7 +111,7 @@ export function quickTransferWizardReducer(
     case 'SET_LIQUID_CLASS': {
       return {
         ...state,
-        liquidClass: action.liquidClass,
+        liquidClassName: action.liquidClassName,
       }
     }
   }

app/src/organisms/ODD/QuickTransferFlow/types.ts

@@ -2,7 +2,6 @@ import type { Mount } from '@opentrons/api-client'
 import type {
   CutoutConfig,
   LabwareDefinition2,
-  LiquidClass,
   PipetteV2Specs,
 } from '@opentrons/shared-data'
 import type {
@@ -28,7 +27,7 @@ export interface QuickTransferWizardState {
   path?: PathOption
   changeTip?: ChangeTipOptions
   dropTipLocation?: CutoutConfig
-  liquidClass?: LiquidClass
+  liquidClassName?: string
 }
 export type PathOption = 'single' | 'multiAspirate' | 'multiDispense'
 export type ChangeTipOptions =
@@ -115,7 +114,7 @@ export interface QuickTransferSummaryState {
   airGapDispense?: number
   changeTip: ChangeTipOptions
   dropTipLocation: CutoutConfig
-  liquidClass: LiquidClass
+  liquidClassName: string
   conditionAspirate?: number
   disposalVolumeDispenseSettings?: {
     volume: number
@@ -285,7 +284,7 @@ interface SetDropTipLocation {
 
 interface SetLiquidClassAction {
   type: typeof ACTIONS.SET_LIQUID_CLASS
-  liquidClass: LiquidClass
+  liquidClassName: string
 }
 
 interface SelectPipetteAction {