fix(protocol-designer): update labware entities when modifying stacker fill step (#20519)

Handles labware deletion and creation when editing an already-saved
stacker fill step. If the new quantity exceeds the previously saved
quantity, we preserve the old labware IDs and create as many new
labwares as the difference of (newQuantity - oldQuantity). If the new
quantity is less than the previously saved quantity, we delete the
labwares that are no longer called in the fill.

Author: ncdiehl11

protocol-designer/src/components/organisms/StepSummary/FlexStackerSummary.tsx

@@ -30,7 +30,6 @@ export function FlexStackerSummary(
   const { fillLabwareIds, flexStackerFormType, moduleId } = currentStep
   const { moduleState: stackerModuleState } = moduleRobotState[moduleId] ?? {}
   const nicknamesById = useSelector(getLabwareNicknamesById)
-  console.log(nicknamesById)
   if (
     stackerModuleState == null ||
     stackerModuleState.type !== FLEX_STACKER_MODULE_TYPE

protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepTools/FlexStackerTools/RefillSettings.tsx

@@ -11,47 +11,70 @@ import {
 import { getIsTiprack } from '@opentrons/shared-data'
 
 import { InputStepFormField } from '/protocol-designer/components/molecules'
-import { getLabwareEntities } from '/protocol-designer/step-forms/selectors'
+import {
+  getLabwareEntities,
+  getSavedStepForms,
+} from '/protocol-designer/step-forms/selectors'
 import { uuid } from '/protocol-designer/utils'
 
 import styles from './flexstackertools.module.css'
 import { MessageField } from './MessageField'
 import { StackerContentItem } from './StackerContentItem'
 
 import type { FlexStackerModuleState } from '@opentrons/step-generation'
+import type { FormData } from '/protocol-designer/form-types'
 import type { FieldPropsByName } from '../../types'
 
 interface RefillSettingsProps {
+  formData: FormData
   propsForFields: FieldPropsByName
   moduleState: FlexStackerModuleState | null
   maxPoolCount: number
 }
 
 export function RefillSettings(props: RefillSettingsProps): JSX.Element {
-  const { propsForFields, moduleState, maxPoolCount } = props
+  const { formData, propsForFields, moduleState, maxPoolCount } = props
   const { t } = useTranslation('form')
   const { storedLabwareDetails } = moduleState ?? {}
   const labwareEntities = useSelector(getLabwareEntities)
+  const savedStepForms = useSelector(getSavedStepForms)
+  const initialLabwareIds =
+    (savedStepForms[formData.id]?.fillLabwareIds as string[]) ?? []
+  const oldFillQuantity = initialLabwareIds.length
   const [fillQuantityLocalState, setFillQuantityState] = useState<
     string | null
-  >(null)
+    // initialize if saved step form exists
+  >(initialLabwareIds.length > 0 ? String(initialLabwareIds.length) : null)
   const storedEntity = Object.values(labwareEntities).find(
     ({ labwareDefURI }) => {
       return labwareDefURI === storedLabwareDetails?.primaryLabwareURI
     }
   )
+
   const storedEntityName = storedEntity?.def.metadata.displayName
   const isTiprack = storedEntity != null && getIsTiprack(storedEntity.def)
   // TODO: figure out a way to not need this use Effect. its hard because
   // you can't rely on generating the uuid in the hydrated form
   useEffect(() => {
     const quantity = Number(fillQuantityLocalState) ?? 1
-    const newFill = Array.from(
-      { length: quantity },
-      () => `${uuid()}:${storedEntity?.labwareDefURI}`
-    )
-    propsForFields.fillLabwareIds.updateValue(newFill)
+    const difference = quantity - oldFillQuantity
+    if (difference > 0) {
+      const additionalIds = Array.from(
+        { length: difference },
+        () => `${uuid()}:${storedEntity?.labwareDefURI}`
+      )
+      // ensure we preserve the existing labware IDs, even if a user extensively modifies the quantity up/down
+      propsForFields.fillLabwareIds.updateValue([
+        ...initialLabwareIds,
+        ...additionalIds,
+      ])
+    } else if (difference < 0) {
+      propsForFields.fillLabwareIds.updateValue(
+        initialLabwareIds.slice(0, quantity)
+      )
+    }
   }, [fillQuantityLocalState, storedEntity?.labwareDefURI])
+
   return (
     <div className={styles.refill_settings_container}>
       <StyledText desktopStyle="bodyDefaultRegular" color={COLORS.grey60}>

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

@@ -200,6 +200,7 @@ export function FlexStackerTools(props: StepFormProps): JSX.Element {
       ) : null}
       {formData.flexStackerFormType === FLEX_STACKER_FILL ? (
         <RefillSettings
+          formData={formData}
           propsForFields={propsForFields}
           moduleState={moduleState}
           maxPoolCount={maxPoolCount}

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

@@ -1,5 +1,5 @@
 import { useState } from 'react'
-import { connect } from 'react-redux'
+import { connect, useSelector } from 'react-redux'
 
 import { useConditionalConfirm } from '@opentrons/components'
 import { getModuleDisplayName } from '@opentrons/shared-data'
@@ -12,12 +12,16 @@ import {
 } from '/protocol-designer/components/organisms'
 import { getEnableConcurrentModuleActions } from '/protocol-designer/feature-flags/selectors'
 import { selectors as labwareDefSelectors } from '/protocol-designer/labware-defs'
+import { deleteContainer } from '/protocol-designer/labware-ingred/actions'
 import {
   getHydratedForm,
   selectors as stepFormSelectors,
 } from '/protocol-designer/step-forms'
 import { createLabwareAndQueueForHopper } from '/protocol-designer/step-forms/actions/thunks'
-import { getInvariantContext } from '/protocol-designer/step-forms/selectors'
+import {
+  getInvariantContext,
+  getSavedStepForms,
+} from '/protocol-designer/step-forms/selectors'
 import { actions } from '/protocol-designer/steplist'
 import { actions as stepsActions } from '/protocol-designer/ui/steps'
 
@@ -45,6 +49,7 @@ interface DispatchProps {
   cancelStepForm: () => void
   saveStepForm: (options?: { userWantsBonusStep?: boolean }) => void
   createdLabwareForQueue: (moduleId: string, fillLabwareIds: string[]) => void
+  deleteLabwares: (labwareIds: string[]) => void
 }
 type StepFormManagerProps = StateProps & DispatchProps
 
@@ -60,11 +65,14 @@ function StepFormManager(props: StepFormManagerProps): JSX.Element | null {
     invariantContext,
     allLabwareDefs,
     createdLabwareForQueue,
+    deleteLabwares,
   } = props
   const [focusedField, setFocusedField] = useState<string | null>(null)
   const [dirtyFields, setDirtyFields] = useState<StepFieldName[]>(
     getDirtyFields(isNewStep, formData)
   )
+  const savedStepForms = useSelector(getSavedStepForms)
+  const savedStepForm = formData != null ? savedStepForms[formData.id] : null
 
   const handleBlur = (fieldName: StepFieldName): void => {
     if (fieldName === focusedField) {
@@ -111,10 +119,23 @@ function StepFormManager(props: StepFormManagerProps): JSX.Element | null {
         hydratedForm.stepType === 'flexStacker' &&
         hydratedForm.flexStackerFormType === 'fill'
       ) {
-        createdLabwareForQueue(
-          hydratedForm.moduleId,
-          hydratedForm.fillLabwareIds
-        )
+        const initialLabwareIds =
+          (savedStepForm?.fillLabwareIds as string[]) ?? null
+        const oldFillQuantity = initialLabwareIds.length
+
+        // delete extraneous labware if fill quantity is decreased
+        if (oldFillQuantity > hydratedForm.fillLabwareIds.length) {
+          const extraneousLabwareIds = initialLabwareIds.slice(
+            hydratedForm.fillLabwareIds.length,
+            oldFillQuantity
+          )
+          deleteLabwares(extraneousLabwareIds)
+        } else {
+          createdLabwareForQueue(
+            hydratedForm.moduleId,
+            hydratedForm.fillLabwareIds
+          )
+        }
       }
     } else {
       // There's a dialog we have to show before saving the step.
@@ -233,10 +254,17 @@ const mapDispatchToProps = (dispatch: ThunkDispatch<any>): DispatchProps => {
     )
   }
 
+  const deleteLabwares = (labwareIds: string[]): void => {
+    for (const labwareId of labwareIds) {
+      dispatch(deleteContainer({ labwareId }))
+    }
+  }
+
   return {
     cancelStepForm,
     saveStepForm,
     createdLabwareForQueue,
+    deleteLabwares,
   }
 }