feat(protocol-designer): multiple h-s and mag block behind ff (#15705)

closes AUTH-568

protocol-designer/src/components/EditModules.tsx

@@ -12,6 +12,7 @@ import {
 } from '../step-forms'
 import { moveDeckItem } from '../labware-ingred/actions/actions'
 import { getRobotType } from '../file-data/selectors'
+import { getEnableMoam } from '../feature-flags/selectors'
 import { EditMultipleModulesModal } from './modals/EditModulesModal/EditMultipleModulesModal'
 import { useBlockingHint } from './Hints/useBlockingHint'
 import { MagneticModuleWarningModalContent } from './modals/EditModulesModal/MagneticModuleWarningModalContent'
@@ -31,17 +32,17 @@ export interface ModelModuleInfo {
   slot: string
 }
 
-const MOAM_MODULE_TYPES: ModuleType[] = [
-  TEMPERATURE_MODULE_TYPE,
-  HEATERSHAKER_MODULE_TYPE,
-  MAGNETIC_BLOCK_TYPE,
-]
-
 export const EditModules = (props: EditModulesProps): JSX.Element => {
   const { onCloseClick, moduleToEdit } = props
+  const enableMoam = useSelector(getEnableMoam)
   const { moduleId, moduleType } = moduleToEdit
   const _initialDeckSetup = useSelector(stepFormSelectors.getInitialDeckSetup)
   const robotType = useSelector(getRobotType)
+
+  const MOAM_MODULE_TYPES: ModuleType[] = enableMoam
+    ? [TEMPERATURE_MODULE_TYPE, HEATERSHAKER_MODULE_TYPE, MAGNETIC_BLOCK_TYPE]
+    : [TEMPERATURE_MODULE_TYPE]
+
   const showMultipleModuleModal =
     robotType === FLEX_ROBOT_TYPE && MOAM_MODULE_TYPES.includes(moduleType)
 

protocol-designer/src/components/__tests__/EditModules.test.tsx

@@ -9,14 +9,16 @@ import {
 import { i18n } from '../../localization'
 import { getInitialDeckSetup } from '../../step-forms/selectors'
 import { getDismissedHints } from '../../tutorial/selectors'
-import { EditModules } from '../EditModules'
-import { EditModulesModal } from '../modals/EditModulesModal'
+import { getEnableMoam } from '../../feature-flags/selectors'
 import { renderWithProviders } from '../../__testing-utils__'
 import { getRobotType } from '../../file-data/selectors'
 import { EditMultipleModulesModal } from '../modals/EditModulesModal/EditMultipleModulesModal'
+import { EditModules } from '../EditModules'
+import { EditModulesModal } from '../modals/EditModulesModal'
 
 import type { HintKey } from '../../tutorial'
 
+vi.mock('../../feature-flags/selectors')
 vi.mock('../../step-forms/selectors')
 vi.mock('../modals/EditModulesModal/EditMultipleModulesModal')
 vi.mock('../modals/EditModulesModal')
@@ -56,6 +58,7 @@ describe('EditModules', () => {
       labware: {},
       additionalEquipmentOnDeck: {},
     })
+    vi.mocked(getEnableMoam).mockReturnValue(true)
     vi.mocked(EditModulesModal).mockReturnValue(
       <div>mock EditModulesModal</div>
     )

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

@@ -37,6 +37,7 @@ import gripperImage from '../../../images/flex_gripper.png'
 import wasteChuteImage from '../../../images/waste_chute.png'
 import trashBinImage from '../../../images/flex_trash_bin.png'
 import { uuid } from '../../../utils'
+import { getEnableMoam } from '../../../feature-flags/selectors'
 import { selectors as featureFlagSelectors } from '../../../feature-flags'
 import { CrashInfoBox, ModuleDiagram } from '../../modules'
 import { ModuleFields } from '../FilePipettesModal/ModuleFields'
@@ -201,16 +202,15 @@ export function ModulesAndOtherTile(props: WizardTileProps): JSX.Element {
 
 function FlexModuleFields(props: WizardTileProps): JSX.Element {
   const { watch, setValue } = props
+  const enableMoam = useSelector(getEnableMoam)
   const modules = watch('modules')
   const additionalEquipment = watch('additionalEquipment')
   const enableAbsorbanceReader = useSelector(
     featureFlagSelectors.getEnableAbsorbanceReader
   )
-  const MOAM_MODULE_TYPES: ModuleType[] = [
-    TEMPERATURE_MODULE_TYPE,
-    HEATERSHAKER_MODULE_TYPE,
-    MAGNETIC_BLOCK_TYPE,
-  ]
+  const MOAM_MODULE_TYPES: ModuleType[] = enableMoam
+    ? [TEMPERATURE_MODULE_TYPE, HEATERSHAKER_MODULE_TYPE, MAGNETIC_BLOCK_TYPE]
+    : [TEMPERATURE_MODULE_TYPE]
   const moduleTypesOnDeck =
     modules != null ? Object.values(modules).map(module => module.type) : []
 

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

@@ -5,7 +5,10 @@ import { fireEvent, screen, cleanup } from '@testing-library/react'
 import { FLEX_ROBOT_TYPE, OT2_ROBOT_TYPE } from '@opentrons/shared-data'
 import { renderWithProviders } from '../../../../__testing-utils__'
 import { i18n } from '../../../../localization'
-import { getDisableModuleRestrictions } from '../../../../feature-flags/selectors'
+import {
+  getDisableModuleRestrictions,
+  getEnableMoam,
+} from '../../../../feature-flags/selectors'
 import { CrashInfoBox } from '../../../modules'
 import { ModuleFields } from '../../FilePipettesModal/ModuleFields'
 import { ModulesAndOtherTile } from '../ModulesAndOtherTile'
@@ -58,6 +61,7 @@ describe('ModulesAndOtherTile', () => {
       ...props,
       ...mockWizardTileProps,
     } as WizardTileProps
+    vi.mocked(getEnableMoam).mockReturnValue(true)
     vi.mocked(CrashInfoBox).mockReturnValue(<div> mock CrashInfoBox</div>)
     vi.mocked(EquipmentOption).mockReturnValue(<div>mock EquipmentOption</div>)
     vi.mocked(getDisableModuleRestrictions).mockReturnValue(false)

protocol-designer/src/feature-flags/reducers.ts

@@ -26,6 +26,7 @@ const initialFlags: Flags = {
   OT_PD_ENABLE_ABSORBANCE_READER:
     process.env.OT_PD_ENABLE_ABSORBANCE_READER === '1' || false,
   OT_PD_ENABLE_REDESIGN: process.env.OT_PD_ENABLE_REDESIGN === '1' || false,
+  OT_PD_ENABLE_MOAM: process.env.OT_PD_ENABLE_MOAM === '1' || false,
 }
 // @ts-expect-error(sa, 2021-6-10): cannot use string literals as action type
 // TODO IMMEDIATELY: refactor this to the old fashioned way if we cannot have type safety: https://github.com/redux-utilities/redux-actions/issues/282#issuecomment-595163081

protocol-designer/src/feature-flags/selectors.ts

@@ -33,3 +33,7 @@ export const getEnableRedesign: Selector<boolean> = createSelector(
   getFeatureFlagData,
   flags => flags.OT_PD_ENABLE_REDESIGN ?? false
 )
+export const getEnableMoam: Selector<boolean> = createSelector(
+  getFeatureFlagData,
+  flags => flags.OT_PD_ENABLE_MOAM ?? false
+)

protocol-designer/src/feature-flags/types.ts

@@ -23,7 +23,6 @@ export const DEPRECATED_FLAGS = [
   'OT_PD_ALLOW_96_CHANNEL',
   'OT_PD_ENABLE_FLEX_DECK_MODIFICATION',
   'OT_PD_ENABLE_MULTI_TIP',
-  'OT_PD_ENABLE_MOAM',
 ]
 // union of feature flag string constant IDs
 export type FlagTypes =
@@ -32,6 +31,7 @@ export type FlagTypes =
   | 'OT_PD_ALLOW_ALL_TIPRACKS'
   | 'OT_PD_ENABLE_ABSORBANCE_READER'
   | 'OT_PD_ENABLE_REDESIGN'
+  | 'OT_PD_ENABLE_MOAM'
 // flags that are not in this list only show in prerelease mode
 export const userFacingFlags: FlagTypes[] = [
   'OT_PD_DISABLE_MODULE_RESTRICTIONS',
@@ -42,5 +42,6 @@ export const allFlags: FlagTypes[] = [
   'PRERELEASE_MODE',
   'OT_PD_ENABLE_ABSORBANCE_READER',
   'OT_PD_ENABLE_REDESIGN',
+  'OT_PD_ENABLE_MOAM',
 ]
 export type Flags = Partial<Record<FlagTypes, boolean | null | undefined>>

protocol-designer/src/localization/en/feature_flags.json

@@ -19,5 +19,9 @@
   "OT_PD_ENABLE_REDESIGN": {
     "title": "Enable redesign",
     "description": "A whole new world."
+  },
+  "OT_PD_ENABLE_MOAM": {
+    "title": "Enable multiple modules",
+    "description": "Enable multiple heater-shakers and magnetic blocks for Flex only."
   }
 }