Skip to content

Commit

Permalink
getting there
Browse files Browse the repository at this point in the history
  • Loading branch information
toddtarsi committed Apr 28, 2024
1 parent ffce18b commit 3a231d5
Show file tree
Hide file tree
Showing 51 changed files with 793 additions and 979 deletions.
10 changes: 6 additions & 4 deletions packages/selenium-ide/src/browser/I18N/en/index.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { Commands as commandMapEnglish } from '@seleniumhq/side-model'
import { flattenNestedObject } from '../util'

const windowTabEnglish = {
file: '&File',
Expand Down Expand Up @@ -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!',
Expand Down Expand Up @@ -195,7 +196,7 @@ const testCoreEnglish = {
playFromStart: 'Play From Start',
}

const langaugeMap = {
export const langaugeMapEn = {
windowTab: windowTabEnglish,
electronMenuTree: electronMenuTreeEnglish,
fileMenuTree: fileMenuTreeEnglish,
Expand All @@ -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
24 changes: 5 additions & 19 deletions packages/selenium-ide/src/browser/I18N/keys.ts
Original file line number Diff line number Diff line change
@@ -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
53 changes: 53 additions & 0 deletions packages/selenium-ide/src/browser/I18N/util.ts
Original file line number Diff line number Diff line change
@@ -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)
8 changes: 4 additions & 4 deletions packages/selenium-ide/src/browser/I18N/zh/index.ts
Original file line number Diff line number Diff line change
@@ -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 = {
Expand Down Expand Up @@ -202,7 +202,7 @@ const testCoreChinese = {
playFromStart: '从头开始回放',
}

export const languageMap: LanguageMap = {
export const languageMapZh: LanguageMap = {
windowTab: windowTabChinese,
electronMenuTree: electronMenuTreeChinese,
fileMenuTree: fileMenuTreeChinese,
Expand All @@ -222,4 +222,4 @@ export const languageMap: LanguageMap = {
commandMap: Commands,
}

export default languageMap
export default transformNestedObject((_k, v) => v, languageMapZh)
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down
9 changes: 8 additions & 1 deletion packages/selenium-ide/src/browser/components/AppWrapper.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 />
Expand Down
Original file line number Diff line number Diff line change
@@ -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
Original file line number Diff line number Diff line change
@@ -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
Expand Down
Original file line number Diff line number Diff line change
@@ -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
Original file line number Diff line number Diff line change
@@ -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
Loading

0 comments on commit 3a231d5

Please sign in to comment.