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

fixes RQA-3277

<!--
Thanks for taking the time to open a Pull Request (PR)! Please make sure
you've read the "Opening Pull Requests" section of our Contributing
Guide:


https://github.com/Opentrons/opentrons/blob/edge/CONTRIBUTING.md#opening-pull-requests

GitHub provides robust markdown to format your PR. Links, diagrams,
pictures, and videos along with text formatting make it possible to
create a rich and informative PR. For more information on GitHub
markdown, see:


https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax

To ensure your code is reviewed quickly and thoroughly, please fill out
the sections below to the best of your ability!
-->

# Overview

<!--
Describe your PR at a high level. State acceptance criteria and how this
PR fits into other work. Link issues, PRs, and other relevant resources.
-->

I noticed that the label text next to the toggle button no longer
displays on the Magnetic Module step form. This PR aims to fix that and
update the form to better match the
[design](https://www.figma.com/design/WbkiUyU8VhtKz0JSuIFA45/Feature%3A-Protocol-Designer-Phase-1?node-id=5536-13337&node-type=canvas&t=F8BuTfbRtt7v67rR-0).

## Test Plan and Hands on Testing

<!--
Describe your testing of the PR. Emphasize testing not reflected in the
code. Attach protocols, logs, screenshots and any other assets that
support your testing.
-->
- Create an OT-2 protocol and add a magnetic module GEN1 or GEN2
- Go to the Protocol Steps tab and add a step for Magnet

## Changelog

<!--
List changes introduced by this PR considering future developers and the
end user. Give careful thought and clear documentation to breaking
changes.
-->
- Added an optional boolean `isLabel` prop in
`ToggleExpandStepFormField` to handle displaying label text next to the
toggle button when needed
- Changed `magnetAction.label `from "Magnet action" to "Magnet state" in
`form.json`
- Remove Box component with borderBottom in `ToolBox` to get rid of
double grey separation lines
- Used `getInitialDeckSetup` and `getModulesOnDeckByType` to get the
slot location info for displaying the icon

## Review requests

<!--
- What do you need from reviewers to feel confident this PR is ready to
merge?
- Ask questions.
-->

## Risk assessment

<!--
- Indicate the level of attention this PR needs.
- Provide context to guide reviewers.
- Discuss trade-offs, coupling, and side effects.
- Look for the possibility, even if you think it's small, that your
change may affect some other part of the system.
- For instance, changing return tip behavior may also change the
behavior of labware calibration.
- How do your unit tests and on hands on testing mitigate this PR's
risks and the risk of future regressions?
- Especially in high risk PRs, explain how you know your testing is
enough.
-->

---------

Co-authored-by: shiyaochen <[email protected]>

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')