fix(protocol-designer): magnetic form correct engage height ranges

protocol-designer/src/components/StepEditForm/StepEditForm.module.css

@@ -269,33 +269,6 @@ and when that is implemented.
   margin: 1rem 0 2rem 14rem;
 }
 
-.engage_height_diagram {
-  width: 90%;
-  padding-top: calc(40 / 540 * 90%);
-  background-repeat: no-repeat;
-  background-size: cover;
-
-  &:hover {
-    cursor: pointer;
-  }
-}
-
-.engage_height_diagram_gen1 {
-  background-image: url('../../images/modules/engage_height_static_gen1.png');
-
-  &:hover {
-    background-image: url('../../images/modules/engage_height_animation_gen1.gif');
-  }
-}
-
-.engage_height_diagram_gen2 {
-  background-image: url('../../images/modules/engage_height_static_gen2.png');
-
-  &:hover {
-    background-image: url('../../images/modules/engage_height_animation_gen2.gif');
-  }
-}
-
 .tc_step_group {
   margin: 1rem 0;
 }

protocol-designer/src/components/StepEditForm/forms/MagnetForm.tsx

@@ -1,40 +1,53 @@
 import * as React from 'react'
-import cx from 'classnames'
 import { useTranslation } from 'react-i18next'
 import { useSelector } from 'react-redux'
 import { FormGroup } from '@opentrons/components'
 import { MAGNETIC_MODULE_V1 } from '@opentrons/shared-data'
 import { selectors as uiModuleSelectors } from '../../../ui/modules'
-import { selectors as stepFormSelectors } from '../../../step-forms'
-import { maskField } from '../../../steplist/fieldLevel'
+import { getModuleEntities } from '../../../step-forms/selectors'
+import {
+  MAX_ENGAGE_HEIGHT_V1,
+  MAX_ENGAGE_HEIGHT_V2,
+  MIN_ENGAGE_HEIGHT_V1,
+  MIN_ENGAGE_HEIGHT_V2,
+} from '../../../constants'
 import { TextField, RadioGroupField } from '../fields'
-import styles from '../StepEditForm.module.css'
+import type { StepFormProps } from '../types'
 
-import { StepFormProps } from '../types'
+import styles from '../StepEditForm.module.css'
 
-export const MagnetForm = (props: StepFormProps): JSX.Element => {
+export function MagnetForm(props: StepFormProps): JSX.Element {
   const moduleLabwareOptions = useSelector(
     uiModuleSelectors.getMagneticLabwareOptions
   )
+  const moduleEntities = useSelector(getModuleEntities)
   const { t } = useTranslation(['application', 'form'])
+  const { propsForFields, formData } = props
+  const { magnetAction, moduleId } = formData
 
-  const moduleEntities = useSelector(stepFormSelectors.getModuleEntities)
-  const { magnetAction, moduleId } = props.formData
-  const moduleModel = moduleId ? moduleEntities[moduleId]?.model : null
-
+  const moduleModel = moduleEntities[moduleId].model
   const moduleOption: string | null | undefined = moduleLabwareOptions[0]
     ? moduleLabwareOptions[0].name
     : 'No magnetic module'
 
   const defaultEngageHeight = useSelector(
     uiModuleSelectors.getMagnetLabwareEngageHeight
   )
-
-  const engageHeightCaption = defaultEngageHeight
-    ? `Recommended: ${String(maskField('engageHeight', defaultEngageHeight))}`
-    : null
-
-  const { propsForFields } = props
+  const engageHeightMinMax =
+    moduleModel === MAGNETIC_MODULE_V1
+      ? t('magnet_height_caption', {
+          low: MIN_ENGAGE_HEIGHT_V1,
+          high: MAX_ENGAGE_HEIGHT_V1,
+        })
+      : t('magnet_height_caption', {
+          low: MIN_ENGAGE_HEIGHT_V2,
+          high: MAX_ENGAGE_HEIGHT_V2,
+        })
+  const engageHeightDefault =
+    defaultEngageHeight != null
+      ? t('magnet_recommended', { default: defaultEngageHeight })
+      : ''
+  const engageHeightCaption = `${engageHeightMinMax} ${engageHeightDefault}`
 
   return (
     <div className={styles.form_wrapper}>
@@ -91,18 +104,6 @@ export const MagnetForm = (props: StepFormProps): JSX.Element => {
           </FormGroup>
         )}
       </div>
-      {magnetAction === 'engage' && (
-        <div className={styles.diagram_row}>
-          <div
-            className={cx(
-              styles.engage_height_diagram,
-              moduleModel === MAGNETIC_MODULE_V1
-                ? styles.engage_height_diagram_gen1
-                : styles.engage_height_diagram_gen2
-            )}
-          />
-        </div>
-      )}
     </div>
   )
 }

protocol-designer/src/components/StepEditForm/forms/__tests__/HeaterShakerForm.test.tsx

@@ -31,7 +31,7 @@ vi.mock('../../fields', async importOriginal => {
 
 const render = (props: React.ComponentProps<typeof HeaterShakerForm>) => {
   return renderWithProviders(<HeaterShakerForm {...props} />, {
-    i18nInstance: i18n as any,
+    i18nInstance: i18n,
   })[0]
 }
 

protocol-designer/src/components/StepEditForm/forms/__tests__/MagnetForm.test.tsx

@@ -1,5 +1,98 @@
-import { describe, it } from 'vitest'
+import * as React from 'react'
+import { describe, it, afterEach, vi, beforeEach } from 'vitest'
+import '@testing-library/jest-dom/vitest'
+import { cleanup, fireEvent, screen } from '@testing-library/react'
+import { renderWithProviders } from '../../../../__testing-utils__'
+import { i18n } from '../../../../localization'
+import { getMagneticLabwareOptions } from '../../../../ui/modules/selectors'
+import { getModuleEntities } from '../../../../step-forms/selectors'
+import { getMagnetLabwareEngageHeight } from '../../../../ui/modules/utils'
+import { MagnetForm } from '../MagnetForm'
+
+vi.mock('../../../../ui/modules/utils')
+vi.mock('../../../../ui/modules/selectors')
+vi.mock('../../../../step-forms/selectors')
+const render = (props: React.ComponentProps<typeof MagnetForm>) => {
+  return renderWithProviders(<MagnetForm {...props} />, {
+    i18nInstance: i18n,
+  })[0]
+}
 
 describe('MagnetForm', () => {
-  it.todo('replace deprecated enzyme test')
+  let props: React.ComponentProps<typeof MagnetForm>
+
+  beforeEach(() => {
+    props = {
+      formData: {
+        id: 'magnet',
+        stepType: 'magnet',
+        moduleId: 'magnetId',
+        magnetAction: 'engage',
+      } as any,
+      focusHandlers: {
+        blur: vi.fn(),
+        focus: vi.fn(),
+        dirtyFields: [],
+        focusedField: null,
+      },
+      propsForFields: {
+        magnetAction: {
+          onFieldFocus: vi.fn(),
+          onFieldBlur: vi.fn(),
+          errorToShow: null,
+          disabled: false,
+          name: 'magnetAction',
+          updateValue: vi.fn(),
+          value: 'engage',
+        },
+        engageHeight: {
+          onFieldFocus: vi.fn(),
+          onFieldBlur: vi.fn(),
+          errorToShow: null,
+          disabled: false,
+          name: 'engage height',
+          updateValue: vi.fn(),
+          value: 10,
+        },
+      },
+    }
+    vi.mocked(getMagneticLabwareOptions).mockReturnValue([
+      { name: 'mock name', value: 'mockValue' },
+    ])
+    vi.mocked(getModuleEntities).mockReturnValue({
+      magnetId: {
+        id: 'magnetId',
+        model: 'magneticModuleV2',
+        type: 'magneticModuleType',
+      },
+    })
+    vi.mocked(getMagnetLabwareEngageHeight).mockReturnValue(null)
+  })
+  afterEach(() => {
+    vi.restoreAllMocks()
+    cleanup()
+  })
+
+  it('renders the text and radio buttons for v2', () => {
+    render(props)
+    screen.getByText('magnet')
+    screen.getByText('module')
+    screen.getByText('mock name')
+    screen.getByText('Magnet action')
+    const engage = screen.getByText('Engage')
+    screen.getByText('Disengage')
+    fireEvent.click(engage)
+    screen.getByText('Must be between -2.5 to 25.')
+  })
+  it('renders the input text for v1', () => {
+    vi.mocked(getModuleEntities).mockReturnValue({
+      magnetId: {
+        id: 'magnetId',
+        model: 'magneticModuleV1',
+        type: 'magneticModuleType',
+      },
+    })
+    render(props)
+    screen.getByText('Must be between 0 to 45.')
+  })
 })

protocol-designer/src/constants.ts

@@ -65,10 +65,10 @@ export const DEFAULT_MM_BLOWOUT_OFFSET_FROM_TOP = 0
 export const DEFAULT_DELAY_SECONDS = 1
 export const DEFAULT_WELL_ORDER_FIRST_OPTION: 't2b' = 't2b'
 export const DEFAULT_WELL_ORDER_SECOND_OPTION: 'l2r' = 'l2r'
-export const MIN_ENGAGE_HEIGHT_V1 = -5
-export const MAX_ENGAGE_HEIGHT_V1 = 40
-export const MIN_ENGAGE_HEIGHT_V2 = -4
-export const MAX_ENGAGE_HEIGHT_V2 = 19
+export const MIN_ENGAGE_HEIGHT_V1 = 0
+export const MAX_ENGAGE_HEIGHT_V1 = 45
+export const MIN_ENGAGE_HEIGHT_V2 = -2.5
+export const MAX_ENGAGE_HEIGHT_V2 = 25
 export const MIN_TEMP_MODULE_TEMP = 4
 export const MAX_TEMP_MODULE_TEMP = 95
 export const MIN_HEATER_SHAKER_MODULE_TEMP = 37

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

@@ -15,6 +15,8 @@
   "update": "UPDATE",
   "updated": "UPDATED",
   "pipettes": "Pipettes",
+  "magnet_height_caption": "Must be between {{low}} to {{high}}.",
+  "magnet_recommended": "The recommended height is {{default}}",
   "networking": {
     "generic_verification_failure": "Something went wrong with your unique link. Fill out the form below to have a new one sent to your email. Please contact the Opentrons Support team if you require further help.",
     "unauthorized_verification_failure": "This unique link has expired and is no longer valid, to have a new link sent to your email, fill out the form below.",