From 2ca747dbe45ed175122cfd3ae7892c971ab9794e Mon Sep 17 00:00:00 2001
From: mufazalov <mufazalov@yandex-team.ru>
Date: Thu, 25 May 2023 15:03:25 +0300
Subject: [PATCH] refactor(UserSettings): add i18n

---
 src/containers/UserSettings/UserSettings.tsx | 31 +++++++++-----------
 src/containers/UserSettings/i18n/en.json     | 20 +++++++++++++
 src/containers/UserSettings/i18n/index.ts    | 11 +++++++
 src/containers/UserSettings/i18n/ru.json     | 20 +++++++++++++
 4 files changed, 65 insertions(+), 17 deletions(-)
 create mode 100644 src/containers/UserSettings/i18n/en.json
 create mode 100644 src/containers/UserSettings/i18n/index.ts
 create mode 100644 src/containers/UserSettings/i18n/ru.json

diff --git a/src/containers/UserSettings/UserSettings.tsx b/src/containers/UserSettings/UserSettings.tsx
index a931d21ae4..05e1437a32 100644
--- a/src/containers/UserSettings/UserSettings.tsx
+++ b/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} />
diff --git a/src/containers/UserSettings/i18n/en.json b/src/containers/UserSettings/i18n/en.json
new file mode 100644
index 0000000000..c88c84ca03
--- /dev/null
+++ b/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"
+}
diff --git a/src/containers/UserSettings/i18n/index.ts b/src/containers/UserSettings/i18n/index.ts
new file mode 100644
index 0000000000..80be0ac86c
--- /dev/null
+++ b/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);
diff --git a/src/containers/UserSettings/i18n/ru.json b/src/containers/UserSettings/i18n/ru.json
new file mode 100644
index 0000000000..765a358acb
--- /dev/null
+++ b/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"
+}