in development mode use the message.properties as file (#39406)

* in development mode use the message.properties as file

fixes: #39405
Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com>

* added VITE_REALM_OVERRIDES to use overrides instead of message bundle

Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com>

* Update js/apps/admin-ui/CONTRIBUTING.md

Co-authored-by: Stan Silvert <ssilvert@redhat.com>
Signed-off-by: Erik Jan de Wit <edewit@redhat.com>

---------

Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com>
Signed-off-by: Erik Jan de Wit <edewit@redhat.com>
Co-authored-by: Stan Silvert <ssilvert@redhat.com>

js/apps/admin-ui/CONTRIBUTING.md

@@ -34,6 +34,9 @@ Once the process of optimization is done your browser will automatically open yo
 
 You can now start making changes to the source code, and they will be reflected in your browser.
 
+In this mode the messages for translation will come directly from the messages.properties and the realm overrides will be ignored, this makes testing adding messages easier.
+But when you want to see the realm overrides instead, you can add the environment variable `VITE_REALM_OVERRIDES=true` to disable this behavior.
+
 ## Building as a Keycloak theme
 
 If you want to build the application using Maven and produce a JAR that can be installed directly into Keycloak, check out the [Keycloak theme documentation](../../keycloak-theme/README.md).

js/apps/admin-ui/package.json

@@ -120,6 +120,7 @@
     "cross-env": "^7.0.3",
     "jsdom": "^26.1.0",
     "lightningcss": "^1.30.0",
+    "properties-file": "^3.5.12",
     "ts-node": "^10.9.2",
     "uuid": "^11.1.0",
     "vite": "^6.3.5",

js/apps/admin-ui/src/i18n/i18n.ts

@@ -6,6 +6,9 @@ import { initReactI18next } from "react-i18next";
 import { environment } from "../environment";
 import { joinPath } from "../utils/joinPath";
 
+// @ts-ignore imported by rollup plugin
+import code from "message-bundle";
+
 type KeyValue = { key: string; value: string };
 
 export const DEFAULT_LOCALE = "en";
@@ -26,8 +29,13 @@ export const i18n: i18nType = createInstance({
       `resources/{{ns}}/admin/{{lng}}`,
     ),
     parse: (data: string) => {
+      if (
+        process.env.NODE_ENV === "development" &&
+        import.meta.env.VITE_REALM_OVERRIDES === undefined
+      ) {
+        return code;
+      }
       const messages: KeyValue[] = JSON.parse(data);
-
       return Object.fromEntries(messages.map(({ key, value }) => [key, value]));
     },
   },

js/apps/admin-ui/vite.config.ts

@@ -1,5 +1,7 @@
 import react from "@vitejs/plugin-react-swc";
+import { readFileSync } from "node:fs";
 import path from "path";
+import { getProperties } from "properties-file";
 import { defineConfig, loadEnv } from "vite";
 import { checker } from "vite-plugin-checker";
 import dts from "vite-plugin-dts";
@@ -9,13 +11,42 @@ import { configDefaults } from "vitest/config";
 export default defineConfig(({ mode }) => {
   const env = loadEnv(mode, process.cwd(), "");
   const external = ["react", "react/jsx-runtime", "react-dom"];
-  const plugins = [react(), checker({ typescript: true })];
+  const plugins = [
+    react(),
+    checker({ typescript: true }),
+    {
+      name: "message-bundle-transformer",
+      resolveId(source) {
+        if (source === "message-bundle") {
+          return source;
+        }
+        return null;
+      },
+      load(id) {
+        if (id === "message-bundle") {
+          let properties = {};
+          if (process.env.NODE_ENV === "development") {
+            properties = getProperties(
+              readFileSync(
+                "./maven-resources/theme/keycloak.v2/admin/messages/messages_en.properties",
+              ),
+            );
+          }
+          return {
+            code: `export default ${JSON.stringify(properties)};`,
+          };
+        }
+        return null;
+      },
+    },
+  ];
   const input = env.LIB ? undefined : "src/main.tsx";
   if (env.LIB) {
     external.push("react-router-dom");
     external.push("react-i18next");
     plugins.push(dts({ insertTypesEntry: true }));
   }
+
   const lib = env.LIB
     ? {
         outDir: "lib",

js/pnpm-lock.yaml

@@ -265,6 +265,9 @@ importers:
       lightningcss:
         specifier: ^1.30.0
         version: 1.30.0
+      properties-file:
+        specifier: ^3.5.12
+        version: 3.5.12
       ts-node:
         specifier: ^10.9.2
         version: 10.9.2(@swc/core@1.11.21)(@types/node@22.15.18)(typescript@5.8.3)
@@ -3548,6 +3551,9 @@ packages:
   proper-lockfile@4.1.2:
     resolution: {integrity: sha512-TjNPblN4BwAWMXU8s9AEz4JmQxnD1NNL7bNOY/AKUzyamc379FWASUhc/K1pL2noVb+XmZKLL68cjzLsiOAMaA==}
 
+  properties-file@3.5.12:
+    resolution: {integrity: sha512-7dvf+jph2BoEWv0NskL0RIuBocAzf7R62qvG1K8q5ea8BddjepuwFiLLH1bgQGzSYYNvJHDXonnssd9dZ07RGA==}
+
   property-information@6.5.0:
     resolution: {integrity: sha512-PgTgs/BlvHxOu8QuEN7wi5A0OmXaBcHpmCSTehcs6Uuu9IkDIEo13Hy7n898RHfrQ49vKCoGeWZSaAK01nwVig==}
 
@@ -7879,6 +7885,8 @@ snapshots:
       retry: 0.12.0
       signal-exit: 3.0.7
 
+  properties-file@3.5.12: {}
+
   property-information@6.5.0: {}
 
   property-information@7.0.0: {}