[UPSTREAM CHANGES] latest changes as of Mon Jun 27 2022 00:14:19 GMT+0000 (Coordinated Universal Time)

.gitlab-ci.yml

@@ -86,7 +86,7 @@ build-docker:
     - trap '' PIPE
     - VERSION=${CI_COMMIT_REF_NAME#*v}
     - echo "Build version $VERSION ci registry image $CI_REGISTRY_IMAGE commit ref $CI_COMMIT_REF_NAME"
-    - docker build -f Dockerfile.prod -t ${CI_REGISTRY_IMAGE}:${CI_COMMIT_REF_NAME} -t ${CONTAINER_IMAGE} --build-arg GLITCHTIP_VERSION=$VERSION .
+    - docker build -f Dockerfile.prod -t ${CI_REGISTRY_IMAGE}:${CI_COMMIT_REF_NAME} -t ${CONTAINER_IMAGE} --build-arg FRONTEND_GLITCHTIP_VERSION=$VERSION .
     - if [ $CI_COMMIT_REF_NAME = "master" ]; then docker tag ${CONTAINER_IMAGE} ${CI_REGISTRY_IMAGE}:latest; fi
     - docker login -u gitlab-ci-token -p $CI_BUILD_TOKEN registry.gitlab.com
     - docker push ${CI_REGISTRY_IMAGE}:${CI_COMMIT_REF_NAME}

Dockerfile.prod

@@ -1,6 +1,6 @@
 FROM registry.gitlab.com/glitchtip/glitchtip-backend:master
-ARG GLITCHTIP_VERSION=local
-ENV GLITCHTIP_VERSION ${GLITCHTIP_VERSION}
+ARG FRONTEND_GLITCHTIP_VERSION=local
+ENV GLITCHTIP_VERSION ${FRONTEND_GLITCHTIP_VERSION}
 
 COPY dist/glitchtip-frontend /code/dist
 

README.md

@@ -39,6 +39,44 @@ We use Cypress to run end to end tests. Be aware the tests will seed the backend
 2. Run the frontend development server `npm start`
 3. Run Cypress `npm run cy:open`
 
+# Internationalization (i18n)
+
+[Angular Localize](https://angular.io/guide/i18n-overview) is used to manage i18n in GlitchTip. [ng-extract-i18n-merge](https://github.com/daniel-sc/ng-extract-i18n-merge) is used to update and merge translation files.
+
+## Adding a new language
+
+1. Copy `src/locale/messages.xlf` to `src/locale/messages.CODE.xlf` where CODE is your language code.
+2. Edit `angular.json` and your language code and newly created file.
+
+```
+  "i18n": {
+    "sourceLocale": "en-US",
+    "locales": {
+      "CODE": {
+        "translation": "src/locale/messages.CODE.xlf"
+      }
+    }
+  },
+
+...
+
+  "extract-i18n": {
+    "options": {
+      "targetFiles": ["../locale/messages.CODE.xlf"]
+    }
+  },
+```
+
+3. Add language code to src/main.ts `const availableLocales = ["en", "CODE"];`
+4. Edit the messages.CODE.xlf file. Consider using a tool such as Poedit.
+5. Open a [merge request](https://gitlab.com/glitchtip/glitchtip-frontend/-/merge_requests/new).
+
+## Updating message files
+
+`npm run extract-i18n` will update all message files with the latest extracted strings from the code.
+
+To test out locally, run `npm run i18n-create-json`. Ensure that `navigator.language` returns the desired code.
+
 # Contributing
 
 Open an issue and say hello! If you use Sentry as a reference, make sure only to refer to open source Sentry which we forked [here](https://gitlab.com/glitchtip/sentry-open-source). Never copy code nor ideas from Sentry on GitHub as that would violate their proprietary license.

angular.json

@@ -16,6 +16,14 @@
       "root": "",
       "sourceRoot": "src",
       "prefix": "gt",
+      "i18n": {
+        "sourceLocale": "en-US",
+        "locales": {
+          "nb": {
+            "translation": "src/locale/messages.nb.xlf"
+          }
+        }
+      },
       "architect": {
         "build": {
           "builder": "@angular-devkit/build-angular:browser",
@@ -49,13 +57,9 @@
                 "output": "./static/assets/images/os-logos"
               }
             ],
-            "styles": [
-              "src/styles.scss"
-            ],
+            "styles": ["src/styles.scss"],
             "stylePreprocessorOptions": {
-              "includePaths": [
-                "./src/assets/styles"
-              ]
+              "includePaths": ["./src/assets/styles"]
             },
             "scripts": []
           },
@@ -138,9 +142,12 @@
           "defaultConfiguration": "development"
         },
         "extract-i18n": {
-          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "builder": "ng-extract-i18n-merge:ng-extract-i18n-merge",
           "options": {
-            "browserTarget": "glitchtip-frontend:build"
+            "browserTarget": "glitchtip-frontend:build",
+            "format": "xlf2",
+            "outputPath": "src/locale",
+            "targetFiles": ["../locale/messages.nb.xlf"]
           }
         },
         "test": {
@@ -151,37 +158,25 @@
             "tsConfig": "tsconfig.spec.json",
             "karmaConfig": "karma.conf.js",
             "inlineStyleLanguage": "scss",
-            "assets": [
-              "src/favicon.ico",
-              "src/assets"
-            ],
-            "styles": [
-              "src/styles.scss"
-            ],
+            "assets": ["src/favicon.ico", "src/assets"],
+            "styles": ["src/styles.scss"],
             "stylePreprocessorOptions": {
-              "includePaths": [
-                "./src/assets/styles"
-              ]
+              "includePaths": ["./src/assets/styles"]
             },
             "scripts": []
           }
         },
         "lint": {
           "builder": "@angular-eslint/builder:lint",
           "options": {
-            "lintFilePatterns": [
-              "src/**/*.ts",
-              "src/**/*.html"
-            ]
+            "lintFilePatterns": ["src/**/*.ts", "src/**/*.html"]
           }
         }
       }
     }
   },
   "cli": {
     "analytics": "86390919-7a40-4e23-8811-d61b83438874",
-    "schematicCollections": [
-      "@angular-eslint/schematics"
-    ]
+    "schematicCollections": ["@angular-eslint/schematics"]
   }
 }

bin/update-i18n.sh

@@ -0,0 +1,4 @@
+#!/bin/bash
+
+bin/xliff-to-json/xliff-to-json src/locale/
+mv src/locale/*.json src/assets/i18n/

bin/xliff-to-json/app.js

@@ -0,0 +1,94 @@
+var fs = require('fs');
+var path = require('path');
+const xliff2js = require('xliff/xliff2js');
+const targetOfjs = require('xliff/targetOfjs');
+const utils = require('./utils');
+
+// function to find all files in a directory with a specific extension
+function findByExt(base,exts,files,result) 
+{
+    files = files || fs.readdirSync(base) 
+    result = result || [] 
+
+    files.forEach( 
+        function (file) {
+            var newbase = path.join(base,file)
+            if (!fs.statSync(newbase).isDirectory())
+            {
+                for (let i = 0; i < exts.length; i++) {
+                    const ext = exts[i];
+                    if ( file.substr(-1*(ext.length+1)) == '.' + ext )
+                    {
+                        result.push(newbase);
+                        break;
+                    } 
+                }
+            }
+        }
+    )
+    return result
+}
+
+async function convert(input_path) {
+    if (!input_path) {
+        return;
+    }
+
+    if (!fs.existsSync(input_path)) {
+        console.log(`ERROR: File or directory "${input_path}" not found!`);
+        return;
+    }
+
+    const is_dir = fs.lstatSync(input_path).isDirectory();
+
+    let files = null;
+
+    if (is_dir) {
+        // gets all files in input with extension 'xlf' or 'xliff'
+        files = findByExt(input_path, ['xlf', 'xliff']);
+    } else {
+        files = [input_path];
+    }
+
+    if (files.length === 0) {
+        console.log(`ERROR: No files found in "${input_path}"!`);
+        return;
+    }
+
+    for (let i = 0; i < files.length; i++) {
+        let file = files[i];
+        let base_file_name = file.replace(/^.*[\\\/]/, '');
+
+        let file_info = fs.readFileSync(file, 'utf8');
+
+        // getting data
+        const json_obj = await xliff2js(file_info);
+
+        // got data, now convert to JSON
+        const res = targetOfjs(json_obj);
+        const string_res = JSON.stringify(res, null, 2);
+
+        // writes new JSON file
+        const new_path = path.join(is_dir ? input_path : path.dirname(input_path), base_file_name.substring(0, base_file_name.length - 3) + 'json');
+        if (fs.existsSync(new_path)) {
+            const old_file = fs.readFileSync(new_path, 'utf8');
+            if (old_file === string_res) {
+                console.log(`INFO: Skipping converting "${file}" to "${new_path}" as the output is equivalent.`);
+            } else {
+                console.log(`INFO: Overwriting "${file}" with "${new_path}".`);
+            }
+        } else {
+            fs.writeFileSync(new_path, string_res);
+            console.log(`INFO: Converted "${file}" to "${new_path}".`);
+        }
+    }
+}
+
+if (require.main === module) {
+  const input_path = utils.getPath(false);
+  convert(input_path);
+}
+
+module.exports = {
+    convert: convert
+}

bin/xliff-to-json/utils.js

@@ -0,0 +1,19 @@
+exports.getPath = (using_npm) => {
+    const args_start_index = using_npm ? 2 : 2;
+    let input_path = null;
+    const args = process.argv;
+    switch (args.length) {
+        case args_start_index:
+            input_path = process.cwd();
+            console.log('INFO: File or directory not specified, defaulting to current directory.');
+            break;
+        case args_start_index + 1:
+            input_path = args[args_start_index];
+            break;
+        default:
+            const base_command = using_npm ? 'xliff-to-json' : 'node app.js'
+            console.log(`ERROR: Args count mismatch! Usage is: ${base_command} [file or directory]`)
+            return null;
+    }
+    return input_path;
+}

bin/xliff-to-json/xliff-to-json

@@ -0,0 +1,7 @@
+#!/usr/bin/env node
+
+const app = require('./app');
+const utils = require('./utils');
+
+const dir = utils.getPath(true);
+app.convert(dir);