getting there

Author: toddtarsi

packages/selenium-ide/src/browser/I18N/en/index.ts

@@ -1,4 +1,5 @@
 import { Commands as commandMapEnglish } from '@seleniumhq/side-model'
+import { flattenNestedObject } from '../util'
 
 const windowTabEnglish = {
   file: '&File',
@@ -112,7 +113,7 @@ const suitesTabEnglish = {
   suiteName: 'Suite Name',
   cancel: 'Cancel',
   create: 'Create',
-  deleteNotice: 'Delete this suite?',
+  deleteNotice: 'Are you sure you want to delete suite {name}?',
   tooltip:
     'double click to modify the name,right click to export or delete suites',
   notDeleteNotice: 'only one suites is not allowed to be deleted!',
@@ -195,7 +196,7 @@ const testCoreEnglish = {
   playFromStart: 'Play From Start',
 }
 
-const langaugeMap = {
+export const langaugeMapEn = {
   windowTab: windowTabEnglish,
   electronMenuTree: electronMenuTreeEnglish,
   fileMenuTree: fileMenuTreeEnglish,
@@ -217,6 +218,7 @@ const langaugeMap = {
 
 // Creating a type of this so other locales are prompted to be filled in by
 // the developer
-export type LanguageMap = typeof langaugeMap
+export type LanguageMap = typeof langaugeMapEn
 
-export default langaugeMap
+const flattenedMap = flattenNestedObject(langaugeMapEn)
+export default flattenedMap

packages/selenium-ide/src/browser/I18N/keys.ts

@@ -1,24 +1,10 @@
-import en, { LanguageMap } from './en'
-
-const processOneLevel = (
-  prefix: string,
-  obj: LanguageMap
-): LanguageMap => {
-  return Object.entries(obj).reduce((acc, [key, value]) => {
-    const keyPath = `${prefix}.${key}`;
-    if (typeof value === 'string') {
-      // @ts-expect-error - we know this is a string
-      acc[key] = keyPath;
-    } else {
-      // @ts-expect-error - we know this is an object
-      acc[key] = processOneLevel(keyPath, value);
-    }
-    return acc;
-  }, {} as LanguageMap);
-}
+import {langaugeMapEn} from './en'
+import {transformNestedObject} from './util'
 
 /**
  * Take this nested object, keep the shape, but make the final keys the dot delimited string
  * path of the nested key
  */
-export default processOneLevel('en', en)
+const languageMap = transformNestedObject((key) => key, langaugeMapEn)
+
+export default languageMap

packages/selenium-ide/src/browser/I18N/util.ts

@@ -0,0 +1,53 @@
+interface RecursiveShape {
+  [key: string]: boolean | string | RecursiveShape
+}
+
+const processOneLevel = <T extends RecursiveShape>(
+  prefix: string,
+  getValue: (key: string, value: string) => any,
+  obj: T
+): Record<string, any> => {
+  return Object.entries(obj).reduce((acc, [key, value]) => {
+    const keyPath = prefix ? `${prefix}.${key}` : key
+    if (value && typeof value === 'object') {
+      // @ts-expect-error our shape traversal kinda sucks :(
+      acc[key] = processOneLevel<T>(keyPath, getValue, value)
+    } else {
+      // @ts-expect-error our shape traversal kinda sucks :(
+      acc[key] = getValue(keyPath, value)
+    }
+    return acc
+  }, {} as T)
+}
+
+/**
+ * Take this nested object, keep the shape, but make the final keys the dot delimited string
+ * path of the nested key
+ */
+
+export const transformNestedObject = <T extends RecursiveShape>(
+  getValue: (key: string, value: string) => any,
+  obj: T
+): Record<string, any> => processOneLevel<T>('', getValue, obj)
+
+const flattenOneLevel = <T extends RecursiveShape>(
+  prefix: string,
+  getValue: (key: string, value: string) => any,
+  target: Record<string, any>,
+  source: T
+): Record<string, any> => {
+  return Object.entries(source).reduce((acc, [key, value]) => {
+    const keyPath = prefix ? `${prefix}.${key}` : key
+    if (value && typeof value === 'object') {
+      flattenOneLevel<T>(keyPath, getValue, target, value as T)
+    } else {
+      // @ts-expect-error our shape traversal kinda sucks :(
+      acc[keyPath] = getValue(keyPath, value)
+    }
+    return acc
+  }, target as T)
+}
+
+export const flattenNestedObject = <T extends RecursiveShape>(
+  obj: T
+): Record<string, any> => flattenOneLevel('', (_k, v) => v, {}, obj)

packages/selenium-ide/src/browser/I18N/zh/index.ts

@@ -1,6 +1,6 @@
-import type {LanguageMap} from '../en/index';
+import type { LanguageMap } from '../en/index'
 import Commands from '@seleniumhq/side-model/dist/I18N/zh/Commands'
-
+import {transformNestedObject} from '../util'
 
 // 窗口顶部菜单
 const windowTabChinese = {
@@ -202,7 +202,7 @@ const testCoreChinese = {
   playFromStart: '从头开始回放',
 }
 
-export const languageMap: LanguageMap = {
+export const languageMapZh: LanguageMap = {
   windowTab: windowTabChinese,
   electronMenuTree: electronMenuTreeChinese,
   fileMenuTree: fileMenuTreeChinese,
@@ -222,4 +222,4 @@ export const languageMap: LanguageMap = {
   commandMap: Commands,
 }
 
-export default languageMap
+export default transformNestedObject((_k, v) => v, languageMapZh)

packages/selenium-ide/src/browser/components/AppBar/AppBarTabs.tsx

@@ -2,8 +2,9 @@ import Tabs from '@mui/material/Tabs'
 import Tab from '@mui/material/Tab'
 import React from 'react'
 import { PROJECT_TAB, SUITES_TAB, TESTS_TAB } from 'browser/enums/tab'
-import { PROJECT_TAB, SUITES_TAB, TESTS_TAB } from 'browser/I18N/keys'
+import languageMap from 'browser/I18N/keys'
 import { SIDEMainProps } from '../types'
+import { FormattedMessage } from 'react-intl'
 
 /**********顶部菜单栏tab*************/
 function a11yProps(index: number) {

packages/selenium-ide/src/browser/components/AppWrapper.tsx

@@ -30,9 +30,16 @@ const AppWrapper: FC<AppWrapperProps> = ({ children }) => {
       }),
     [prefersDarkMode]
   )
+  const [languageMap, setLanguageMap] = React.useState<any>({})
+  React.useEffect(() => {
+    window.sideAPI.system.getLanguageMap().then((result) => {
+      console.log(result)
+      setLanguageMap(result)
+    })
+  }, [])
 
   return (
-    <IntlProvider defaultLocale='en'>
+    <IntlProvider defaultLocale="en" messages={languageMap}>
       {/* @ts-expect-error react-intl has funky versions */}
       <ThemeProvider theme={theme}>
         <CssBaseline />

packages/selenium-ide/src/browser/components/Controls/PauseButton.tsx

@@ -1,32 +1,24 @@
 import PauseIcon from '@mui/icons-material/Pause'
 import IconButton from '@mui/material/IconButton'
 import Tooltip from '@mui/material/Tooltip'
-import React, { FC, useEffect, useState } from 'react'
+import React, { FC } from 'react'
 import baseControlProps from './BaseProps'
+import { FormattedMessage } from 'react-intl'
+import languageMap from 'browser/I18N/keys'
 
-const PauseButton: FC = () => {
-  const [languageMap, setLanguageMap] = useState<any>({
-    testCore: {
-      pause: 'Pause',
-    },
-  })
-
-  useEffect(() => {
-    window.sideAPI.system.getLanguageMap().then((result) => {
-      setLanguageMap(result)
-    })
-  }, [])
-  return (
-    <Tooltip title={languageMap.testCore.pause} aria-label="pause">
-      <IconButton
-        {...baseControlProps}
-        data-pause
-        onClick={() => window.sideAPI.playback.pause()}
-      >
-        <PauseIcon />
-      </IconButton>
-    </Tooltip>
-  )
-}
+const PauseButton: FC = () => (
+  <Tooltip
+    title={<FormattedMessage id={languageMap.testCore.pause} />}
+    aria-label="pause"
+  >
+    <IconButton
+      {...baseControlProps}
+      data-pause
+      onClick={() => window.sideAPI.playback.pause()}
+    >
+      <PauseIcon />
+    </IconButton>
+  </Tooltip>
+)
 
 export default PauseButton

packages/selenium-ide/src/browser/components/Controls/PlayButton.tsx

@@ -1,28 +1,22 @@
 import PlayArrowIcon from '@mui/icons-material/PlayArrow'
 import IconButton from '@mui/material/IconButton'
 import Tooltip from '@mui/material/Tooltip'
-import React, { FC, useContext, useEffect, useState } from 'react'
+import React, { FC, useContext } from 'react'
 import { badIndex } from '@seleniumhq/side-api/dist/constants/badIndex'
 import baseControlProps from './BaseProps'
 import { context as playbackCurrentIndexContext } from 'browser/contexts/playback-current-index'
 import { context as activeTestContext } from 'browser/contexts/active-test'
+import { FormattedMessage } from 'react-intl'
+import languageMap from 'browser/I18N/keys'
 
 const PlayButton: FC = () => {
   const { activeTestID } = useContext(activeTestContext)
   const currentIndex = useContext(playbackCurrentIndexContext)
-  const [languageMap, setLanguageMap] = useState<any>({
-    testCore: {
-      play: 'Play',
-    },
-  })
-
-  useEffect(() => {
-    window.sideAPI.system.getLanguageMap().then((result) => {
-      setLanguageMap(result)
-    })
-  }, [])
   return (
-    <Tooltip title={languageMap.testCore.play} aria-label="play">
+    <Tooltip
+      title={<FormattedMessage id={languageMap.testCore.play} />}
+      aria-label="play"
+    >
       <IconButton
         {...baseControlProps}
         data-play

packages/selenium-ide/src/browser/components/Controls/PlayListButton.tsx

@@ -1,32 +1,24 @@
 import PlaylistPlayIcon from '@mui/icons-material/PlaylistPlay'
 import IconButton from '@mui/material/IconButton'
 import Tooltip from '@mui/material/Tooltip'
-import React, { FC, useEffect, useState } from 'react'
+import React, { FC } from 'react'
 import baseControlProps from './BaseProps'
+import { FormattedMessage } from 'react-intl'
+import languageMap from 'browser/I18N/keys'
 
-const PlayListButton: FC = () => {
-  const [languageMap, setLanguageMap] = useState<any>({
-    suitesTab: {
-      playSuite: 'Play Suite',
-    },
-  })
-
-  useEffect(() => {
-    window.sideAPI.system.getLanguageMap().then((result) => {
-      setLanguageMap(result)
-    })
-  }, [])
-  return (
-    <Tooltip title={languageMap.suitesTab.playSuite} aria-label="play-suite">
-      <IconButton
-        {...baseControlProps}
-        data-play-suite
-        onClick={() => window.sideAPI.playback.playSuite()}
-      >
-        <PlaylistPlayIcon />
-      </IconButton>
-    </Tooltip>
-  )
-}
+const PlayListButton: FC = () => (
+  <Tooltip
+    title={<FormattedMessage id={languageMap.suitesTab.playSuite} />}
+    aria-label="play-suite"
+  >
+    <IconButton
+      {...baseControlProps}
+      data-play-suite
+      onClick={() => window.sideAPI.playback.playSuite()}
+    >
+      <PlaylistPlayIcon />
+    </IconButton>
+  </Tooltip>
+)
 
 export default PlayListButton

packages/selenium-ide/src/browser/components/Controls/RecordButton.tsx

@@ -1,32 +1,24 @@
 import RecordIcon from '@mui/icons-material/FiberManualRecord'
 import IconButton from '@mui/material/IconButton'
 import Tooltip from '@mui/material/Tooltip'
-import React, { FC, useEffect, useState } from 'react'
+import React, { FC } from 'react'
 import baseControlProps from './BaseProps'
+import { FormattedMessage } from 'react-intl'
+import languageMap from 'browser/I18N/keys'
 
-const RecordButton: FC = () => {
-  const [languageMap, setLanguageMap] = useState<any>({
-    testCore: {
-      record: 'Record',
-    },
-  })
-
-  useEffect(() => {
-    window.sideAPI.system.getLanguageMap().then((result) => {
-      setLanguageMap(result)
-    })
-  }, [])
-  return (
-    <Tooltip title={languageMap.testCore.record} aria-label="record">
-      <IconButton
-        {...baseControlProps}
-        data-record
-        onClick={() => window.sideAPI.recorder.start()}
-      >
-        <RecordIcon color="error" />
-      </IconButton>
-    </Tooltip>
-  )
-}
+const RecordButton: FC = () => (
+  <Tooltip
+    title={<FormattedMessage id={languageMap.testCore.record} />}
+    aria-label="record"
+  >
+    <IconButton
+      {...baseControlProps}
+      data-record
+      onClick={() => window.sideAPI.recorder.start()}
+    >
+      <RecordIcon color="error" />
+    </IconButton>
+  </Tooltip>
+)
 
 export default RecordButton