diff --git a/protocol-designer/src/components/StepEditForm/StepEditForm.module.css b/protocol-designer/src/components/StepEditForm/StepEditForm.module.css
index 5e27c4358fb..439dccbdf8c 100644
--- a/protocol-designer/src/components/StepEditForm/StepEditForm.module.css
+++ b/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;
}
diff --git a/protocol-designer/src/components/StepEditForm/forms/MagnetForm.tsx b/protocol-designer/src/components/StepEditForm/forms/MagnetForm.tsx
index 8873c10eb52..1976767e7e5 100644
--- a/protocol-designer/src/components/StepEditForm/forms/MagnetForm.tsx
+++ b/protocol-designer/src/components/StepEditForm/forms/MagnetForm.tsx
@@ -1,27 +1,31 @@
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'
@@ -29,12 +33,21 @@ export const MagnetForm = (props: StepFormProps): JSX.Element => {
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 (
@@ -91,18 +104,6 @@ export const MagnetForm = (props: StepFormProps): JSX.Element => {
)}
- {magnetAction === 'engage' && (
-
- )}
)
}
diff --git a/protocol-designer/src/components/StepEditForm/forms/__tests__/HeaterShakerForm.test.tsx b/protocol-designer/src/components/StepEditForm/forms/__tests__/HeaterShakerForm.test.tsx
index 6ddefc3af74..dbc5bb5a408 100644
--- a/protocol-designer/src/components/StepEditForm/forms/__tests__/HeaterShakerForm.test.tsx
+++ b/protocol-designer/src/components/StepEditForm/forms/__tests__/HeaterShakerForm.test.tsx
@@ -31,7 +31,7 @@ vi.mock('../../fields', async importOriginal => {
const render = (props: React.ComponentProps) => {
return renderWithProviders(, {
- i18nInstance: i18n as any,
+ i18nInstance: i18n,
})[0]
}
diff --git a/protocol-designer/src/components/StepEditForm/forms/__tests__/MagnetForm.test.tsx b/protocol-designer/src/components/StepEditForm/forms/__tests__/MagnetForm.test.tsx
index 736294018a9..34146989405 100644
--- a/protocol-designer/src/components/StepEditForm/forms/__tests__/MagnetForm.test.tsx
+++ b/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) => {
+ return renderWithProviders(, {
+ i18nInstance: i18n,
+ })[0]
+}
describe('MagnetForm', () => {
- it.todo('replace deprecated enzyme test')
+ let props: React.ComponentProps
+
+ 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.')
+ })
})
diff --git a/protocol-designer/src/constants.ts b/protocol-designer/src/constants.ts
index bae70d17d7f..b92192565c2 100644
--- a/protocol-designer/src/constants.ts
+++ b/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
diff --git a/protocol-designer/src/images/modules/engage_height_animation_gen1.gif b/protocol-designer/src/images/modules/engage_height_animation_gen1.gif
deleted file mode 100644
index eb0bedae573..00000000000
Binary files a/protocol-designer/src/images/modules/engage_height_animation_gen1.gif and /dev/null differ
diff --git a/protocol-designer/src/images/modules/engage_height_animation_gen2.gif b/protocol-designer/src/images/modules/engage_height_animation_gen2.gif
deleted file mode 100644
index 2865ccb1118..00000000000
Binary files a/protocol-designer/src/images/modules/engage_height_animation_gen2.gif and /dev/null differ
diff --git a/protocol-designer/src/images/modules/engage_height_static_gen1.png b/protocol-designer/src/images/modules/engage_height_static_gen1.png
deleted file mode 100644
index 1bb216a5f06..00000000000
Binary files a/protocol-designer/src/images/modules/engage_height_static_gen1.png and /dev/null differ
diff --git a/protocol-designer/src/images/modules/engage_height_static_gen2.png b/protocol-designer/src/images/modules/engage_height_static_gen2.png
deleted file mode 100644
index 9e9e163371b..00000000000
Binary files a/protocol-designer/src/images/modules/engage_height_static_gen2.png and /dev/null differ
diff --git a/protocol-designer/src/localization/en/application.json b/protocol-designer/src/localization/en/application.json
index 79625a33d51..7943a006e6f 100644
--- a/protocol-designer/src/localization/en/application.json
+++ b/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.",