moving intl deeper into the toolkit #1820

toddtarsi · 2024-04-26T12:47:07Z

User description

@fernandozw - I am reworking the i18n stuff a bit for the following tweaks:

I am moving some of the command map translations into side-model. I want that stuff really low down so we can reuse your translations cleanly in both the IDE and the side runner. I am assuming if you're enjoying the IDE, you'll probably want correctly translated strings for your CI too.
I am moving the app translation hooks to just use react-intl and a single typed master translation document. This way we get a few more errors about missing translations, and whenever I add a new english string, the compiler will kick my ass until I add a chinese equivalent. It will help me keep language support going forward. Also, react-intl has good support for template strings and variable injection w/r/t localization and doing numbers and dates and all that stuff too.
Rather than manually specifying language and storing that in the electron-store, I'm just going to use the system locale data so the app starts in the users language of choice.
I am looking at combining metadata from custom commands into the language map in the browser at runtime. Right now, custom commands (provided via plugin) crash the app UX.

Type

enhancement

Description

Refactored various components to use dynamic command maps and localized language maps from @seleniumhq/side-model.
Enhanced internationalization support across the application by integrating IntlProvider and updating components to use FormattedMessage.
Added comprehensive language support files for English and Chinese, including UI labels and command descriptions.
Improved code quality and maintainability by updating components to use modern React hooks and patterns.

Changes walkthrough

Relevant files

Enhancement

11 files

LocatorField.tsx `Refactor LocatorField to Use Dynamic Command Maps and Locale` packages/selenium-ide/src/browser/windows/ProjectEditor/tabs/Tests/CommandFields/LocatorField.tsx Integrated `Commands` from `@seleniumhq/side-model` to replace hardcoded command maps. Utilized `useState` and `useEffect` to dynamically update language maps and local values based on system locale. Improved function handling and state management for UI components.	+119/-1122
TextField.tsx `Update TextField to Utilize Dynamic Commands and Language Maps` packages/selenium-ide/src/browser/windows/ProjectEditor/tabs/Tests/CommandFields/TextField.tsx Replaced static command definitions with dynamic imports from `@seleniumhq/side-model`. Enhanced state management with `useState` and `useEffect` for language and command updates.	+28/-909
index.ts `Add Chinese Translations for UI Components and Commands` packages/selenium-ide/src/browser/I18N/zh/index.ts Added comprehensive Chinese translations for various UI components and menus. Integrated commands and argument types translations from `@seleniumhq/side-model`.	+225/-0
index.ts `Setup Base English Translations and Dynamic Command Imports` packages/selenium-ide/src/browser/I18N/en/index.ts Established a base English translation file for UI components and system messages. Included dynamic command and argument types from `@seleniumhq/side-model`.	+222/-0
ArgTypes.ts `Define Chinese Argument Types for Localization` packages/side-model/src/I18N/zh/ArgTypes.ts Defined argument types for commands in Chinese to support localization.	+155/-0
AppBarTabs.tsx `Refactor AppBarTabs for Internationalization Support` packages/selenium-ide/src/browser/components/AppBar/AppBarTabs.tsx Updated component to use formatted messages for internationalization.	+26/-28
RenamableListItem.tsx `Enhance RenamableListItem with forwardRef Implementation` packages/selenium-ide/src/browser/components/Drawer/RenamableListItem.tsx Modified to use `forwardRef` for better ref handling in React components.	+7/-11
AppWrapper.tsx `Wrap App Components with IntlProvider for Localization` packages/selenium-ide/src/browser/components/AppWrapper.tsx Wrapped application components within `IntlProvider` for internationalization.	+9/-8
index.ts `Implement I18N Data Loader for Language Support` packages/side-model/src/I18N/index.ts Created a loader for internationalization data based on language settings.	+33/-0
keys.ts `Generate I18N Keys for Language Mapping` packages/selenium-ide/src/browser/I18N/keys.ts Generated keys for internationalization to map language-specific labels.	+24/-0
ArgTypes.ts `Export Default English Argument Types` packages/side-model/src/I18N/en/ArgTypes.ts Exported default argument types for commands in English.	+3/-0

✨ PR-Agent usage:
Comment /help on the PR to get a list of all available PR-Agent tools and their descriptions

qodo-merge-pro · 2024-04-26T12:48:06Z

CI Failure Feedback

✨ CI feedback usage guide:

The CI feedback tool (/checks) automatically triggers when a PR has a failed check.
The tool analyzes the failed checks and provides several feedbacks:

Failed stage
Failed test name
Failure summary
Relevant error logs

In addition to being automatically triggered, the tool can also be invoked manually by commenting on a PR:

/checks "https://github.com/{repo_name}/actions/runs/{run_number}/job/{job_number}"

where {repo_name} is the name of the repository, {run_number} is the run number of the failed check, and {job_number} is the job number of the failed check.

Configuration options

enable_auto_checks_feedback - if set to true, the tool will automatically provide feedback when a check is failed. Default is true.
excluded_checks_list - a list of checks to exclude from the feedback, for example: ["check1", "check2"]. Default is an empty list.
enable_help_text - if set to true, the tool will provide a help message with the feedback. Default is true.
persistent_comment - if set to true, the tool will overwrite a previous checks comment with the new feedback. Default is true.
final_update_message - if persistent_comment is true and updating a previous checks message, the tool will also create a new message: "Persistent checks updated to latest commit". Default is true.

See more information about the checks tool in the docs.

qodo-merge-pro · 2024-04-26T12:48:29Z

PR Description updated to latest commit (f825e0b)

Copy walkthrough table to "Files Changed" Tab

qodo-merge-pro · 2024-04-26T12:48:45Z

PR Review

⏱️ Estimated effort to review [1-5]	4, because the PR involves significant changes across multiple files, including refactoring and internationalization efforts. The changes affect core functionalities such as command handling and UI text rendering, which require careful review to ensure functionality and consistency across different languages.
🧪 Relevant tests	No
🔍 Possible issues	Possible Bug: The refactoring introduces changes to how commands and language maps are handled. If not properly tested, this could lead to runtime errors or incorrect command executions.
🔍 Possible issues	Localization Issues: The introduction of new language support (Chinese) needs to be thoroughly tested to ensure all text is displayed correctly and that there are no missing translations.
🔒 Security concerns	No

✨ Review tool usage guide:

Overview:
The review tool scans the PR code changes, and generates a PR review which includes several types of feedbacks, such as possible PR issues, security threats and relevant test in the PR. More feedbacks can be added by configuring the tool.

The tool can be triggered automatically every time a new PR is opened, or can be invoked manually by commenting on any PR.

When commenting, to edit configurations related to the review tool (pr_reviewer section), use the following template:

/review --pr_reviewer.some_config1=... --pr_reviewer.some_config2=...

With a configuration file, use the following template:

[pr_reviewer]
some_config1=...
some_config2=...

See the review usage page for a comprehensive guide on using this tool.

qodo-merge-pro · 2024-04-26T12:49:54Z

PR Code Suggestions

Category	Suggestions
Best practice	Convert the import of `Commands` to a type-only import to prevent runtime imports. Replace the direct import of `Commands` with a type import to ensure that only type information is used during development and no actual code is imported, which aligns with the existing import pattern for `LanguageMap`. packages/selenium-ide/src/browser/I18N/zh/index.ts [2] -import Commands from '@seleniumhq/side-model/dist/I18N/zh/Commands' +import type { Commands } from '@seleniumhq/side-model/dist/I18N/zh/Commands'
	Use template literals for multi-line strings to enhance readability. Use template literals for multi-line strings to improve readability and maintainability of the code, especially for helper texts in configuration objects. packages/selenium-ide/src/browser/I18N/zh/index.ts [65-69] -platformUrlHelper: '用例最终展示在此前端页面', -serviceHostHelper: '将用例导出到后端服务的地址', -businessListUrlHelper: '用例所属的业务列表的url地址', +platformUrlHelper: `用例最终展示在此前端页面`, +serviceHostHelper: `将用例导出到后端服务的地址`, +businessListUrlHelper: `用例所属的业务列表的url地址`,
	Specify a more precise version range for the `react-intl` dependency. Consider specifying a more precise version range for the `react-intl` dependency to ensure compatibility and prevent automatic updates that might introduce breaking changes. pnpm-lock.yaml [321] react-intl: - specifier: ^6.6.5 + specifier: ~6.6.5
Maintainability	Correct a typo in the variable name for better consistency and readability. Ensure consistency in object property naming by changing `maiMenuChinese` to `mainMenuChinese` to correct the typo and improve code readability. packages/selenium-ide/src/browser/I18N/zh/index.ts [52] -const maiMenuChinese = { tests: '用例', suites: '集合', config: '配置' } +const mainMenuChinese = { tests: '用例', suites: '集合', config: '配置' }
	Use enums for repeated string values to centralize control and ease modifications. Introduce enums for repeated string values such as menu names and error messages to centralize control and facilitate changes and translations. packages/selenium-ide/src/browser/I18N/zh/index.ts [6-11] +enum MenuNames { + File = '&文件', + Edit = '&编辑', + View = '&查看', + Help = '&帮助', + Title = '项目编辑器', +} const windowTabChinese = { - file: '&文件', - edit: '&编辑', - view: '&查看', - help: '&帮助', - title: '项目编辑器', + file: MenuNames.File, + edit: MenuNames.Edit, + view: MenuNames.View, + help: MenuNames.Help, + title: MenuNames.Title, }
	Remove duplicate imports to clean up the code. Remove the duplicate import statements for `PROJECT_TAB`, `SUITES_TAB`, and `TESTS_TAB` to clean up the code and avoid confusion. packages/selenium-ide/src/browser/components/AppBar/AppBarTabs.tsx [4-5] -import { PROJECT_TAB, SUITES_TAB, TESTS_TAB } from 'browser/enums/tab' import { PROJECT_TAB, SUITES_TAB, TESTS_TAB } from 'browser/I18N/keys'
	Align the `typescript` version in `peerDependencies` to avoid compatibility issues. Ensure that the version of `typescript` specified in the `peerDependencies` of `@formatjs/intl` is aligned with the versions used elsewhere to avoid potential conflicts or compatibility issues. pnpm-lock.yaml [2556] -typescript: ^4.7 \|\| 5 +typescript: ^5.2.2
Enhancement	Refactor menu configurations into a single nested object for improved manageability. Refactor the individual menu configuration objects into a single object with nested properties for better structure and easier management of related configurations. packages/selenium-ide/src/browser/I18N/zh/index.ts [6-21] -const windowTabChinese = { - file: '&文件', - edit: '&编辑', - view: '&查看', - help: '&帮助', - title: '项目编辑器', -} -const electronMenuTreeChinese = { - about: 'Electron信息', - services: '服务信息', - hideElectron: '隐藏Electron', - hideOthers: '隐藏其他', - showAll: '显示所有', - quit: '退出', +const menuConfigChinese = { + windowTab: { + file: '&文件', + edit: '&编辑', + view: '&查看', + help: '&帮助', + title: '项目编辑器', + }, + electronMenu: { + about: 'Electron信息', + services: '服务信息', + hideElectron: '隐藏Electron', + hideOthers: '隐藏其他', + showAll: '显示所有', + quit: '退出', + }, }
	Improve type safety and IntelliSense by defining a specific interface for `argTypes`. Consider using a more specific type for the `argTypes` object to ensure type safety and better IntelliSense support in your IDE. You can define a specific interface for `argTypes` that includes all the properties you expect, rather than using the generic `ArgTypes` type. packages/side-model/src/I18N/zh/ArgTypes.ts [6] -export const argTypes: ArgTypes = { +interface SpecificArgTypes { + alertText: { name: string; description: string; }; + answer: { name: string; description: string; }; + attributeLocator: { name: string; description: string; }; + // Add other properties as needed +} +export const argTypes: SpecificArgTypes = {
	Pass a dynamic locale to `IntlProvider` for internationalization. Ensure that the `IntlProvider` component has a `locale` prop passed to it, which should dynamically set the locale based on user preference or system settings. packages/selenium-ide/src/browser/components/AppWrapper.tsx [35] -<IntlProvider defaultLocale='en'> +<IntlProvider locale={userLocale} defaultLocale='en'>
	Update `hoist-non-react-statics` to the latest version. Update the `hoist-non-react-statics` package to a newer version if available to take advantage of bug fixes and new features. pnpm-lock.yaml [3540] -hoist-non-react-statics: 3.3.2 +hoist-non-react-statics: 3.3.3 # Assuming 3.3.3 is the latest version
Possible issue	Add conditional rendering to handle potential null or undefined `languageMap`. Use a conditional rendering approach to handle cases where `languageMap` might not be loaded yet, to prevent runtime errors in your React component. packages/selenium-ide/src/browser/windows/Splash/renderer.tsx [36] -<FormattedMessage id={languageMap.splash.present} /> +{languageMap.splash ? <FormattedMessage id={languageMap.splash.present} /> : <span>Loading...</span>}
Performance	Move the loading URL check to the top of the component to improve performance and readability. Move the conditional rendering check for `url === 'http://loading'` to the beginning of the component function to avoid unnecessary hook calls and state updates when the URL is loading. packages/selenium-ide/src/browser/windows/ProjectEditor/tabs/Project/ProjectSettings.tsx [25] +if (url === 'http://loading') { + return null; +} const [languageMap, setLanguageMap] = useState<any>({
Performance	Remove redundant `tslib` dependency where not specifically needed. Consider removing the redundant dependency `tslib` from multiple packages if it is globally available or not specifically needed by each package, to simplify the dependency tree and potentially improve install times. pnpm-lock.yaml [8875] -tslib: 2.6.0 +# Removed redundant tslib dependency
Security	Ensure the integrity hashes for new packages are correct to enhance security. Verify and ensure that the integrity hashes for all newly added packages are correct to prevent potential security risks from tampered packages. pnpm-lock.yaml [7491] -resolution: {integrity: sha512-eYq5fkFBVxc7GIFDzpFQkDOZgNayNTQn4Oufe8jw6YY6OHVw70/4pA3FyCsQ0Gb2DnvEJEMmN2tOaXUGByM+kg==} +resolution: {integrity: sha512-verifiedCorrectHash==}

✨ Improve tool usage guide:

Overview:
The improve tool scans the PR code changes, and automatically generates suggestions for improving the PR code. The tool can be triggered automatically every time a new PR is opened, or can be invoked manually by commenting on a PR.

When commenting, to edit configurations related to the improve tool (pr_code_suggestions section), use the following template:

/improve --pr_code_suggestions.some_config1=... --pr_code_suggestions.some_config2=...

With a configuration file, use the following template:

[pr_code_suggestions]
some_config1=...
some_config2=...

See the improve usage page for a comprehensive guide on using this tool.

fernandozw · 2024-04-28T02:04:34Z

@toddtarsi Your idea is right, using react-intl for translation eliminates the need for developers to maintain it themselves, which is great!

toddtarsi · 2024-04-28T19:45:04Z

@fernandozw - I think it's good here, and I'm going to merge to the latest on trunk. What I'd really appreciate from your side is to test the latest on trunk in the next few days, and if it looks good as a release candidate, we'll send it out! I figure by merging it to trunk, even if it's 90% right and 10% wrong, it will be an easier workflow for you to do fixes there before we increment and truly release, even if the latest tag is updated.

moving intl deeper into the toolkit

f825e0b

qodo-merge-pro bot added the enhancement label Apr 26, 2024

qodo-merge-pro bot added the Review effort [1-5]: 4 label Apr 26, 2024

toddtarsi added 3 commits April 28, 2024 06:04

getting there

7c247a1

backend intl

c4e2c96

one more little fix

530e20e

toddtarsi merged commit 6d5590a into trunk Apr 28, 2024

toddtarsi deleted the move-intl-deeper-down branch April 28, 2024 19:45

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

moving intl deeper into the toolkit #1820

moving intl deeper into the toolkit #1820

Uh oh!

toddtarsi commented Apr 26, 2024 •

edited by qodo-merge-pro bot

Loading

Uh oh!

qodo-merge-pro bot commented Apr 26, 2024

Configuration options

Uh oh!

qodo-merge-pro bot commented Apr 26, 2024

Uh oh!

qodo-merge-pro bot commented Apr 26, 2024

Uh oh!

qodo-merge-pro bot commented Apr 26, 2024

Uh oh!

fernandozw commented Apr 28, 2024

Uh oh!

toddtarsi commented Apr 28, 2024

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Uh oh!

moving intl deeper into the toolkit #1820

moving intl deeper into the toolkit #1820

Uh oh!

Conversation

toddtarsi commented Apr 26, 2024 • edited by qodo-merge-pro bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

User description

Type

Description

Changes walkthrough

Uh oh!

qodo-merge-pro bot commented Apr 26, 2024

CI Failure Feedback

Configuration options

Uh oh!

qodo-merge-pro bot commented Apr 26, 2024

Uh oh!

qodo-merge-pro bot commented Apr 26, 2024

PR Review

Uh oh!

qodo-merge-pro bot commented Apr 26, 2024

PR Code Suggestions

Uh oh!

fernandozw commented Apr 28, 2024

Uh oh!

toddtarsi commented Apr 28, 2024

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

toddtarsi commented Apr 26, 2024 •

edited by qodo-merge-pro bot

Loading