第7章 動的プラグイン

手順

1. 名前の競合を避けるために、名前の前に plugin__ を付けます。このプラグインテンプレートは、デフォルトで plugin__console-plugin-template namespace を使用します。プラグインの名前 (例: plugin__my-plugin) を変更する場合は更新する必要があります。たとえば、useTranslation フックを使用できます。

   conster Header: React.FC = () => {
     const { t } = useTranslation('plugin__console-demo-plugin');
     return <h1>{t('Hello, World!')}</h1>;
   };

   Copy to Clipboard Toggle word wrap
   重要

   i18n namespace を ConsolePlugin リソースの名前と一致させる必要があります。

2. 必要な動作に応じて spec.i18n.loadType フィールドを設定します。

   例7.1 plugin__console-demo-plugin

   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

   Copy to Clipboard Toggle word wrap

   1

   ロード中、動的プラグインの後に、i18n namespace からプラグインのすべてのローカリゼーションリソースを読み込みます。

3. console-extensions.json 内のラベルに %plugin__console-plugin-template~My Label% という形式を使用します。コンソールは、値を plugin__console-plugin-template namespace の現在の言語のメッセージに置き換えます。以下に例を示します。

     {
       "type": "console.navigation/section",
       "properties": {
         "id": "admin-demo-section",
         "perspective": "admin",
         "name": "%plugin__console-plugin-template~Plugin Template%"
       }
     }

   Copy to Clipboard Toggle word wrap

4. i18next-parser の TypeScript ファイルにコメントを追加して、console-extensions.json からのメッセージをメッセージカタログに追加します。以下に例を示します。

   // t('plugin__console-demo-plugin~Demo Plugin')

   Copy to Clipboard Toggle word wrap

5. メッセージを追加または変更するときにプラグインテンプレートの locales フォルダー内の JSON ファイルを更新するために、次のコマンドを実行します。

   $ yarn i18n

   Copy to Clipboard Toggle word wrap