feat: add language setting (#520)

Author: artemmufazalov

src/containers/UserSettings/Setting.tsx

@@ -18,6 +18,7 @@ export interface SettingProps {
     helpPopoverContent?: ReactNode;
     options?: {value: string; content: string}[];
     defaultValue?: unknown;
+    onValueUpdate?: VoidFunction;
 }
 
 export const Setting = ({
@@ -27,9 +28,15 @@ export const Setting = ({
     helpPopoverContent,
     options,
     defaultValue,
+    onValueUpdate,
 }: SettingProps) => {
     const [settingValue, setValue] = useSetting(settingKey, defaultValue);
 
+    const onUpdate = (value: unknown) => {
+        setValue(value);
+        onValueUpdate?.();
+    };
+
     const renderTitleComponent = (value: ReactNode) => {
         if (helpPopoverContent) {
             return (
@@ -48,7 +55,7 @@ export const Setting = ({
     const getSettingsElement = (elementType: SettingsElementType) => {
         switch (elementType) {
             case 'switch': {
-                return <Switch checked={Boolean(settingValue)} onUpdate={setValue} />;
+                return <Switch checked={Boolean(settingValue)} onUpdate={onUpdate} />;
             }
 
             case 'radio': {
@@ -57,7 +64,7 @@ export const Setting = ({
                 }
 
                 return (
-                    <RadioButton value={String(settingValue)} onUpdate={setValue}>
+                    <RadioButton value={String(settingValue)} onUpdate={onUpdate}>
                         {options.map(({value, content}) => {
                             return (
                                 <RadioButton.Option value={value} key={value}>

src/containers/UserSettings/i18n/en.json

@@ -10,6 +10,10 @@
   "settings.theme.option-light": "Light",
   "settings.theme.option-system": "System",
 
+  "settings.language.title": "Interface language",
+  "settings.language.option-russian": "Russian",
+  "settings.language.option-english": "English",
+
   "settings.invertedDisks.title": "Inverted disks space indicators",
 
   "settings.useNodesEndpoint.title": "Break the Nodes tab in Diagnostics",

src/containers/UserSettings/i18n/ru.json

@@ -10,6 +10,10 @@
   "settings.theme.option-light": "Светлая",
   "settings.theme.option-system": "Системная",
 
+  "settings.language.title": "Язык интерфейса",
+  "settings.language.option-russian": "Русский",
+  "settings.language.option-english": "English",
+
   "settings.invertedDisks.title": "Инвертированные индикаторы места на дисках",
 
   "settings.useNodesEndpoint.title": "Сломать вкладку Nodes в диагностике",

src/containers/UserSettings/settings.ts

@@ -6,10 +6,12 @@ import flaskIcon from '../../assets/icons/flask.svg';
 import {
     ENABLE_ADDITIONAL_QUERY_MODES,
     INVERTED_DISKS_KEY,
+    LANGUAGE_KEY,
     THEME_KEY,
     USE_BACKEND_PARAMS_FOR_TABLES_KEY,
     USE_NODES_ENDPOINT_IN_DIAGNOSTICS_KEY,
 } from '../../utils/constants';
+import {Lang, defaultLang} from '../../utils/i18n';
 
 import type {SettingProps} from './Setting';
 import i18n from './i18n';
@@ -50,6 +52,29 @@ export const themeSetting: SettingProps = {
     type: 'radio',
     options: themeOptions,
 };
+
+const languageOptions = [
+    {
+        value: Lang.Ru,
+        content: i18n('settings.language.option-russian'),
+    },
+    {
+        value: Lang.En,
+        content: i18n('settings.language.option-english'),
+    },
+];
+
+export const languageSetting: SettingProps = {
+    settingKey: LANGUAGE_KEY,
+    title: i18n('settings.language.title'),
+    type: 'radio',
+    options: languageOptions,
+    defaultValue: defaultLang,
+    onValueUpdate: () => {
+        window.location.reload();
+    },
+};
+
 export const invertedDisksSetting: SettingProps = {
     settingKey: INVERTED_DISKS_KEY,
     title: i18n('settings.invertedDisks.title'),

src/store/reducers/settings/settings.ts

@@ -14,10 +14,12 @@ import {
     CLUSTER_INFO_HIDDEN_KEY,
     LAST_USED_QUERY_ACTION_KEY,
     USE_BACKEND_PARAMS_FOR_TABLES_KEY,
+    LANGUAGE_KEY,
 } from '../../../utils/constants';
 import '../../../services/api';
-import {getValueFromLS, parseJson} from '../../../utils/utils';
+import {parseJson} from '../../../utils/utils';
 import {QUERY_ACTIONS, QUERY_MODES} from '../../../utils/query';
+import {readSavedSettingsValue, systemSettings, userSettings} from '../../../utils/settings';
 
 import {TENANT_PAGES_IDS} from '../tenant/constants';
 
@@ -38,20 +40,12 @@ export const ProblemFilterValues = {
     PROBLEMS: 'With problems',
 } as const;
 
-const userSettings = window.userSettings || {};
-const systemSettings = window.systemSettings || {};
-
-export function readSavedSettingsValue(key: string, defaultValue?: string) {
-    const savedValue = window.web_version ? userSettings[key] : getValueFromLS(key);
-
-    return savedValue ?? defaultValue;
-}
-
 export const initialState = {
     problemFilter: ProblemFilterValues.ALL,
     userSettings: {
         ...userSettings,
         [THEME_KEY]: readSavedSettingsValue(THEME_KEY, 'system'),
+        [LANGUAGE_KEY]: readSavedSettingsValue(LANGUAGE_KEY),
         [INVERTED_DISKS_KEY]: readSavedSettingsValue(INVERTED_DISKS_KEY, 'false'),
         [USE_NODES_ENDPOINT_IN_DIAGNOSTICS_KEY]: readSavedSettingsValue(
             USE_NODES_ENDPOINT_IN_DIAGNOSTICS_KEY,

src/utils/constants.ts

@@ -84,6 +84,7 @@ export const TENANT_DEFAULT_TITLE = 'Database';
 
 // ==== Settings ====
 export const THEME_KEY = 'theme';
+export const LANGUAGE_KEY = 'language';
 export const INVERTED_DISKS_KEY = 'invertedDisks';
 export const USE_NODES_ENDPOINT_IN_DIAGNOSTICS_KEY = 'useNodesEndpointInDiagnostics';
 export const ENABLE_ADDITIONAL_QUERY_MODES = 'enableAdditionalQueryModes';

src/utils/i18n/i18n.ts

@@ -2,15 +2,21 @@ import {I18N} from '@gravity-ui/i18n';
 import {configure as configureUiKit} from '@gravity-ui/uikit';
 import {configure as configureYdbUiComponents} from 'ydb-ui-components';
 
+import {LANGUAGE_KEY} from '../constants';
+import {readSavedSettingsValue} from '../settings';
+
 enum Lang {
     En = 'en',
     Ru = 'ru',
 }
 
+const defaultLang = Lang.En;
+const currentLang = readSavedSettingsValue(LANGUAGE_KEY, defaultLang);
+
 const i18n = new I18N();
 
-i18n.setLang(Lang.En);
-configureYdbUiComponents({lang: Lang.En});
-configureUiKit({lang: Lang.En});
+i18n.setLang(currentLang);
+configureYdbUiComponents({lang: currentLang});
+configureUiKit({lang: currentLang});
 
-export {i18n, Lang};
+export {i18n, Lang, currentLang, defaultLang};

src/utils/settings.ts

@@ -0,0 +1,10 @@
+import {getValueFromLS} from './utils';
+
+export const userSettings = window.userSettings || {};
+export const systemSettings = window.systemSettings || {};
+
+export function readSavedSettingsValue(key: string, defaultValue?: string) {
+    const savedValue = window.web_version ? userSettings[key] : getValueFromLS(key);
+
+    return savedValue ?? defaultValue;
+}