fix more

protocol-designer/src/components/FileSidebar/index.ts

@@ -28,6 +28,7 @@ interface SP {
   savedStepForms: SavedStepFormState
   robotType: RobotType
   additionalEquipment: AdditionalEquipment
+  t: any
 }
 export const FileSidebar = connect(
   mapStateToProps,
@@ -54,6 +55,7 @@ function mapStateToProps(state: BaseState): SP {
     // Ignore clicking 'CREATE NEW' button in these cases
     _canCreateNew: !selectors.getNewProtocolModal(state),
     _hasUnsavedChanges: loadFileSelectors.getHasUnsavedChanges(state),
+    t,
   }
 }
 
@@ -73,6 +75,7 @@ function mergeProps(
     savedStepForms,
     robotType,
     additionalEquipment,
+    t,
   } = stateProps
   const { dispatch } = dispatchProps
   return {

protocol-designer/src/components/StepEditForm/fields/PathField/index.ts

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import {useTranslation} from 'react-i18next'
+import { useTranslation } from 'react-i18next'
 import { connect } from 'react-redux'
 import { Path } from './Path'
 import { selectors as stepFormSelectors } from '../../../../step-forms'
@@ -21,7 +21,7 @@ function mapSTP(state: BaseState, ownProps: OP): SP {
     pipette,
     volume,
   } = ownProps
-  const {t} = useTranslation('form')
+  const { t } = useTranslation('form')
   const pipetteEntities = stepFormSelectors.getPipetteEntities(state)
   const disabledPathMap = getDisabledPathMap(
     {
@@ -33,8 +33,8 @@ function mapSTP(state: BaseState, ownProps: OP): SP {
       pipette,
       volume,
     },
-    pipetteEntities
-    t: 
+    pipetteEntities,
+    t
   )
   return {
     disabledPathMap,

protocol-designer/src/components/StepEditForm/utils.ts

@@ -5,7 +5,6 @@ import {
   SOURCE_WELL_BLOWOUT_DESTINATION,
   DEST_WELL_BLOWOUT_DESTINATION,
 } from '@opentrons/step-generation'
-import { i18n } from '../../localization'
 import {
   PROFILE_CYCLE,
   FormData,

protocol-designer/src/components/StepSelectionBanner/StepSelectionBannerComponent.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react'
+import { useTranslation } from 'react-i18next'
 import startCase from 'lodash/startCase'
 import { css } from 'styled-components'
 import {
@@ -24,7 +25,6 @@ import {
   SPACING_3,
   TYPOGRAPHY,
 } from '@opentrons/components'
-import { i18n } from '../../localization'
 import { CountPerStepType, StepType } from '../../form-types'
 
 interface StepPillProps {
@@ -49,10 +49,9 @@ const stepPillStyles = css`
 `
 
 const StepPill = (props: StepPillProps): JSX.Element => {
+  const { t } = useTranslation('application')
   const { count, stepType } = props
-  const label = `${startCase(
-    i18n.t(`application.stepType.${stepType}`)
-  )} (${count})`
+  const label = `${startCase(t(`stepType.${stepType}`))} (${count})`
   return (
     <Flex css={stepPillStyles} key={stepType}>
       <Text fontSize={FONT_SIZE_BODY_1}>{label}</Text>
@@ -62,18 +61,20 @@ const StepPill = (props: StepPillProps): JSX.Element => {
 
 export const ExitBatchEditButton = (props: {
   handleExitBatchEdit: StepSelectionBannerProps['handleExitBatchEdit']
-}): JSX.Element => (
-  <Box flex="0 1 auto">
-    <SecondaryBtn
-      color={C_WHITE}
-      backgroundColor={C_SELECTED_DARK}
-      onClick={props.handleExitBatchEdit}
-    >
-      {i18n.t('application.exit_batch_edit')}
-    </SecondaryBtn>
-  </Box>
-)
-
+}): JSX.Element => {
+  const { t } = useTranslation('application')
+  return (
+    <Box flex="0 1 auto">
+      <SecondaryBtn
+        color={C_WHITE}
+        backgroundColor={C_SELECTED_DARK}
+        onClick={props.handleExitBatchEdit}
+      >
+        {t('exit_batch_edit')}
+      </SecondaryBtn>
+    </Box>
+  )
+}
 export interface StepSelectionBannerProps {
   countPerStepType: CountPerStepType
   handleExitBatchEdit: () => unknown
@@ -82,6 +83,7 @@ export interface StepSelectionBannerProps {
 export const StepSelectionBannerComponent = (
   props: StepSelectionBannerProps
 ): JSX.Element => {
+  const { t } = useTranslation('application')
   const { countPerStepType, handleExitBatchEdit } = props
   const numSteps = Object.keys(countPerStepType).reduce<number>(
     // @ts-expect-error(sa, 2021-6-23): refactor to use Object.entries to preserve type safety
@@ -112,7 +114,7 @@ export const StepSelectionBannerComponent = (
                 textTransform={TYPOGRAPHY.textTransformUppercase}
                 id="StepSelectionBannerComponent_numberStepsSelected"
               >
-                {i18n.t('application.n_steps_selected', { n: numSteps })}
+                {t('n_steps_selected', { n: numSteps })}
               </Text>
             </Flex>
           </Box>

protocol-designer/src/components/modals/GateModal/index.tsx

@@ -1,7 +1,6 @@
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
-import { useSelector } from 'react-redux'
-import { useDispatch } from 'react-redux'
+import { useSelector, useDispatch } from 'react-redux'
 import cx from 'classnames'
 import { AlertModal } from '@opentrons/components'
 import {

protocol-designer/src/components/steplist/StepItem.tsx

@@ -146,6 +146,7 @@ interface ProfileStepSubstepRowProps {
 export const ProfileStepSubstepRow = (
   props: ProfileStepSubstepRowProps
 ): JSX.Element => {
+  const { t } = useTranslation(['modules', 'application'])
   const { repetitionsDisplay, stepNumber } = props
   const { temperature, durationMinutes, durationSeconds } = props.step
   return (
@@ -165,7 +166,7 @@ export const ProfileStepSubstepRow = (
         {stepNumber}
       </span>
       <span className={styles.profile_block_temp}>
-        {makeTemperatureText(temperature)}
+        {makeTemperatureText(temperature, t)}
       </span>
       <span
         className={cx(
@@ -190,11 +191,13 @@ interface ProfileCycleRowProps {
 }
 const ProfileCycleRow = (props: ProfileCycleRowProps): JSX.Element => {
   const { step, stepNumber } = props
+  const { t } = useTranslation(['modules', 'application'])
+
   return (
     <div className={styles.cycle_step_row}>
       <span className={styles.profile_step_number}>{stepNumber}</span>
       <span className={styles.profile_block_temp}>
-        {makeTemperatureText(step.temperature)}
+        {makeTemperatureText(step.temperature, t)}
       </span>
       <span className={styles.align_right}>
         {makeDurationText(step.durationMinutes, step.durationSeconds)}
@@ -299,7 +302,7 @@ export const StepItemContents = (
     hoveredSubstep,
     additionalEquipmentEntities,
   } = props
-  const { t } = useTranslation('modules')
+  const { t } = useTranslation(['modules', 'application'])
   if (!rawForm) {
     return null
   }
@@ -322,7 +325,7 @@ export const StepItemContents = (
   }
 
   if (substeps && substeps.substepType === 'temperature') {
-    const temperature = makeTemperatureText(substeps.temperature)
+    const temperature = makeTemperatureText(substeps.temperature, t)
 
     return (
       <ModuleStepItems
@@ -337,12 +340,14 @@ export const StepItemContents = (
 
   if (substeps && substeps.substepType === 'heaterShaker') {
     const temperature = makeTemperatureText(
-      substeps.targetHeaterShakerTemperature
+      substeps.targetHeaterShakerTemperature,
+      t
     )
-    const shakerValue = makeSpeedText(substeps.targetSpeed)
+    const shakerValue = makeSpeedText(substeps.targetSpeed, t)
     const timer = makeTimerText(
       substeps.heaterShakerTimerMinutes,
-      substeps.heaterShakerTimerSeconds
+      substeps.heaterShakerTimerSeconds,
+      t
     )
 
     return (
@@ -390,8 +395,8 @@ export const StepItemContents = (
       >
         <ModuleStepItemRow
           // NOTE: for TC Profile, lid label text always says "closed" bc Profile runs with lid closed.
-          label={makeLidLabelText(false)}
-          value={makeTemperatureText(substeps.profileTargetLidTemp)}
+          label={makeLidLabelText(false, t)}
+          value={makeTemperatureText(substeps.profileTargetLidTemp, t)}
         />
         <CollapsibleSubstep
           headerContent={
@@ -432,24 +437,24 @@ export const StepItemContents = (
           }
         >
           <ModuleStepItems
-            actionText={makeTemperatureText(substeps.blockTargetTempHold)}
+            actionText={makeTemperatureText(substeps.blockTargetTempHold, t)}
             moduleType={THERMOCYCLER_MODULE_TYPE}
             hideHeader
             labwareNickname={substeps.labwareNickname}
           />
           <ModuleStepItemRow
-            label={makeLidLabelText(substeps.lidOpenHold)}
-            value={makeTemperatureText(substeps.lidTargetTempHold)}
+            label={makeLidLabelText(substeps.lidOpenHold, t)}
+            value={makeTemperatureText(substeps.lidTargetTempHold, t)}
           />
         </CollapsibleSubstep>
       </ModuleStepItems>
     )
   }
 
   if (substeps && substeps.substepType === THERMOCYCLER_STATE) {
-    const blockTemperature = makeTemperatureText(substeps.blockTargetTemp)
-    const lidTemperature = makeTemperatureText(substeps.lidTargetTemp)
-    const lidLabelText = makeLidLabelText(substeps.lidOpen)
+    const blockTemperature = makeTemperatureText(substeps.blockTargetTemp, t)
+    const lidTemperature = makeTemperatureText(substeps.lidTargetTemp, t)
+    const lidLabelText = makeLidLabelText(substeps.lidOpen, t)
 
     return (
       <ModuleStepItems
@@ -465,7 +470,7 @@ export const StepItemContents = (
   }
 
   if (substeps && substeps.substepType === 'waitForTemperature') {
-    const temperature = makeTemperatureText(substeps.temperature)
+    const temperature = makeTemperatureText(substeps.temperature, t)
 
     return (
       <ModuleStepItems

protocol-designer/src/initialize.ts

@@ -1,12 +1,11 @@
-import { i18n } from './localization'
 import { selectors as loadFileSelectors } from './load-file'
 
 export const initialize = (store: Record<string, any>): void => {
   if (process.env.NODE_ENV === 'production') {
     window.onbeforeunload = (_e: unknown) => {
       // NOTE: the custom text will be ignored in modern browsers
       return loadFileSelectors.getHasUnsavedChanges(store.getState())
-        ? i18n.t('alert.window.confirm_leave')
+        ? 'Are you sure you want to leave? You will lose any unsaved changes.'
         : undefined
     }
   }

protocol-designer/src/step-forms/selectors/index.ts

@@ -39,7 +39,6 @@ import {
   selectors as labwareDefSelectors,
   LabwareDefByDefURI,
 } from '../../labware-defs'
-import { i18n } from '../../localization'
 import { InstrumentGroup } from '@opentrons/components'
 import type {
   DropdownOption,
@@ -376,7 +375,7 @@ export const getEquippedPipetteOptions: Selector<
   return reduce(
     pipettes,
     (acc: DropdownOption[], pipette: PipetteOnDeck, id: string) => {
-      const mountLabel = i18n.t(`form.pipette_mount_label.${pipette.mount}`)
+      const mountLabel = pipette.mount === 'left' ? '(L}' : '{R}'
       const nextOption = {
         name: pipettesSame
           ? `${_getPipetteDisplayName(pipette.name)} ${mountLabel}`

protocol-designer/src/step-forms/utils/createPresavedStepForm.ts

@@ -1,4 +1,5 @@
 import last from 'lodash/last'
+import { useTranslation } from 'react-i18next'
 import {
   HEATERSHAKER_MODULE_TYPE,
   MAGNETIC_MODULE_TYPE,
@@ -262,9 +263,12 @@ export const createPresavedStepForm = ({
   robotStateTimeline,
   additionalEquipmentEntities,
 }: CreatePresavedStepFormArgs): FormData => {
+  const { t } = useTranslation('application')
+
   const formData = createBlankForm({
     stepId,
     stepType,
+    t,
   })
 
   const updateDefaultDropTip = _patchDefaultDropTipLocation({

protocol-designer/src/steplist/fieldLevel/errors.ts

@@ -1,5 +1,4 @@
 import isArray from 'lodash/isArray'
-import { i18n } from '../../localization'
 
 /*******************
  ** Error Messages **
@@ -56,9 +55,7 @@ export const temperatureRangeFieldValue = (
 ): ErrorChecker => (value: unknown): string | null =>
   value === null || (Number(value) <= maximum && Number(value) >= minimum)
     ? null
-    : `${FIELD_ERRORS.OUTSIDE_OF_RANGE} ${minimum} and ${maximum} ${i18n.t(
-        'application.units.degrees'
-      )}`
+    : `${FIELD_ERRORS.OUTSIDE_OF_RANGE} ${minimum} and ${maximum} °C`
 export const realNumber: ErrorChecker = (value: unknown) =>
   isNaN(Number(value)) ? FIELD_ERRORS.NOT_A_REAL_NUMBER : null
 

protocol-designer/src/steplist/formLevel/createBlankForm.ts

@@ -1,17 +1,17 @@
-import { i18n } from '../../localization'
 import { getDefaultsForStepType } from './getDefaultsForStepType'
 import { StepType, StepIdType, BlankForm, FormData } from '../../form-types'
 interface NewFormArgs {
   stepId: StepIdType
   stepType: StepType
+  t: any
 }
 // Add default values to a new step form
 export function createBlankForm(args: NewFormArgs): FormData {
-  const { stepId, stepType } = args
+  const { stepId, stepType, t } = args
   const baseForm: BlankForm = {
     id: stepId,
     stepType: stepType,
-    stepName: i18n.t(`application.stepType.${stepType}`),
+    stepName: t(`stepType.${stepType}`),
     stepDetails: '',
   }
   return { ...baseForm, ...getDefaultsForStepType(stepType) }

protocol-designer/src/steplist/formLevel/moveLabwareFormErrors.ts

@@ -1,5 +1,4 @@
 import { LabwareLocation } from '@opentrons/shared-data'
-import { i18n } from '../../localization'
 import {
   COMPATIBLE_LABWARE_ALLOWLIST_BY_MODULE_TYPE,
   COMPATIBLE_LABWARE_ALLOWLIST_FOR_ADAPTER,
@@ -12,6 +11,8 @@ import type { ProfileFormError } from './profileErrors'
 
 type HydratedFormData = any
 
+//  TODO(Jr, 1/16/24): look into the use case of this util since the i18n strings
+//  previously listed in this util were not found in any json.
 const getMoveLabwareError = (
   labware: LabwareEntity,
   newLocation: LabwareLocation,
@@ -27,9 +28,7 @@ const getMoveLabwareError = (
       invariantContext.moduleEntities[newLocation.moduleId].type
     const modAllowList = COMPATIBLE_LABWARE_ALLOWLIST_BY_MODULE_TYPE[moduleType]
     errorString = !modAllowList.includes(loadName)
-      ? i18n.t(
-          'form.step_edit_form.labwareLabel.errors.labwareIncompatibleWithMod'
-        )
+      ? 'labware incompatible with this module'
       : null
   } else if ('labwareId' in newLocation) {
     const adapterValueDefUri =
@@ -38,9 +37,7 @@ const getMoveLabwareError = (
     const adapterAllowList =
       COMPATIBLE_LABWARE_ALLOWLIST_FOR_ADAPTER[adapterValueDefUri]
     errorString = !adapterAllowList?.includes(selectedLabwareDefUri)
-      ? i18n.t(
-          'form.step_edit_form.labwareLabel.errors.labwareIncompatibleWithAdapter'
-        )
+      ? 'labware incompatible with this adapter'
       : null
   }
   return errorString