ci: Better locale coverage comment (#2616)

Co-authored-by: kbariotis <konmpar@gmail.com>

.github/workflows/locales-coverage.yml

@@ -49,22 +49,7 @@ jobs:
       - name: Construct comment body
         id: getCommentBody
         run: |
-          locales_above_threshold=$(cat src/locales/percentages.json | jq -r 'to_entries[] | select(.value > 85) | "|\(.key)|\(.value)|"')
+          body=$(npm run locales-coverage:comment)
-          locales_below_threshold=$(cat src/locales/percentages.json | jq -r 'to_entries[] | select(.value <= 85) | "|\(.key)|\(.value)|"')
-          header=$(echo "
-          ## Languages check
-          Our translations for every languages should be at least **85%** to appear on Excalidraw. Help us translate them in [Crowdin](https://crowdin.com/project/excalidraw).
-          ")
-          comment_body=$(echo "$header
-          ### Languages over the threshold
-          |Locale|%|
-          |----|----|
-          $locales_above_threshold
-          ### Languages below the threshold
-          |Locale|%|
-          |----|----|
-          $locales_below_threshold
-          ")
           comment_body="${comment_body//'%'/'%25'}"
           comment_body="${comment_body//$'\n'/'%0A'}"
           comment_body="${comment_body//$'\r'/'%0D'}"

package.json

@@ -90,6 +90,7 @@
     "fix:other": "npm run prettier -- --write",
     "fix": "npm run fix:other && npm run fix:code",
     "locales-coverage": "node scripts/build-locales-coverage.js",
+    "locales-coverage:comment": "node scripts/locales-coverage-comment.js",
     "prettier": "prettier \"**/*.{css,scss,json,md,html,yml}\" --ignore-path=.eslintignore",
     "start": "react-scripts start",
     "test:all": "npm run test:typecheck && npm run test:code && npm run test:other && npm run test:app -- --watchAll=false",

scripts/locales-coverage-comment.js

@@ -0,0 +1,171 @@
+const fs = require("fs");
+
+const THRESSHOLD = 85;
+
+const crowdinMap = {
+  "ar-SA": "en-ar",
+  "el-GR": "en-el",
+  "fi-FI": "en-fi",
+  "ja-JP": "en-ja",
+  "bg-BG": "en-bg",
+  "ca-ES": "en-ca",
+  "de-DE": "en-de",
+  "es-ES": "en-es",
+  "fa-IR": "en-fa",
+  "fr-FR": "en-fr",
+  "he-IL": "en-he",
+  "hi-IN": "en-hi",
+  "hu-HU": "en-hu",
+  "id-ID": "en-id",
+  "it-IT": "en-it",
+  "ko-KR": "en-ko",
+  "my-MM": "en-my",
+  "nb-NO": "en-nb",
+  "nl-NL": "en-nl",
+  "nn-NO": "en-nnno",
+  "pl-PL": "en-pl",
+  "pt-PT": "en-pt",
+  "ro-RO": "en-ro",
+  "ru-RU": "en-ru",
+  "sk-SK": "en-sk",
+  "sv-SE": "en-sv",
+  "tr-TR": "en-tr",
+  "uk-UA": "en-uk",
+  "zh-CN": "en-zhcn",
+  "zh-TW": "en-zhtw",
+};
+
+const flags = {
+  "ar-SA": "🇸🇦",
+  "bg-BG": "🇧🇬",
+  "ca-ES": "🇪🇸",
+  "de-DE": "🇩🇪",
+  "el-GR": "🇬🇷",
+  "es-ES": "🇪🇸",
+  "fa-IR": "🇮🇷",
+  "fi-FI": "🇫🇮",
+  "fr-FR": "🇫🇷",
+  "he-IL": "🇮🇱",
+  "hi-IN": "🇮🇳",
+  "hu-HU": "🇭🇺",
+  "id-ID": "🇮🇩",
+  "it-IT": "🇮🇹",
+  "ja-JP": "🇯🇵",
+  "ko-KR": "🇰🇷",
+  "my-MM": "🇲🇲",
+  "nb-NO": "🇳🇴",
+  "nl-NL": "🇳🇱",
+  "nn-NO": "🇳🇴",
+  "pl-PL": "🇵🇱",
+  "pt-PT": "🇵🇹",
+  "ro-RO": "🇷🇴",
+  "ru-RU": "🇷🇺",
+  "sk-SK": "🇸🇰",
+  "sv-SE": "🇸🇪",
+  "tr-TR": "🇹🇷",
+  "uk-UA": "🇺🇦",
+  "zh-CN": "🇨🇳",
+  "zh-TW": "🇹🇼",
+};
+
+const languages = {
+  "ar-SA": "العربية",
+  "bg-BG": "Български",
+  "ca-ES": "Catalan",
+  "de-DE": "Deutsch",
+  "el-GR": "Ελληνικά",
+  "es-ES": "Español",
+  "fa-IR": "فارسی",
+  "fi-FI": "Suomi",
+  "fr-FR": "Français",
+  "he-IL": "עברית",
+  "hi-IN": "हिन्दी",
+  "hu-HU": "Magyar",
+  "id-ID": "Bahasa Indonesia",
+  "it-IT": "Italiano",
+  "ja-JP": "日本語",
+  "ko-KR": "한국어",
+  "my-MM": "Burmese",
+  "nb-NO": "Norsk bokmål",
+  "nl-NL": "Nederlands",
+  "nn-NO": "Norsk nynorsk",
+  "pl-PL": "Polski",
+  "pt-PT": "Português",
+  "ro-RO": "Română",
+  "ru-RU": "Русский",
+  "sk-SK": "Slovenčina",
+  "sv-SE": "Svenska",
+  "tr-TR": "Türkçe",
+  "uk-UA": "Українська",
+  "zh-CN": "简体中文",
+  "zh-TW": "繁體中文",
+};
+
+const percentages = fs.readFileSync(
+  `${__dirname}/../src/locales/percentages.json`,
+);
+const rowData = JSON.parse(percentages);
+
+const coverages = Object.entries(rowData)
+  .sort(([, a], [, b]) => b - a)
+  .reduce((r, [k, v]) => ({ ...r, [k]: v }), {});
+
+const printHeader = () => {
+  let result = "| | Flag | Locale | % |\n";
+  result += "| --: | :--: | -- | --: |";
+  return result;
+};
+
+const printRow = (id, locale, coverage) => {
+  let result = `| ${id} | `;
+
+  result += `${locale in flags ? flags[locale] : ""} | `;
+  const language = locale in languages ? languages[locale] : locale;
+  if (locale in crowdinMap && crowdinMap[locale]) {
+    result += `[${language}](https://crowdin.com/translate/excalidraw/10/${crowdinMap[locale]}) | `;
+  } else {
+    result += `${language} | `;
+  }
+  result += `${coverage} |`;
+  return result;
+};
+
+let passId = 1;
+let notPassId = 1;
+const over = [];
+const under = [];
+
+for (const coverage in coverages) {
+  if (coverage === "en") {
+    continue;
+  }
+  const per = coverages[coverage];
+
+  if (per > THRESSHOLD) {
+    over.push(printRow(passId, coverage, per));
+    passId++;
+  } else {
+    under.push(printRow(notPassId, coverage, per));
+    notPassId++;
+  }
+}
+
+console.info("## Languages check");
+console.info("");
+console.info(
+  `Our translations for every languages should be at least **${THRESSHOLD}%** to appear on Excalidraw. Join our project in [Crowdin](https://crowdin.com/project/excalidraw) and help us translate it in your language.`,
+);
+console.info("");
+console.info("### Languages over the threshold");
+console.info("");
+console.info(printHeader());
+for (const row of over) {
+  console.info(row);
+}
+console.info("");
+console.info("### Languages below the threshold");
+console.info("");
+console.info(printHeader());
+for (const row of under) {
+  console.info(row);
+}