From dcc8f76d6be83ff2900a695cbdccf6d2d6c66cce Mon Sep 17 00:00:00 2001
From: syao1226 <146495172+syao1226@users.noreply.github.com>
Date: Thu, 24 Oct 2024 14:30:12 -0400
Subject: [PATCH] fix(protocol-designer): preserve uppercase letters of step
 name (#16584)

fixes RQA-3398

<!--
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.
-->

Fixes the issue where renaming a step name with uppercase characters
caused everything after the first character to be lowercased.

## 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.
-->

## Changelog

<!--
List changes introduced by this PR considering future developers and the
end user. Give careful thought and clear documentation to breaking
changes.
-->

- added a `capitalizeFirstLetter()` to `StepForm/utils` to capitalize
onlt the first character while leaving the rest of the string unchanged

## 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 <shiyaochen@admins-MacBook-Pro.local>
---
 .../src/organisms/RenameStepModal/index.tsx        |  6 +++---
 .../ProtocolSteps/StepForm/StepFormToolbox.tsx     |  3 ++-
 .../ProtocolSteps/StepForm/__tests__/utils.test.ts | 14 +++++++++++++-
 .../pages/Designer/ProtocolSteps/StepForm/utils.ts |  3 +++
 4 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/protocol-designer/src/organisms/RenameStepModal/index.tsx b/protocol-designer/src/organisms/RenameStepModal/index.tsx
index 2b98546751a..9ee1d607fbe 100644
--- a/protocol-designer/src/organisms/RenameStepModal/index.tsx
+++ b/protocol-designer/src/organisms/RenameStepModal/index.tsx
@@ -17,7 +17,7 @@ import {
   TYPOGRAPHY,
   InputField,
 } from '@opentrons/components'
-import { i18n } from '../../assets/localization'
+import { capitalizeFirstLetter } from '../../pages/Designer/ProtocolSteps/StepForm/utils'
 import { getTopPortalEl } from '../../components/portals/TopPortal'
 import { renameStep } from '../../labware-ingred/actions'
 import type { FormData } from '../../form-types'
@@ -31,7 +31,7 @@ export function RenameStepModal(props: RenameStepModalProps): JSX.Element {
   const { onClose, formData } = props
   const dispatch = useDispatch()
   const { t } = useTranslation(['form', 'shared', 'protocol_steps'])
-  const initialName = i18n.format(t(formData.stepName), 'capitalize')
+  const initialName = capitalizeFirstLetter(String(formData.stepName))
   const [stepName, setStepName] = useState<string>(initialName)
   const [stepDetails, setStepDetails] = useState<string>(
     String(formData.stepDetails)
@@ -43,7 +43,7 @@ export function RenameStepModal(props: RenameStepModalProps): JSX.Element {
       renameStep({
         stepId,
         update: {
-          stepName: stepName,
+          stepName: stepName !== '' ? stepName : initialName,
           stepDetails: stepDetails,
         },
       })
diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepFormToolbox.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepFormToolbox.tsx
index 1f5f5d0ac64..d18bee31915 100644
--- a/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepFormToolbox.tsx
+++ b/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepFormToolbox.tsx
@@ -39,6 +39,7 @@ import {
   getSaveStepSnackbarText,
   getVisibleFormErrors,
   getVisibleFormWarnings,
+  capitalizeFirstLetter,
 } from './utils'
 import type { StepFieldName } from '../../../../steplist/fieldLevel'
 import type { FormData, StepType } from '../../../../form-types'
@@ -238,7 +239,7 @@ export function StepFormToolbox(props: StepFormToolboxProps): JSX.Element {
                 word-break: break-all
               `}
             >
-              {i18n.format(t(formData.stepName), 'capitalize')}
+              {capitalizeFirstLetter(String(formData.stepName))}
             </StyledText>
           </Flex>
         }
diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/__tests__/utils.test.ts b/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/__tests__/utils.test.ts
index e95aad5d427..3d3e3a47393 100644
--- a/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/__tests__/utils.test.ts
+++ b/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/__tests__/utils.test.ts
@@ -3,7 +3,10 @@ import {
   SOURCE_WELL_BLOWOUT_DESTINATION,
   DEST_WELL_BLOWOUT_DESTINATION,
 } from '@opentrons/step-generation'
-import { getBlowoutLocationOptionsForForm } from '../utils'
+import {
+  capitalizeFirstLetter,
+  getBlowoutLocationOptionsForForm,
+} from '../utils'
 
 describe('getBlowoutLocationOptionsForForm', () => {
   const destOption = {
@@ -57,3 +60,12 @@ describe('getBlowoutLocationOptionsForForm', () => {
     expect(result).toEqual([])
   })
 })
+
+describe('capitalizeFirstLetter', () => {
+  it('should capitalize the first letter of a step name and leave the rest unchanged', () => {
+    const stepName = 'move labware to D3 on top of Magnetic Block'
+    expect(capitalizeFirstLetter(stepName)).toBe(
+      'Move labware to D3 on top of Magnetic Block'
+    )
+  })
+})
diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/utils.ts b/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/utils.ts
index 9293b6b6c64..00f4749a71b 100644
--- a/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/utils.ts
+++ b/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/utils.ts
@@ -322,3 +322,6 @@ export const getSaveStepSnackbarText = (
     return t(`protocol_steps:save_no_errors`, { stepType: stepTypeDisplayName })
   }
 }
+
+export const capitalizeFirstLetter = (stepName: string): string =>
+  `${stepName.charAt(0).toUpperCase()}${stepName.slice(1)}`