chore(i18n): combine cryostat-web i18n strings into plugin__cryostat-plugin namespace (#41)

Author: aptmac

.gitignore

@@ -10,3 +10,5 @@
 .devcontainer/dev.env
 integration-tests/videos
 integration-tests/screenshots
+
+locales/en/plugin__cryostat-plugin.json

README.md

@@ -199,7 +199,7 @@ Additional parameters can be specified if desired. Consult the chart [values](ch
 Install the chart using the name of the plugin as the Helm release name into a new namespace or an existing namespace as specified by the `plugin_console-plugin-template` parameter and providing the location of the image within the `plugin.image` parameter by using the following command:
 
 ```shell
-helm upgrade -i  my-plugin charts/openshift-console-plugin -n plugin__console-plugin-template --create-namespace --set plugin.image=my-plugin-image-location
+helm upgrade -i  my-plugin charts/openshift-console-plugin -n plugin__cryostat-plugin --create-namespace --set plugin.image=my-plugin-image-location
 ```
 
 NOTE: When deploying on OpenShift 4.10, it is recommended to add the parameter `--set plugin.securityContext.enabled=false` which will omit configurations related to Pod Security.
@@ -211,19 +211,19 @@ NOTE: When defining i18n namespace, adhere `plugin__<name-of-the-plugin>` format
 The plugin template demonstrates how you can translate messages in with [react-i18next](https://react.i18next.com/). The i18n namespace must match
 the name of the `ConsolePlugin` resource with the `plugin__` prefix to avoid
 naming conflicts. For example, the plugin template uses the
-`plugin__console-plugin-template` namespace. You can use the `useTranslation` hook
+`plugin__cryostat-plugin` namespace. You can use the `useTranslation` hook
 with this namespace as follows:
 
 ```tsx
 conster Header: React.FC = () => {
-  const { t } = useTranslation('plugin__console-plugin-template');
+  const { t } = useTranslation('plugin__cryostat-plugin');
   return <h1>{t('Hello, World!')}</h1>;
 };
 ```
 
 For labels in `console-extensions.json`, you can use the format
-`%plugin__console-plugin-template~My Label%`. Console will replace the value with
-the message for the current language from the `plugin__console-plugin-template`
+`%plugin__cryostat-plugin~My Label%`. Console will replace the value with
+the message for the current language from the `plugin__cryostat-plugin`
 namespace. For example:
 
 ```json
@@ -232,7 +232,7 @@ namespace. For example:
     "properties": {
       "id": "admin-demo-section",
       "perspective": "admin",
-      "name": "%plugin__console-plugin-template~Plugin Template%"
+      "name": "%plugin__cryostat-plugin~Plugin Template%"
     }
   }
 ```

console-extensions.json

@@ -85,14 +85,14 @@
       "id": "cryostat-section",
       "insertAfter": "home",
       "perspective": "admin",
-      "name": "%plugin__console-plugin-template~Cryostat%"
+      "name": "%plugin__cryostat-plugin~Cryostat%"
     }
   },
   {
     "type": "console.navigation/href",
     "properties": {
       "id": "example",
-      "name": "%plugin__console-plugin-template~Plugin Example%",
+      "name": "%plugin__cryostat-plugin~Navigation.Plugin_Example%",
       "href": "/cryostat/example",
       "perspective": "admin",
       "section": "cryostat-section"
@@ -103,14 +103,14 @@
     "properties": {
       "id": "pf-separator",
       "section": "cryostat-section",
-      "insertAfter": "%plugin__console-plugin-template~Plugin Example%"
+      "insertAfter": "%plugin__cryostat-plugin~Navigation.Plugin_Example%"
     }
   },
   {
     "type": "console.navigation/href",
     "properties": {
       "id": "about",
-      "name": "%plugin__console-plugin-template~About%",
+      "name": "%plugin__cryostat-plugin~Navigation.About%",
       "href": "/cryostat/about",
       "perspective": "admin",
       "section": "cryostat-section"
@@ -120,7 +120,7 @@
     "type": "console.navigation/href",
     "properties": {
       "id": "settings",
-      "name": "%plugin__console-plugin-template~Settings%",
+      "name": "%plugin__cryostat-plugin~Navigation.Settings%",
       "href": "/cryostat/settings",
       "perspective": "admin",
       "section": "cryostat-section"
@@ -130,7 +130,7 @@
     "type": "console.navigation/href",
     "properties": {
       "id": "dashboard",
-      "name": "%plugin__console-plugin-template~Dashboard%",
+      "name": "%plugin__cryostat-plugin~Navigation.Dashboard%",
       "href": "/cryostat/dashboard",
       "perspective": "admin",
       "section": "cryostat-section"
@@ -140,7 +140,7 @@
     "type": "console.navigation/href",
     "properties": {
       "id": "topology",
-      "name": "%plugin__console-plugin-template~Topology%",
+      "name": "%plugin__cryostat-plugin~Navigation.Topology%",
       "href": "/cryostat/topology",
       "perspective": "admin",
       "section": "cryostat-section"
@@ -158,7 +158,7 @@
     "type": "console.navigation/href",
     "properties": {
       "id": "rules",
-      "name": "%plugin__console-plugin-template~Automated Rules%",
+      "name": "%plugin__cryostat-plugin~Navigation.Automated_Rules%",
       "href": "/cryostat/rules",
       "perspective": "admin",
       "section": "cryostat-section"
@@ -168,7 +168,7 @@
     "type": "console.navigation/href",
     "properties": {
       "id": "recordings",
-      "name": "%plugin__console-plugin-template~Recordings%",
+      "name": "%plugin__cryostat-plugin~Navigation.Recordings%",
       "href": "/cryostat/recordings",
       "perspective": "admin",
       "section": "cryostat-section"
@@ -178,7 +178,7 @@
     "type": "console.navigation/href",
     "properties": {
       "id": "archives",
-      "name": "%plugin__console-plugin-template~Archives%",
+      "name": "%plugin__cryostat-plugin~Navigation.Archives%",
       "href": "/cryostat/archives",
       "perspective": "admin",
       "section": "cryostat-section"
@@ -188,7 +188,7 @@
     "type": "console.navigation/href",
     "properties": {
       "id": "events",
-      "name": "%plugin__console-plugin-template~Events%",
+      "name": "%plugin__cryostat-plugin~Navigation.Events%",
       "href": "/cryostat/events",
       "perspective": "admin",
       "section": "cryostat-section"
@@ -198,7 +198,7 @@
     "type": "console.navigation/href",
     "properties": {
       "id": "security",
-      "name": "%plugin__console-plugin-template~Security%",
+      "name": "%plugin__cryostat-plugin~Navigation.Security%",
       "href": "/cryostat/security",
       "perspective": "admin",
       "section": "cryostat-section"

locales/en/plugin__console-plugin-template.json renamed to locales/en/common.json

@@ -8,5 +8,15 @@
   "Plugin Example": "Plugin Example",
   "Success!": "Success!",
   "This is a custom page contributed by the console plugin template. The extension that adds the page is declared in console-extensions.json in the project root along with the corresponding nav item. Update console-extensions.json to change or add extensions. Code references in console-extensions.json must have a corresponding property": "This is a custom page contributed by the console plugin template. The extension that adds the page is declared in console-extensions.json in the project root along with the corresponding nav item. Update console-extensions.json to change or add extensions. Code references in console-extensions.json must have a corresponding property",
-  "Your plugin is working.": "Your plugin is working."
+  "Your plugin is working.": "Your plugin is working.",
+  "Navigation.Plugin_Example": "Plugin Example",
+  "Navigation.About": "About",
+  "Navigation.Settings": "Settings",
+  "Navigation.Dashboard": "Dashboard",
+  "Navigation.Topology": "Topology",
+  "Navigation.Automated_Rules": "Automated Rules",
+  "Navigation.Recordings": "Recordings",
+  "Navigation.Archives": "Archives",
+  "Navigation.Events": "Events",
+  "Navigation.Security": "Security"
 }

package.json

@@ -1,12 +1,12 @@
 {
-  "name": "console-plugin-template",
+  "name": "cryostat-openshift-console-plugin",
   "version": "0.0.1",
   "description": "Template project for OpenShift Console plugins",
   "private": true,
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
-    "url": "https://github.com/openshift/console-plugin-template.git"
+    "url": "https://github.com/cryostatio/cryostat-openshift-console-plugin.git"
   },
   "scripts": {
     "clean": "rm -rf dist",
@@ -53,6 +53,7 @@
     "eslint-plugin-cypress": "^2.12.1",
     "eslint-plugin-prettier": "^4.0.0",
     "eslint-plugin-react": "^7.37.3",
+    "flat": "5.0.2",
     "humanize-duration": "^3.32.1",
     "i18next-browser-languagedetector": "^8.0.0",
     "i18next-parser": "^3.11.0",

src/cryostat-web

@@ -30,7 +30,7 @@ const ALL_NS = '#ALL_NS#';
 const LOCALSTORAGE_KEY = 'cryostat-plugin';
 
 export default function ExamplePage() {
-  const { t } = useTranslation('plugin__console-plugin-template');
+  const { t } = useTranslation('plugin__cryostat-plugin');
   const services = React.useContext(ServiceContext);
   const [subs] = React.useState([] as Subscription[]);
 

src/openshift/pages/ExamplePage.tsx

@@ -2,7 +2,7 @@
 
 set -euo pipefail
 
-CONSOLE_IMAGE=${CONSOLE_IMAGE:="quay.io/openshift/origin-console:latest"}
+CONSOLE_IMAGE=${CONSOLE_IMAGE:="quay.io/openshift/origin-console:4.17"} # temp(OCPBUGS-45523): 4.18+ repeats CSP violation toasts in dev mode 
 CONSOLE_PORT=${CONSOLE_PORT:=9000}
 CONSOLE_IMAGE_PLATFORM=${CONSOLE_IMAGE_PLATFORM:="linux/amd64"}
 

start-console.sh

@@ -6,8 +6,9 @@ import { EnvironmentPlugin } from 'webpack';
 import { Configuration as WebpackDevServerConfiguration } from 'webpack-dev-server';
 import { ConsoleRemotePlugin } from '@openshift-console/dynamic-plugin-sdk-webpack';
 import { TsconfigPathsPlugin } from 'tsconfig-paths-webpack-plugin';
-
-const CopyWebpackPlugin = require('copy-webpack-plugin');
+import { flatten } from 'flat';
+import CopyWebpackPlugin from 'copy-webpack-plugin';
+import fs from 'fs';
 
 const isProd = process.env.NODE_ENV === 'production';
 
@@ -88,6 +89,7 @@ const config: Configuration = {
     new EnvironmentPlugin({
       CRYOSTAT_AUTHORITY: 'http://localhost:8181',
       PREVIEW: process.env.PREVIEW || 'false',
+      I18N_NAMESPACE: 'plugin__cryostat-plugin',
     }),
     new CopyWebpackPlugin({
       patterns: [{ from: path.resolve(__dirname, 'locales'), to: 'locales' }],
@@ -100,4 +102,33 @@ const config: Configuration = {
   },
 };
 
+// Given a list of paths to locale files, combine them into /en/plugin__cryostat-plugin.json
+// TODO: accommodate multiple languages when supported by cryostat-web
+function combineLocaleFiles(files: string[]) {
+  let combined = {};
+  files.forEach((file) => {
+    try {
+      const json = JSON.parse(fs.readFileSync(file).toString());
+      combined = { ...combined, ...json };
+    } catch {
+      console.error(`Could not find locale file: ${file}`);
+    }
+  });
+  combined = flatten(combined);
+  try {
+    fs.writeFileSync(
+      './locales/en/plugin__cryostat-plugin.json',
+      JSON.stringify(combined, null, 2),
+    );
+  } catch (e) {
+    console.error('Could not write plugin__cryostat-plugin.json', e);
+  }
+}
+
+combineLocaleFiles([
+  './locales/en/common.json',
+  './src/cryostat-web/locales/en/common.json',
+  './src/cryostat-web/locales/en/public.json',
+]);
+
 export default config;