feat(translation): connect with ifrc translation service

Author: frozenhelium

.github/workflows/ci.yml

@@ -13,6 +13,8 @@ env:
   APP_RISK_API_ENDPOINT: 'https://go-risk-staging.northeurope.cloudapp.azure.com/api/v1/'
   APP_TINY_API_KEY: 'dummy-api-key'
   APP_TITLE: 'IFRC Go Test'
+  APP_TRANSLATION_API_ENDPOINT: 'https://ifrc-translationapi.azurewebsites.net/'
+  APP_TRANSLATION_API_KEY: 'dummy-translation-api-key'
 
 concurrency:
   group: ${{ github.workflow }}-${{ github.ref }}

app/env.ts

@@ -16,6 +16,10 @@ export default defineConfig({
         return value as ('production' | 'staging' | 'testing' | `alpha-${number}` | 'development' | 'APP_ENVIRONMENT_PLACEHOLDER');
     },
     APP_API_ENDPOINT: Schema.string({ format: 'url', protocol: true, tld: false }),
+
+    APP_TRANSLATION_API_ENDPOINT: Schema.string({ format: 'url', protocol: true, tld: false }),
+    APP_TRANSLATION_API_KEY: Schema.string(),
+
     APP_ADMIN_URL: Schema.string.optional({ format: 'url', protocol: true, tld: false }),
     APP_MAPBOX_ACCESS_TOKEN: Schema.string(),
     APP_TINY_API_KEY: Schema.string(),

app/package.json

@@ -13,12 +13,16 @@
         "translatte": "tsx scripts/translatte/main.ts",
         "translatte:generate": "pnpm translatte generate-migration ../translationMigrations ./src/**/i18n.json ../packages/ui/src/**/i18n.json",
         "translatte:lint": "pnpm translatte lint ./src/**/i18n.json ../packages/ui/src/**/i18n.json",
-        "initialize:type": "mkdir -p generated/ && pnpm initialize:type:go-api && pnpm initialize:type:risk-api",
+        "translatte:lint-migrations": "pnpm translatte lint-migrations ../translationMigrations",
+        "initialize:type": "mkdir -p generated/ && pnpm initialize:type:go-api && pnpm initialize:type:risk-api && pnpm initialize:type:translations",
         "initialize:type:go-api": "test -f ./generated/types.ts && true || cp types.stub.ts ./generated/types.ts",
         "initialize:type:risk-api": "test -f ./generated/riskTypes.ts && true || cp types.stub.ts ./generated/riskTypes.ts",
-        "generate:type": "pnpm generate:type:go-api && pnpm generate:type:risk-api",
+        "initialize:type:translations": "test -f ./generated/translationTypes.ts && true || cp types.stub.ts ./generated/translationTypes.ts",
+        "generate:type": "pnpm generate:type:go-api && pnpm generate:type:risk-api && pnpm generate:type:translations",
         "generate:type:go-api": "openapi-typescript ../go-api/assets/openapi-schema.yaml -o ./generated/types.ts --alphabetize",
-        "generate:type:risk-api": "dotenv -- cross-var openapi-typescript ../go-risk-module-api/openapi-schema.yaml -o ./generated/riskTypes.ts --alphabetize",
+        "generate:type:risk-api": "openapi-typescript ../go-risk-module-api/openapi-schema.yaml -o ./generated/riskTypes.ts --alphabetize",
+        "generate:type:translations": "dotenv -- cross-var openapi-typescript \"%APP_TRANSLATION_API_ENDPOINT%swagger/v1/swagger.json\" -o ./generated/translationTypes.ts --alphabetize",
+        "postgenerate:type:translations": "tsx scripts/fix-generated.ts",
         "prestart": "pnpm initialize:type",
         "start": "pnpm -F @ifrc-go/ui build && vite",
         "prebuild": "pnpm initialize:type",
@@ -29,7 +33,7 @@
         "prelint:js": "pnpm initialize:type",
         "lint:js": "eslint src",
         "lint:css": "stylelint \"./src/**/*.css\"",
-        "lint:translation": "pnpm translatte:lint",
+        "lint:translation": "pnpm translatte:lint && pnpm translatte:lint-migrations",
         "lint": "pnpm lint:js && pnpm lint:css && pnpm lint:translation",
         "lint:fix": "pnpm lint:js --fix && pnpm lint:css --fix",
         "test": "vitest",
@@ -48,7 +52,7 @@
         "@togglecorp/toggle-request": "^1.0.0-beta.3",
         "@turf/bbox": "^6.5.0",
         "@turf/buffer": "^6.5.0",
-        "exceljs": "^4.3.0",
+        "exceljs": "^4.4.0",
         "file-saver": "^2.0.5",
         "html-to-image": "^1.11.11",
         "mapbox-gl": "^1.13.0",
@@ -57,7 +61,8 @@
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-router-dom": "^6.18.0",
-        "sanitize-html": "^2.10.0"
+        "sanitize-html": "^2.10.0",
+        "xlsx": "^0.18.5"
     },
     "devDependencies": {
         "@eslint/eslintrc": "^3.2.0",

app/scripts/fix-generated.ts

@@ -0,0 +1,9 @@
+import { readFileSync, writeFileSync } from 'fs';
+
+const path = 'generated/translationTypes.ts';
+
+const content = readFileSync(path, 'utf-8');
+
+// If already added, skip
+writeFileSync(path, `// eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-nocheck\n${content}`);
+console.log('✔ Added // @ts-nocheck to translationTypes.ts');

app/scripts/translatte/commands/applyMigrations.ts

@@ -129,7 +129,7 @@ async function applyMigrations(
 
     const migrationFilesAttrs = await getMigrationFilesAttrs(projectPath, migrationFilePath);
     const selectedMigrationFilesAttrs = from
-        ? migrationFilesAttrs.filter((item) => (item.migrationName > from))
+        ? migrationFilesAttrs.filter((item) => (item.migrationFileName > from))
         : migrationFilesAttrs;
 
     console.info(`Found ${selectedMigrationFilesAttrs.length} migration files`);
@@ -139,7 +139,7 @@ async function applyMigrations(
     }
 
     const selectedMigrations = await readMigrations(
-        selectedMigrationFilesAttrs.map((migration) => migration.fileName),
+        selectedMigrationFilesAttrs.map((migration) => migration.filePath),
     );
 
     const lastMigration = selectedMigrations[selectedMigrations.length - 1];

app/scripts/translatte/commands/clearServerStrings.ts

@@ -1,11 +1,11 @@
-import { listToGroupList } from "@togglecorp/fujs";
+import { isTruthyString, listToGroupList } from "@togglecorp/fujs";
 import { fetchServerState, postLanguageStrings, writeFilePromisify } from "../utils";
 
 async function clearServerStrings(apiUrl: string, authToken: string) {
     const serverStrings = await fetchServerState(apiUrl, authToken);
 
     const bulkActions = listToGroupList(
-        serverStrings,
+        serverStrings.filter(({ page_name }) => isTruthyString(page_name)),
         ({ language }) => language,
         ({ key, page_name }) => ({
             action: "delete" as const,
@@ -19,7 +19,7 @@ async function clearServerStrings(apiUrl: string, authToken: string) {
         response: object,
     }[] = [];
 
-    console.log('Pusing delete actions for en...')
+    console.log('Pushing delete actions for en...')
     const enResponse = await postLanguageStrings(
         'en',
         bulkActions.en,
@@ -31,7 +31,7 @@ async function clearServerStrings(apiUrl: string, authToken: string) {
     logs.push({ responseFor: 'en', response: enResponseJson });
 
 
-    console.log('Pusing delete actions for fr...')
+    console.log('Pushing delete actions for fr...')
     const frResponse = await postLanguageStrings(
         'fr',
         bulkActions.fr,
@@ -42,7 +42,7 @@ async function clearServerStrings(apiUrl: string, authToken: string) {
     const frResponseJson = await frResponse.json();
     logs.push({ responseFor: 'fr', response: frResponseJson });
 
-    console.log('Pusing delete actions for es...')
+    console.log('Pushing delete actions for es...')
     const esResponse = await postLanguageStrings(
         'es',
         bulkActions.es,
@@ -52,7 +52,7 @@ async function clearServerStrings(apiUrl: string, authToken: string) {
     const esResponseJson = await esResponse.json();
     logs.push({ responseFor: 'es', response: esResponseJson });
 
-    console.log('Pusing delete actions for ar...')
+    console.log('Pushing delete actions for ar...')
     const arResponse = await postLanguageStrings(
         'ar',
         bulkActions.ar,

app/scripts/translatte/commands/exportServerStringsToExcel.ts

@@ -1,7 +1,7 @@
 import xlsx from 'exceljs';
 
 import { fetchServerState } from "../utils";
-import { isFalsyString, listToGroupList, listToMap, mapToList } from '@togglecorp/fujs';
+import { isFalsyString, isTruthyString, listToGroupList, listToMap, mapToList } from '@togglecorp/fujs';
 
 async function exportServerStringsToExcel(
     apiUrl: string,
@@ -35,7 +35,7 @@ async function exportServerStringsToExcel(
 
     const keyGroupedStrings = mapToList(
         listToGroupList(
-            serverStrings,
+            serverStrings.filter(({ page_name, key }) => isTruthyString(page_name) && isTruthyString(key)),
             ({ page_name, key }) => `${page_name}:${key}`,
         ),
         (list) => {

app/scripts/translatte/commands/generateMigration.ts

@@ -132,7 +132,7 @@ async function generate(
     const selectedMigrationFilesAttrs = migrationFilesAttrs;
     console.info(`Found ${selectedMigrationFilesAttrs.length} migration files`);
     const selectedMigrations = await readMigrations(
-        selectedMigrationFilesAttrs.map((migration) => migration.fileName),
+        selectedMigrationFilesAttrs.map((migration) => migration.filePath),
     );
     const mergedMigrationActions = merge(
         selectedMigrations.map((migration) => migration.content),
@@ -170,7 +170,7 @@ async function generate(
     const lastMigration = migrationFilesAttrs[migrationFilesAttrs.length - 1];
 
     const migrationContent: MigrationFileContent = {
-        parent: lastMigration?.migrationName,
+        parent: lastMigration?.migrationFileName,
         actions: migrationActionItems,
     }
 

app/scripts/translatte/commands/lintMigrations.ts

@@ -0,0 +1,28 @@
+import { listToGroupList } from '@togglecorp/fujs';
+import { getMigrationFilesAttrs } from '../utils';
+
+async function lintMigrations(projectPath: string, path: string) {
+    const migrationFileAttrs = await getMigrationFilesAttrs(projectPath, path);
+    console.info(`Found ${migrationFileAttrs.length} migration files.`);
+
+    const migrationGroups = listToGroupList(
+        migrationFileAttrs,
+        ({ migrationName }) => migrationName,
+    );
+
+    const duplicates = Object.values(migrationGroups).filter((group) => group.length > 1);
+
+    if (duplicates.length > 0) {
+        const duplicateStr = duplicates.map((duplicate) => (
+            duplicate.map(({ migrationName }) => migrationName).join(' <> ')
+        )).join('\n');
+
+        console.info(duplicateStr);
+
+        throw `Error: found divirging migrations!`;
+    }
+
+    console.info('All good! No divirging migrations!');
+}
+
+export default lintMigrations;

app/scripts/translatte/commands/listMigrations.test.ts

@@ -37,12 +37,12 @@ testWithTmpDir('test listMigrations', async ({ tmpdir }) => {
         (await getMigrationFilesAttrs(
             tmpdir,
             'migrations',
-        )).map((item) => ({ ...item, fileName: undefined })),
+        )).map(({ migrationFileName, num, timestamp }) => ({ migrationFileName, num, timestamp })),
     ).toEqual([
-        { migrationName: '001-1000000000000.json', num: '001', timestamp: '1000000000000' },
-        { migrationName: '002-1000000000000.json', num: '002', timestamp: '1000000000000' },
-        { migrationName: '003-1000000000000.json', num: '003', timestamp: '1000000000000' },
-        { migrationName: '004-1000000000000.json', num: '004', timestamp: '1000000000000' },
-        { migrationName: '005-1000000000000.json', num: '005', timestamp: '1000000000000' },
+        { migrationFileName: '001-1000000000000.json', num: '001', timestamp: '1000000000000' },
+        { migrationFileName: '002-1000000000000.json', num: '002', timestamp: '1000000000000' },
+        { migrationFileName: '003-1000000000000.json', num: '003', timestamp: '1000000000000' },
+        { migrationFileName: '004-1000000000000.json', num: '004', timestamp: '1000000000000' },
+        { migrationFileName: '005-1000000000000.json', num: '005', timestamp: '1000000000000' },
     ]);
 });