Translate each language to their own language (#10419)

* Translate each language to their own language

* Playwright tests

src/frontend/src/contexts/LanguageContext.tsx

@@ -1,5 +1,4 @@
 import { i18n } from '@lingui/core';
-import { t } from '@lingui/core/macro';
 import { I18nProvider } from '@lingui/react';
 import { LoadingOverlay, Text } from '@mantine/core';
 import { type JSX, useEffect, useRef, useState } from 'react';
@@ -19,44 +18,44 @@ export const defaultLocale = 'en';
  */
 export const getSupportedLanguages = (): Record<string, string> => {
   return {
-    ar: t`Arabic`,
+    ar: 'العربية',
-    bg: t`Bulgarian`,
+    bg: 'Български',
-    cs: t`Czech`,
+    cs: 'Čeština',
-    da: t`Danish`,
+    da: 'Dansk',
-    de: t`German`,
+    de: 'Deutsch',
-    el: t`Greek`,
+    el: 'Ελληνικά',
-    en: t`English`,
+    en: 'English',
-    es: t`Spanish`,
+    es: 'Español',
-    es_MX: t`Spanish (Mexican)`,
+    es_MX: 'Español (México)',
-    et: t`Estonian`,
+    et: 'Eesti',
-    fa: t`Farsi / Persian`,
+    fa: 'فارسی',
-    fi: t`Finnish`,
+    fi: 'Suomi',
-    fr: t`French`,
+    fr: 'Français',
-    he: t`Hebrew`,
+    he: 'עברית',
-    hi: t`Hindi`,
+    hi: 'हिन्दी',
-    hu: t`Hungarian`,
+    hu: 'Magyar',
-    it: t`Italian`,
+    it: 'Italiano',
-    ja: t`Japanese`,
+    ja: '日本語',
-    ko: t`Korean`,
+    ko: '한국어',
-    lt: t`Lithuanian`,
+    lt: 'Lietuvių',
-    lv: t`Latvian`,
+    lv: 'Latviešu',
-    nl: t`Dutch`,
+    nl: 'Nederlands',
-    no: t`Norwegian`,
+    no: 'Norsk',
-    pl: t`Polish`,
+    pl: 'Polski',
-    pt: t`Portuguese`,
+    pt: 'Português',
-    pt_BR: t`Portuguese (Brazilian)`,
+    pt_BR: 'Português (Brasil)',
-    ro: t`Romanian`,
+    ro: 'Română',
-    ru: t`Russian`,
+    ru: 'Русский',
-    sk: t`Slovak`,
+    sk: 'Slovenčina',
-    sl: t`Slovenian`,
+    sl: 'Slovenščina',
-    sr: t`Serbian`,
+    sr: 'Српски',
-    sv: t`Swedish`,
+    sv: 'Svenska',
-    th: t`Thai`,
+    th: 'ไทย',
-    tr: t`Turkish`,
+    tr: 'Türkçe',
-    uk: t`Ukrainian`,
+    uk: 'Українська',
-    vi: t`Vietnamese`,
+    vi: 'Tiếng Việt',
-    zh_Hans: t`Chinese (Simplified)`,
+    zh_Hans: '中文（简体）',
-    zh_Hant: t`Chinese (Traditional)`
+    zh_Hant: '中文（繁體）'
   };
 };
 
@@ -78,7 +77,14 @@ export function LanguageContext({
   useEffect(() => {
     isMounted.current = true;
 
-    activateLocale(language)
+    let lang = language;
+
+    // Ensure that the selected language is supported
+    if (!Object.keys(getSupportedLanguages()).includes(lang)) {
+      lang = defaultLocale;
+    }
+
+    activateLocale(lang)
       .then(() => {
         if (isMounted.current) setLoadedState('loaded');
 
@@ -90,8 +96,8 @@ export function LanguageContext({
          */
         const locales: (string | undefined)[] = [];
 
-        if (language != 'pseudo-LOCALE') {
+        if (lang != 'pseudo-LOCALE') {
-          locales.push(language);
+          locales.push(lang);
         }
 
         if (!!server.default_locale) {

src/frontend/tests/pui_settings.spec.ts

@@ -91,6 +91,14 @@ test('Settings - User', async ({ browser }) => {
   await page.getByText('Account Details').waitFor();
   await page.getByText('Profile Details').waitFor();
 
+  // Language selection
+  await page.getByRole('textbox', { name: 'Select language' }).click();
+  await page.getByRole('option', { name: 'العربية' }).waitFor();
+  await page.getByRole('option', { name: 'Deutsch' }).waitFor();
+  await page.getByRole('option', { name: 'English' }).waitFor();
+  await page.getByRole('option', { name: 'Español', exact: true }).waitFor();
+  await page.getByRole('option', { name: '日本語' }).waitFor();
+
   await loadTab(page, 'Security');
   await page.getByRole('button', { name: 'Single Sign On' }).waitFor();
   await page.getByRole('button', { name: 'Access Tokens' }).waitFor();