refactor(UserSettings): add i18n (#398)

Author: artemmufazalov

src/containers/UserSettings/UserSettings.tsx

@@ -13,6 +13,7 @@ import {
 } from '../../utils/constants';
 
 import {Setting, SettingProps} from './Setting';
+import i18n from './i18n';
 
 import './UserSettings.scss';
 
@@ -27,15 +28,15 @@ enum Theme {
 const themeValues = [
     {
         value: Theme.system,
-        content: 'System',
+        content: i18n('settings.theme.option-system'),
     },
     {
         value: Theme.light,
-        content: 'Light',
+        content: i18n('settings.theme.option-light'),
     },
     {
         value: Theme.dark,
-        content: 'Dark',
+        content: i18n('settings.theme.option-dark'),
     },
 ];
 
@@ -53,13 +54,13 @@ export const UserSettings = ({settings}: UserSettingsProps) => {
         <Settings>
             <Settings.Page
                 id={SettingsSection.general}
-                title="General"
+                title={i18n('page.general')}
                 icon={{data: favoriteFilledIcon, height: 14, width: 14}}
             >
-                <Settings.Section title="General">
+                <Settings.Section title={i18n('section.general')}>
                     <Setting
                         settingKey={THEME_KEY}
-                        title="Interface theme"
+                        title={i18n('settings.theme.title')}
                         type="radio"
                         values={themeValues}
                     />
@@ -70,27 +71,23 @@ export const UserSettings = ({settings}: UserSettingsProps) => {
             </Settings.Page>
             <Settings.Page
                 id={SettingsSection.experiments}
-                title="Experiments"
+                title={i18n('page.experiments')}
                 icon={{data: flaskIcon}}
             >
-                <Settings.Section title="Experiments">
+                <Settings.Section title={i18n('section.experiments')}>
                     <Setting
                         settingKey={INVERTED_DISKS_KEY}
-                        title={'Inverted disks space indicators'}
+                        title={i18n('settings.invertedDisks.title')}
                     />
                     <Setting
                         settingKey={USE_NODES_ENDPOINT_IN_DIAGNOSTICS_KEY}
-                        title={'Break the Nodes tab in Diagnostics'}
-                        helpPopoverContent={
-                            'Use /viewer/json/nodes endpoint for Nodes Tab in diagnostics. It returns incorrect data on older versions'
-                        }
+                        title={i18n('settings.useNodesEndpoint.title')}
+                        helpPopoverContent={i18n('settings.useNodesEndpoint.popover')}
                     />
                     <Setting
                         settingKey={ENABLE_QUERY_MODES_FOR_EXPLAIN}
-                        title={'Enable query modes for explain'}
-                        helpPopoverContent={
-                            'Enable script | scan query mode selector for both run and explain. May not work on some versions'
-                        }
+                        title={i18n('settings.enableQueryModesForExplain.title')}
+                        helpPopoverContent={i18n('settings.enableQueryModesForExplain.popover')}
                     />
                     {settings?.[SettingsSection.experiments]?.map((setting) => (
                         <Setting key={setting.settingKey} {...setting} />

src/containers/UserSettings/i18n/en.json

@@ -0,0 +1,20 @@
+{
+  "page.general": "General",
+  "section.general": "General",
+
+  "page.experiments": "Experiments",
+  "section.experiments": "Experiments",
+
+  "settings.theme.title": "Interface theme",
+  "settings.theme.option-dark": "Dark",
+  "settings.theme.option-light": "Light",
+  "settings.theme.option-system": "System",
+
+  "settings.invertedDisks.title": "Inverted disks space indicators",
+
+  "settings.useNodesEndpoint.title": "Break the Nodes tab in Diagnostics",
+  "settings.useNodesEndpoint.popover": "Use /viewer/json/nodes endpoint for Nodes Tab in diagnostics. It returns incorrect data on versions before 23-1",
+
+  "settings.enableQueryModesForExplain.title": "Enable query modes for explain",
+  "settings.enableQueryModesForExplain.popover": "Enable script | scan query mode selector for both run and explain. May not work on versions before 23-2"
+}

src/containers/UserSettings/i18n/index.ts

@@ -0,0 +1,11 @@
+import {i18n, Lang} from '../../../utils/i18n';
+
+import en from './en.json';
+import ru from './ru.json';
+
+const COMPONENT = 'ydb-user-settings';
+
+i18n.registerKeyset(Lang.En, COMPONENT, en);
+i18n.registerKeyset(Lang.Ru, COMPONENT, ru);
+
+export default i18n.keyset(COMPONENT);

src/containers/UserSettings/i18n/ru.json

@@ -0,0 +1,20 @@
+{
+  "page.general": "Общие",
+  "section.general": "Общие",
+
+  "page.experiments": "Эксперименты",
+  "section.experiments": "Эксперименты",
+
+  "settings.theme.title": "Тема",
+  "settings.theme.option-dark": "Тёмная",
+  "settings.theme.option-light": "Светлая",
+  "settings.theme.option-system": "Системная",
+
+  "settings.invertedDisks.title": "Инвертированные индикаторы места на дисках",
+
+  "settings.useNodesEndpoint.title": "Сломать вкладку Nodes в диагностике",
+  "settings.useNodesEndpoint.popover": "Использовать эндпоинт /viewer/json/nodes для вкладки Nodes в диагностике. Может возвращать некорректные данные на версиях до 23-1",
+
+  "settings.enableQueryModesForExplain.title": "Включить режимы выполнения запроса для explain",
+  "settings.enableQueryModesForExplain.popover": "Включить общий переключатель script | scan для run и explain. Может работать некорректно на версиях до 23-2"
+}