refactor(FR-557): improve language option UX and refactor bug-prone code

react/src/pages/UserSettingsPage.tsx

@@ -9,8 +9,9 @@ import {
 } from '../hooks/useBAISetting';
 import { SettingOutlined } from '@ant-design/icons';
 import { useToggle } from 'ahooks';
-import { Button } from 'antd';
+import { Button, Typography } from 'antd';
 import Card from 'antd/es/card/Card';
+import _ from 'lodash';
 import { useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import { StringParam, useQueryParam, withDefault } from 'use-query-params';
@@ -55,6 +56,39 @@ const UserPreferencesPage = () => {
   const [isOpenShellScriptEditModal, { toggle: toggleShellScriptEditModal }] =
     useToggle(false);
 
+  const languageOptions = [
+    { label: t('language.English'), value: 'en' },
+    { label: t('language.Korean'), value: 'ko' },
+    { label: t('language.Brazilian'), value: 'pt-BR' },
+    { label: t('language.Chinese'), value: 'zh-CN' },
+    {
+      label: t('language.Chinese (Simplified)'),
+      value: 'zh-TW',
+    },
+    { label: t('language.French'), value: 'fr' },
+    { label: t('language.Finnish'), value: 'fi' },
+    { label: t('language.German'), value: 'de' },
+    { label: t('language.Greek'), value: 'el' },
+    { label: t('language.Indonesian'), value: 'id' },
+    { label: t('language.Italian'), value: 'it' },
+    { label: t('language.Japanese'), value: 'ja' },
+    { label: t('language.Mongolian'), value: 'mn' },
+    { label: t('language.Polish'), value: 'pl' },
+    { label: t('language.Portuguese'), value: 'pt' },
+    { label: t('language.Russian'), value: 'ru' },
+    { label: t('language.Spanish'), value: 'es' },
+    { label: t('language.Thai'), value: 'th' },
+    { label: t('language.Turkish'), value: 'tr' },
+    { label: t('language.Vietnamese'), value: 'vi' },
+  ];
+  let defaultLanguage = globalThis.navigator.language;
+  defaultLanguage = _.includes(['zh-CN', 'zh-TW', 'pt-BR'], defaultLanguage)
+    ? defaultLanguage
+    : defaultLanguage.split('-')[0];
+  defaultLanguage =
+    languageOptions.find((item) => item.value === defaultLanguage)?.value ??
+    'en';
+
   const settingGroups: Array<SettingGroup> = [
     {
       title: t('userSettings.Preferences'),
@@ -86,46 +120,34 @@ const UserPreferencesPage = () => {
           title: t('userSettings.Language'),
           description: t('userSettings.DescLanguage'),
           selectProps: {
-            options: [
-              { label: t('language.OSDefault'), value: 'default' },
-              { label: t('language.English'), value: 'en' },
-              { label: t('language.Korean'), value: 'ko' },
-              { label: t('language.Brazilian'), value: 'pt-BR' },
-              { label: t('language.Chinese'), value: 'zh-CN' },
-              {
-                label: t('language.Chinese (Simplified)'),
-                value: 'zh-TW',
-              },
-              { label: t('language.French'), value: 'fr' },
-              { label: t('language.Finnish'), value: 'fi' },
-              { label: t('language.German'), value: 'de' },
-              { label: t('language.Greek'), value: 'el' },
-              { label: t('language.Indonesian'), value: 'id' },
-              { label: t('language.Italian'), value: 'it' },
-              { label: t('language.Japanese'), value: 'ja' },
-              { label: t('language.Mongolian'), value: 'mn' },
-              { label: t('language.Polish'), value: 'pl' },
-              { label: t('language.Portuguese'), value: 'pt' },
-              { label: t('language.Russian'), value: 'ru' },
-              { label: t('language.Spanish'), value: 'es' },
-              { label: t('language.Thai'), value: 'th' },
-              { label: t('language.Turkish'), value: 'tr' },
-              { label: t('language.Vietnamese'), value: 'vi' },
-            ],
+            options: languageOptions.map((item) =>
+              item.value === defaultLanguage
+                ? {
+                    ...item,
+                    label: (
+                      <>
+                        {item.label}&nbsp;
+                        <Typography.Text type="secondary">
+                          ({t('userSettings.Default')})
+                        </Typography.Text>
+                      </>
+                    ),
+                  }
+                : item,
+            ),
             showSearch: true,
           },
-          defaultValue: 'default',
-          value: selectedLanguage || 'default',
+          defaultValue: defaultLanguage,
+          value: selectedLanguage || defaultLanguage,
           setValue: setSelectedLanguage,
           onChange: (value) => {
             setSelectedLanguage(value);
-            const defaultLanguage = globalThis.navigator.language.split('-')[0];
             const event = new CustomEvent('language-changed', {
               detail: {
-                language: value === 'default' ? defaultLanguage : value,
+                language: value,
               },
             });
-            setLanguage(value === 'default' ? defaultLanguage : value);
+            setLanguage(value);
             document.dispatchEvent(event);
             //@ts-ignore
             console.log(globalThis.backendaioptions.get('selected_language'));

resources/i18n/de.json

@@ -1755,6 +1755,7 @@
     "ConfigFilename": "Name der Konfigurationsdatei",
     "CurrentSSHPublicKey": "Aktueller öffentlicher Schlüssel:",
     "DarkMode": "Dunkler Modus",
+    "Default": "Standard",
     "DescAutoLogout": "Melden Sie sich automatisch ab, wenn alle angemeldeten Seiten geschlossen sind, mit Ausnahme von sitzungsbasierten Seiten für Apps (z. B. Jupyter Notebook, Webterminal usw.)",
     "DescAutomaticUpdateCheck": "Benachrichtigen, wenn eine neue Webui-Version veröffentlicht wird. <br /> Wenn das Internet instabil oder offline ist, wird diese Option automatisch deaktiviert. Sie können diesen Schalter umschalten, um die automatische Updateprüfung erneut zu starten.",
     "DescBetaFeatures": "Verwenden Sie Betafunktionen für die Web-Benutzeroberfläche. <br /> Beta-Funktionen können instabil sein. Einige Betafunktionen werden möglicherweise nicht als offizielle Funktionen übernommen.",

resources/i18n/el.json

@@ -1751,6 +1751,7 @@
     "ConfigFilename": "Διαμόρφωση ονόματος αρχείου",
     "CurrentSSHPublicKey": "Τρέχον δημόσιο κλειδί:",
     "DarkMode": "Σκοτεινή λειτουργία",
+    "Default": "Αθέτηση",
     "DescAutoLogout": "Αποσυνδεθείτε αυτόματα εάν όλες οι συνδεδεμένες σελίδες είναι κλειστές εκτός από τις σελίδες που προέρχονται από περίοδο σύνδεσης για εφαρμογές (π.χ. jupyter notebook, web terminal κ.λπ.)",
     "DescAutomaticUpdateCheck": "Ειδοποίηση όταν κυκλοφορήσει μια νέα έκδοση webui. <br /> Όταν το Διαδίκτυο είναι ασταθές ή εκτός σύνδεσης, αυτή η επιλογή θα απενεργοποιηθεί αυτόματα. Μπορείτε να αλλάξετε αυτόν τον διακόπτη για να ξεκινήσετε ξανά τον έλεγχο αυτόματης ενημέρωσης.",
     "DescBetaFeatures": "Χρησιμοποιήστε λειτουργίες beta για διεπαφή χρήστη Ιστού. <br /> Οι λειτουργίες beta ενδέχεται να είναι ασταθείς. Ορισμένες λειτουργίες beta ενδέχεται να μην υιοθετηθούν ως επίσημη λειτουργία.",

resources/i18n/en.json

@@ -1763,6 +1763,7 @@
     "ConfigFilename": "Config file name",
     "CurrentSSHPublicKey": "Current public key: ",
     "DarkMode": "Dark mode",
+    "Default": "Default",
     "DescAutoLogout": "Log out automatically if all logined pages are closed except session originated pages for apps(e.g. jupyter notebook, web terminal, etc.)",
     "DescAutomaticUpdateCheck": "Notify when a new webui version is released.<br />In where the Internet is unstable or offline, this option will be automatically turned off. You can toggle this switch to start the automatic update check again.",
     "DescBetaFeatures": "Use beta features for Web UI.<br />Beta features may be unstable. Some beta features may not be adopted as official feature.",

resources/i18n/es.json

@@ -1755,6 +1755,7 @@
     "ConfigFilename": "Nombre del archivo de configuración",
     "CurrentSSHPublicKey": "Clave pública actual:",
     "DarkMode": "Modo oscuro",
+    "Default": "Por defecto",
     "DescAutoLogout": "Cierre de sesión automático si se cierran todas las páginas de inicio de sesión, excepto las páginas de inicio de sesión para aplicaciones (p. ej., cuaderno jupyter, terminal web, etc.).",
     "DescAutomaticUpdateCheck": "Notificar cuando se publique una nueva versión de webui.<br />En los casos en que Internet sea inestable o esté desconectado, esta opción se desactivará automáticamente. Puede activar este interruptor para iniciar la comprobación de actualización automática de nuevo.",
     "DescBetaFeatures": "Utilice las funciones beta para la interfaz de usuario web.<br />Las funciones beta pueden ser inestables. Es posible que algunas funciones beta no se adopten como funciones oficiales.",

resources/i18n/fi.json

@@ -1753,6 +1753,7 @@
     "ConfigFilename": "Konfigurointitiedoston nimi",
     "CurrentSSHPublicKey": "Nykyinen julkinen avain:",
     "DarkMode": "Tumma tila",
+    "Default": "Laiminlyönti",
     "DescAutoLogout": "Kirjaudu ulos automaattisesti, jos kaikki kirjautuneet sivut suljetaan, lukuun ottamatta sovellusten (esim. jupyter notebook, verkkopääte jne.) istunnon luomia sivuja.",
     "DescAutomaticUpdateCheck": "Ilmoita, kun uusi webui-versio julkaistaan.<br />Jos Internet on epävakaa tai offline, tämä vaihtoehto kytkeytyy automaattisesti pois päältä. Voit vaihtaa tätä kytkintä käynnistääksesi automaattisen päivityksen tarkistuksen uudelleen.",
     "DescBetaFeatures": "Käytä web-käyttöliittymän beta-ominaisuuksia.<br />Beta-ominaisuudet voivat olla epävakaita. Joitakin beta-ominaisuuksia ei ehkä hyväksytä viralliseksi ominaisuudeksi.",

resources/i18n/fr.json

@@ -1755,6 +1755,7 @@
     "ConfigFilename": "Nom du fichier de configuration",
     "CurrentSSHPublicKey": "Clé publique actuelle :",
     "DarkMode": "Mode sombre",
+    "Default": "Défaut",
     "DescAutoLogout": "Déconnectez-vous automatiquement si toutes les pages connectées sont fermées, à l'exception des pages d'origine de session pour les applications (par exemple, bloc-notes jupyter, terminal Web, etc.)",
     "DescAutomaticUpdateCheck": "Avertir lorsqu'une nouvelle version de webui est publiée. <br /> Dans les cas où Internet est instable ou hors ligne, cette option sera automatiquement désactivée. Vous pouvez basculer ce commutateur pour relancer la vérification automatique des mises à jour.",
     "DescBetaFeatures": "Utilisez les fonctionnalités bêta pour l'interface utilisateur Web. <br /> Les fonctionnalités bêta peuvent être instables. Certaines fonctionnalités bêta peuvent ne pas être adoptées comme fonctionnalité officielle.",

resources/i18n/id.json

@@ -1754,6 +1754,7 @@
     "ConfigFilename": "Nama file konfigurasi",
     "CurrentSSHPublicKey": "Kunci publik saat ini: ",
     "DarkMode": "Mode Gelap",
+    "Default": "Bawaan",
     "DescAutoLogout": "Keluar secara otomatis jika semua halaman yang masuk ditutup kecuali halaman yang berasal dari sesi untuk aplikasi (mis. Jupyter notebook, terminal web, dll.)",
     "DescAutomaticUpdateCheck": "Beri tahu saat versi UI web baru dirilis. <br /> Di mana Internet tidak stabil atau offline, opsi ini akan dimatikan secara otomatis. Anda dapat mengaktifkan opsi ini untuk memulai lagi pemeriksaan pembaruan otomatis.",
     "DescBetaFeatures": "Gunakan fitur beta untuk UI Web. <br />Fitur beta mungkin tidak stabil. Beberapa fitur beta mungkin tidak diadopsi sebagai fitur resmi.",

resources/i18n/it.json

@@ -1752,6 +1752,7 @@
     "ConfigFilename": "Nome del file di configurazione",
     "CurrentSSHPublicKey": "Chiave pubblica attuale:",
     "DarkMode": "Modalità scura",
+    "Default": "Predefinito",
     "DescAutoLogout": "Disconnettersi automaticamente se tutte le pagine di accesso vengono chiuse eccetto le pagine originate dalla sessione per le app (ad es.",
     "DescAutomaticUpdateCheck": "Avvisa quando viene rilasciata una nuova versione di webui. <br /> Nei casi in cui Internet è instabile o offline, questa opzione verrà automaticamente disattivata. Puoi attivare questo interruttore per avviare nuovamente il controllo automatico degli aggiornamenti.",
     "DescBetaFeatures": "Utilizza le funzionalità beta per l'interfaccia utente Web. <br /> Le funzionalità beta potrebbero essere instabili. Alcune funzionalità beta potrebbero non essere adottate come funzionalità ufficiali.",

resources/i18n/ja.json

@@ -1754,6 +1754,7 @@
     "ConfigFilename": "構成ファイル名",
     "CurrentSSHPublicKey": "現在の公開鍵：",
     "DarkMode": "ダークモード",
+    "Default": "デフォルト",
     "DescAutoLogout": "アプリのセッション開始ページ（jupyterノートブック、Webターミナルなど）を除き、ログインしたすべてのページが閉じている場合は、自動的にログアウトします。",
     "DescAutomaticUpdateCheck": "新しいwebuiバージョンがリリースされたときに通知します。 <br />インターネットが不安定またはオフラインの場合、このオプションは自動的にオフになります。このスイッチを切り替えると、自動更新チェックを再開できます。",
     "DescBetaFeatures": "WebUIのベータ機能を使用します。 <br />ベータ機能が不安定な場合があります。一部のベータ機能は、公式機能として採用されない場合があります。",

resources/i18n/ko.json

@@ -1759,6 +1759,7 @@
     "ConfigFilename": "구성 파일 이름 선택",
     "CurrentSSHPublicKey": "현재 공개 키: ",
     "DarkMode": "다크 모드",
+    "Default": "기본",
     "DescAutoLogout": "세션 내 앱을 실행하기 위해 생성된 페이지를 제외한 모든 Backend.AI 웹 UI 페이지가 닫힐 경우 자동으로 로그아웃됩니다.",
     "DescAutomaticUpdateCheck": "새로운 웹 UI 버전이 출시된 경우 알려줍니다.<br />오프라인 또는 인터넷 연결 상태가 불안정한 환경에서는 몇 차례 시도후 자동으로 사용이 중지됩니다. 이 경우 이 스위치를 켜서 다시 자동 업데이트 체크를 시작할 수 있습니다.",
     "DescBetaFeatures": "GUI용으로 테스트중인 기능을 사용합니다.<br />베타 기능은 불안정할 수 있으며, 정식 버전에서는 채택되지 않을 수 있습니다.",

resources/i18n/mn.json

@@ -1752,6 +1752,7 @@
     "ConfigFilename": "Файлын нэрийг тохируулах",
     "CurrentSSHPublicKey": "Одоогийн нийтийн түлхүүр:",
     "DarkMode": "Харанхуй горим",
+    "Default": "Үл хүрэлцэх",
     "DescAutoLogout": "Аппликешнд зориулж суулгасан хуудсуудаас бусад нэвтэрсэн бүх хуудсыг хаасан тохиолдолд автоматаар гарах болно (ж.нь. Jupyter Notebook, вэб терминал гэх мэт).",
     "DescAutomaticUpdateCheck": "Webui-ийн шинэ хувилбар гарах үед мэдэгдэх. <br /> Интернэт тогтворгүй эсвэл офлайн байгаа тохиолдолд энэ тохируулга автоматаар унтарна. Автомат шинэчлэлтийн шалгалтыг дахин эхлүүлэхийн тулд та энэ шилжүүлэгчийг асааж болно.",
     "DescBetaFeatures": "Вэб UI-д бета функцийг ашиглах. <br /> бета функцууд тогтворгүй байж магадгүй. Зарим бета функцийг албан ёсны шинж чанар болгон ашиглахгүй байж магадгүй юм.",

resources/i18n/ms.json

@@ -1753,6 +1753,7 @@
     "ConfigFilename": "Konfigurasi nama fail",
     "CurrentSSHPublicKey": "Kunci awam semasa:",
     "DarkMode": "Mod Gelap",
+    "Default": "Lalai",
     "DescAutoLogout": "Log keluar secara automatik jika semua halaman log masuk ditutup kecuali halaman yang berasal dari sesi untuk aplikasi (mis. Notebook jupyter, terminal web, dll.)",
     "DescAutomaticUpdateCheck": "Beritahu bila versi webui baru dikeluarkan. <br /> Di mana Internet tidak stabil atau di luar talian, pilihan ini akan dimatikan secara automatik. Anda boleh menukar suis ini untuk memulakan pemeriksaan kemas kini automatik sekali lagi.",
     "DescBetaFeatures": "Gunakan ciri beta untuk UI Web. <br /> Ciri-ciri beta mungkin tidak stabil. Beberapa ciri beta mungkin tidak digunakan sebagai ciri rasmi.",

resources/i18n/pl.json

@@ -1755,6 +1755,7 @@
     "ConfigFilename": "Nazwa pliku konfiguracyjnego",
     "CurrentSSHPublicKey": "Aktualny klucz publiczny:",
     "DarkMode": "Tryb ciemny",
+    "Default": "Domyślny",
     "DescAutoLogout": "Wyloguj się automatycznie, jeśli wszystkie zalogowane strony są zamknięte, z wyjątkiem stron pochodzących z sesji dla aplikacji (np. notatnik jupyter, terminal internetowy itp.)",
     "DescAutomaticUpdateCheck": "Powiadom o wydaniu nowej wersji webui. <br /> W przypadku, gdy Internet jest niestabilny lub offline, ta opcja zostanie automatycznie wyłączona. Możesz przełączyć ten przełącznik, aby ponownie rozpocząć automatyczne sprawdzanie aktualizacji.",
     "DescBetaFeatures": "Korzystaj z funkcji beta interfejsu internetowego. <br /> Funkcje beta mogą być niestabilne. Niektóre funkcje beta mogą nie zostać przyjęte jako funkcja oficjalna.",

resources/i18n/pt-BR.json

@@ -1755,6 +1755,7 @@
     "ConfigFilename": "Nome do arquivo de configuração",
     "CurrentSSHPublicKey": "Chave pública atual:",
     "DarkMode": "Modo escuro",
+    "Default": "Padrão",
     "DescAutoLogout": "Saia automaticamente se todas as páginas logadas forem fechadas, exceto as páginas originadas da sessão para aplicativos (por exemplo, notebook jupyter, terminal da web, etc.)",
     "DescAutomaticUpdateCheck": "Notifique quando uma nova versão do webui for lançada. <br /> Onde a Internet estiver instável ou offline, esta opção será automaticamente desligada. Você pode alternar essa opção para iniciar a verificação automática de atualização novamente.",
     "DescBetaFeatures": "Use recursos beta para Web UI. Os recursos beta <br /> podem ser instáveis. Alguns recursos beta podem não ser adotados como recurso oficial.",

resources/i18n/pt.json

@@ -1755,6 +1755,7 @@
     "ConfigFilename": "Nome do arquivo de configuração",
     "CurrentSSHPublicKey": "Chave pública atual:",
     "DarkMode": "Modo escuro",
+    "Default": "Padrão",
     "DescAutoLogout": "Saia automaticamente se todas as páginas logadas forem fechadas, exceto as páginas originadas da sessão para aplicativos (por exemplo, notebook jupyter, terminal da web, etc.)",
     "DescAutomaticUpdateCheck": "Notifique quando uma nova versão do webui for lançada. <br /> Onde a Internet estiver instável ou offline, esta opção será automaticamente desligada. Você pode alternar essa opção para iniciar a verificação automática de atualização novamente.",
     "DescBetaFeatures": "Use recursos beta para Web UI. Os recursos beta <br /> podem ser instáveis. Alguns recursos beta podem não ser adotados como recurso oficial.",