Skip to content

WIP: Add Internationalization (i18n) support for the APPM Store

Jayasanka Weerasinghe requested to merge jayasanka-sack/carbon-device-mgt:feature/locale into master

Purpose

The purpose of this PR is to fix product-iots#488 (closed)

Goals

  1. Adding i18n support to add translations from any languages
  2. Extended customer base
  3. Fast-entry to the new markets
  4. Better engagement levels and user experience
  5. Virality
  6. Diversified customers

Approach

  • Add i18n feature with i18next library
  • Add separate JSON files to add custom locals
  • Add a language chooser letting the user select their own locale
  • Store the user preference in the user's local storage
  • Add i18n support for the built-in component using Antd's ConfigProvider

Screen_Recording_2020-04-21_at_17.13.32_3

How to add a new locale?

Adding a new local is an easy task,

  1. Create a new JSON file under /src/services/internationalization
  2. Add your translations to the created file
  3. Add the newly created locale to the supportedLocals object in /src/services/internationalization/i18n.js file.

Refer https://ant.design/docs/react/i18n to match your locale with antd locales.

How to i18n support to a new component?

  1. Wrap your component with withTranslation() hoc (read: Higher-Order Component).

    ex: export default Home; becomes export default withTranslation()(Home)

    Alternatively, you can use useTranslation hook if you are using functional components.

  2. Your content can be translated using the provided t function.

    before:

    <div>Just simple content</div>

    after:

    <div>{t('key')}</div>

The key is referred to the JSON file of the respective locale. The keys are created in the following format to identify and group easily: {pageName}_{keyword}

ex: login_rememberMe

How to translate generated texts?

Sometimes we have to translate the generated contents using backend; ex: deviceType lists, error messages, etc. We have a solution for them too, Add gen_ prefix to the content.

ex:

deviceTypes.map((deviceType) => (<p>{t('gen_'  + deviceType)}</p>))

on your local file:

{
    "gen_android": "アンドロイド",
    "gen_This is a generated error message": "これは生成されたエラーメッセージです"
}

Can we localize input fields like time & date?

Yes. The Ant Design has pre-translated all the built-in components. As mentioned before all you have to do is link the relevant locale when adding it to the supportedLocals object. Refer to: https://ant.design/docs/react/i18n

How do you store the user's locale preference?

The user's locale preference saved in the local storage of the user's browser.

What are the planned improvements?

Next plan is to detect the locale from the browser if the user hasn't selected any locale. (default locale)

Security checks

  • Followed secure coding standards? (yes)
  • Ran FindSecurityBugs plugin and verified report? (no)
  • Confirmed that this PR doesn't commit any keys, passwords, tokens, usernames, or other secrets? (yes)

Test environment

Node v11.8.0 JDK 1.8.0_202 macOS 10.15 Chrome (79.0.3945)

Learning

Edited by Inosh Perara

Merge request reports