fix(protocol-designer): fix pipette tips form data issue (#19077)

* fix(protocol-designer): fix pipette tips form data issue

Author: koji

protocol-designer/src/components/organisms/SelectPipetteModal/SelectPipetteTips.tsx

@@ -29,31 +29,28 @@ import { useKitchen } from '../Kitchen/useKitchen'
 
 import type { ThunkDispatch } from 'redux-thunk'
 import type { Dispatch, SetStateAction } from 'react'
-import type { UseFormSetValue } from 'react-hook-form'
-import type { PipetteMount, RobotType } from '@opentrons/shared-data'
+import type { RobotType } from '@opentrons/shared-data'
 import type { BaseState } from '../../../types'
 
 interface SelectPipetteTipsProps {
-  mount: PipetteMount
   robotType: RobotType
   tiprackOptions: Record<string, string>
-  setValue: UseFormSetValue<any>
   selectedValues: string[]
   pipetteVolume: string | null
   setIncompatibleTip: Dispatch<SetStateAction<boolean>>
+  setSelectedTipracks: Dispatch<SetStateAction<string[]>>
 }
 
 const MAX_TIPRACKS_ALLOWED = 3
 
 export function SelectPipetteTips(props: SelectPipetteTipsProps): JSX.Element {
   const {
-    mount,
     robotType,
     tiprackOptions,
-    setValue,
     selectedValues,
     pipetteVolume,
     setIncompatibleTip,
+    setSelectedTipracks,
   } = props
   const { t } = useTranslation('onboarding')
   const { makeSnackbar } = useKitchen()
@@ -64,18 +61,12 @@ export function SelectPipetteTips(props: SelectPipetteTipsProps): JSX.Element {
     const isCurrentlySelected = selectedValues.includes(value)
 
     if (isCurrentlySelected) {
-      setValue(
-        `pipettesByMount.${mount}.tiprackDefURI`,
-        selectedValues.filter(v => v !== value)
-      )
+      setSelectedTipracks(selectedValues.filter(v => v !== value))
     } else {
       if (selectedValues.length === MAX_TIPRACKS_ALLOWED) {
         makeSnackbar(t('up_to_3_tipracks') as string)
       } else {
-        setValue(`pipettesByMount.${mount}.tiprackDefURI`, [
-          ...selectedValues,
-          value,
-        ])
+        setSelectedTipracks([...selectedValues, value])
       }
     }
   }

protocol-designer/src/components/organisms/SelectPipetteModal/index.tsx

@@ -71,6 +71,10 @@ export function SelectPipetteModal(
   const fields = watch('fields')
   const allLabware = useSelector(getLabwareDefsByURI)
   const [showIncompatibleTip, setIncompatibleTip] = useState<boolean>(false)
+  const [selectedTipracks, setSelectedTipracks] = useState<string[]>(
+    () => pipettesByMount[mount].tiprackDefURI ?? []
+  )
+
   const allowAllTipracks = useSelector(getAllowAllTipracks)
   const allPipetteOptions = getAllPipetteNames('maxVolume', 'channels')
   const robotType = fields.robotType
@@ -79,25 +83,28 @@ export function SelectPipetteModal(
       ? `${pipetteVolume}_${pipetteType}`
       : `${pipetteVolume}_${pipetteType}_${pipetteGen.toLowerCase()}`
 
-  const selectedValues = pipettesByMount[mount].tiprackDefURI ?? []
-
-  const noPipette =
-    (pipettesByMount.left.pipetteName == null ||
-      pipettesByMount.left.tiprackDefURI == null) &&
-    (pipettesByMount.right.pipetteName == null ||
-      pipettesByMount.right.tiprackDefURI == null)
-
-  const isDisabled =
-    (pipettesByMount[mount].tiprackDefURI == null && noPipette) ||
-    ((pipettesByMount.left.tiprackDefURI == null ||
-      pipettesByMount.left.tiprackDefURI.length === 0) &&
-      (pipettesByMount.right.tiprackDefURI == null ||
-        pipettesByMount.right.tiprackDefURI.length === 0))
+  const currentPipetteSelected = pipetteType != null && pipetteVolume != null
+  const currentTipracksSelected = selectedTipracks.length > 0
+  const otherMount = mount === 'left' ? 'right' : 'left'
+  const otherMountData = pipettesByMount[otherMount]
+  const otherPipetteConfigured = otherMountData?.pipetteName != null
+  const otherTipracksConfigured =
+    otherMountData?.tiprackDefURI != null &&
+    otherMountData.tiprackDefURI.length > 0
+  const otherMountComplete = otherPipetteConfigured && otherTipracksConfigured
+  const currentMountComplete = currentPipetteSelected && currentTipracksSelected
+  const noPipette = !currentMountComplete && !otherMountComplete
+  const isDisabled = noPipette || !currentTipracksSelected
 
   if (robotType == null) {
     return null
   }
 
+  const handleSave = (): void => {
+    setValue(`pipettesByMount.${mount}.tiprackDefURI`, selectedTipracks)
+    setSelectedPipetteName(selectedPipetteName)
+  }
+
   return createPortal(
     showIncompatibleTip ? (
       <IncompatibleTipsModal
@@ -121,12 +128,7 @@ export function SelectPipetteModal(
             <SecondaryButton onClick={handleBack}>
               {t('shared:cancel')}
             </SecondaryButton>
-            <PrimaryButton
-              onClick={() => {
-                setSelectedPipetteName(selectedPipetteName)
-              }}
-              disabled={isDisabled}
-            >
+            <PrimaryButton onClick={handleSave} disabled={isDisabled}>
               {t('shared:save')}
             </PrimaryButton>
           </Flex>
@@ -177,11 +179,10 @@ export function SelectPipetteModal(
                   <SelectPipetteTips
                     tiprackOptions={tiprackOptions}
                     setIncompatibleTip={setIncompatibleTip}
-                    mount={mount}
                     robotType={robotType}
-                    selectedValues={selectedValues}
                     pipetteVolume={pipetteVolume}
-                    setValue={setValue}
+                    selectedValues={selectedTipracks}
+                    setSelectedTipracks={setSelectedTipracks}
                   />
                 )
               })()