fix more i18n instances

Opentrons · Jan 17, 2024 · b4aa441 · b4aa441
1 parent 8f21fd1
commit b4aa441
Show file tree

Hide file tree

Showing 45 changed files with 388 additions and 403 deletions.
diff --git a/protocol-designer/src/components/BatchEditForm/index.tsx b/protocol-designer/src/components/BatchEditForm/index.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react'
+import { useTranslation } from 'react-i18next'
 import { useDispatch, useSelector } from 'react-redux'
 import { makeBatchEditFieldProps } from './makeBatchEditFieldProps'
 import { NoBatchEditSharedSettings } from './NoBatchEditSharedSettings'
@@ -21,6 +22,7 @@ import { ThunkDispatch } from 'redux-thunk'
 import { BaseState } from '../../types'
 
 export const BatchEditForm = (): JSX.Element => {
+  const { t } = useTranslation('tooltip')
   const dispatch = useDispatch<ThunkDispatch<BaseState, any, any>>()
   const fieldValues = useSelector(getMultiSelectFieldValues)
   const stepTypes = useSelector(getBatchEditSelectedStepTypes)
@@ -48,7 +50,8 @@ export const BatchEditForm = (): JSX.Element => {
     const propsForFields = makeBatchEditFieldProps(
       fieldValues,
       disabledFields,
-      handleChangeFormInput
+      handleChangeFormInput,
+      t
     )
     switch (stepType) {
       case 'moveLiquid':

diff --git a/protocol-designer/src/components/BatchEditForm/makeBatchEditFieldProps.ts b/protocol-designer/src/components/BatchEditForm/makeBatchEditFieldProps.ts
@@ -12,13 +12,14 @@ import { StepFieldName } from '../../form-types'
 export const makeBatchEditFieldProps = (
   fieldValues: MultiselectFieldValues,
   disabledFields: DisabledFields,
-  handleChangeFormInput: (name: string, value: unknown) => void
+  handleChangeFormInput: (name: string, value: unknown) => void,
+  t: any
 ): FieldPropsByName => {
   const fieldNames: StepFieldName[] = Object.keys(fieldValues)
   return fieldNames.reduce<FieldPropsByName>((acc, name) => {
-    const defaultTooltip = getFieldDefaultTooltip(name)
+    const defaultTooltip = getFieldDefaultTooltip(name, t)
     const isIndeterminate = fieldValues[name].isIndeterminate
-    const indeterminateTooltip = getFieldIndeterminateTooltip(name)
+    const indeterminateTooltip = getFieldIndeterminateTooltip(name, t)
     let tooltipContent = defaultTooltip // Default to the default content (or blank)
 
     if (isIndeterminate && indeterminateTooltip) {

diff --git a/protocol-designer/src/components/FilePage.tsx b/protocol-designer/src/components/FilePage.tsx
@@ -11,7 +11,6 @@ import {
   OutlineButton,
   DeprecatedPrimaryButton,
 } from '@opentrons/components'
-import { i18n } from '../localization'
 import { resetScrollElements } from '../ui/steps/utils'
 import { Portal } from './portals/MainPageModalPortal'
 import { EditPipettesModal } from './modals/EditPipettesModal'
@@ -33,6 +32,7 @@ export interface Props {
   saveFileMetadata: (fileMetaDataFields: FileMetadataFields) => void
   swapPipettes: () => unknown
   modules: ModulesForEditModulesCard
+  t: any
 }
 
 interface State {
@@ -46,8 +46,6 @@ interface State {
 // TODO(mc, 2020-02-28): explore l10n for these dates
 const DATE_ONLY_FORMAT = 'MMM dd, yyyy'
 const DATETIME_FORMAT = 'MMM dd, yyyy | h:mm a'
-
-// TODO: Ian 2019-03-15 use i18n for labels
 export class FilePage extends React.Component<Props, State> {
   state: State = {
     isEditPipetteModalOpen: false,
@@ -86,6 +84,7 @@ export class FilePage extends React.Component<Props, State> {
       saveFileMetadata,
       swapPipettes,
       modules,
+      t,
     } = this.props
 
     return (
@@ -186,7 +185,7 @@ export class FilePage extends React.Component<Props, State> {
                 className={styles.edit_button}
                 name={'editPipettes'}
               >
-                {i18n.t('button.edit')}
+                {t('edit')}
               </DeprecatedPrimaryButton>
               <OutlineButton
                 onClick={swapPipettes}
@@ -195,7 +194,7 @@ export class FilePage extends React.Component<Props, State> {
                 name={'swapPipettes'}
                 disabled={instruments?.left?.pipetteSpecs?.channels === 96}
               >
-                {i18n.t('button.swap')}
+                {t('swap')}
               </OutlineButton>
             </div>
           </div>
@@ -213,7 +212,7 @@ export class FilePage extends React.Component<Props, State> {
             iconName="arrow-right"
             name={'continueToLiquids'}
           >
-            {i18n.t('button.continue_to_liquids')}
+            {t('continue_to_liquids')}
           </DeprecatedPrimaryButton>
         </div>
 

diff --git a/protocol-designer/src/components/OffDeckLabwareButton.tsx b/protocol-designer/src/components/OffDeckLabwareButton.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react'
 import { useSelector } from 'react-redux'
+import { useTranslation } from 'react-i18next'
 import {
   DeprecatedPrimaryButton,
   Flex,
@@ -8,19 +9,18 @@ import {
   SPACING,
 } from '@opentrons/components'
 import { getSelectedTerminalItemId } from '../ui/steps'
-import { i18n } from '../localization'
 import { OffDeckLabwareSlideout } from './OffDeckLabwareSlideout'
 
 export const OffDeckLabwareButton = (): JSX.Element => {
   const selectedTerminalItemId = useSelector(getSelectedTerminalItemId)
-
+  const { t } = useTranslation('button')
   const [showSlideout, setShowSlideout] = React.useState<boolean>(false)
 
   return (
     <Flex position={POSITION_ABSOLUTE} right={SPACING.spacing16} zIndex={2}>
       <Flex position={POSITION_RELATIVE} padding={SPACING.spacing16}>
         <DeprecatedPrimaryButton onClick={() => setShowSlideout(true)}>
-          {i18n.t('button.edit_off_deck')}
+          {t('edit_off_deck')}
         </DeprecatedPrimaryButton>
       </Flex>
       {showSlideout ? (

diff --git a/protocol-designer/src/components/OffDeckLabwareSlideout.tsx b/protocol-designer/src/components/OffDeckLabwareSlideout.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 import { css } from 'styled-components'
+import { useTranslation } from 'react-i18next'
 import {
   Tooltip,
   DeprecatedPrimaryButton,
@@ -23,7 +24,6 @@ import {
   POSITION_ABSOLUTE,
 } from '@opentrons/components'
 import { getLabwareDisplayName } from '@opentrons/shared-data'
-import { i18n } from '../localization'
 import { openAddLabwareModal } from '../labware-ingred/actions'
 import { getLabwareEntities } from '../step-forms/selectors'
 import { selectors } from '../labware-ingred/selectors'
@@ -44,6 +44,7 @@ interface OffDeckLabwareSlideoutProps {
 export const OffDeckLabwareSlideout = (
   props: OffDeckLabwareSlideoutProps
 ): JSX.Element => {
+  const { t } = useTranslation(['deck', 'button', 'tooltip'])
   const [targetProps, tooltipProps] = useHoverTooltip()
   const dispatch = useDispatch()
   const disabled = props.initialSetupTerminalItemId === false
@@ -69,7 +70,7 @@ export const OffDeckLabwareSlideout = (
   return (
     <Slideout
       onCloseClick={props.onCloseClick}
-      title={i18n.t('deck.off_deck.slideout_title')}
+      title={t('off_deck.slideout_title')}
       isExpanded={props.isExpanded}
       footer={
         <div {...targetProps}>
@@ -79,11 +80,11 @@ export const OffDeckLabwareSlideout = (
             marginRight={SPACING.spacing16}
             disabled={disabled}
           >
-            {i18n.t('button.add_off_deck')}
+            {t('button:add_off_deck')}
           </DeprecatedPrimaryButton>
           {disabled ? (
             <Tooltip {...tooltipProps}>
-              {i18n.t(`tooltip.disabled_off_deck`)}
+              {t(`tooltip:disabled_off_deck`)}
             </Tooltip>
           ) : null}
         </div>
@@ -106,7 +107,7 @@ export const OffDeckLabwareSlideout = (
             color={COLORS.grey60}
             marginBottom={SPACING.spacing32}
           />
-          <Text>{i18n.t('deck.off_deck.slideout_empty_state')}</Text>
+          <Text>{t('off_deck.slideout_empty_state')}</Text>
         </Flex>
       ) : (
         Object.keys(offDeck).map(labwareId => {

diff --git a/protocol-designer/src/components/StepCreationButton.tsx b/protocol-designer/src/components/StepCreationButton.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react'
 import { useDispatch, useSelector } from 'react-redux'
+import { useTranslation } from 'react-i18next'
 import {
   Tooltip,
   DeprecatedPrimaryButton,
@@ -14,7 +15,6 @@ import {
   TEMPERATURE_MODULE_TYPE,
   THERMOCYCLER_MODULE_TYPE,
 } from '@opentrons/shared-data'
-import { i18n } from '../localization'
 import { actions as stepsActions, getIsMultiSelectMode } from '../ui/steps'
 import {
   selectors as stepFormSelectors,
@@ -42,6 +42,7 @@ interface StepButtonComponentProps {
 export const StepCreationButtonComponent = (
   props: StepButtonComponentProps
 ): JSX.Element => {
+  const { t } = useTranslation(['tooltip', 'button'])
   const { children, expanded, setExpanded, disabled } = props
   const [targetProps, tooltipProps] = useHoverTooltip({
     placement: TOOLTIP_TOP,
@@ -54,16 +55,14 @@ export const StepCreationButtonComponent = (
       {...targetProps}
     >
       {disabled && (
-        <Tooltip {...tooltipProps}>
-          {i18n.t(`tooltip.disabled_step_creation`)}
-        </Tooltip>
+        <Tooltip {...tooltipProps}>{t(`disabled_step_creation`)}</Tooltip>
       )}
       <DeprecatedPrimaryButton
         id="StepCreationButton"
         onClick={() => setExpanded(!expanded)}
         disabled={disabled}
       >
-        {i18n.t('button.add_step')}
+        {t('button:add_step')}
       </DeprecatedPrimaryButton>
 
       <div className={styles.buttons_popover}>{expanded && children}</div>
@@ -78,19 +77,20 @@ export interface StepButtonItemProps {
 
 export function StepButtonItem(props: StepButtonItemProps): JSX.Element {
   const { onClick, stepType } = props
+  const { t } = useTranslation(['tooltip', 'application'])
   const [targetProps, tooltipProps] = useHoverTooltip({
     placement: TOOLTIP_RIGHT,
     strategy: TOOLTIP_FIXED,
   })
-  const tooltipMessage = i18n.t(`tooltip.step_description.${stepType}`)
+  const tooltipMessage = t(`step_description.${stepType}`)
   return (
     <>
       <div {...targetProps}>
         <DeprecatedPrimaryButton
           onClick={onClick}
           iconName={stepIconsByType[stepType]}
         >
-          {i18n.t(`application.stepType.${stepType}`, stepType)}
+          {t(`application:stepType.${stepType}`, stepType)}
         </DeprecatedPrimaryButton>
       </div>
       <Tooltip {...tooltipProps}>{tooltipMessage}</Tooltip>

diff --git a/protocol-designer/src/components/StepEditForm/fields/Configure96ChannelField.tsx b/protocol-designer/src/components/StepEditForm/fields/Configure96ChannelField.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react'
+import { useTranslation } from 'react-i18next'
 import { useSelector } from 'react-redux'
 import { ALL, COLUMN } from '@opentrons/shared-data'
 import {
@@ -8,14 +9,14 @@ import {
   TOOLTIP_FIXED,
   useHoverTooltip,
 } from '@opentrons/components'
-import { i18n } from '../../../localization'
 import { getInitialDeckSetup } from '../../../step-forms/selectors'
 import { StepFormDropdown } from './StepFormDropdownField'
 import styles from '../StepEditForm.css'
 
 export function Configure96ChannelField(
   props: Omit<React.ComponentProps<typeof StepFormDropdown>, 'options'>
 ): JSX.Element {
+  const { t } = useTranslation('form')
   const { value: dropdownItem, name, updateValue } = props
   const deckSetup = useSelector(getInitialDeckSetup)
   const tipracks = Object.values(deckSetup.labware).filter(
@@ -43,7 +44,7 @@ export function Configure96ChannelField(
 
   return (
     <FormGroup
-      label={i18n.t('form.step_edit_form.field.nozzles.label')}
+      label={t('step_edit_form.field.nozzles.label')}
       className={styles.small_field}
     >
       <SelectField
@@ -73,16 +74,15 @@ const OptionLabel = (props: OptionLabelProps): JSX.Element => {
     placement: 'bottom-start',
     strategy: TOOLTIP_FIXED,
   })
+  const { t } = useTranslation('form')
   return (
     <>
       <div {...targetProps}>
-        {i18n.t(`form.step_edit_form.field.nozzles.option.${value}`)}
+        {t(`step_edit_form.field.nozzles.option.${value}`)}
         {disabled ? (
           <Tooltip {...tooltipProps}>
             <div className={styles.tooltip}>
-              {i18n.t(
-                `form.step_edit_form.field.nozzles.option_tooltip.${value}`
-              )}
+              {t(`step_edit_form.field.nozzles.option_tooltip.${value}`)}
             </div>
           </Tooltip>
         ) : null}

diff --git a/protocol-designer/src/components/StepEditForm/fields/DelayFields.tsx b/protocol-designer/src/components/StepEditForm/fields/DelayFields.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { i18n } from '../../../localization'
+import { useTranslation } from 'react-i18next'
 import { TextField } from './TextField'
 import { CheckboxRowField } from './CheckboxRowField'
 import { TipPositionField } from './TipPositionField'
@@ -23,17 +23,17 @@ export const DelayFields = (props: DelayFieldProps): JSX.Element => {
     propsForFields,
     labwareId,
   } = props
-
+  const { t } = useTranslation(['form', 'application'])
   return (
     <CheckboxRowField
       {...propsForFields[checkboxFieldName]}
-      label={i18n.t('form.step_edit_form.field.delay.label')}
+      label={t('step_edit_form.field.delay.label')}
       className={styles.small_field}
     >
       <TextField
         {...propsForFields[secondsFieldName]}
         className={styles.small_field}
-        units={i18n.t('application.units.seconds')}
+        units={t('application:units.seconds')}
       />
       {tipPositionFieldName && (
         <TipPositionField

diff --git a/protocol-designer/src/components/StepEditForm/fields/DisposalVolumeField.tsx b/protocol-designer/src/components/StepEditForm/fields/DisposalVolumeField.tsx
@@ -1,14 +1,14 @@
 import * as React from 'react'
+import { useTranslation } from 'react-i18next'
+import { connect } from 'react-redux'
+import cx from 'classnames'
+
 import {
   FormGroup,
   DeprecatedCheckboxField,
   DropdownField,
   Options,
 } from '@opentrons/components'
-import { connect } from 'react-redux'
-import cx from 'classnames'
-
-import { i18n } from '../../../localization'
 import { getMaxDisposalVolumeForMultidispense } from '../../../steplist/formLevel/handleFormChange/utils'
 import { selectors as stepFormSelectors } from '../../../step-forms'
 import { selectors as uiLabwareSelectors } from '../../../ui/labware'
@@ -54,12 +54,11 @@ interface OP {
 type Props = SP & OP
 
 const DisposalVolumeFieldComponent = (props: Props): JSX.Element => {
-  const { propsForFields } = props
-
-  const { maxDisposalVolume } = props
+  const { propsForFields, maxDisposalVolume } = props
+  const { t } = useTranslation(['application', 'form'])
   const volumeBoundsCaption =
     maxDisposalVolume != null
-      ? `max ${maxDisposalVolume} ${i18n.t('application.units.microliter')}`
+      ? `max ${maxDisposalVolume} ${t('units.microliter')}`
       : null
 
   const volumeField = (
@@ -68,15 +67,15 @@ const DisposalVolumeFieldComponent = (props: Props): JSX.Element => {
         {...propsForFields.disposalVolume_volume}
         caption={volumeBoundsCaption}
         className={cx(styles.small_field, styles.orphan_field)}
-        units={i18n.t('application.units.microliter')}
+        units={t('units.microliter')}
       />
     </div>
   )
 
   const { value, updateValue } = propsForFields.disposalVolume_checkbox
 
   return (
-    <FormGroup label={i18n.t('form.step_edit_form.multiDispenseOptionsLabel')}>
+    <FormGroup label={t('form:step_edit_form.multiDispenseOptionsLabel')}>
       <>
         <div
           // @ts-expect-error(sa, 2021-6-22): I think volumeBoundsCaption needs to be casted to a boolean to be fed into a class name