Migrate i18n to crowdin-cli and kolibri-build/kolibri-i18n

.github/dependabot.yml

@@ -21,11 +21,12 @@ updates:
     cooldown:
       default-days: 7
       exclude:
+        - kolibri-build
         - kolibri-constants
         - kolibri-design-system
-        - kolibri-logging
         - kolibri-format
-        - kolibri-tools
+        - kolibri-i18n
+        - kolibri-logging
     groups:
       babel:
         patterns:

.github/workflows/i18n-download.yml

@@ -0,0 +1,87 @@
+name: Download translations from Crowdin
+
+on:
+  workflow_dispatch:
+
+jobs:
+  download:
+    name: Download translations and update files
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v6
+
+      - name: Install uv
+        uses: astral-sh/setup-uv@v7
+        with:
+          python-version: '3.10'
+          activate-environment: "true"
+          enable-cache: "true"
+
+      - name: Install Python dependencies
+        run: uv pip sync requirements.txt
+
+      - name: Use pnpm
+        uses: pnpm/action-setup@v5
+
+      - name: Use Node.js
+        uses: actions/setup-node@v6
+        with:
+          node-version: '20.x'
+          cache: 'pnpm'
+
+      - name: Setup Java for crowdin-cli
+        uses: actions/setup-java@v5
+        with:
+          distribution: 'temurin'
+          java-version: '17'
+
+      - name: Install gettext
+        run: sudo apt-get update && sudo apt-get install -y gettext
+
+      - name: Install JavaScript dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Download translations
+        env:
+          CROWDIN_PERSONAL_TOKEN: ${{ secrets.CROWDIN_API_KEY }}
+        run: make i18n-download
+
+      - name: Generate App Token
+        id: generate-token
+        uses: actions/create-github-app-token@v3
+        with:
+          app-id: ${{ secrets.LE_BOT_APP_ID }}
+          private-key: ${{ secrets.LE_BOT_PRIVATE_KEY }}
+
+      - name: Create Pull Request
+        uses: peter-evans/create-pull-request@v8
+        with:
+          token: ${{ steps.generate-token.outputs.token }}
+          commit-message: |
+            Update translations from Crowdin
+
+            This includes:
+            - Updated translation files (.po and .json)
+            - Compiled Django messages (.mo files)
+            - Updated frontend i18n files
+          branch: i18n-update-${{ github.ref_name }}
+          base: ${{ github.ref_name }}
+          delete-branch: true
+          title: 'Update translations from Crowdin for ${{ github.ref_name }}'
+          body: |
+            ## Summary of changes
+
+            This PR updates translations downloaded from Crowdin.
+
+            ### Changes included:
+            - Updated translation files (`.po` and `.json`)
+            - Compiled Django messages (`.mo` files)
+            - Updated frontend i18n files
+
+            ### Testing checklist:
+            - [ ] Verify that translations are not obviously empty or untranslated in the message files
+            - [ ] Switch to a few different languages and navigate the app
+          labels: |
+            i18n
+            TAG: user strings

.github/workflows/i18n-upload.yml

@@ -0,0 +1,50 @@
+name: Upload translations to Crowdin
+
+on:
+  workflow_dispatch:
+
+jobs:
+  upload:
+    name: Extract and upload strings to Crowdin
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v6
+
+      - name: Install uv
+        uses: astral-sh/setup-uv@v7
+        with:
+          python-version: '3.10'
+          activate-environment: "true"
+          enable-cache: "true"
+
+      - name: Install Python dependencies
+        run: uv pip sync requirements.txt
+
+      - name: Use pnpm
+        uses: pnpm/action-setup@v5
+
+      - name: Use Node.js
+        uses: actions/setup-node@v6
+        with:
+          node-version: '20.x'
+          cache: 'pnpm'
+
+      - name: Setup Java for crowdin-cli
+        uses: actions/setup-java@v5
+        with:
+          distribution: 'temurin'
+          java-version: '17'
+
+      - name: Install gettext
+        run: sudo apt-get update && sudo apt-get install -y gettext
+
+      - name: Install JavaScript dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Extract and upload strings to Crowdin
+        env:
+          CROWDIN_PERSONAL_TOKEN: ${{ secrets.CROWDIN_API_KEY }}
+        run: |
+          make i18n-upload
+          make i18n-pretranslate-approve-all

Makefile

@@ -83,29 +83,39 @@ i18n-django-compilemessages:
 	# finds only the .po files nested there.
 	cd contentcuration && python manage.py compilemessages
 
+CROWDIN_BRANCH ?= unstable
+
 i18n-upload: i18n-extract
-	python node_modules/kolibri-tools/lib/i18n/crowdin.py upload-sources ${branch}
+	pnpm exec crowdin upload sources --branch ${CROWDIN_BRANCH}
 
 i18n-pretranslate:
-	python node_modules/kolibri-tools/lib/i18n/crowdin.py pretranslate ${branch}
+	pnpm exec crowdin pre-translate --branch ${CROWDIN_BRANCH} --translate-untranslated-only --method=tm
 
 i18n-pretranslate-approve-all:
-	python node_modules/kolibri-tools/lib/i18n/crowdin.py pretranslate ${branch} --approve-all
-
-i18n-download-translations:
-	python node_modules/kolibri-tools/lib/i18n/crowdin.py rebuild-translations ${branch}
-	python node_modules/kolibri-tools/lib/i18n/crowdin.py download-translations ${branch}
-	pnpm exec kolibri-tools i18n-code-gen -- --output-dir ./contentcuration/contentcuration/frontend/shared/i18n
+	pnpm exec crowdin pre-translate --branch ${CROWDIN_BRANCH} --translate-untranslated-only --method=tm --auto-approve-option=all
+
+i18n-download-translations: i18n-extract-frontend
+	touch contentcuration/locale/.crowdin-download-marker
+	pnpm exec crowdin download --branch ${CROWDIN_BRANCH}
+	@if [ -z "$$(find contentcuration/locale/*/LC_MESSAGES -type f \( -name '*.po' -o -name '*.csv' \) -newer contentcuration/locale/.crowdin-download-marker 2>/dev/null)" ]; then \
+		echo "❌ ERROR: No translation files were downloaded - Crowdin download may have failed silently"; \
+		echo "Check the output above for errors during the download process"; \
+		rm -f contentcuration/locale/.crowdin-download-marker; \
+		exit 1; \
+	fi
+	@echo "✅ Translation files downloaded successfully"
+	rm -f contentcuration/locale/.crowdin-download-marker
+	pnpm exec kolibri-i18n code-gen --output-dir ./contentcuration/contentcuration/frontend/shared/i18n
 	$(MAKE) i18n-django-compilemessages
-	pnpm exec kolibri-tools i18n-create-message-files -- --namespace contentcuration --searchPath ./contentcuration/contentcuration/frontend
+	pnpm exec kolibri-i18n create-message-files --namespace contentcuration --searchPath ./contentcuration/contentcuration/frontend
 
 i18n-download: i18n-download-translations
 
 i18n-download-glossary:
-	python node_modules/kolibri-tools/lib/i18n/crowdin.py download-glossary
+	pnpm exec crowdin glossary download
 
 i18n-upload-glossary:
-	python node_modules/kolibri-tools/lib/i18n/crowdin.py upload-glossary
+	pnpm exec crowdin glossary upload
 
 ###############################################################
 # END I18N COMMANDS ###########################################

babel.config.js

@@ -1 +1 @@
-module.exports = require('kolibri-tools/babel.config');
+module.exports = require('kolibri-build/babel.config');

contentcuration/contentcuration/frontend/administration/components/sidePanels/__tests__/ReviewSubmissionSidePanel.spec.js

@@ -153,7 +153,7 @@ describe('ReviewSubmissionSidePanel', () => {
     expect(wrapper.find('[data-test="languages"]').text()).toBe('English, Czech');
     expect(wrapper.find('[data-test="categories"]').text()).toBe('School, Algebra');
     expect(wrapper.find('[data-test="licenses"]').text()).toBe('CC BY, CC BY-SA');
-    expect(wrapper.findComponent(CommunityLibraryStatusChip).attributes('status')).toEqual(
+    expect(wrapper.findComponent(CommunityLibraryStatusChip).props('status')).toEqual(
       submission.status,
     );
     expect(wrapper.find('[data-test="submission-notes"]').text()).toBe(submission.description);

contentcuration/contentcuration/frontend/channelEdit/components/sidePanels/SubmitToCommunityLibrarySidePanel/LoadingText.vue

@@ -6,12 +6,11 @@
       class="loader-wrapper"
     >
       <KCircularLoader :size="16" />
-      {{ $tr('checking') }}
     </div>
     <div v-else-if="finishedLoading">
       <slot></slot>
     </div>
-    <div v-else>{{ $tr('error') }}</div>
+    <div v-else>{{ communityChannelsStrings.$tr('loadError') }}</div>
   </div>
   <div v-else><KEmptyPlaceholder /></div>
 
@@ -20,6 +19,8 @@
 
 <script setup>
 
+  import { communityChannelsStrings } from 'shared/strings/communityChannelsStrings';
+
   defineProps({
     loading: {
       type: Boolean,
@@ -39,18 +40,6 @@
 </script>
 
 
-<script>
-
-  export default {
-    $trs: {
-      checking: 'Checking...',
-      error: 'Error loading data.',
-    },
-  };
-
-</script>
-
-
 <style scoped lang="scss">
 
   .loader-wrapper {

contentcuration/contentcuration/frontend/channelEdit/components/sidePanels/SubmitToCommunityLibrarySidePanel/__tests__/SubmitToCommunityLibrarySidePanel.spec.js

@@ -431,7 +431,7 @@ describe('SubmitToCommunityLibrarySidePanel', () => {
         });
 
         const statusChip = wrapper.findComponent(CommunityLibraryStatusChip);
-        expect(statusChip.attributes('status')).toBe(chipStatus);
+        expect(statusChip.props('status')).toBe(chipStatus);
       });
     }
 

contentcuration/contentcuration/frontend/shared/i18n/index.js

@@ -190,7 +190,7 @@ export function crossComponentTranslator(Component) {
   return new Translator(Component.name, Component.$trs);
 }
 
-function _setUpVueIntl() {
+async function _setUpVueIntl() {
   /**
    * Use the vue-intl plugin.
    *
@@ -213,7 +213,12 @@ function _setUpVueIntl() {
   if (window.ALL_MESSAGES) {
     Vue.registerMessages(currentLanguage, window.ALL_MESSAGES);
   }
-  importVueIntlLocaleData().forEach(localeData => VueIntl.addLocaleData(localeData));
+
+  // Load vue-intl locale data asynchronously for current language
+  const vueIntlLanguageCode = languageIdToCode(currentLanguage);
+  const module = await importVueIntlLocaleData(vueIntlLanguageCode);
+  const localeData = module.default || module;
+  VueIntl.addLocaleData(localeData);
 
   _i18nReady = true;
 }
@@ -229,7 +234,7 @@ export function updateTabTitle(title) {
   }
 }
 
-export function i18nSetup(skipPolyfill = false) {
+export async function i18nSetup(skipPolyfill = false) {
   /**
    * Load fonts, app strings, and Intl polyfills
    **/
@@ -250,38 +255,18 @@ export function i18nSetup(skipPolyfill = false) {
 
   // If the browser doesn't support the Intl polyfill, we retrieve that and
   // the modules need to wait until that happens.
-  return new Promise((resolve, reject) => {
-    if (Object.prototype.hasOwnProperty.call(global, 'Intl') || skipPolyfill) {
-      _setUpVueIntl();
-      resolve();
-    } else {
-      Promise.all([
-        new Promise(res => {
-          require.ensure(
-            ['intl'],
-            require => {
-              res(() => require('intl'));
-            },
-            'intl',
-          );
-        }),
-        importIntlLocale(currentLanguage),
-      ]).then(
-        // eslint-disable-line
-        ([requireIntl, requireIntlLocaleData]) => {
-          requireIntl(); // requireIntl must run before requireIntlLocaleData
-          requireIntlLocaleData();
-          _setUpVueIntl();
-          resolve();
-        },
-        error => {
-          // eslint-disable-next-line no-console
-          console.error('An error occurred trying to setup Internationalization', error);
-          reject();
-        },
-      );
+  if (Object.prototype.hasOwnProperty.call(global, 'Intl') || skipPolyfill) {
+    await _setUpVueIntl();
+  } else {
+    try {
+      await Promise.all([import('intl'), importIntlLocale(currentLanguage)]);
+      await _setUpVueIntl();
+    } catch (error) {
+      // eslint-disable-next-line no-console
+      console.error('An error occurred trying to setup Internationalization', error);
+      throw error;
     }
-  });
+  }
 }
 
 /**