Adds locale to the locale kebab-case warnings (#3951)

Signed-off-by: Olga Bulat <obulat@gmail.com>

frontend/src/locales/scripts/bulk-download.js

@@ -31,6 +31,9 @@ const fetchBulkJed1x = async () => {
  * Extract all JSON file from the given ZIP file. Their names are sanitised to
  * be in the format `<locale_code>.json`.
  *
+ * TODO: Remove deprecated keys handling once all po keys are updated.
+ * https://github.com/WordPress/openverse/issues/2438
+ *
  * @param zipPath {string} - the path to the ZIP file to extract
  * @return {Promise<unknown[]>} - the outcome of writing all ZIP files
  */
@@ -47,9 +50,25 @@ const extractZip = async (zipPath) => {
         .replace(".jed.json", "")
       return [localeName, vueI18nObj]
     })
-  return await Promise.all(
-    localeJsonMap.map((args) => writeLocaleFile(...args))
+  const deprecatedKeys = { count: 0, keys: {} }
+
+  const result = await Promise.all(
+    localeJsonMap.map((args) => writeLocaleFile(...args, deprecatedKeys))
   )
+  const issue = "https://github.com/WordPress/openverse/issues/2438"
+  if (deprecatedKeys.count > 0) {
+    let warning = `${deprecatedKeys.count} deprecated kebab-case keys replaced in locale files. `
+    warning += `To see the keys, run \`just frontend/run i18n:get-translations --verbose\`. For more details, see ${issue}.`
+    if (process.argv.includes("--verbose")) {
+      warning += `\n${JSON.stringify(deprecatedKeys.keys, null, 2)}`
+    }
+    console.warn(warning)
+  } else {
+    console.log(
+      `No deprecated kebab-case keys found in locale files. 🎉 Please close issue ${issue}.`
+    )
+  }
+  return result
 }
 
 /**

frontend/src/locales/scripts/utils.js

@@ -40,36 +40,43 @@ exports.setToValue = function setValue(obj, path, value) {
   o[a[0]] = value
 }
 
-function replacer(_, match) {
-  // Replace ###<text>### from `po` files with {<text>} in `vue`.
-  // Additionally, the old kebab-cased keys that can still be in the
-  // translations are replaced with camelCased keys the app expects.
-  // TODO: Remove `camel` and warning once all translation strings are updated.
-  // https://github.com/WordPress/openverse/issues/2438
-  if (match.includes("-")) {
-    console.warn("Found kebab-cased key in translation strings:", match)
-  }
-  return `{${kebabToCamel(match)}}`
-}
-
 /**
  * Replace ###<text>### with {<text>}.
  *
- * @param json {any} - the JSON object to replace placeholders in
+ * @param {any} json - the JSON object to replace placeholders in
+ * @param {string} locale - the locale of the JSON object
+ * @param {object} deprecatedKeys - object to store deprecated kebab-cased keys and number of replacements.
  * @return {any} the sanitised JSON object
  */
-const replacePlaceholders = (json) => {
+const replacePlaceholders = (json, locale, deprecatedKeys) => {
   if (json === null) {
     return null
   }
+
+  /**
+   * Replaces ###<text>### from `po` files with {<text>} in `vue`.
+   * Additionally, the old kebab-cased keys that can still be in the
+   * translations are replaced with camelCased keys the app expects.
+   */
+  function replacer(_, match) {
+    if (match.includes("-")) {
+      deprecatedKeys.count++
+      deprecatedKeys.keys[locale] = [
+        ...(deprecatedKeys.keys[locale] ?? []),
+        match,
+      ]
+    }
+    return `{${kebabToCamel(match)}}`
+  }
+
   if (typeof json === "string") {
     return json.replace(/###([a-zA-Z-]*)###/g, replacer)
   }
   let currentJson = { ...json }
 
   for (const row of Object.entries(currentJson)) {
     let [key, value] = row
-    currentJson[key] = replacePlaceholders(value)
+    currentJson[key] = replacePlaceholders(value, locale, deprecatedKeys)
   }
   return currentJson
 }
@@ -80,9 +87,15 @@ exports.replacePlaceholders = replacePlaceholders
  * Write translation strings to a file in the locale directory
  * @param {string} locale
  * @param {any} rawTranslations
+ * @param {object} deprecatedKeys - object to store deprecated kebab-cased keys and number of replacements.
  */
-exports.writeLocaleFile = (locale, rawTranslations) => {
-  const translations = replacePlaceholders(rawTranslations)
+exports.writeLocaleFile = (locale, rawTranslations, deprecatedKeys) => {
+  const translations = replacePlaceholders(
+    rawTranslations,
+    locale,
+    deprecatedKeys
+  )
+
   return writeFile(
     process.cwd() + `/src/locales/${locale}.json`,
     JSON.stringify(translations, null, 2) + os.EOL