diff --git a/src/containers/UserSettings/Setting.tsx b/src/containers/UserSettings/Setting.tsx
index d3b85516a0..c251eb5553 100644
--- a/src/containers/UserSettings/Setting.tsx
+++ b/src/containers/UserSettings/Setting.tsx
@@ -91,3 +91,18 @@ export const Setting = ({
);
};
+
+export interface SettingsInfoFieldProps {
+ type: 'info';
+ title: string;
+ description?: React.ReactNode;
+ content: React.ReactNode;
+}
+
+export const SettingsInfoField = ({title, description, content}: SettingsInfoFieldProps) => {
+ return (
+
+ {content}
+
+ );
+};
diff --git a/src/containers/UserSettings/UserSettings.tsx b/src/containers/UserSettings/UserSettings.tsx
index e77b4f17d0..b0057d706f 100644
--- a/src/containers/UserSettings/UserSettings.tsx
+++ b/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 (
{sectionSettings.map((setting) => {
+ if (setting.type === 'info') {
+ return (
+
+ );
+ }
return ;
})}
diff --git a/src/containers/UserSettings/i18n/en.json b/src/containers/UserSettings/i18n/en.json
index da4c677c03..03f80807ef 100644
--- a/src/containers/UserSettings/i18n/en.json
+++ b/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"
}
diff --git a/src/containers/UserSettings/settings.tsx b/src/containers/UserSettings/settings.tsx
index 3d0b079677..62b0414ed5 100644
--- a/src/containers/UserSettings/settings.tsx
+++ b/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,
+];