fix(app): Fix instrument title casing on the Devices page (#21683)

Closes RQA-5473

We were not enforcing proper title casing for the instrument names on the Devices page. After syncing with Design, we do want title casing here.

The fix cleans up some improper interpolation, too.

Author: mjhuff

app/src/assets/localization/en/device_details.json

@@ -16,7 +16,7 @@
   "attach_gripper": "Attach gripper",
   "attach_pipette": "Attach pipette",
   "bad_run": "run could not be loaded",
-  "both_mounts": "Both Mounts",
+  "both_mounts": "Left+Right Mounts",
   "bundle_firmware_file_not_found": "Bundled fw file not found for module of type: {{module}}",
   "calibrate_gripper": "Calibrate gripper",
   "calibrate_now": "Calibrate now",
@@ -72,6 +72,7 @@
   "estop_disconnected": "E-stop disconnected. Robot movement is halted.",
   "estop_disengaged": "E-stop disengaged, but robot operation still halted.",
   "estop_pressed": "E-stop pressed. Robot movement is halted.",
+  "extension_mount": "Extension Mount",
   "failed": "failed",
   "files": "Files",
   "firmware_update_available": "Firmware update available",
@@ -98,6 +99,7 @@
   "labware_bottom": "Labware Bottom",
   "last_run_time": "last run {{number}}",
   "left": "left",
+  "left_mount": "Left Mount",
   "left_right": "Left + Right Mounts",
   "lights": "Lights",
   "link_firmware_update": "View Firmware Update",
@@ -187,6 +189,7 @@
   "reset_estop": "Reset E-stop",
   "resume_operation": "Resume operation",
   "right": "right",
+  "right_mount": "Right Mount",
   "robot_control_not_available": "Some robot controls are not available when run is in progress",
   "robot_initializing": "Initializing...",
   "run": "Run",

app/src/organisms/Desktop/Devices/GripperCard/__tests__/GripperCard.test.tsx

@@ -55,7 +55,7 @@ describe('GripperCard', () => {
     expect(image.getAttribute('src')).toEqual(
       '/app/src/assets/images/flex_gripper.png'
     )
-    screen.getByText('extension mount')
+    screen.getByText('Extension Mount')
     screen.getByText('Flex Gripper')
     const overflowButton = screen.getByRole('button', {
       name: /overflow/i,

app/src/organisms/Desktop/Devices/GripperCard/index.tsx

@@ -140,7 +140,7 @@ export function GripperCard({
             ) : null
           }
           isGripperAttached={attachedGripper != null}
-          label={t('shared:extension_mount')}
+          label={t('extension_mount')}
           menuOverlayItems={menuOverlayItems as MenuOverlayItemProps[]}
           isEstopNotDisengaged={isEstopNotDisengaged}
         />

app/src/organisms/Desktop/Devices/PipetteCard/FlexPipetteCard.tsx

@@ -205,9 +205,9 @@ export function FlexPipetteCard({
           label={
             attachedPipetteIs96Channel
               ? t('both_mounts')
-              : t('mount', {
-                  side: mount === LEFT ? t('left') : t('right'),
-                })
+              : mount === LEFT
+                ? t('left_mount')
+                : t('right_mount')
           }
           menuOverlayItems={menuOverlayItems as MenuOverlayItemProps[]}
           isEstopNotDisengaged={isEstopNotDisengaged}

app/src/organisms/Desktop/Devices/PipetteCard/__tests__/FlexPipetteCard.test.tsx

@@ -75,7 +75,7 @@ describe('FlexPipetteCard', () => {
 
   it('renders correct info when gripper is attached', () => {
     render(props)
-    screen.getByText('left Mount')
+    screen.getByText('Left Mount')
     screen.getByText('Left Pipette')
     const overflowButton = screen.getByRole('button', {
       name: /overflow/i,
@@ -114,7 +114,7 @@ describe('FlexPipetteCard', () => {
       isEstopNotDisengaged: false,
     }
     render(props)
-    screen.getByText('Both Mounts')
+    screen.getByText('Left+Right Mounts')
     screen.getByText('Left Pipette')
   })
   it('renders recalibrate banner when no calibration data is present', () => {