refactor(protocol-designer): tweak when module cards are disabled in … (#14995)

…createFileWizard

closes AUTH-369

Author: jerader

protocol-designer/src/components/modals/CreateFileWizard/ModulesAndOtherTile.tsx

@@ -31,6 +31,7 @@ import {
   getModuleType,
   FLEX_ROBOT_TYPE,
   MAGNETIC_BLOCK_TYPE,
+  THERMOCYCLER_MODULE_TYPE,
 } from '@opentrons/shared-data'
 import { getIsCrashablePipetteSelected } from '../../../step-forms'
 import gripperImage from '../../../images/flex_gripper.png'
@@ -44,7 +45,7 @@ import { ModuleFields } from '../FilePipettesModal/ModuleFields'
 import { GoBack } from './GoBack'
 import {
   getCrashableModuleSelected,
-  getIsSlotAvailable,
+  getNumSlotsAvailable,
   getTrashOptionDisabled,
 } from './utils'
 import { EquipmentOption } from './EquipmentOption'
@@ -221,7 +222,12 @@ function FlexModuleFields(props: WizardTileProps): JSX.Element {
         const moduleType = getModuleType(moduleModel)
         const isModuleOnDeck = moduleTypesOnDeck.includes(moduleType)
 
-        const isDisabled = !getIsSlotAvailable(modules, additionalEquipment)
+        let isDisabled =
+          getNumSlotsAvailable(modules, additionalEquipment) === 0
+        //  special-casing TC since it takes up 2 slots
+        if (moduleType === THERMOCYCLER_MODULE_TYPE) {
+          isDisabled = getNumSlotsAvailable(modules, additionalEquipment) === 1
+        }
 
         const handleMultiplesClick = (num: number): void => {
           const temperatureModules =

protocol-designer/src/components/modals/CreateFileWizard/__tests__/utils.test.tsx

@@ -8,7 +8,7 @@ import {
   getUnoccupiedStagingAreaSlots,
   getTrashSlot,
   getTrashOptionDisabled,
-  getIsSlotAvailable,
+  getNumSlotsAvailable,
 } from '../utils'
 import { STANDARD_EMPTY_SLOTS } from '../StagingAreaTile'
 import type { FormPipettesByMount } from '../../../../step-forms'
@@ -53,12 +53,12 @@ describe('getUnoccupiedStagingAreaSlots', () => {
     ])
   })
 })
-describe('getIsSlotAvailable', () => {
-  it('should return true when there are no modules or additional equipment', () => {
-    const result = getIsSlotAvailable(null, [])
-    expect(result).toBe(true)
+describe('getNumSlotsAvailable', () => {
+  it('should return 8 when there are no modules or additional equipment', () => {
+    const result = getNumSlotsAvailable(null, [])
+    expect(result).toBe(8)
   })
-  it('should return false when there is a TC and 7 modules', () => {
+  it('should return 0 when there is a TC and 7 modules', () => {
     const mockModules = {
       0: {
         model: 'heaterShakerModuleV1',
@@ -96,10 +96,10 @@ describe('getIsSlotAvailable', () => {
         slot: 'C3',
       },
     } as any
-    const result = getIsSlotAvailable(mockModules, [])
-    expect(result).toBe(false)
+    const result = getNumSlotsAvailable(mockModules, [])
+    expect(result).toBe(0)
   })
-  it('should return true when there are 9 additional equipment and 1 is a waste chute on the staging area and one is a gripper', () => {
+  it('should return 1 when there are 9 additional equipment and 1 is a waste chute on the staging area and one is a gripper', () => {
     const mockAdditionalEquipment: AdditionalEquipment[] = [
       'trashBin',
       'stagingArea_cutoutA3',
@@ -111,8 +111,19 @@ describe('getIsSlotAvailable', () => {
       'gripper',
       'trashBin',
     ]
-    const result = getIsSlotAvailable(null, mockAdditionalEquipment)
-    expect(result).toBe(true)
+    const result = getNumSlotsAvailable(null, mockAdditionalEquipment)
+    expect(result).toBe(1)
+  })
+  it('should return 8 even when there is a magnetic block', () => {
+    const mockModules = {
+      0: {
+        model: 'magneticBlockV1',
+        type: 'magneticBlockType',
+        slot: 'B2',
+      },
+    } as any
+    const result = getNumSlotsAvailable(mockModules, [])
+    expect(result).toBe(8)
   })
 })
 describe('getTrashSlot', () => {

protocol-designer/src/components/modals/CreateFileWizard/utils.ts

@@ -1,4 +1,5 @@
 import {
+  MAGNETIC_BLOCK_TYPE,
   THERMOCYCLER_MODULE_TYPE,
   WASTE_CHUTE_CUTOUT,
 } from '@opentrons/shared-data'
@@ -85,17 +86,25 @@ export const getUnoccupiedStagingAreaSlots = (
 
 const TOTAL_MODULE_SLOTS = 8
 
-export const getIsSlotAvailable = (
+export const getNumSlotsAvailable = (
   modules: FormState['modules'],
   additionalEquipment: FormState['additionalEquipment']
-): boolean => {
-  const moduleLength = modules != null ? Object.keys(modules).length : 0
+): number => {
   const additionalEquipmentLength = additionalEquipment.length
   const hasTC = Object.values(modules || {}).some(
     module => module.type === THERMOCYCLER_MODULE_TYPE
   )
+  const hasMagneticBlock = Object.values(modules || {}).some(
+    module => module.type === MAGNETIC_BLOCK_TYPE
+  )
+  let filteredModuleLength = modules != null ? Object.keys(modules).length : 0
+  if (hasTC) {
+    filteredModuleLength = filteredModuleLength + 1
+  }
+  if (hasMagneticBlock) {
+    filteredModuleLength = filteredModuleLength - 1
+  }
 
-  const filteredModuleLength = hasTC ? moduleLength + 1 : moduleLength
   const hasWasteChute = additionalEquipment.some(equipment =>
     equipment.includes('wasteChute')
   )
@@ -113,10 +122,9 @@ export const getIsSlotAvailable = (
   if (hasGripper) {
     filteredAdditionalEquipmentLength = filteredAdditionalEquipmentLength - 1
   }
-
   return (
-    filteredModuleLength + filteredAdditionalEquipmentLength <
-    TOTAL_MODULE_SLOTS
+    TOTAL_MODULE_SLOTS -
+    (filteredModuleLength + filteredAdditionalEquipmentLength)
   )
 }
 
@@ -130,10 +138,9 @@ export const getTrashOptionDisabled = (
   props: TrashOptionDisabledProps
 ): boolean => {
   const { additionalEquipment, modules, trashType } = props
-  return (
-    !getIsSlotAvailable(modules, additionalEquipment) &&
-    !additionalEquipment.includes(trashType)
-  )
+  const hasNoSlotsAvailable =
+    getNumSlotsAvailable(modules, additionalEquipment) === 0
+  return hasNoSlotsAvailable && !additionalEquipment.includes(trashType)
 }
 
 export const getTrashSlot = (values: FormState): string => {