fix(app): Localization DQA Fixes (#17341)

fix RQA-3890, RQA-3891, RQA-3892, RQA-3864, RQA-3865, RQA-3866,

app-shell-odd/src/config/__fixtures__/index.ts

@@ -13,6 +13,7 @@ import type {
   ConfigV23,
   ConfigV24,
   ConfigV25,
+  ConfigV26,
 } from '@opentrons/app/src/redux/config/types'
 
 const PKG_VERSION: string = _PKG_VERSION_
@@ -181,3 +182,12 @@ export const MOCK_CONFIG_V25: ConfigV25 = {
     systemLanguage: null,
   },
 }
+
+export const MOCK_CONFIG_V26: ConfigV26 = {
+  ...MOCK_CONFIG_V25,
+  version: 26,
+  onDeviceDisplaySettings: {
+    ...MOCK_CONFIG_V25.onDeviceDisplaySettings,
+    unfinishedUnboxingFlowRoute: '/choose-language',
+  },
+}

app-shell-odd/src/config/__tests__/migrate.test.ts

@@ -17,13 +17,14 @@ import {
   MOCK_CONFIG_V23,
   MOCK_CONFIG_V24,
   MOCK_CONFIG_V25,
+  MOCK_CONFIG_V26,
 } from '../__fixtures__'
 import { migrate } from '../migrate'
 
 vi.mock('uuid/v4')
 
-const NEWEST_VERSION = 25
-const NEWEST_MOCK_CONFIG = MOCK_CONFIG_V25
+const NEWEST_VERSION = 26
+const NEWEST_MOCK_CONFIG = MOCK_CONFIG_V26
 
 describe('config migration', () => {
   beforeEach(() => {
@@ -129,10 +130,17 @@ describe('config migration', () => {
     expect(result.version).toBe(NEWEST_VERSION)
     expect(result).toEqual(NEWEST_MOCK_CONFIG)
   })
-  it('should keep version 25', () => {
+  it('should migrate version 25 to latest', () => {
     const v25Config = MOCK_CONFIG_V25
     const result = migrate(v25Config)
 
+    expect(result.version).toBe(NEWEST_VERSION)
+    expect(result).toEqual(NEWEST_MOCK_CONFIG)
+  })
+  it('should keep version 26', () => {
+    const v26Config = MOCK_CONFIG_V26
+    const result = migrate(v26Config)
+
     expect(result.version).toBe(NEWEST_VERSION)
     expect(result).toEqual(NEWEST_MOCK_CONFIG)
   })

app-shell-odd/src/config/migrate.ts

@@ -18,13 +18,14 @@ import type {
   ConfigV23,
   ConfigV24,
   ConfigV25,
+  ConfigV26,
 } from '@opentrons/app/src/redux/config/types'
 // format
 // base config v12 defaults
 // any default values for later config versions are specified in the migration
 // functions for those version below
 
-const CONFIG_VERSION_LATEST = 25 // update this after each config version bump
+const CONFIG_VERSION_LATEST = 26 // update this after each config version bump
 
 const PKG_VERSION: string = _PKG_VERSION_
 export const DEFAULTS_V12: ConfigV12 = {
@@ -238,6 +239,21 @@ const toVersion25 = (prevConfig: ConfigV24): ConfigV25 => {
   }
   return nextConfig
 }
+const toVersion26 = (prevConfig: ConfigV25): ConfigV26 => {
+  const nextConfig = {
+    ...prevConfig,
+    version: 26 as const,
+    onDeviceDisplaySettings: {
+      ...prevConfig.onDeviceDisplaySettings,
+      unfinishedUnboxingFlowRoute:
+        prevConfig.onDeviceDisplaySettings.unfinishedUnboxingFlowRoute ===
+        '/welcome'
+          ? '/choose-language'
+          : prevConfig.onDeviceDisplaySettings.unfinishedUnboxingFlowRoute,
+    },
+  }
+  return nextConfig
+}
 
 const MIGRATIONS: [
   (prevConfig: ConfigV12) => ConfigV13,
@@ -252,7 +268,8 @@ const MIGRATIONS: [
   (prevConfig: ConfigV21) => ConfigV22,
   (prevConfig: ConfigV22) => ConfigV23,
   (prevConfig: ConfigV23) => ConfigV24,
-  (prevConfig: ConfigV24) => ConfigV25
+  (prevConfig: ConfigV24) => ConfigV25,
+  (prevConfig: ConfigV25) => ConfigV26
 ] = [
   toVersion13,
   toVersion14,
@@ -267,6 +284,7 @@ const MIGRATIONS: [
   toVersion23,
   toVersion24,
   toVersion25,
+  toVersion26,
 ]
 
 export const DEFAULTS: Config = migrate(DEFAULTS_V12)
@@ -287,6 +305,7 @@ export function migrate(
     | ConfigV23
     | ConfigV24
     | ConfigV25
+    | ConfigV26
 ): Config {
   let result = prevConfig
   // loop through the migrations, skipping any migrations that are unnecessary

app-shell/src/__fixtures__/config.ts

@@ -25,6 +25,7 @@ import type {
   ConfigV23,
   ConfigV24,
   ConfigV25,
+  ConfigV26,
 } from '@opentrons/app/src/redux/config/types'
 
 export const MOCK_CONFIG_V0: ConfigV0 = {
@@ -312,3 +313,8 @@ export const MOCK_CONFIG_V25: ConfigV25 = {
     systemLanguage: null,
   },
 }
+
+export const MOCK_CONFIG_V26: ConfigV26 = {
+  ...MOCK_CONFIG_V25,
+  version: 26,
+}

app-shell/src/config/__tests__/migrate.test.ts

@@ -29,13 +29,14 @@ import {
   MOCK_CONFIG_V23,
   MOCK_CONFIG_V24,
   MOCK_CONFIG_V25,
+  MOCK_CONFIG_V26,
 } from '../../__fixtures__'
 import { migrate } from '../migrate'
 
 vi.mock('uuid/v4')
 
-const NEWEST_VERSION = 25
-const NEWEST_MOCK_CONFIG = MOCK_CONFIG_V25
+const NEWEST_VERSION = 26
+const NEWEST_MOCK_CONFIG = MOCK_CONFIG_V26
 
 describe('config migration', () => {
   beforeEach(() => {
@@ -234,10 +235,17 @@ describe('config migration', () => {
     expect(result.version).toBe(NEWEST_VERSION)
     expect(result).toEqual(NEWEST_MOCK_CONFIG)
   })
-  it('should keep version 25', () => {
+  it('should migrate version 25 to latest', () => {
     const v25Config = MOCK_CONFIG_V25
     const result = migrate(v25Config)
 
+    expect(result.version).toBe(NEWEST_VERSION)
+    expect(result).toEqual(NEWEST_MOCK_CONFIG)
+  })
+  it('should keep version 26', () => {
+    const v26Config = MOCK_CONFIG_V26
+    const result = migrate(v26Config)
+
     expect(result.version).toBe(NEWEST_VERSION)
     expect(result).toEqual(NEWEST_MOCK_CONFIG)
   })

app-shell/src/config/migrate.ts

@@ -29,13 +29,14 @@ import type {
   ConfigV23,
   ConfigV24,
   ConfigV25,
+  ConfigV26,
 } from '@opentrons/app/src/redux/config/types'
 // format
 // base config v0 defaults
 // any default values for later config versions are specified in the migration
 // functions for those version below
 
-const CONFIG_VERSION_LATEST = 25
+const CONFIG_VERSION_LATEST = 26
 
 export const DEFAULTS_V0: ConfigV0 = {
   version: 0,
@@ -443,6 +444,14 @@ const toVersion25 = (prevConfig: ConfigV24): ConfigV25 => {
   return nextConfig
 }
 
+const toVersion26 = (prevConfig: ConfigV25): ConfigV26 => {
+  const nextConfig = {
+    ...prevConfig,
+    version: 26 as const,
+  }
+  return nextConfig
+}
+
 const MIGRATIONS: [
   (prevConfig: ConfigV0) => ConfigV1,
   (prevConfig: ConfigV1) => ConfigV2,
@@ -468,7 +477,8 @@ const MIGRATIONS: [
   (prevConfig: ConfigV21) => ConfigV22,
   (prevConfig: ConfigV22) => ConfigV23,
   (prevConfig: ConfigV23) => ConfigV24,
-  (prevConfig: ConfigV24) => ConfigV25
+  (prevConfig: ConfigV24) => ConfigV25,
+  (prevConfig: ConfigV25) => ConfigV26
 ] = [
   toVersion1,
   toVersion2,
@@ -495,6 +505,7 @@ const MIGRATIONS: [
   toVersion23,
   toVersion24,
   toVersion25,
+  toVersion26,
 ]
 
 export const DEFAULTS: Config = migrate(DEFAULTS_V0)
@@ -527,6 +538,7 @@ export function migrate(
     | ConfigV23
     | ConfigV24
     | ConfigV25
+    | ConfigV26
 ): Config {
   const prevVersion = prevConfig.version
   let result = prevConfig

app/src/App/DesktopApp.tsx

@@ -1,5 +1,4 @@
 import { useState, Fragment } from 'react'
-import { useTranslation } from 'react-i18next'
 import { Navigate, Route, Routes, useMatch } from 'react-router-dom'
 import { ErrorBoundary } from 'react-error-boundary'
 import {
@@ -44,7 +43,6 @@ import { useFeatureFlag } from '../redux/config'
 import type { RouteProps } from './types'
 
 export const DesktopApp = (): JSX.Element => {
-  const { t } = useTranslation('top_navigation')
   useSoftwareUpdatePoll()
   const [
     isEmergencyStopModalDismissed,
@@ -70,55 +68,55 @@ export const DesktopApp = (): JSX.Element => {
   const desktopRoutes: RouteProps[] = [
     {
       Component: ProtocolsLanding,
-      name: t('protocols'),
+      name: 'protocols',
       navLinkTo: '/protocols',
       path: '/protocols',
     },
     {
       Component: ProtocolDetails,
-      name: t('protocol_details'),
+      name: 'Protocol Details',
       path: '/protocols/:protocolKey',
     },
     {
       Component: ProtocolTimeline,
-      name: t('protocol_timeline'),
+      name: 'Protocol Timeline',
       path: '/protocols/:protocolKey/timeline',
     },
     {
       Component: Labware,
-      name: t('labware'),
+      name: 'labware',
       navLinkTo: '/labware',
       path: '/labware',
     },
     {
       Component: DevicesLanding,
-      name: t('devices'),
+      name: 'devices',
       navLinkTo: '/devices',
       path: '/devices',
     },
     {
       Component: DeviceDetails,
-      name: t('device'),
+      name: 'Device',
       path: '/devices/:robotName',
     },
     {
       Component: RobotSettings,
-      name: t('robot_settings'),
+      name: 'Robot Settings',
       path: '/devices/:robotName/robot-settings/:robotSettingsTab?',
     },
     {
       Component: CalibrationDashboard,
-      name: t('calibration_dashboard'),
+      name: 'Calibration Dashboard',
       path: '/devices/:robotName/robot-settings/calibration/dashboard',
     },
     {
       Component: ProtocolRunDetails,
-      name: t('run_details'),
+      name: 'Run Details',
       path: '/devices/:robotName/protocol-runs/:runId/:protocolRunDetailsTab?',
     },
     {
       Component: AppSettings,
-      name: t('app_settings'),
+      name: 'App Settings',
       path: '/app-settings/:appSettingsTab?',
     },
   ]

app/src/App/Navbar.tsx

@@ -1,4 +1,5 @@
 import { useCallback } from 'react'
+import { useTranslation } from 'react-i18next'
 import { NavLink, useNavigate } from 'react-router-dom'
 import styled from 'styled-components'
 import debounce from 'lodash/debounce'
@@ -111,11 +112,11 @@ const LogoImg = styled('img')`
 `
 
 export function Navbar({ routes }: { routes: RouteProps[] }): JSX.Element {
+  const { t } = useTranslation('top_navigation')
   const navigate = useNavigate()
   const navRoutes = routes.filter(
     ({ navLinkTo }: RouteProps) => navLinkTo != null
   )
-
   const debouncedNavigate = useCallback(
     debounce((path: string) => {
       navigate(path)
@@ -149,7 +150,7 @@ export function Navbar({ routes }: { routes: RouteProps[] }): JSX.Element {
               as="h3"
               margin={`${SPACING.spacing8} 0 ${SPACING.spacing8} ${SPACING.spacing12}`}
             >
-              {name}
+              {t(name)}
             </LegacyStyledText>
           </NavbarLink>
         ))}

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

@@ -12,6 +12,7 @@
   "creation_method": "creation method",
   "csv_file": "CSV file",
   "csv_file_type_required": "CSV file type required",
+  "deck": "deck",
   "deck_view": "Deck View",
   "default_value": "Default Value",
   "delete_protocol": "Delete Protocol",
@@ -86,6 +87,7 @@
   "start_setup": "Start setup",
   "start_setup_customize_values": "Start setup to customize values",
   "successfully_sent": "Successfully sent",
+  "summary": "Summary",
   "total_volume": "total volume",
   "unavailable_or_busy_robot_not_listed": "{{count}} unavailable or busy robot is not listed.",
   "unavailable_or_busy_robot_not_listed_plural": "{{count}} unavailable or busy robots are not listed.",

app/src/assets/localization/zh/app_settings.json

@@ -55,7 +55,7 @@
   "installing_update": "正在安装更新...",
   "ip_available": "可用",
   "ip_description_first": "输入IP地址或主机名以连接到工作站。",
-  "language": "语言",
+  "language": "语言 (Language)",
   "language_preference": "语言偏好",
   "manage_versions": "工作站版本和应用程序软件版本必须一致。通过工作站设置 > 高级查看工作站软件版本。",
   "new_features": "新功能",
@@ -84,7 +84,7 @@
   "restore_previous": "查看如何恢复过往软件版本",
   "searching": "正在搜索30秒",
   "select_a_language": "请选择使用语言。",
-  "select_language": "选择语言",
+  "select_language": "选择语言 (Select language)",
   "setup_connection": "设置连接",
   "share_display_usage": "分享屏幕使用情况",
   "share_robot_logs": "分享工作站日志",

app/src/assets/localization/zh/protocol_command_text.json

@@ -37,7 +37,7 @@
   "in_location": "在{{location}}",
   "latching_hs_latch": "在热震荡模块上锁定实验耗材",
   "left": "左",
-  "load_labware_to_display_location": "在{{display_location}}加载{{labware}}",
+  "load_labware_to_display_location": "{{display_location}}加载{{labware}}",
   "load_liquids_info_protocol_setup": "将{{liquid}}加载到{{labware}}中",
   "load_module_protocol_setup": "在甲板槽{{slot_name}}中加载模块{{module}}",
   "load_pipette_protocol_setup": "在{{mount_name}}支架上加载{{pipette_name}}",

app/src/pages/Desktop/AppSettings/GeneralSettings.tsx

@@ -290,6 +290,7 @@ export function GeneralSettings(): JSX.Element {
             <Flex
               flexDirection={DIRECTION_ROW}
               justifyContent={JUSTIFY_SPACE_BETWEEN}
+              gridGap={SPACING.spacing24}
             >
               <Flex flexDirection={DIRECTION_COLUMN} gridGap={SPACING.spacing8}>
                 <LegacyStyledText