fix(protocol-designer): update Magnetic Module step form

components/src/organisms/Toolbox/index.tsx

@@ -119,7 +119,6 @@ export function Toolbox(props: ToolboxProps): JSX.Element {
             </Flex>
           </Flex>
         </Flex>
-        <Box borderBottom={`1px solid ${COLORS.grey30}`} />
         <Box
           padding={childrenPadding}
           flex="1 1 auto"

protocol-designer/src/assets/localization/en/form.json

@@ -97,7 +97,7 @@
         "pickUp": "pick up tip"
       },
       "magnetAction": {
-        "label": "Magnet action",
+        "label": "Magnet state",
         "options": {
           "disengage": "Disengage",
           "engage": "Engage"

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

@@ -78,7 +78,7 @@ describe('MagnetForm', () => {
     screen.getByText('magnet')
     screen.getByText('module')
     screen.getByText('mock name')
-    screen.getByText('Magnet action')
+    screen.getByText('Magnet state')
     const engage = screen.getByText('Engage')
     screen.getByText('Disengage')
     fireEvent.click(engage)

protocol-designer/src/molecules/ToggleExpandStepFormField/index.tsx

@@ -23,6 +23,7 @@ interface ToggleExpandStepFormFieldProps extends FieldProps {
   toggleUpdateValue: (value: unknown) => void
   toggleValue: unknown
   caption?: string
+  islabel?: boolean
 }
 export function ToggleExpandStepFormField(
   props: ToggleExpandStepFormFieldProps
@@ -37,6 +38,7 @@ export function ToggleExpandStepFormField(
     toggleUpdateValue,
     toggleValue,
     caption,
+    islabel,
     ...restProps
   } = props
 
@@ -58,13 +60,24 @@ export function ToggleExpandStepFormField(
       >
         <Flex justifyContent={JUSTIFY_SPACE_BETWEEN} alignItems={ALIGN_CENTER}>
           <StyledText desktopStyle="bodyDefaultRegular">{title}</StyledText>
-          <ToggleButton
-            onClick={() => {
-              onToggleUpdateValue()
-            }}
-            label={isSelected ? onLabel : offLabel}
-            toggledOn={isSelected}
-          />
+          <Flex alignItems={ALIGN_CENTER} gridGap={SPACING.spacing4}>
+            {islabel ? (
+              <StyledText
+                desktopStyle="bodyDefaultRegular"
+                color={COLORS.grey60}
+              >
+                {isSelected ? onLabel : offLabel}
+              </StyledText>
+            ) : null}
+
+            <ToggleButton
+              onClick={() => {
+                onToggleUpdateValue()
+              }}
+              label={isSelected ? onLabel : offLabel}
+              toggledOn={isSelected}
+            />
+          </Flex>
         </Flex>
         <Flex flexDirection={DIRECTION_COLUMN} gridGap={SPACING.spacing10}>
           {isSelected ? (

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

@@ -3,13 +3,17 @@ import { useTranslation } from 'react-i18next'
 import {
   COLORS,
   DIRECTION_COLUMN,
+  DeckInfoLabel,
   Divider,
   Flex,
   ListItem,
   SPACING,
   StyledText,
 } from '@opentrons/components'
-import { MAGNETIC_MODULE_V1 } from '@opentrons/shared-data'
+import {
+  MAGNETIC_MODULE_TYPE,
+  MAGNETIC_MODULE_V1,
+} from '@opentrons/shared-data'
 import {
   MAX_ENGAGE_HEIGHT_V1,
   MAX_ENGAGE_HEIGHT_V2,
@@ -21,7 +25,11 @@ import {
   getMagneticLabwareOptions,
 } from '../../../../../../ui/modules/selectors'
 import { ToggleExpandStepFormField } from '../../../../../../molecules'
-import { getModuleEntities } from '../../../../../../step-forms/selectors'
+import {
+  getInitialDeckSetup,
+  getModuleEntities,
+} from '../../../../../../step-forms/selectors'
+import { getModulesOnDeckByType } from '../../../../../../ui/modules/utils'
 
 import type { StepFormProps } from '../../types'
 
@@ -31,8 +39,16 @@ export function MagnetTools(props: StepFormProps): JSX.Element {
   const moduleLabwareOptions = useSelector(getMagneticLabwareOptions)
   const moduleEntities = useSelector(getModuleEntities)
   const defaultEngageHeight = useSelector(getMagnetLabwareEngageHeight)
+  const deckSetup = useSelector(getInitialDeckSetup)
+  const modulesOnDeck = getModulesOnDeckByType(deckSetup, MAGNETIC_MODULE_TYPE)
+
+  console.log(modulesOnDeck)
+
   const moduleModel = moduleEntities[formData.moduleId].model
 
+  const slotInfo = moduleLabwareOptions[0].name.split('in')
+  const slotLocation = modulesOnDeck != null ? modulesOnDeck[0].slot : ''
+
   const mmUnits = t('units.millimeter')
   const isGen1 = moduleModel === MAGNETIC_MODULE_V1
   const engageHeightMinMax = isGen1
@@ -53,7 +69,7 @@ export function MagnetTools(props: StepFormProps): JSX.Element {
           })
       : ''
   const engageHeightCaption = `${engageHeightMinMax} ${engageHeightDefault}`
-
+  // TODO (10-9-2024): Replace ListItem with ListItemDescriptor
   return (
     <Flex flexDirection={DIRECTION_COLUMN}>
       <Flex
@@ -66,10 +82,21 @@ export function MagnetTools(props: StepFormProps): JSX.Element {
           {t('protocol_steps:module')}
         </StyledText>
         <ListItem type="noActive">
-          <Flex padding={SPACING.spacing12}>
-            <StyledText desktopStyle="bodyDefaultRegular">
-              {moduleLabwareOptions[0].name}
-            </StyledText>
+          <Flex padding={SPACING.spacing12} gridGap={SPACING.spacing32}>
+            <Flex>
+              <DeckInfoLabel deckLabel={slotLocation} />
+            </Flex>
+            <Flex flexDirection={DIRECTION_COLUMN} gridGap={SPACING.spacing4}>
+              <StyledText desktopStyle="bodyDefaultRegular">
+                {slotInfo[0]}
+              </StyledText>
+              <StyledText
+                desktopStyle="bodyDefaultRegular"
+                color={COLORS.grey60}
+              >
+                {slotInfo[1]}
+              </StyledText>
+            </Flex>
           </Flex>
         </ListItem>
       </Flex>
@@ -88,6 +115,7 @@ export function MagnetTools(props: StepFormProps): JSX.Element {
             'form:step_edit_form.field.magnetAction.options.disengage'
           )}
           caption={engageHeightCaption}
+          islabel={true}
         />
       </Flex>
     </Flex>

protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepTools/__tests__/MagnetTools.test.tsx

@@ -6,7 +6,10 @@ import {
   getMagneticLabwareOptions,
   getMagnetLabwareEngageHeight,
 } from '../../../../../../ui/modules/selectors'
-import { getModuleEntities } from '../../../../../../step-forms/selectors'
+import {
+  getInitialDeckSetup,
+  getModuleEntities,
+} from '../../../../../../step-forms/selectors'
 import { MagnetTools } from '../MagnetTools'
 import type { ComponentProps } from 'react'
 import type * as ModulesSelectors from '../../../../../../ui/modules/selectors'
@@ -67,7 +70,7 @@ describe('MagnetTools', () => {
       },
     }
     vi.mocked(getMagneticLabwareOptions).mockReturnValue([
-      { name: 'mock name', value: 'mockValue' },
+      { name: 'mock labware in mock module in slot abc', value: 'mockValue' },
     ])
     vi.mocked(getModuleEntities).mockReturnValue({
       magnetId: {
@@ -77,13 +80,29 @@ describe('MagnetTools', () => {
       },
     })
     vi.mocked(getMagnetLabwareEngageHeight).mockReturnValue(null)
+    vi.mocked(getInitialDeckSetup).mockReturnValue({
+      labware: {},
+      modules: {
+        module: {
+          id: 'mockId',
+          slot: '10',
+          type: 'magneticModuleType',
+          moduleState: { engaged: false, type: 'magneticModuleType' },
+          model: 'magneticModuleV1',
+        },
+      },
+      additionalEquipmentOnDeck: {},
+      pipettes: {},
+    })
   })
 
   it('renders the text and a switch button for v2', () => {
     render(props)
     screen.getByText('Module')
-    screen.getByText('mock name')
-    screen.getByText('Magnet action')
+    screen.getByText('10')
+    screen.getByText('mock labware')
+    screen.getByText('mock module')
+    screen.getByText('Magnet state')
     screen.getByLabelText('Engage')
     const toggleButton = screen.getByRole('switch')
     screen.getByText('Engage height')