feat(protocol-designer): finish logic for liquid class getter

protocol-designer/src/components/organisms/ResetSettingsModal.tsx

@@ -18,22 +18,22 @@
 
 interface ResetSettingsModalProps {
   tab: 'aspirate' | 'dispense'
+  onContinue: () => void
   onClose: () => void
   onScroll: () => void
   liquidClass?: string | null
 }
 export function ResetSettingsModal(
   props: ResetSettingsModalProps
 ): JSX.Element {
-  const { tab, liquidClass, onClose, onScroll } = props
+  const { tab, liquidClass, onContinue, onClose, onScroll } = props
   const { t, i18n } = useTranslation('protocol_steps')
 
-  // TODO: Update to check liquidClass !== 'none' for Don't use a liquid class
   const isLiquidClassSelected = liquidClass !== null && liquidClass !== ''
   const liquidClassName = getLiquidClassDisplayName(String(liquidClass))
 
   const handleContinue = (): void => {
-    console.log('TODO: Wire up reset settings modal.')
+    onContinue()
     onClose()
     onScroll()
   }

protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepFormToolbox.tsx

@@ -38,10 +38,11 @@
   getCurrentFormIsPresaved,
   getDynamicFieldFormErrorsForUnsavedForm,
   getFormLevelErrorsForUnsavedForm,
+  getLabwareEntities,
   getPipetteEntities,
   getSavedStepForms,
 } from '../../../../step-forms/selectors'
-import { getDefaultLiquidClassesValues } from '../../../../steplist/formLevel/handleFormChange/utils'
+import { updateFieldsForLiquidClass } from '../../../../steplist/formLevel/handleFormChange/utils'
 import { getTimelineWarningsForSelectedStep } from '../../../../top-selectors/timelineWarnings'
 import {
   hoverSelection,
@@ -142,6 +143,7 @@
     false
   )
   const pipetteEntities = useSelector(getPipetteEntities)
+  const labwareEntities = useSelector(getLabwareEntities)
   const additionalEquipmentEntities = useSelector(
     getAdditionalEquipmentEntities
   )
@@ -170,6 +172,7 @@
   const [confirmedFieldUpdates, setConfirmedFieldUpdates] = useState<
     Record<string, any>
   >({})
+
   const fieldsChangedRequiringConfirmation = FIELDS_REQUIRING_CONFIRMATION.filter(
     field => {
       // if field has been updated and confirmed in modal, check its most recent confirmed value
@@ -284,18 +287,13 @@
   })
 
   const handleUpdateLiquidClassValues = (): void => {
-    const liquidClassValues = getDefaultLiquidClassesValues(
-      formData,
+    updateFieldsForLiquidClass({
+      propsForFields,
+      rawForm: formData,
       pipetteEntities,
-      additionalEquipmentEntities
-    )
-    if (liquidClassValues != null) {
-      Object.entries(liquidClassValues).forEach(([field, value]) => {
-        if (field in propsForFields) {
-          propsForFields[field].updateValue(value)
-        }
-      })
-    }
+      labwareEntities,
+      additionalEquipmentEntities,
+    })
     setToolboxStep(toolboxStep + 1)
     setShowConfirmationModal(false)
     handleConfirmValues()
@@ -357,7 +355,11 @@
       if (isConfirmationRequired) {
         setShowConfirmationModal(true)
       } else {
-        handleUpdateLiquidClassValues()
+        if (!hasSeenAdvancedSettings) {
+          handleUpdateLiquidClassValues()
+        } else {
+          setToolboxStep(toolboxStep + 1)
+        }
       }
     } else if (isMultiStepToolbox && toolboxStep < numStepFormPages - 1) {
       if (!isErrorOnCurrentPage) {

protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepTools/MixTools/SecondStepMixTools.tsx

@@ -15,8 +15,13 @@
   CheckboxExpandStepFormField,
   InputStepFormField,
 } from '../../../../../../components/molecules'
+import {
+  getAdditionalEquipmentEntities,
+  getLabwareEntities,
+  getPipetteEntities,
+} from '../../../../../../step-forms/selectors'
+import { updateFieldsForLiquidClass } from '../../../../../../steplist/formLevel/handleFormChange/utils'
 import { getMaxPushOutVolume } from '../../../../../../utils'
-import { getPipetteEntities } from '../../../../../../step-forms/selectors'
 import {
   BlowoutLocationField,
   BlowoutOffsetField,
@@ -54,6 +59,11 @@
   const { t, i18n } = useTranslation(['application', 'form'])
   const toolsComponentRef = useRef<HTMLDivElement | null>(null)
   const enableLiquidClasses = useSelector(getEnableLiquidClasses)
+  const pipetteEntities = useSelector(getPipetteEntities)
+  const labwareEntities = useSelector(getLabwareEntities)
+  const additionalEquipmentEntities = useSelector(
+    getAdditionalEquipmentEntities
+  )
   const [showResetModal, setShowResetModal] = useState<boolean>(false)
   const aspirateTab = {
     text: i18n.format(t('aspirate'), 'capitalize'),
@@ -91,6 +101,16 @@
       {showResetModal ? (
         <ResetSettingsModal
           tab={tab}
+          onContinue={() => {
+            updateFieldsForLiquidClass({
+              propsForFields,
+              rawForm: formData,
+              pipetteEntities,
+              labwareEntities,
+              additionalEquipmentEntities,
+              liquidHandlingAction: tab,
+            })
+          }}
           onClose={() => {
             setShowResetModal(false)
           }}
@@ -279,7 +299,6 @@
           <ResetSettingsField
             tab={tab}
             onClick={() => {
-              console.log('TODO: wire up onClick handler')
               setShowResetModal(true)
             }}
           />

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

@@ -1,7 +1,10 @@
 import { useTranslation } from 'react-i18next'
 import {
+  ALIGN_CENTER,
   DIRECTION_COLUMN,
   Flex,
+  FLEX_MAX_CONTENT,
+  JUSTIFY_CENTER,
   SPACING,
   StyledText,
   TertiaryButton,
@@ -24,8 +27,14 @@ export function ResetSettingsField(
       flexDirection={DIRECTION_COLUMN}
       padding={`0 ${SPACING.spacing16}`}
       paddingBottom={SPACING.spacing40}
+      justifyContent={JUSTIFY_CENTER}
+      alignItems={ALIGN_CENTER}
     >
-      <TertiaryButton onClick={onClick} buttonType="white">
+      <TertiaryButton
+        onClick={onClick}
+        buttonType="white"
+        width={FLEX_MAX_CONTENT}
+      >
         <StyledText desktopStyle="captionSemiBold">
           {t(`protocol_steps:reset_settings`, { tab })}
         </StyledText>

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

@@ -20,6 +20,7 @@
   ToggleStepFormField,
 } from '../../../../../../components/molecules'
 import {
+  getAdditionalEquipmentEntities,
   getInvariantContext,
   getLabwareEntities,
   getPipetteEntities,
@@ -51,6 +52,7 @@
 import type { FieldPropsByName, LiquidHandlingTab } from '../../types'
 import type { FormData, StepFieldName } from '../../../../../../form-types'
 import type { StepFormErrors } from '../../../../../../steplist'
+import { updateFieldsForLiquidClass } from '../../../../../../steplist/formLevel/handleFormChange/utils'
 
 const addPrefix = (prefix: string) => (fieldName: string): StepFieldName =>
   `${prefix}_${fieldName}`
@@ -74,7 +76,11 @@
 }: SecondStepsMoveLiquidToolsProps): JSX.Element => {
   const { t, i18n } = useTranslation(['protocol_steps', 'form', 'tooltip'])
   const toolsComponentRef = useRef<HTMLDivElement | null>(null)
-  const labwares = useSelector(getLabwareEntities)
+  const pipetteEntities = useSelector(getPipetteEntities)
+  const labwareEntities = useSelector(getLabwareEntities)
+  const additionalEquipmentEntities = useSelector(
+    getAdditionalEquipmentEntities
+  )
   const { trashBinEntities, wasteChuteEntities } = useSelector(
     getInvariantContext
   )
@@ -95,7 +101,7 @@
   const destinationLabwareType =
     formData.dispense_labware != null
       ? getTrashOrLabware(
-          labwares,
+          labwareEntities,
           wasteChuteEntities,
           trashBinEntities,
           formData.dispense_labware as string
@@ -169,7 +175,7 @@
             ? Number(formData.disposalVolume_volume)
             : 0,
         pipetteSpecs: pipetteSpec,
-        labwareEntities: labwares,
+        labwareEntities: labwareEntities,
         tiprackDefUri: formData.tipRack,
       }),
     [
@@ -181,7 +187,9 @@
   )
   const minXYDimension = isDestinationTrash
     ? null
-    : getMinXYDimension(labwares[formData[`${tab}_labware`]]?.def, ['A1'])
+    : getMinXYDimension(labwareEntities[formData[`${tab}_labware`]]?.def, [
+        'A1',
+      ])
   const minRadiusForTouchTip =
     minXYDimension != null ? round(minXYDimension / 2, 1) : null
 
@@ -199,6 +207,16 @@
       {showResetModal ? (
         <ResetSettingsModal
           tab={tab}
+          onContinue={() => {
+            updateFieldsForLiquidClass({
+              propsForFields,
+              rawForm: formData,
+              pipetteEntities,
+              labwareEntities,
+              additionalEquipmentEntities,
+              liquidHandlingAction: tab,
+            })
+          }}
           onClose={() => {
             setShowResetModal(false)
           }}
@@ -581,7 +599,6 @@
           <ResetSettingsField
             tab={tab}
             onClick={() => {
-              console.log('TODO: wire up onClick handler')
               setShowResetModal(true)
             }}
           />