clean up code based on reviews

Author: shiyaochen

protocol-designer/src/__fixtures__/formDataForSingleStep.json

@@ -53,7 +53,7 @@
   "pipette": "af1e518a-0e00-4270-a22a-ca5b43daff30",
   "preWetTip": false,
   "tipRack": "opentrons/opentrons_flex_96_filtertiprack_50ul/1",
-  "volume": 20,
+  "volume": "10",
   "stepType": "moveLiquid",
   "stepName": "transfer",
   "stepDetails": "",

protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepTools/MoveLiquidTools/LiquidClassesStepTools.tsx

@@ -9,17 +9,16 @@ import {
   StyledText,
 } from '@opentrons/components'
 import {
-  PIPETTE_NAMES_MAP,
-  getDisableLiquidClasses,
+  getDisabledLiquidClasses,
   getSortedLiquidClassDefs,
+  PIPETTE_NAMES_MAP,
 } from '@opentrons/shared-data'
 import { getLiquidEntities } from '../../../../../../step-forms/selectors'
 import { getLiquidClassDisplayName } from '../../../../../../liquid-defs/utils'
 import { selectors as stepFormSelectors } from '../../../../../../step-forms'
 import type { ChangeEvent, Dispatch, SetStateAction } from 'react'
-import type { LiquidClassesOption } from '@opentrons/shared-data'
-import type { FormData } from '../../../../../../form-types'
 import type { FieldPropsByName } from '../../types'
+import type { FormData } from '../../../../../../form-types'
 
 interface LiquidClassesStepToolsProps {
   propsForFields: FieldPropsByName
@@ -35,10 +34,10 @@ export const LiquidClassesStepTools = ({
   const liquids = useSelector(getLiquidEntities)
   const pipetteEntities = useSelector(stepFormSelectors.getPipetteEntities)
   const sortedLiquidClassDefs = getSortedLiquidClassDefs()
-  const pipetteName = pipetteEntities[formData.pipette].name
+  const pipetteName = pipetteEntities[formData.pipette]?.name
   const pipetteModel = PIPETTE_NAMES_MAP[pipetteName]
   const { volume, tipRack, pipette, path } = formData
-  const disabledLiquidClasses = getDisableLiquidClasses(
+  const disabledLiquidClasses = getDisabledLiquidClasses(
     {
       volume,
       tipRack,
@@ -138,10 +137,7 @@ export const LiquidClassesStepTools = ({
                 align: 'vertical',
               }}
               largeDesktopBorderRadius
-              disabled={
-                disabledLiquidClasses !== null &&
-                disabledLiquidClasses.has(name as LiquidClassesOption)
-              }
+              disabled={disabledLiquidClasses?.has(name)}
             />
           )
         })}

protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepTools/MoveLiquidTools/__tests__/LiquidClassesStepTools.test.tsx

@@ -54,6 +54,7 @@ describe('LiquidClassesStepMoveLiquidTools', () => {
   })
 
   it('renders fields and buttons', () => {
+    props.formData.volume = 11
     render(props)
     screen.getByText('Apply liquid class settings for this transfer')
     screen.getByText("Don't use a liquid class")

protocol-designer/src/steplist/formLevel/warnings.tsx

@@ -1,10 +1,11 @@
 import {
-  PIPETTE_NAMES_MAP,
+  MIN_LIQUID_CLASSES_COMPATIBLE_VOLUME,
   getIncompatibleLiquidClasses,
   getWellTotalVolume,
+  PIPETTE_NAMES_MAP,
 } from '@opentrons/shared-data'
-import type { FormError } from './errors'
 import type { LabwareDefinition2, PipetteName } from '@opentrons/shared-data'
+import type { FormError } from './errors'
 
 /*******************
  ** Warning Messages **
@@ -184,7 +185,9 @@ export const lowVolumeTransfer = (
 ): FormWarning | null => {
   const { volume } = fields
 
-  return volume <= 10 ? lowVolumeTransferWarning() : null
+  return volume <= MIN_LIQUID_CLASSES_COMPATIBLE_VOLUME
+    ? lowVolumeTransferWarning()
+    : null
 }
 
 export const incompatiblePipettePath = (

shared-data/js/constants.ts

@@ -664,6 +664,8 @@ export const WELL_CENTER: 'well-center' = 'well-center'
 export const WELL_BOTTOM: 'well-bottom' = 'well-bottom'
 export const LIQUID_MENISCUS: 'liquid-meniscus' = 'liquid-meniscus'
 
+export const MIN_LIQUID_CLASSES_COMPATIBLE_VOLUME = 10
+
 export const PIPETTE_NAMES_MAP: Record<PipetteName, string> = {
   p10_single: 'p10_single',
   p10_multi: 'p10_multi',

shared-data/js/helpers/__tests__/index.test.ts

@@ -1,7 +1,7 @@
 import { describe, expect, vi, it } from 'vitest'
 
 import {
-  getDisableLiquidClasses,
+  getDisabledLiquidClasses,
   getIncompatibleLiquidClasses,
   getSortedLiquidClassDefs,
 } from '..'
@@ -124,10 +124,10 @@ describe('getIncompatibleLiquidClasses', () => {
   })
 })
 
-describe('getDisableLiquidClasses', () => {
+describe('getDisabledLiquidClasses', () => {
   it('should returns a list of liquid class names that should be diasbled given incompatible volume', () => {
     const valuesForLiquidClasses = { volume: 10, pipette: 'mockId' }
-    const disabledLiquidClasses = getDisableLiquidClasses(
+    const disabledLiquidClasses = getDisabledLiquidClasses(
       valuesForLiquidClasses,
       'mockPipetteModel1'
     )

shared-data/js/helpers/index.ts

@@ -1,6 +1,9 @@
 import uniq from 'lodash/uniq'
 
-import { OPENTRONS_LABWARE_NAMESPACE } from '../constants'
+import {
+  MIN_LIQUID_CLASSES_COMPATIBLE_VOLUME,
+  OPENTRONS_LABWARE_NAMESPACE,
+} from '../constants'
 import standardOt2DeckDef from '../../deck/definitions/5/ot2_standard.json'
 import standardFlexDeckDef from '../../deck/definitions/5/ot3_standard.json'
 import type {
@@ -456,15 +459,15 @@ export interface ValuesForLiquidClasses {
   tipRack?: string | null
   pipette?: string | null
 }
-export const getDisableLiquidClasses = (
+export const getDisabledLiquidClasses = (
   values: ValuesForLiquidClasses,
   pipetteModel: string
 ): Set<LiquidClassesOption> | null => {
   const { volume, tipRack, pipette, path } = values
   if (pipette == null) return null
   const disabledLiquidClasses = new Set<LiquidClassesOption>()
 
-  if (volume != null && volume <= 10) {
+  if (volume != null && volume <= MIN_LIQUID_CLASSES_COMPATIBLE_VOLUME) {
     disabledLiquidClasses.add('Aqueous')
     disabledLiquidClasses.add('Viscous')
     disabledLiquidClasses.add('Volatile')