fix(protocol-designer, step-generation): update prewet behavior in PD (…

…#17433)

This PR adds prewet to distribute, and updates the logic for when to use
prewet for all compound liquid handling command creators. The prewet
volume should always be set to the volume of the aspiration that is
about to be called (including disposal volume for `distribute`). Prewet
commands should be emmitted anytime a new tip is used for an aspiration.
Also, I update the UI for the prewet form field in MoveLiquidTools

Closes AUTH-908

protocol-designer/src/assets/localization/en/tooltip.json

@@ -65,7 +65,7 @@
       "newLocation": "New location to move the selected labware",
       "nozzles": "Partial pickup requires a tip rack directly on the deck. Full rack pickup requires the Flex 96 Tip Rack Adapter.",
       "pipette": "Select the pipette you want to use",
-      "preWetTip": "Pre-wet by aspirating and dispensing 2/3 of the tip’s max volume",
+      "preWetTip": "Pre-wet by aspirating and dispensing the total aspiration volume",
       "setTemperature": "Select the temperature to set your module to",
       "wells": "Select wells",
       "volume": "Volume to dispense in each well"

protocol-designer/src/molecules/ToggleStepFormField/index.tsx

@@ -1,5 +1,6 @@
 import {
   ALIGN_CENTER,
+  Check,
   COLORS,
   DIRECTION_COLUMN,
   Flex,
@@ -16,12 +17,13 @@ import { ToggleButton } from '../../atoms/ToggleButton'
 interface ToggleStepFormFieldProps {
   title: string
   isSelected: boolean
-  onLabel: string
-  offLabel: string
   toggleUpdateValue: (value: unknown) => void
   toggleValue: unknown
   tooltipContent: string | null
-  isDisabled: boolean
+  isDisabled?: boolean
+  onLabel?: string
+  offLabel?: string
+  toggleElement?: 'toggle' | 'checkbox'
 }
 export function ToggleStepFormField(
   props: ToggleStepFormFieldProps
@@ -34,34 +36,32 @@ export function ToggleStepFormField(
     toggleUpdateValue,
     toggleValue,
     tooltipContent,
-    isDisabled,
+    isDisabled = false,
+    toggleElement = 'toggle',
   } = props
   const [targetProps, tooltipProps] = useHoverTooltip()
 
   return (
     <>
       <ListButton
         type="noActive"
-        padding={SPACING.spacing12}
+        padding={SPACING.spacing16}
         onClick={() => {
           if (!isDisabled) {
             toggleUpdateValue(!toggleValue)
           }
         }}
         disabled={isDisabled}
       >
-        {tooltipContent != null ? (
-          <Tooltip tooltipProps={tooltipProps}>{tooltipContent}</Tooltip>
-        ) : null}
-
-        <Flex width="100%" flexDirection={DIRECTION_COLUMN} {...targetProps}>
+        <Flex width="100%" flexDirection={DIRECTION_COLUMN}>
           <Flex
             justifyContent={JUSTIFY_SPACE_BETWEEN}
             alignItems={ALIGN_CENTER}
           >
             <StyledText
               desktopStyle="bodyDefaultRegular"
               color={isDisabled ? COLORS.grey40 : COLORS.black90}
+              {...targetProps}
             >
               {title}
             </StyledText>
@@ -72,15 +72,21 @@ export function ToggleStepFormField(
               >
                 {isSelected ? onLabel : offLabel}
               </StyledText>
-              <ToggleButton
-                disabled={isDisabled}
-                label={isSelected ? onLabel : offLabel}
-                toggledOn={isSelected}
-              />
+              {toggleElement === 'toggle' ? (
+                <ToggleButton
+                  label={isSelected ? onLabel : offLabel}
+                  toggledOn={isSelected}
+                />
+              ) : (
+                <Check color={COLORS.blue50} isChecked={isSelected} />
+              )}
             </Flex>
           </Flex>
         </Flex>
       </ListButton>
+      {tooltipContent != null ? (
+        <Tooltip tooltipProps={tooltipProps}>{tooltipContent}</Tooltip>
+      ) : null}
     </>
   )
 }

protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/PipetteFields/LabwareField.tsx

@@ -31,6 +31,7 @@ export function LabwareField(props: FieldProps): JSX.Element {
       onExit={() => {
         dispatch(hoverSelection({ id: null, text: null }))
       }}
+      width="100%"
     />
   )
 }

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

@@ -360,6 +360,7 @@ export function StepFormToolbox(props: StepFormToolboxProps): JSX.Element {
             </StyledText>
           </Flex>
         }
+        width="21.875rem"
       >
         <div
           ref={toolsComponentRef}

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

@@ -27,6 +27,7 @@ import {
 import {
   CheckboxExpandStepFormField,
   InputStepFormField,
+  ToggleStepFormField,
 } from '../../../../../../molecules'
 import {
   BlowoutLocationField,
@@ -398,15 +399,16 @@ export function MoveLiquidTools(props: StepFormProps): JSX.Element {
           {t('protocol_steps:advanced_settings')}
         </StyledText>
         {tab === 'aspirate' ? (
-          <CheckboxExpandStepFormField
+          <ToggleStepFormField
             title={i18n.format(
               t('form:step_edit_form.field.preWetTip.label'),
               'capitalize'
             )}
-            checkboxValue={propsForFields.preWetTip.value}
-            isChecked={propsForFields.preWetTip.value === true}
-            checkboxUpdateValue={propsForFields.preWetTip.updateValue}
-            tooltipText={propsForFields.preWetTip.tooltipContent}
+            toggleValue={propsForFields.preWetTip.value}
+            isSelected={propsForFields.preWetTip.value === true}
+            toggleUpdateValue={propsForFields.preWetTip.updateValue}
+            toggleElement="checkbox"
+            tooltipContent={propsForFields.preWetTip.tooltipContent ?? null}
           />
         ) : null}
         <CheckboxExpandStepFormField