refactor(protocol-designer): consolidate CheckboxExapandStepFormField props

ncdiehl11 · ncdiehl11 · commit 9d812b0810be · 2025-03-20T17:53:56.000-04:00
This PR utilizes the existing `propsForFields` structure to pass all necessary fields to CheckboxExpandStepFormField for the implicated checkbox stepform field. Instead of indivisually passing values for the field props `value`, `updatValue`, `isChecked`, `tooltipText`, and `disabled`, we can simply pass that field's `propsForFields`, and destructure inside the checkbox expand component.
diff --git a/protocol-designer/src/components/molecules/CheckboxExpandStepFormField/index.tsx b/protocol-designer/src/components/molecules/CheckboxExpandStepFormField/index.tsx
@@ -14,30 +14,26 @@ import {
 } from '@opentrons/components'
 
 import type { ReactNode } from 'react'
+import type { FieldProps } from '../../../pages/Designer/ProtocolSteps/types'
 
 interface CheckboxExpandStepFormFieldProps {
   title: string
-  checkboxUpdateValue: (value: unknown) => void
-  checkboxValue: unknown
-  isChecked: boolean
+  fieldProps: FieldProps
+  tooltipOverride?: string
   children?: ReactNode
-  tooltipText?: string | null
-  disabled?: boolean
   testId?: string
 }
 export function CheckboxExpandStepFormField(
   props: CheckboxExpandStepFormFieldProps
 ): JSX.Element {
+  const { children, title, tooltipOverride, testId, fieldProps } = props
+
   const {
-    checkboxUpdateValue,
-    checkboxValue,
-    children,
-    isChecked,
-    title,
-    tooltipText,
+    value,
+    updateValue,
+    tooltipContent = tooltipOverride,
     disabled = false,
-    testId,
-  } = props
+  } = fieldProps
 
   const [targetProps, tooltipProps] = useHoverTooltip()
   return (
@@ -48,7 +44,7 @@ export function CheckboxExpandStepFormField(
         disabled={disabled}
         onClick={() => {
           if (!disabled) {
-            checkboxUpdateValue(!checkboxValue)
+            updateValue(!value)
           }
         }}
         color={disabled ? COLORS.grey40 : COLORS.black90}
@@ -69,12 +65,12 @@ export function CheckboxExpandStepFormField(
               <Btn
                 data-testid={testId}
                 onClick={() => {
-                  checkboxUpdateValue(!checkboxValue)
+                  updateValue(!value)
                 }}
               >
                 <Check
                   color={COLORS.blue50}
-                  isChecked={isChecked}
+                  isChecked={value === true}
                   disabled={disabled}
                 />
               </Btn>
@@ -83,8 +79,8 @@ export function CheckboxExpandStepFormField(
           {children}
         </Flex>
       </ListButton>
-      {tooltipText != null ? (
-        <Tooltip tooltipProps={tooltipProps}>{tooltipText}</Tooltip>
+      {tooltipContent != null ? (
+        <Tooltip tooltipProps={tooltipProps}>{tooltipContent}</Tooltip>
       ) : null}
     </>
   )
diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/BatchEditToolbox/BatchEditMixTools.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/BatchEditToolbox/BatchEditMixTools.tsx
@@ -127,11 +127,7 @@ export function BatchEditMixTools(props: BatchEditMixToolsProps): JSX.Element {
             t('form:step_edit_form.field.delay.label'),
             'capitalize'
           )}
-          checkboxValue={propsForFields[`${tab}_delay_checkbox`].value}
-          isChecked={propsForFields[`${tab}_delay_checkbox`].value === true}
-          checkboxUpdateValue={
-            propsForFields[`${tab}_delay_checkbox`].updateValue
-          }
+          fieldProps={propsForFields[`${tab}_delay_checkbox`]}
         >
           {propsForFields[`${tab}_delay_checkbox`].value === true ? (
             <InputStepFormField
@@ -150,9 +146,7 @@ export function BatchEditMixTools(props: BatchEditMixToolsProps): JSX.Element {
                 t('form:step_edit_form.field.blowout.label'),
                 'capitalize'
               )}
-              checkboxValue={propsForFields.blowout_checkbox.value}
-              isChecked={propsForFields.blowout_checkbox.value === true}
-              checkboxUpdateValue={propsForFields.blowout_checkbox.updateValue}
+              fieldProps={propsForFields.blowout_checkbox}
             >
               {propsForFields.blowout_checkbox.value === true ? (
                 <BlowoutLocationField
@@ -169,11 +163,7 @@ export function BatchEditMixTools(props: BatchEditMixToolsProps): JSX.Element {
                 t('form:step_edit_form.field.touchTip.label'),
                 'capitalize'
               )}
-              checkboxValue={propsForFields.mix_touchTip_checkbox.value}
-              isChecked={propsForFields.mix_touchTip_checkbox.value === true}
-              checkboxUpdateValue={
-                propsForFields.mix_touchTip_checkbox.updateValue
-              }
+              fieldProps={propsForFields.mix_touchTip_checkbox}
             >
               {propsForFields.mix_touchTip_checkbox.value === true ? (
                 <PositionField
diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/BatchEditToolbox/BatchEditMoveLiquidTools.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/BatchEditToolbox/BatchEditMoveLiquidTools.tsx
@@ -125,21 +125,15 @@ export function BatchEditMoveLiquidTools(
               t('form:step_edit_form.field.preWetTip.label'),
               'capitalize'
             )}
-            checkboxValue={propsForFields.preWetTip.value}
-            isChecked={propsForFields.preWetTip.value === true}
-            checkboxUpdateValue={propsForFields.preWetTip.updateValue}
+            fieldProps={propsForFields.preWetTip}
           />
         ) : null}
         <CheckboxExpandStepFormField
           title={i18n.format(
             t('form:step_edit_form.field.mix.label'),
             'capitalize'
           )}
-          checkboxValue={propsForFields[`${tab}_mix_checkbox`].value}
-          isChecked={propsForFields[`${tab}_mix_checkbox`].value === true}
-          checkboxUpdateValue={
-            propsForFields[`${tab}_mix_checkbox`].updateValue
-          }
+          fieldProps={propsForFields[`${tab}_mix_checkbox`]}
         >
           {propsForFields[`${tab}_mix_checkbox`].value === true ? (
             <Flex
@@ -169,11 +163,7 @@ export function BatchEditMoveLiquidTools(
             t('form:step_edit_form.field.delay.label'),
             'capitalize'
           )}
-          checkboxValue={propsForFields[`${tab}_delay_checkbox`].value}
-          isChecked={propsForFields[`${tab}_delay_checkbox`].value === true}
-          checkboxUpdateValue={
-            propsForFields[`${tab}_delay_checkbox`].updateValue
-          }
+          fieldProps={propsForFields[`${tab}_delay_checkbox`]}
         >
           {propsForFields[`${tab}_delay_checkbox`].value === true ? (
             <Flex
@@ -205,9 +195,7 @@ export function BatchEditMoveLiquidTools(
               t('form:step_edit_form.field.blowout.label'),
               'capitalize'
             )}
-            checkboxValue={propsForFields.blowout_checkbox.value}
-            isChecked={propsForFields.blowout_checkbox.value === true}
-            checkboxUpdateValue={propsForFields.blowout_checkbox.updateValue}
+            fieldProps={propsForFields.blowout_checkbox}
           >
             {propsForFields.blowout_checkbox.value === true ? (
               <Flex
diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/PipetteFields/DisposalField.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/PipetteFields/DisposalField.tsx
@@ -70,13 +70,11 @@ export function DisposalField(props: DisposalFieldProps): JSX.Element {
         })
       : ''
 
-  const { value, updateValue } = propsForFields.disposalVolume_checkbox
+  const { value } = propsForFields.disposalVolume_checkbox
   return (
     <CheckboxExpandStepFormField
       title={t('protocol_steps:multi_dispense_options')}
-      checkboxValue={value}
-      isChecked={value === true}
-      checkboxUpdateValue={updateValue}
+      fieldProps={propsForFields.disposalVolume_checkbox}
     >
       {value ? (
         <Flex flexDirection={DIRECTION_COLUMN} gridGap={SPACING.spacing6}>
diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepTools/MixTools/index.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepTools/MixTools/index.tsx
@@ -256,14 +256,7 @@ export function MixTools(props: StepFormProps): JSX.Element {
             'capitalize'
           )}
           testId="delay_checkbox"
-          checkboxValue={propsForFields[`${tab}_delay_checkbox`].value}
-          isChecked={propsForFields[`${tab}_delay_checkbox`].value === true}
-          checkboxUpdateValue={
-            propsForFields[`${tab}_delay_checkbox`].updateValue
-          }
-          tooltipText={
-            propsForFields[`${tab}_delay_checkbox`].tooltipContent ?? null
-          }
+          fieldProps={propsForFields[`${tab}_delay_checkbox`]}
         >
           {formData[`${tab}_delay_checkbox`] === true ? (
             <InputStepFormField
@@ -287,12 +280,7 @@ export function MixTools(props: StepFormProps): JSX.Element {
                 'capitalize'
               )}
               testId="blowout_checkbox"
-              checkboxValue={propsForFields.blowout_checkbox.value}
-              isChecked={propsForFields.blowout_checkbox.value === true}
-              checkboxUpdateValue={propsForFields.blowout_checkbox.updateValue}
-              tooltipText={
-                propsForFields.blowout_checkbox.tooltipContent ?? null
-              }
+              fieldProps={propsForFields.blowout_checkbox}
             >
               {formData.blowout_checkbox === true ? (
                 <Flex
@@ -333,14 +321,7 @@ export function MixTools(props: StepFormProps): JSX.Element {
                 'capitalize'
               )}
               testId="touchTip_checkbox"
-              checkboxValue={propsForFields.mix_touchTip_checkbox.value}
-              isChecked={propsForFields.mix_touchTip_checkbox.value === true}
-              checkboxUpdateValue={
-                propsForFields.mix_touchTip_checkbox.updateValue
-              }
-              tooltipText={
-                propsForFields.mix_touchTip_checkbox.tooltipContent ?? null
-              }
+              fieldProps={propsForFields.mix_touchTip_checkbox}
             >
               {formData.mix_touchTip_checkbox === true ? (
                 <PositionField
diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepTools/MoveLiquidTools/SecondStepsMoveLiquidTools.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepTools/MoveLiquidTools/SecondStepsMoveLiquidTools.tsx
@@ -277,20 +277,9 @@ export const SecondStepsMoveLiquidTools = ({
             t('form:step_edit_form.field.mix.label'),
             'capitalize'
           )}
-          checkboxValue={propsForFields[`${tab}_mix_checkbox`].value}
-          isChecked={propsForFields[`${tab}_mix_checkbox`].value === true}
-          checkboxUpdateValue={
-            propsForFields[`${tab}_mix_checkbox`].updateValue
-          }
-          tooltipText={
-            tab === 'dispense'
-              ? dispenseMixDisabledTooltipText
-              : propsForFields.aspirate_mix_checkbox.tooltipContent
-          }
-          disabled={
-            tab === 'dispense'
-              ? isDestinationTrash || formData.path === 'multiDispense'
-              : formData.path === 'multiAspirate'
+          fieldProps={propsForFields[`${tab}_mix_checkbox`]}
+          tooltipOverride={
+            tab === 'dispense' ? dispenseMixDisabledTooltipText : null
           }
         >
           {formData[`${tab}_mix_checkbox`] === true ? (
@@ -330,10 +319,7 @@ export const SecondStepsMoveLiquidTools = ({
               t('form:step_edit_form.field.pushOut.title'),
               'capitalize'
             )}
-            checkboxValue={propsForFields.pushOut_checkbox.value}
-            isChecked={propsForFields.pushOut_checkbox.value === true}
-            checkboxUpdateValue={propsForFields.pushOut_checkbox.updateValue}
-            tooltipText={propsForFields.pushOut_checkbox.tooltipContent}
+            fieldProps={propsForFields.pushOut_checkbox}
           >
             {formData.pushOut_checkbox === true ? (
               <InputStepFormField
@@ -361,12 +347,7 @@ export const SecondStepsMoveLiquidTools = ({
             t('form:step_edit_form.field.delay.label'),
             'capitalize'
           )}
-          checkboxValue={propsForFields[`${tab}_delay_checkbox`].value}
-          isChecked={propsForFields[`${tab}_delay_checkbox`].value === true}
-          checkboxUpdateValue={
-            propsForFields[`${tab}_delay_checkbox`].updateValue
-          }
-          tooltipText={propsForFields[`${tab}_delay_checkbox`].tooltipContent}
+          fieldProps={propsForFields[`${tab}_delay_checkbox`]}
         >
           {formData[`${tab}_delay_checkbox`] === true ? (
             <Flex
@@ -394,14 +375,7 @@ export const SecondStepsMoveLiquidTools = ({
               t('form:step_edit_form.field.blowout.label'),
               'capitalize'
             )}
-            checkboxValue={propsForFields.blowout_checkbox.value}
-            isChecked={propsForFields.blowout_checkbox.value === true}
-            checkboxUpdateValue={propsForFields.blowout_checkbox.updateValue}
-            tooltipText={propsForFields.blowout_checkbox.tooltipContent}
-            disabled={
-              formData.path === 'multiDispense' &&
-              formData.disposalVolume_checkbox
-            }
+            fieldProps={propsForFields.blowout_checkbox}
           >
             {formData.blowout_checkbox === true ? (
               <Flex
@@ -441,15 +415,7 @@ export const SecondStepsMoveLiquidTools = ({
             t('form:step_edit_form.field.touchTip.label'),
             'capitalize'
           )}
-          checkboxValue={propsForFields[`${tab}_touchTip_checkbox`].value}
-          isChecked={propsForFields[`${tab}_touchTip_checkbox`].value === true}
-          checkboxUpdateValue={
-            propsForFields[`${tab}_touchTip_checkbox`].updateValue
-          }
-          tooltipText={
-            propsForFields[`${tab}_touchTip_checkbox`].tooltipContent
-          }
-          disabled={propsForFields[`${tab}_touchTip_checkbox`].disabled}
+          fieldProps={propsForFields[`${tab}_touchTip_checkbox`]}
         >
           {formData[`${tab}_touchTip_checkbox`] === true ? (
             <Flex flexDirection={DIRECTION_COLUMN} gridGap={SPACING.spacing10}>
@@ -505,12 +471,7 @@ export const SecondStepsMoveLiquidTools = ({
             t('form:step_edit_form.field.airGap.label'),
             'capitalize'
           )}
-          checkboxValue={propsForFields[`${tab}_airGap_checkbox`].value}
-          isChecked={propsForFields[`${tab}_airGap_checkbox`].value === true}
-          checkboxUpdateValue={
-            propsForFields[`${tab}_airGap_checkbox`].updateValue
-          }
-          tooltipText={propsForFields[`${tab}_airGap_checkbox`].tooltipContent}
+          fieldProps={propsForFields[`${tab}_airGap_checkbox`]}
         >
           {formData[`${tab}_airGap_checkbox`] === true ? (
             <InputStepFormField
