mirror of
https://github.com/openshift/openshift-docs.git
synced 2026-02-05 12:46:18 +01:00
81 lines
2.7 KiB
Plaintext
81 lines
2.7 KiB
Plaintext
// Module included in the following assemblies:
|
|
//
|
|
// * web_console/dynamic-plugin/overview-dynamic-plugin.adoc
|
|
|
|
:_mod-docs-content-type: PROCEDURE
|
|
[id="dynamic-plugin-api_{context}"]
|
|
= Translating messages with react-i18next
|
|
|
|
The link:https://github.com/openshift/console-plugin-template[plugin template] demonstrates how you can translate messages with link:https://www.i18next.com/[react-i18next].
|
|
|
|
.Prerequisites
|
|
* You must have the plugin template cloned locally.
|
|
* Optional: To test your plugin locally, run the
|
|
{product-title} 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:
|
|
+
|
|
[source,tsx,subs="+quotes,+macros"]
|
|
----
|
|
conster Header: React.FC = () ++=>++ {
|
|
const ++{ t } = useTranslation('plugin__console-demo-plugin');++
|
|
++return <h1>{t('Hello, World!')}</h1>;++
|
|
++};++
|
|
----
|
|
+
|
|
[IMPORTANT]
|
|
====
|
|
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]
|
|
====
|
|
[source,yaml,subs="+quotes,+macros"]
|
|
----
|
|
spec:
|
|
backend:
|
|
service:
|
|
basePath: ++/++
|
|
name: console-demo-plugin
|
|
namespace: console-demo-plugin
|
|
port: 9001
|
|
type: Service
|
|
displayName: OpenShift Console Demo Plugin
|
|
i18n:
|
|
loadType: Preload <1>
|
|
----
|
|
<1> 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:
|
|
+
|
|
[source,json,subs="+quotes,+macros"]
|
|
----
|
|
{
|
|
++"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 link:https://github.com/i18next/i18next-parser[i18next-parser] to add the message from `console-extensions.json` to your message catalog. For example:
|
|
+
|
|
[source,tsx,subs="+quotes,+macros"]
|
|
----
|
|
++// 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:
|
|
+
|
|
[source,terminal]
|
|
----
|
|
$ yarn i18n
|
|
---- |