feat(protocol-designer): wire up rename step

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

@@ -79,6 +79,7 @@
   "message_uses_standard_namespace": "This labware definition uses the Opentrons standard labware namespace. Change the namespace if it is custom, or use the standard labware in your protocol.",
   "mismatched": "The new labware has a different arrangement of wells than the labware it is replacing. Clicking Overwrite will deselect all wells in any existing steps that use this labware. You will have to edit each of those steps and select new wells.",
   "module": "Module",
+  "name_step": "Name step",
   "next": "next",
   "ninety_six_channel": "96-Channel",
   "no_hints_to_restore": "No hints to restore",

protocol-designer/src/organisms/RenameStepModal/index.tsx

@@ -0,0 +1,109 @@
+import { useState } from 'react'
+import { useDispatch, useSelector } from 'react-redux'
+import { useTranslation } from 'react-i18next'
+import { createPortal } from 'react-dom'
+import styled from 'styled-components'
+import {
+  BORDERS,
+  COLORS,
+  DIRECTION_COLUMN,
+  Flex,
+  JUSTIFY_END,
+  Modal,
+  PrimaryButton,
+  SecondaryButton,
+  SPACING,
+  StyledText,
+  TYPOGRAPHY,
+  InputField,
+} from '@opentrons/components'
+import { i18n } from '../../assets/localization'
+import { getTopPortalEl } from '../../components/portals/TopPortal'
+import type { FormData } from '../../form-types'
+
+interface RenameStepModalProps {
+  formData: FormData
+  onClose: () => void
+}
+export function RenameStepModal(props: RenameStepModalProps): JSX.Element {
+  const { onClose, formData } = props
+  const dispatch = useDispatch()
+  const { t } = useTranslation(['form', 'shared'])
+  const [stepName, setStepName] = useState<string>('')
+
+  //   const saveRenameStep = (nextFormValues: FileMetadataFields): void => {
+  //     dispatch(actions.saveFileMetadata(nextFormValues))
+  //     onClose()
+  //   }
+  //   const handleSave = (): void => {
+  //     dispatch()
+  //     close()
+  //   }
+
+  return createPortal(
+    <Modal
+      title={t('shared:name_step')}
+      type="info"
+      closeOnOutsideClick
+      onClose={onClose}
+      childrenPadding={SPACING.spacing24}
+      footer={
+        <Flex
+          justifyContent={JUSTIFY_END}
+          padding={`0 ${SPACING.spacing24} ${SPACING.spacing24}`}
+          gridGap={SPACING.spacing8}
+        >
+          <SecondaryButton onClick={onClose}>
+            {t('shared:cancel')}
+          </SecondaryButton>
+          <PrimaryButton
+            data-testid="RenameStepModal_saveButton"
+            disabled={false}
+            onClick={() => {
+              //   handleSubmit(saveFileMetadata)()
+            }}
+          >
+            {t('shared:save')}
+          </PrimaryButton>
+        </Flex>
+      }
+    >
+      <form>
+        <Flex flexDirection={DIRECTION_COLUMN} gridGap={SPACING.spacing12}>
+          <Flex flexDirection={DIRECTION_COLUMN} gridGap={SPACING.spacing4}>
+            <StyledText color={COLORS.grey60} desktopStyle="captionRegular">
+              {t('form:step_edit_form.field.step_name.label')}
+            </StyledText>
+            <InputField
+              placeholder={i18n.format(t(formData.stepName), 'capitalize')}
+              value={stepName}
+              autoFocus
+              name="StepName"
+              onChange={e => {
+                setStepName(e.target.value)
+              }}
+            />
+          </Flex>
+          <Flex flexDirection={DIRECTION_COLUMN} gridGap={SPACING.spacing4}>
+            <StyledText color={COLORS.grey60} desktopStyle="captionRegular">
+              {t('form:step_edit_form.field.step_notes.label')}
+            </StyledText>
+
+            <DescriptionField />
+          </Flex>
+        </Flex>
+      </form>
+    </Modal>,
+    getTopPortalEl()
+  )
+}
+
+const DescriptionField = styled.textarea`
+  min-height: 5rem;
+  width: 100%;
+  border: ${BORDERS.lineBorder};
+  border-radius: ${BORDERS.borderRadius4};
+  padding: ${SPACING.spacing8};
+  font-size: ${TYPOGRAPHY.fontSizeH3};
+  resize: none;
+`

protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepFormToolbox.tsx

@@ -9,6 +9,7 @@
   COLORS,
   Flex,
   Icon,
+  Modal,
   PrimaryButton,
   SPACING,
   SecondaryButton,
@@ -37,6 +38,7 @@
 import { getSaveStepSnackbarText } from './utils'
 import type { StepFieldName } from '../../../../steplist/fieldLevel'
 import type { FormData, StepType } from '../../../../form-types'
+import { RenameStepModal } from '../../../../organisms/RenameStepModal'
 import type { FieldPropsByName, FocusHandlers, StepFormProps } from './types'
 
 type StepFormMap = {
@@ -97,6 +99,7 @@
       ? 1
       : 0
   )
+  const [isRename, setIsRename] = useState<boolean>(false)
   const icon = stepIconsByType[formData.stepType]
 
   const ToolsComponent: typeof STEP_FORM_MAP[keyof typeof STEP_FORM_MAP] = get(
@@ -136,8 +139,17 @@
       }) as string
     )
   }
+
   return (
     <>
+      {isRename ? (
+        <RenameStepModal
+          formData={formData}
+          onClose={() => {
+            setIsRename(false)
+          }}
+        />
+      ) : null}
       <Toolbox
         subHeader={
           isMultiStepToolbox ? (
@@ -149,7 +161,7 @@
         secondaryHeaderButton={
           <Btn
             onClick={() => {
-              console.log('TODO: wire this up')
+              setIsRename(true)
             }}
             css={BUTTON_LINK_STYLE}
             textDecoration={TYPOGRAPHY.textDecorationUnderline}

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

@@ -42,8 +42,6 @@ export function MagnetTools(props: StepFormProps): JSX.Element {
   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')