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, +];