app, frontend: Unify locales

Instead of having two separate config and dirs for locales, these
changes unify the locales under the frontend directory.
This will reduce the configuration burden and being less error
prone, making it easier for i18n contributors to see all needed
translations in one place.

Signed-off-by: Joaquim Rocha <[email protected]>

Author: joaquimrocha

app/electron/i18n-helper.ts

@@ -1,10 +1,32 @@
 import * as fs from 'fs';
 import * as path from 'path';
 
-const directoryPath = path.join(__dirname, './locales/');
-const currentLocales: string[] = [];
+// Get the path to the frontend locales directory
+let frontendLocalesPath: string;
+const isDev = process.env.ELECTRON_DEV || false;
+// Check if we're running in a normal Node.js process (for i18next-parser)
+// or in an Electron environment
+const isRunningInNode = !(process as any).resourcesPath;
+
+if (isDev || isRunningInNode) {
+  // When running as a normal Node.js process (i18next parser) or in dev mode
+  frontendLocalesPath = path.resolve(__dirname, '../../frontend/src/i18n/locales');
+} else {
+  // When running in Electron production mode
+  frontendLocalesPath = path.join((process as any).resourcesPath, 'frontend/i18n/locales');
+}
 
-fs.readdirSync(directoryPath).forEach(file => currentLocales.push(file));
+// Read available locales from the frontend locales directory
+const currentLocales: string[] = [];
+if (fs.existsSync(frontendLocalesPath)) {
+  fs.readdirSync(frontendLocalesPath).forEach(file => {
+    // Only include directories, not files
+    if (fs.statSync(path.join(frontendLocalesPath, file)).isDirectory()) {
+      currentLocales.push(file);
+    }
+  });
+}
 
-export { currentLocales as CURRENT_LOCALES };
-export { directoryPath as LOCALES_DIR };
+// If no locales found, default to English
+export const CURRENT_LOCALES = currentLocales.length > 0 ? currentLocales : ['en'];
+export const LOCALES_DIR = frontendLocalesPath;

app/electron/i18next-parser.config.js

@@ -1,5 +1,31 @@
 const path = require('path');
 const helper = require('./i18n-helper');
+const fs = require('fs');
+
+// Import shared configuration values from frontend
+let sharedConfig;
+try {
+  // Try to import the shared config dynamically
+  const sharedConfigPath = path.resolve(
+    __dirname,
+    '../../frontend/src/i18n/i18nextSharedConfig.mjs'
+  );
+  if (fs.existsSync(sharedConfigPath)) {
+    // For CommonJS requiring ES modules, use a dynamic import
+    sharedConfig = {
+      contextSeparator: '//context:',
+      namespaces: ['translation', 'glossary', 'app'],
+      defaultNamespace: 'translation',
+    };
+  }
+} catch (error) {
+  console.error('Failed to import shared config:', error);
+}
+
+// Ensure the LOCALES_DIR is defined
+if (!helper.LOCALES_DIR) {
+  throw new Error('Locales directory is not defined. Check i18n-helper.js for issues.');
+}
 
 module.exports = {
   lexers: {
@@ -8,9 +34,9 @@ module.exports = {
   namespaceSeparator: '|',
   keySeparator: false,
   defaultNamespace: 'app',
-  contextSeparator: '//context:',
-  output: path.join(helper.LOCALES_DIR, './$LOCALE/$NAMESPACE.json'),
-  locales: helper.CURRENT_LOCALES,
+  contextSeparator: sharedConfig?.contextSeparator || '//context:',
+  output: path.join(helper.LOCALES_DIR, '$LOCALE/$NAMESPACE.json'),
+  locales: helper.CURRENT_LOCALES.length > 0 ? helper.CURRENT_LOCALES : ['en'],
   // The English catalog has "SomeKey": "SomeKey" so we stop warnings about
   // missing values.
   useKeysAsDefaultValue: locale => locale === 'en',

app/package-lock.json

@@ -116,7 +116,6 @@
     "files": [
       "electron/main.js",
       "electron/preload.js",
-      "electron/locales/",
       "electron/i18next.config.js",
       "electron/i18n-helper.js",
       "electron/windowSize.js",
@@ -159,6 +158,7 @@
     "@electron/notarize": "^2.3.2",
     "@headlamp-k8s/eslint-config": "^0.6.0",
     "@types/jest": "^29.5.14",
+    "@types/node": "^22.14.0",
     "electron": "^31.2.0",
     "electron-builder": "^24.13.3",
     "i18next-parser": "^9.0.0",

app/package.json

@@ -89,7 +89,7 @@ Here's an example of using date formatting:
 ## Adding a new language
 
 Create a folder using the locale code in:
-`frontend/src/i18n/locales/` and `app/electron/locales`
+`frontend/src/i18n/locales/`
 
 Then run `make i18n`. This command parses the translatable strings in
 the project and creates the corresponding catalog files.

docs/development/i18n/contributing.md

@@ -41,8 +41,8 @@ i18next
   // i18next options: https://www.i18next.com/overview/configuration-options
   .init({
     debug: import.meta.env.DEV && !import.meta.env.UNDER_TEST,
-    ns: ['translation', 'glossary'],
-    defaultNS: 'translation',
+    ns: sharedConfig.namespaces,
+    defaultNS: sharedConfig.defaultNamespace,
     fallbackLng: 'en',
     contextSeparator: sharedConfig.contextSeparator,
     supportedLngs: Object.keys(supportedLanguages),

frontend/src/i18n/config.ts

@@ -2,9 +2,8 @@ import fs from 'fs';
 import path from 'path';
 import sharedConfig from './i18nextSharedConfig.mjs';
 
-const directoryPath = path.join(import.meta.dirname, './locales/');
+const directoryPath = path.join(import.meta.dirname, sharedConfig.localesPath);
 const currentLocales = [];
-const contextSeparator = sharedConfig.contextSeparator;
 
 fs.readdirSync(directoryPath).forEach(file => currentLocales.push(file));
 
@@ -16,12 +15,12 @@ export default {
   keySeparator: false,
   output: path.join(directoryPath, './$LOCALE/$NAMESPACE.json'),
   locales: currentLocales,
-  contextSeparator,
+  contextSeparator: sharedConfig.contextSeparator,
   defaultValue: (locale, _namespace, key) => {
     // The English catalog has "SomeKey": "SomeKey" so we stop warnings about
     // missing values.
     if (locale === 'en') {
-      const contextSepIdx = key.indexOf(contextSeparator);
+      const contextSepIdx = key.indexOf(sharedConfig.contextSeparator);
       if (contextSepIdx >= 0) {
         return key.substring(0, contextSepIdx);
       }

frontend/src/i18n/i18next-parser.config.js

@@ -1,3 +1,6 @@
 export default {
   contextSeparator: '//context:',
+  namespaces: ['translation', 'glossary', 'app'],
+  defaultNamespace: 'translation',
+  localesPath: './locales',
 };