CI: Add i18n verification step (#69384)

* Add i18n verification step

* Add check for extracted translations

* Run extract

* Add newline for pseudo

* Format JSON output with prettier

* Print file diff

* Actually run make drone

* Only deo git diff on locales

* Update error message

* Verify that step fails on dynamic phrases

* Verify that it passes when fixed

* Verify that dynamic phrase fails, for real this time

* Extract error messages

* Change echo

* Fix string format

* Try double escaping

* Escape for Drone substitution

* Update character escape

* Remove dynamic phrase

* Verify multiple keys

* Remove double keys

* Readd en locale because of reasons

* Undo changes

* Format lint_frontend.star

* Update error message

* Update .drone.yml

* Add quotes for echo

* Verify fail to extract

* Fix diff stat command

* Reset footer changes

.drone.yml

@@ -230,7 +230,6 @@ steps:
 - commands:
   - yarn run prettier:check
   - yarn run lint
-  - yarn run i18n:compile
   - yarn run typecheck
   depends_on:
   - yarn-install
@@ -239,6 +238,20 @@ steps:
     TEST_MAX_WORKERS: 50%
   image: grafana/build-container:1.7.4
   name: lint-frontend
+- commands:
+  - |-
+    yarn run i18n:extract || (echo "
+    Extraction failed. Make sure that you have no dynamic translation phrases, such as 't(\`preferences.theme.\$${themeID}\`, themeName)' and that no translation key is used twice. Search the output for '[warning]' to find the offending file." && false)
+  - "\n            file_diff=$(git diff --dirstat public/locales)\n            if
+    [ -n \"$file_diff\" ]; then\n                echo $file_diff\n                echo
+    \"\nTranslation extraction has not been committed. Please run 'yarn i18n:extract',
+    commit the changes and push again.\"\n                exit 1\n            fi\n
+    \           "
+  - yarn run i18n:compile
+  depends_on:
+  - yarn-install
+  image: grafana/build-container:1.7.4
+  name: verify-i18n
 trigger:
   event:
   - pull_request
@@ -1291,7 +1304,6 @@ steps:
 - commands:
   - yarn run prettier:check
   - yarn run lint
-  - yarn run i18n:compile
   - yarn run typecheck
   depends_on:
   - yarn-install
@@ -1299,6 +1311,20 @@ steps:
     TEST_MAX_WORKERS: 50%
   image: grafana/build-container:1.7.4
   name: lint-frontend
+- commands:
+  - |-
+    yarn run i18n:extract || (echo "
+    Extraction failed. Make sure that you have no dynamic translation phrases, such as 't(\`preferences.theme.\$${themeID}\`, themeName)' and that no translation key is used twice. Search the output for '[warning]' to find the offending file." && false)
+  - "\n            file_diff=$(git diff --dirstat public/locales)\n            if
+    [ -n \"$file_diff\" ]; then\n                echo $file_diff\n                echo
+    \"\nTranslation extraction has not been committed. Please run 'yarn i18n:extract',
+    commit the changes and push again.\"\n                exit 1\n            fi\n
+    \           "
+  - yarn run i18n:compile
+  depends_on:
+  - yarn-install
+  image: grafana/build-container:1.7.4
+  name: verify-i18n
 trigger:
   branch: main
   event:
@@ -7216,6 +7242,6 @@ kind: secret
 name: delivery-bot-app-private-key
 ---
 kind: signature
-hmac: d1a589fd39357048aa2b6595181f98d17545e184121774b729553e9165464480
+hmac: caf02d8ce78dd5c2fd6d841d0661702e74571c07939c6af602ac11d1790b31b8
 
 ...

public/locales/psuedo.js

@@ -1,5 +1,6 @@
 const fs = require('fs/promises');
 const pseudoizer = require('pseudoizer');
+const prettier = require('prettier');
 
 function pseudoizeJsonReplacer(key, value) {
   if (typeof value === 'string') {
@@ -14,7 +15,10 @@ function pseudoizeJsonReplacer(key, value) {
 
 fs.readFile('./public/locales/en-US/grafana.json').then((enJson) => {
   const enMessages = JSON.parse(enJson);
-  const pseudoJson = JSON.stringify(enMessages, pseudoizeJsonReplacer, 2);
+  // Add newline to make prettier happy
+  const pseudoJson = prettier.format(JSON.stringify(enMessages, pseudoizeJsonReplacer, 2), {
+    parser: 'json',
+  });
 
   return fs.writeFile('./public/locales/pseudo-LOCALE/grafana.json', pseudoJson);
 });

scripts/drone/pipelines/lint_frontend.star

@@ -7,6 +7,7 @@ load(
     "enterprise_setup_step",
     "identify_runner_step",
     "lint_frontend_step",
+    "verify_i18n_step",
     "yarn_install_step",
 )
 load(
@@ -28,6 +29,7 @@ def lint_frontend_pipeline(trigger, ver_mode):
 
     init_steps = []
     lint_step = lint_frontend_step()
+    i18n_step = verify_i18n_step()
 
     if ver_mode == "pr":
         # In pull requests, attempt to clone grafana enterprise.
@@ -42,6 +44,7 @@ def lint_frontend_pipeline(trigger, ver_mode):
     ]
     test_steps = [
         lint_step,
+        i18n_step,
     ]
 
     return pipeline(

scripts/drone/steps/lib.star

@@ -775,11 +775,34 @@ def lint_frontend_step():
         "commands": [
             "yarn run prettier:check",
             "yarn run lint",
-            "yarn run i18n:compile",  # TODO: right place for this?
             "yarn run typecheck",
         ],
     }
 
+def verify_i18n_step():
+    extract_error_message = "\nExtraction failed. Make sure that you have no dynamic translation phrases, such as 't(\\`preferences.theme.\\$${themeID}\\`, themeName)' and that no translation key is used twice. Search the output for '[warning]' to find the offending file."
+    uncommited_error_message = "\nTranslation extraction has not been committed. Please run 'yarn i18n:extract', commit the changes and push again."
+    return {
+        "name": "verify-i18n",
+        "image": build_image,
+        "depends_on": [
+            "yarn-install",
+        ],
+        "commands": [
+            "yarn run i18n:extract || (echo \"{}\" && false)".format(extract_error_message),
+            # Verify that translation extraction has been committed
+            '''
+            file_diff=$(git diff --dirstat public/locales)
+            if [ -n "$file_diff" ]; then
+                echo $file_diff
+                echo "{}"
+                exit 1
+            fi
+            '''.format(uncommited_error_message),
+            "yarn run i18n:compile",
+        ],
+    }
+
 def test_a11y_frontend_step(ver_mode, port = 3001):
     """Runs automated accessiblity tests against the frontend.