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`,
-    bg: t`Bulgarian`,
-    cs: t`Czech`,
-    da: t`Danish`,
-    de: t`German`,
-    el: t`Greek`,
-    en: t`English`,
-    es: t`Spanish`,
-    es_MX: t`Spanish (Mexican)`,
-    et: t`Estonian`,
-    fa: t`Farsi / Persian`,
-    fi: t`Finnish`,
-    fr: t`French`,
-    he: t`Hebrew`,
-    hi: t`Hindi`,
-    hu: t`Hungarian`,
-    it: t`Italian`,
-    ja: t`Japanese`,
-    ko: t`Korean`,
-    lt: t`Lithuanian`,
-    lv: t`Latvian`,
-    nl: t`Dutch`,
-    no: t`Norwegian`,
-    pl: t`Polish`,
-    pt: t`Portuguese`,
-    pt_BR: t`Portuguese (Brazilian)`,
-    ro: t`Romanian`,
-    ru: t`Russian`,
-    sk: t`Slovak`,
-    sl: t`Slovenian`,
-    sr: t`Serbian`,
-    sv: t`Swedish`,
-    th: t`Thai`,
-    tr: t`Turkish`,
-    uk: t`Ukrainian`,
-    vi: t`Vietnamese`,
-    zh_Hans: t`Chinese (Simplified)`,
-    zh_Hant: t`Chinese (Traditional)`
+    ar: 'العربية',
+    bg: 'Български',
+    cs: 'Čeština',
+    da: 'Dansk',
+    de: 'Deutsch',
+    el: 'Ελληνικά',
+    en: 'English',
+    es: 'Español',
+    es_MX: 'Español (México)',
+    et: 'Eesti',
+    fa: 'فارسی',
+    fi: 'Suomi',
+    fr: 'Français',
+    he: 'עברית',
+    hi: 'हिन्दी',
+    hu: 'Magyar',
+    it: 'Italiano',
+    ja: '日本語',
+    ko: '한국어',
+    lt: 'Lietuvių',
+    lv: 'Latviešu',
+    nl: 'Nederlands',
+    no: 'Norsk',
+    pl: 'Polski',
+    pt: 'Português',
+    pt_BR: 'Português (Brasil)',
+    ro: 'Română',
+    ru: 'Русский',
+    sk: 'Slovenčina',
+    sl: 'Slovenščina',
+    sr: 'Српски',
+    sv: 'Svenska',
+    th: 'ไทย',
+    tr: 'Türkçe',
+    uk: 'Українська',
+    vi: 'Tiếng Việt',
+    zh_Hans: '中文（简体）',
+    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') {
-          locales.push(language);
+        if (lang != 'pseudo-LOCALE') {
+          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();