refactor: using ui translations from crowdin (#2442)

* refactor: using ui translations from crowdin

* move tasks

* fix tests

.github/workflows/ci.yml

@@ -83,6 +83,7 @@ jobs:
         run: pnpm recursive install --frozen-lockfile --ignore-scripts
       - name: Lint
         run: pnpm format:check
+
   build:
     runs-on: ubuntu-latest
     name: build
@@ -101,6 +102,12 @@ jobs:
           key: pnpm-${{ hashFiles('pnpm-lock.yaml') }}     
       - name: Install
         run: pnpm recursive install --frozen-lockfile --ignore-scripts
+      - name: crowdin download
+        env:
+          CROWDIN_VERDACCIO_PROJECT_ID: ${{ secrets.CROWDIN_VERDACCIO_PROJECT_ID }}
+          CROWDIN_VERDACCIO_API_KEY: ${{ secrets.CROWDIN_VERDACCIO_API_KEY }}
+          CONTEXT: production
+        run: pnpm crowdin:download        
       - name: build
         run: pnpm build
       - name: tar packages

.gitignore

@@ -36,6 +36,8 @@ packages/standalone/dist/
 packages/plugins/ui-theme/static
 /packages/plugins/ui-theme/src/i18n/crowdin/*
 !/packages/plugins/ui-theme/src/i18n/crowdin/en-US.json
+!/packages/plugins/ui-theme/src/i18n/crowdin/*.md
+
 
 # CI Pnpm cache
 .pnpm-store/

packages/plugins/ui-theme/src/App/Header/Header.test.tsx

@@ -10,7 +10,7 @@ import {
 } from 'verdaccio-ui/utils/test-react-testing-library';
 
 import { AppContextProvider } from '../../App';
-import translationEN from '../../i18n/translations/en-US.json';
+import translationEN from '../../i18n/crowdin/en-US.json';
 
 import Header from './Header';
 

packages/plugins/ui-theme/src/i18n/config.ts

@@ -8,9 +8,27 @@ import {
   listLanguagesAsString,
 } from './enabledLanguages';
 
+/**
+ * In development mode translations files might be not available,
+ * crowdin translations are only available in CI.
+ */
+function loadTranslationFile(lng) {
+  try {
+    return require(`./crowdin/${lng}/en-US.json`);
+  } catch {
+    // eslint-disable-next-line no-console
+    console.error(`language ${lng} file not found, fallback to en-US`);
+    // in case the file is not there, fallback to en-US
+    return require(`./crowdin/en-US.json`);
+  }
+}
+
 const languages = listLanguages.reduce((acc, item: LanguageConfiguration) => {
   acc[item.lng] = {
-    translation: require(`./translations/${item.lng}.json`),
+    translation:
+      item.lng === DEFAULT_LANGUAGE
+        ? require(`./crowdin/en-US.json`)
+        : loadTranslationFile(item.lng),
   };
   return acc;
 }, {});

packages/plugins/ui-theme/src/i18n/crowdin/ABOUT_TRANSLATIONS.md

@@ -0,0 +1,13 @@
+## Translate UI Strings
+
+If you are willing to translate User Interfances strings, are located in the `crowdin` project which is available [here](https://crowdin.com/project/verdaccio) at `packages/plugins/src/i18n/crowdin/en-US.json`.
+
+### Requirements
+
+- Need a crowdin account, use your GitHub account for fast access as an option.
+
+### Adding a new language to the UI
+
+- If the language is not available, ask in the Discord channel to enable it, that will be pretty fast.
+- After you have translated the strings, add to `packages/plugins/ui-theme/src/i18n/enabledLanguages.ts` the configuration for the new language.
+- In development mode the file must not be available since you need admin credentials to download translations, as a work around, create a folder withing the `crowdin` folder eg: `/packages/plugins/ui-theme/src/i18n/crowdin/fr-FR/en-US.json` and then will be available for testing. If the language is not found, will fallback to `en-US`.

packages/plugins/ui-theme/src/pages/Version/DetailContainer/Versions/Versions.test.tsx

@@ -3,7 +3,7 @@ import { MemoryRouter } from 'react-router-dom';
 
 import { render, cleanup } from 'verdaccio-ui/utils/test-react-testing-library';
 
-import translationEN from '../../../../i18n/translations/en-US.json';
+import translationEN from '../../../../i18n/crowdin/en-US.json';
 import { DetailContext } from '../../context';
 import { DetailContextProps } from '../../version-config';
 

packages/plugins/ui-theme/src/pages/Version/Version.test.tsx

@@ -4,7 +4,7 @@ import { MemoryRouter } from 'react-router';
 
 import { render } from 'verdaccio-ui/utils/test-react-testing-library';
 
-import translationEN from '../../i18n/translations/en-US.json';
+import translationEN from '../../i18n/crowdin/en-US.json';
 
 import data from './__partials__/data.json';
 import { DetailContext } from './context';

packages/plugins/ui-theme/src/pages/home/PackageList/Help/__snapshots__/Help.test.tsx.snap

@@ -133,7 +133,7 @@ exports[`<Help /> component should load the component in default state 1`] = `
     <span
       class="MuiTypography-root MuiTypography-body2"
     >
-      3. Refresh this page.
+      3. Refresh this page
     </span>
   </div>
   <div