feat(UserSettings): display app version (#889)

Author: artemmufazalov

src/containers/UserSettings/Setting.tsx

@@ -91,3 +91,18 @@ export const Setting = ({
         </Settings.Item>
     );
 };
+
+export interface SettingsInfoFieldProps {
+    type: 'info';
+    title: string;
+    description?: React.ReactNode;
+    content: React.ReactNode;
+}
+
+export const SettingsInfoField = ({title, description, content}: SettingsInfoFieldProps) => {
+    return (
+        <Settings.Item title={title} highlightedTitle={title} description={description}>
+            {content}
+        </Settings.Item>
+    );
+};

src/containers/UserSettings/UserSettings.tsx

@@ -2,7 +2,7 @@ import {Settings} from '@gravity-ui/navigation';
 
 import {cn} from '../../utils/cn';
 
-import {Setting} from './Setting';
+import {Setting, SettingsInfoField} from './Setting';
 import type {YDBEmbeddedUISettings} from './settings';
 import {settings} from './settings';
 
@@ -28,6 +28,14 @@ export const UserSettings = ({settings: userSettings = settings}: UserSettingsPr
                             return (
                                 <Settings.Section key={id} title={sectionTitle}>
                                     {sectionSettings.map((setting) => {
+                                        if (setting.type === 'info') {
+                                            return (
+                                                <SettingsInfoField
+                                                    key={setting.title}
+                                                    {...setting}
+                                                />
+                                            );
+                                        }
                                         return <Setting key={setting.settingKey} {...setting} />;
                                     })}
                                 </Settings.Section>

src/containers/UserSettings/i18n/en.json

@@ -8,6 +8,9 @@
   "page.editor": "Editor",
   "section.dev-setting": "Development settings",
 
+  "page.about": "About",
+  "section.about": "About",
+
   "settings.editor.autocomplete.title": "Enable autocomplete",
   "settings.editor.autocomplete.description": "You’re always able to get suggestions by pressing Ctrl+Space.",
 
@@ -35,5 +38,7 @@
   "settings.useVirtualTables.popover": "It will increase performance, but could work unstable",
 
   "settings.queryUseMultiSchema.title": "Allow queries with multiple result sets",
-  "settings.queryUseMultiSchema.popover": "Use 'multi' schema for queries that enables queries with multiple result sets. Returns nothing on versions 23-3 and older"
+  "settings.queryUseMultiSchema.popover": "Use 'multi' schema for queries that enables queries with multiple result sets. Returns nothing on versions 23-3 and older",
+
+  "settings.about.interfaceVersionInfoField.title": "Interface version"
 }

src/containers/UserSettings/settings.tsx

@@ -1,4 +1,4 @@
-import {Flask, PencilToSquare, StarFill} from '@gravity-ui/icons';
+import {CircleInfo, Flask, PencilToSquare, StarFill} from '@gravity-ui/icons';
 import type {IconProps} from '@gravity-ui/uikit';
 
 import {
@@ -15,13 +15,15 @@ import {
 import {Lang, defaultLang} from '../../utils/i18n';
 import {ClusterModeGuard} from '../ClusterModeGuard';
 
-import type {SettingProps} from './Setting';
+import type {SettingProps, SettingsInfoFieldProps} from './Setting';
 import i18n from './i18n';
 
+import packageJson from '../../../package.json';
+
 export interface SettingsSection {
     id: string;
     title: string;
-    settings: SettingProps[];
+    settings: (SettingProps | SettingsInfoFieldProps)[];
 }
 
 export interface SettingsPage {
@@ -119,6 +121,12 @@ export const autocompleteOnEnterSetting: SettingProps = {
     description: i18n('settings.editor.autocomplete-on-enter.description'),
 };
 
+export const interfaceVersionInfoField: SettingsInfoFieldProps = {
+    title: i18n('settings.about.interfaceVersionInfoField.title'),
+    type: 'info',
+    content: packageJson.version,
+};
+
 export const appearanceSection: SettingsSection = {
     id: 'appearanceSection',
     title: i18n('section.appearance'),
@@ -135,6 +143,12 @@ export const devSettingsSection: SettingsSection = {
     settings: [enableAutocompleteSetting, autocompleteOnEnterSetting],
 };
 
+export const aboutSettingsSection: SettingsSection = {
+    id: 'aboutSettingsSection',
+    title: i18n('section.about'),
+    settings: [interfaceVersionInfoField],
+};
+
 export const generalPage: SettingsPage = {
     id: 'generalPage',
     title: i18n('page.general'),
@@ -154,4 +168,16 @@ export const editorPage: SettingsPage = {
     sections: [devSettingsSection],
 };
 
-export const settings: YDBEmbeddedUISettings = [generalPage, editorPage, experimentsPage];
+export const aboutPage: SettingsPage = {
+    id: 'aboutPage',
+    title: i18n('page.about'),
+    icon: {data: CircleInfo},
+    sections: [aboutSettingsSection],
+};
+
+export const settings: YDBEmbeddedUISettings = [
+    generalPage,
+    editorPage,
+    experimentsPage,
+    aboutPage,
+];