fix(app): use Trans component for LPC i18n value tags (#13580)

closes RAUT-739
Opentrons · Sep 19, 2023 · 8a88373 · 8a88373
1 parent 8384096
commit 8a88373
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 22 deletions.
diff --git a/app/src/assets/localization/en/labware_position_check.json b/app/src/assets/localization/en/labware_position_check.json
@@ -17,7 +17,8 @@
   "confirm_position_and_move": "Confirm position, move to slot {{next_slot}}",
   "confirm_position_and_pick_up_tip": "Confirm position, pick up tip",
   "confirm_position_and_return_tip": "Confirm position, return tip to Slot {{next_slot}} and home",
-  "ensure_nozzle_is_above_tip": "Ensure that the pipette nozzle furthest from you is centered above and level with the top of the tip in the A1 position.",
+  "ensure_nozzle_is_above_tip_odd": "<block>Ensure that the pipette nozzle furthest from you is centered above and level with the top of the tip in the A1 position. If it isn't, tap <bold>Move pipette</bold> and then jog the pipette until it is properly aligned.</block>",
+  "ensure_nozzle_is_above_tip_desktop": "<block>Ensure that the pipette nozzle furthest from you is centered above and level with the top of the tip in the A1 position. If it isn't, use the controls below or your keyboard to jog the pipette until it is properly aligned.</block>",
   "ensure_tip_is_above_well": "Ensure that the pipette tip furthest from you is centered above and level with well A1 on the labware.",
   "error_modal_header": "Something went wrong",
   "error_modal_problem_in_app": "There was an error performing Labware Position Check. Please restart the app. If the problem persists, please contact Opentrons Support",
@@ -27,8 +28,6 @@
   "exit_screen_subtitle": "If you exit now, all labware offsets will be discarded. This cannot be undone.",
   "exit_screen_title": "Exit before completing Labware Position Check?",
   "get_labware_offset_data": "Get Labware Offset Data",
-  "if_not_aligned_tap_to_jog": "If it isn't, tap <bold>Move pipette</bold> and then jog the pipette until it is properly aligned.",
-  "if_not_aligned_click_to_jog": "If it isn't, use the controls below or your keyboard to jog the pipette until it is properly aligned.",
   "jog_controls_adjustment": "Need to make an adjustment?",
   "jupyter_notebook": "Jupyter Notebook",
   "labware_display_location_text": "Deck Slot {{slot}}",

diff --git a/app/src/organisms/LabwarePositionCheck/CheckItem.tsx b/app/src/organisms/LabwarePositionCheck/CheckItem.tsx
@@ -425,15 +425,15 @@ export const CheckItem = (props: CheckItemProps): JSX.Element | null => {
             location: displayLocation,
           })}
           body={
-            <StyledText as="p">
-              {isTiprack
-                ? t('ensure_nozzle_is_above_tip')
-                : t('ensure_tip_is_above_well')}
-              &nbsp;
-              {isOnDevice
-                ? t('if_not_aligned_tap_to_jog')
-                : t('if_not_aligned_click_to_jog')}
-            </StyledText>
+            <Trans
+              t={t}
+              i18nKey={
+                isOnDevice
+                  ? 'ensure_nozzle_is_above_tip_odd'
+                  : 'ensure_nozzle_is_above_tip_desktop'
+              }
+              components={{ block: <StyledText as="p" />, bold: <strong /> }}
+            />
           }
           labwareDef={labwareDef}
           pipetteName={pipetteName}

diff --git a/app/src/organisms/LabwarePositionCheck/PickUpTip.tsx b/app/src/organisms/LabwarePositionCheck/PickUpTip.tsx
@@ -393,13 +393,15 @@ export const PickUpTip = (props: PickUpTipProps): JSX.Element | null => {
             location: displayLocation,
           })}
           body={
-            <StyledText as="p">
-              {t('ensure_nozzle_is_above_tip')}
-              &nbsp;
-              {isOnDevice
-                ? t('if_not_aligned_tap_to_jog')
-                : t('if_not_aligned_click_to_jog')}
-            </StyledText>
+            <Trans
+              t={t}
+              i18nKey={
+                isOnDevice
+                  ? 'ensure_nozzle_is_above_tip_odd'
+                  : 'ensure_nozzle_is_above_tip_desktop'
+              }
+              components={{ block: <StyledText as="p" />, bold: <strong /> }}
+            />
           }
           labwareDef={labwareDef}
           pipetteName={pipetteName}

diff --git a/app/src/organisms/LabwarePositionCheck/__tests__/PickUpTip.test.tsx b/app/src/organisms/LabwarePositionCheck/__tests__/PickUpTip.test.tsx
@@ -1,7 +1,6 @@
 import * as React from 'react'
 import { resetAllWhenMocks, when } from 'jest-when'
-import type { MatcherFunction } from '@testing-library/react'
-import { renderWithProviders } from '@opentrons/components'
+import { nestedTextMatcher, renderWithProviders } from '@opentrons/components'
 import { HEATERSHAKER_MODULE_V1 } from '@opentrons/shared-data'
 import { i18n } from '../../../i18n'
 import { useProtocolMetadata } from '../../Devices/hooks'
@@ -10,6 +9,7 @@ import { PickUpTip } from '../PickUpTip'
 import { SECTIONS } from '../constants'
 import { mockCompletedAnalysis, mockExistingOffsets } from '../__fixtures__'
 import type { CommandData } from '@opentrons/api-client'
+import type { MatcherFunction } from '@testing-library/react'
 
 jest.mock('../../Devices/hooks')
 jest.mock('../../../redux/config')
@@ -111,7 +111,9 @@ describe('PickUpTip', () => {
     })
     getByRole('heading', { name: 'Pick up tip from tip rack in Slot D1' })
     getByText(
-      "Ensure that the pipette nozzle furthest from you is centered above and level with the top of the tip in the A1 position. If it isn't, tap <bold>Move pipette</bold> and then jog the pipette until it is properly aligned."
+      nestedTextMatcher(
+        "Ensure that the pipette nozzle furthest from you is centered above and level with the top of the tip in the A1 position. If it isn't, tap Move pipette and then jog the pipette until it is properly aligned."
+      )
     )
   })
   it('executes correct chained commands when confirm placement CTA is clicked', async () => {