update more components

protocol-designer/src/components/DeckSetup/LabwareOverlays/EditLabwareOffDeck.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react'
 import { connect } from 'react-redux'
+import { useTranslation } from 'react-i18next'
 import { css } from 'styled-components'
 import {
   ALIGN_FLEX_START,
@@ -12,7 +13,6 @@ import {
   SPACING,
 } from '@opentrons/components'
 import { getLabwareDisplayName } from '@opentrons/shared-data'
-import { i18n } from '../../../localization'
 import {
   deleteContainer,
   duplicateLabware,
@@ -80,7 +80,7 @@ const EditLabwareOffDeckComponent = (props: Props): JSX.Element => {
     deleteLabware,
     duplicateLabware,
   } = props
-
+  const { t } = useTranslation('deck')
   const { isTiprack } = labwareEntity.def.parameters
   if (isYetUnnamed && !isTiprack) {
     return (
@@ -97,18 +97,18 @@ const EditLabwareOffDeckComponent = (props: Props): JSX.Element => {
         {!isTiprack ? (
           <a className={styles.overlay_button} onClick={editLiquids}>
             <Icon className={styles.overlay_icon} name="pencil" />
-            {i18n.t('deck.overlay.edit.name_and_liquids')}
+            {t('overlay.edit.name_and_liquids')}
           </a>
         ) : (
           <div className={styles.button_spacer} />
         )}
         <a className={styles.overlay_button} onClick={duplicateLabware}>
           <Icon className={styles.overlay_icon} name="content-copy" />
-          {i18n.t('deck.overlay.edit.duplicate')}
+          {t('overlay.edit.duplicate')}
         </a>
         <a className={styles.overlay_button} onClick={deleteLabware}>
           <Icon className={styles.overlay_icon} name="close" />
-          {i18n.t('deck.overlay.edit.delete')}
+          {t('overlay.edit.delete')}
         </a>
       </div>
     )

protocol-designer/src/components/DeckSetup/LabwareOverlays/NameThisLabware.tsx

@@ -1,9 +1,9 @@
 import * as React from 'react'
+import { useTranslation } from 'react-i18next'
 import { connect } from 'react-redux'
 import cx from 'classnames'
 import { Icon, useOnClickOutside } from '@opentrons/components'
 import { renameLabware } from '../../../labware-ingred/actions'
-import { i18n } from '../../../localization'
 import styles from './LabwareOverlays.css'
 import type { LabwareEntity } from '@opentrons/step-generation'
 import type { ThunkDispatch } from '../../../types'
@@ -15,14 +15,14 @@ interface OP {
 }
 
 interface DP {
-  // TODO Ian 2018-02-16 type these fns elsewhere and import the type
   setLabwareName: (name: string | null | undefined) => unknown
 }
 
 type Props = OP & DP
 
 const NameThisLabwareComponent = (props: Props): JSX.Element => {
   const [inputValue, setInputValue] = React.useState('')
+  const { t } = useTranslation('deck')
 
   const saveNickname = (): void => {
     props.setLabwareName(inputValue || null)
@@ -52,17 +52,17 @@ const NameThisLabwareComponent = (props: Props): JSX.Element => {
           className={styles.name_input}
           onChange={handleChange}
           onKeyUp={handleKeyUp}
-          placeholder={i18n.t('deck.overlay.name_labware.nickname_placeholder')}
+          placeholder={t('overlay.name_labware.nickname_placeholder')}
           value={inputValue}
         />
       </div>
       <a className={styles.overlay_button} onClick={addLiquids}>
         <Icon className={styles.overlay_icon} name="water" />
-        {i18n.t('deck.overlay.name_labware.add_liquids')}
+        {t('overlay.name_labware.add_liquids')}
       </a>
       <a className={styles.overlay_button} onClick={saveNickname}>
         <Icon className={styles.overlay_icon} name="ot-water-outline" />
-        {i18n.t('deck.overlay.name_labware.leave_empty')}
+        {t('overlay.name_labware.leave_empty')}
       </a>
     </div>
   )

protocol-designer/src/components/DeckSetup/LabwareOverlays/SlotControls.tsx

@@ -1,11 +1,11 @@
 import assert from 'assert'
 import * as React from 'react'
+import { useTranslation } from 'react-i18next'
 import { connect } from 'react-redux'
 import noop from 'lodash/noop'
 import { DropTarget, DropTargetConnector, DropTargetMonitor } from 'react-dnd'
 import cx from 'classnames'
 import { Icon, RobotCoordsForeignDiv } from '@opentrons/components'
-import { i18n } from '../../../localization'
 import { DND_TYPES } from '../../../constants'
 import {
   getLabwareIsCompatible,
@@ -29,6 +29,7 @@ import type {
 } from '@opentrons/shared-data'
 import type { BaseState, DeckSlot, ThunkDispatch } from '../../../types'
 import type { LabwareOnDeck } from '../../../step-forms'
+
 import styles from './LabwareOverlays.css'
 
 interface DNDP {
@@ -74,6 +75,7 @@ export const SlotControlsComponent = (
     itemType,
     customLabwareDefs,
   } = props
+  const { t } = useTranslation('deck')
   if (
     selectedTerminalItemId !== START_TERMINAL_ITEM_ID ||
     (itemType !== DND_TYPES.LABWARE && itemType !== null) ||
@@ -134,7 +136,7 @@ export const SlotControlsComponent = (
         >
           <a className={styles.overlay_button} onClick={addLabware}>
             {!isOver && <Icon className={styles.overlay_icon} name="plus" />}
-            {i18n.t(`deck.overlay.slot.${isOver ? 'place_here' : overlayText}`)}
+            {t(`overlay.slot.${isOver ? 'place_here' : overlayText}`)}
           </a>
         </RobotCoordsForeignDiv>
       )}

protocol-designer/src/components/DeckSetup/NullDeckState.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react'
+import { useTranslation } from 'react-i18next'
 import {
   FONT_SIZE_BODY_1,
   FONT_WEIGHT_BOLD,
@@ -7,7 +8,6 @@ import {
   RobotWorkSpace,
   TEXT_TRANSFORM_UPPERCASE,
 } from '@opentrons/components'
-import { i18n } from '../../localization'
 import {
   VIEWBOX_HEIGHT,
   VIEWBOX_MIN_X,
@@ -20,7 +20,7 @@ import styles from './DeckSetup.css'
 
 export const NullDeckState = (): JSX.Element => {
   const deckDef = React.useMemo(() => getDeckDefinitions().ot2_standard, [])
-
+  const { t } = useTranslation('deck')
   return (
     <div className={styles.deck_row}>
       <div className={styles.deck_wrapper}>
@@ -40,7 +40,7 @@ export const NullDeckState = (): JSX.Element => {
               fontWeight={FONT_WEIGHT_BOLD}
               fontSize={FONT_SIZE_BODY_1}
             >
-              {i18n.t('deck.inactive_deck')}
+              {t('inactive_deck')}
             </RobotCoordsText>
           )}
         </RobotWorkSpace>

protocol-designer/src/components/DeckSetup/SlotWarning.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
+import { useTranslation } from 'react-i18next'
 import styled from 'styled-components'
-import { i18n } from '../../localization'
 import { RobotCoordsForeignDiv, TYPOGRAPHY } from '@opentrons/components'
 import type { ModuleOrientation } from '@opentrons/shared-data'
 
@@ -27,7 +27,7 @@ export const SlotWarning = (props: Props): JSX.Element => {
   const { x, y, xDimension, yDimension, orientation, warningType } = props
   const rectXOffset = orientation === 'left' ? -OVERHANG : 0
   const textXOffset = orientation === 'left' ? -1 * OVERHANG : xDimension
-
+  const { t } = useTranslation('deck')
   return (
     <g>
       <StyledRect
@@ -51,7 +51,7 @@ export const SlotWarning = (props: Props): JSX.Element => {
         width={OVERHANG}
         height={yDimension}
       >
-        {i18n.t(`deck.warning.${warningType}`)}
+        {t(`warning.${warningType}`)}
       </RobotCoordsForeignDiv>
     </g>
   )

protocol-designer/src/components/FileSidebar/FileSidebar.tsx

@@ -7,7 +7,6 @@ import {
   OutlineButton,
   SidePanel,
 } from '@opentrons/components'
-import { i18n } from '../../localization'
 import { resetScrollElements } from '../../ui/steps/utils'
 import { Portal } from '../portals/MainPageModalPortal'
 import { useBlockingHint } from '../Hints/useBlockingHint'
@@ -86,60 +85,56 @@ function getWarningContent({
   gripperWithoutStep,
   fixtureWithoutStep,
 }: MissingContent): WarningContent | null {
+  const { t } = useTranslation(['alert', 'modules'])
+
   if (noCommands) {
     return {
       content: (
         <>
-          <p>{i18n.t('alert.export_warnings.no_commands.body1')}</p>
+          <p>{t('export_warnings.no_commands.body1')}</p>
           <p>
-            {i18n.t('alert.export_warnings.no_commands.body2')}
+            {t('export_warnings.no_commands.body2')}
             <KnowledgeBaseLink to="protocolSteps">here</KnowledgeBaseLink>.
           </p>
         </>
       ),
-      heading: i18n.t('alert.export_warnings.no_commands.heading'),
+      heading: t('export_warnings.no_commands.heading'),
     }
   }
 
   if (gripperWithoutStep) {
     return {
       content: (
         <>
-          <p>{i18n.t('alert.export_warnings.unused_gripper.body1')}</p>
-          <p>{i18n.t('alert.export_warnings.unused_gripper.body2')}</p>
+          <p>{t('export_warnings.unused_gripper.body1')}</p>
+          <p>{t('export_warnings.unused_gripper.body2')}</p>
         </>
       ),
-      heading: i18n.t('alert.export_warnings.unused_gripper.heading'),
+      heading: t('export_warnings.unused_gripper.heading'),
     }
   }
 
   const pipettesDetails = pipettesWithoutStep
     .map(pipette => `${pipette.mount} ${pipette.spec.displayName}`)
     .join(' and ')
   const modulesDetails = modulesWithoutStep
-    .map(moduleOnDeck =>
-      i18n.t(`modules.module_long_names.${moduleOnDeck.type}`)
-    )
+    .map(moduleOnDeck => t(`modules:module_long_names.${moduleOnDeck.type}`))
     .join(' and ')
 
   if (pipettesWithoutStep.length && modulesWithoutStep.length) {
     return {
       content: (
         <>
           <p>
-            {i18n.t('alert.export_warnings.unused_pipette_and_module.body1', {
+            {t('export_warnings.unused_pipette_and_module.body1', {
               modulesDetails,
               pipettesDetails,
             })}
           </p>
-          <p>
-            {i18n.t('alert.export_warnings.unused_pipette_and_module.body2')}
-          </p>
+          <p>{t('export_warnings.unused_pipette_and_module.body2')}</p>
         </>
       ),
-      heading: i18n.t(
-        'alert.export_warnings.unused_pipette_and_module.heading'
-      ),
+      heading: t('export_warnings.unused_pipette_and_module.heading'),
     }
   }
 
@@ -148,14 +143,14 @@ function getWarningContent({
       content: (
         <>
           <p>
-            {i18n.t('alert.export_warnings.unused_pipette.body1', {
+            {t('export_warnings.unused_pipette.body1', {
               pipettesDetails,
             })}
           </p>
-          <p>{i18n.t('alert.export_warnings.unused_pipette.body2')}</p>
+          <p>{t('export_warnings.unused_pipette.body2')}</p>
         </>
       ),
-      heading: i18n.t('alert.export_warnings.unused_pipette.heading'),
+      heading: t('export_warnings.unused_pipette.heading'),
     }
   }
 
@@ -166,14 +161,14 @@ function getWarningContent({
       content: (
         <>
           <p>
-            {i18n.t(`alert.export_warnings.${moduleCase}.body1`, {
+            {t(`export_warnings.${moduleCase}.body1`, {
               modulesDetails,
             })}
           </p>
-          <p>{i18n.t(`alert.export_warnings.${moduleCase}.body2`)}</p>
+          <p>{t(`export_warnings.${moduleCase}.body2`)}</p>
         </>
       ),
-      heading: i18n.t(`alert.export_warnings.${moduleCase}.heading`),
+      heading: t(`export_warnings.${moduleCase}.heading`),
     }
   }
 
@@ -183,19 +178,19 @@ function getWarningContent({
         (fixtureWithoutStep.trashBin && !fixtureWithoutStep.wasteChute) ||
         (!fixtureWithoutStep.trashBin && fixtureWithoutStep.wasteChute) ? (
           <p>
-            {i18n.t('alert.export_warnings.unused_trash.body', {
+            {t('export_warnings.unused_trash.body', {
               name: fixtureWithoutStep.trashBin ? 'trash bin' : 'waste chute',
             })}
           </p>
         ) : (
           <p>
-            {i18n.t('alert.export_warnings.unused_trash.body_both', {
+            {t('export_warnings.unused_trash.body_both', {
               trashName: 'trash bin',
               wasteName: 'waste chute',
             })}
           </p>
         ),
-      heading: i18n.t('alert.export_warnings.unused_trash.heading'),
+      heading: t('export_warnings.unused_trash.heading'),
     }
   }
 
@@ -204,19 +199,19 @@ function getWarningContent({
       content: (
         <>
           <p>
-            {i18n.t('alert.export_warnings.unused_staging_area.body1', {
+            {t('export_warnings.unused_staging_area.body1', {
               count: fixtureWithoutStep.stagingAreaSlots.length,
               slot: fixtureWithoutStep.stagingAreaSlots,
             })}
           </p>
           <p>
-            {i18n.t('alert.export_warnings.unused_staging_area.body2', {
+            {t('export_warnings.unused_staging_area.body2', {
               count: fixtureWithoutStep.stagingAreaSlots.length,
             })}
           </p>
         </>
       ),
-      heading: i18n.t('alert.export_warnings.unused_staging_area.heading'),
+      heading: t('export_warnings.unused_staging_area.heading'),
     }
   }
 

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

@@ -1,5 +1,5 @@
 import { connect } from 'react-redux'
-import { i18n } from '../../localization'
+import { useTranslation } from 'react-i18next'
 import { actions, selectors } from '../../navigation'
 import { selectors as fileDataSelectors } from '../../file-data'
 import { selectors as stepFormSelectors } from '../../step-forms'
@@ -41,6 +41,7 @@ function mapStateToProps(state: BaseState): SP {
   const initialDeckSetup = stepFormSelectors.getInitialDeckSetup(state)
   const robotType = getRobotType(state)
   const additionalEquipment = getAdditionalEquipment(state)
+  const { t } = useTranslation('alert')
 
   return {
     canDownload,
@@ -76,10 +77,7 @@ function mergeProps(
   const { dispatch } = dispatchProps
   return {
     loadFile: fileChangeEvent => {
-      if (
-        !_hasUnsavedChanges ||
-        window.confirm(i18n.t('alert.window.confirm_import'))
-      ) {
+      if (!_hasUnsavedChanges || window.confirm(t('window.confirm_import'))) {
         dispatch(loadFileActions.loadProtocolFile(fileChangeEvent))
       }
     },