Red Hat OpenShift Container Platform

Translate messages with react-i18next

The console-plugin-template plugin template demonstrates how you can translate messages with react-i18next.

Prerequisites

You must have the plugin template cloned locally.
Optional: To test your plugin locally, run the Red Hat OpenShift Container Platform web console in a container. You can use either Docker or Podman 3.2.0 or later.

Procedure

Prefix the name with plugin__ to avoid any naming conflicts. The plugin template uses the plugin__console-plugin-template namespace by default, and you must update when you rename your plugin for example, plugin__my-plugin. You can use the useTranslation hook, for example:
```
conster Header: React.FC = () => {
  const { t } = useTranslation('plugin__console-demo-plugin');
  return <h1>{t('Hello, World!')}</h1>;
};
```
You must match the i18n namespace with the name of the ConsolePlugin resource.

Set the spec.i18n.loadType field based on needed behavior.

plugin__console-demo-plugin Example

spec:
  backend:
    service:
      basePath: /
      name: console-demo-plugin
      namespace: console-demo-plugin
      port: 9001
    type: Service
  displayName: OpenShift Console Demo Plugin
  i18n:
    loadType: Preload

loadType: Preload: Loads all the plugin’s localization resources from the i18n namespace after the dynamic plugin during loading.

Use the format %plugin__console-plugin-template~My Label% for labels in console-extensions.json. The console replaces the value with the message for the current language from the plugin__console-plugin-template namespace. For example:
```
  {
    "type": "console.navigation/section",
    "properties": {
      "id": "admin-demo-section",
      "perspective": "admin",
      "name": "%plugin__console-plugin-template~Plugin Template%"
    }
  }
```
Include a comment in a TypeScript file for the i18next-parser tool to add the message from console-extensions.json to your message catalog. For example:
```
// t('plugin__console-demo-plugin~Demo Plugin')
```
To update the JSON files in the locales folder of the plugin template when adding or changing a message, run the following command:
```
$ yarn i18n
```

Additional resources

react-i18next