Skip to content

Commit 1929b68

Browse files
artemmufazalovartemmufazalov
authored
refactor(UserSettings): separate settings (#404)
1 parent d5b7ac1 commit 1929b68

File tree

3 files changed

+118
-86
lines changed

3 files changed

+118
-86
lines changed

‎src/containers/UserSettings/Setting.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ export interface SettingProps {
1616
title: string;
1717
settingKey: string;
1818
helpPopoverContent?: ReactNode;
19-
values?: {value: string; content: string}[];
19+
options?: {value: string; content: string}[];
2020
defaultValue?: unknown;
2121
}
2222

@@ -25,7 +25,7 @@ export const Setting = ({
2525
settingKey,
2626
title,
2727
helpPopoverContent,
28-
values,
28+
options,
2929
defaultValue,
3030
}: SettingProps) => {
3131
const [settingValue, setValue] = useSetting(settingKey, defaultValue);
@@ -52,13 +52,13 @@ export const Setting = ({
5252
}
5353

5454
case 'radio': {
55-
if (!values) {
55+
if (!options) {
5656
return null;
5757
}
5858

5959
return (
6060
<RadioButton value={String(settingValue)} onUpdate={setValue}>
61-
{values.map(({value, content}) => {
61+
{options.map(({value, content}) => {
6262
return (
6363
<RadioButton.Option value={value} key={value}>
6464
{content}

‎src/containers/UserSettings/UserSettings.tsx‎

Lines changed: 23 additions & 82 deletions
Original file line numberDiff line numberDiff line change
@@ -2,98 +2,39 @@ import cn from 'bem-cn-lite';
22

33
import {Settings} from '@gravity-ui/navigation';
44

5-
import favoriteFilledIcon from '../../assets/icons/star.svg';
6-
import flaskIcon from '../../assets/icons/flask.svg';
7-
8-
import {
9-
ENABLE_QUERY_MODES_FOR_EXPLAIN,
10-
INVERTED_DISKS_KEY,
11-
THEME_KEY,
12-
USE_NODES_ENDPOINT_IN_DIAGNOSTICS_KEY,
13-
} from '../../utils/constants';
14-
15-
import {Setting, SettingProps} from './Setting';
16-
import i18n from './i18n';
5+
import {YDBEmbeddedUISettings, settings} from './settings';
6+
import {Setting} from './Setting';
177

188
import './UserSettings.scss';
199

2010
export const b = cn('ydb-user-settings');
2111

22-
enum Theme {
23-
light = 'light',
24-
dark = 'dark',
25-
system = 'system',
26-
}
27-
28-
const themeValues = [
29-
{
30-
value: Theme.system,
31-
content: i18n('settings.theme.option-system'),
32-
},
33-
{
34-
value: Theme.light,
35-
content: i18n('settings.theme.option-light'),
36-
},
37-
{
38-
value: Theme.dark,
39-
content: i18n('settings.theme.option-dark'),
40-
},
41-
];
42-
43-
export enum SettingsSection {
44-
general = 'general',
45-
experiments = 'experiments',
46-
}
47-
4812
interface UserSettingsProps {
49-
settings?: Partial<Record<SettingsSection, SettingProps[]>>;
13+
settings?: YDBEmbeddedUISettings;
5014
}
5115

52-
export const UserSettings = ({settings}: UserSettingsProps) => {
16+
export const UserSettings = ({settings: userSettings = settings}: UserSettingsProps) => {
5317
return (
5418
<Settings>
55-
<Settings.Page
56-
id={SettingsSection.general}
57-
title={i18n('page.general')}
58-
icon={{data: favoriteFilledIcon, height: 14, width: 14}}
59-
>
60-
<Settings.Section title={i18n('section.general')}>
61-
<Setting
62-
settingKey={THEME_KEY}
63-
title={i18n('settings.theme.title')}
64-
type="radio"
65-
values={themeValues}
66-
/>
67-
{settings?.[SettingsSection.general]?.map((setting) => (
68-
<Setting key={setting.settingKey} {...setting} />
69-
))}
70-
</Settings.Section>
71-
</Settings.Page>
72-
<Settings.Page
73-
id={SettingsSection.experiments}
74-
title={i18n('page.experiments')}
75-
icon={{data: flaskIcon}}
76-
>
77-
<Settings.Section title={i18n('section.experiments')}>
78-
<Setting
79-
settingKey={INVERTED_DISKS_KEY}
80-
title={i18n('settings.invertedDisks.title')}
81-
/>
82-
<Setting
83-
settingKey={USE_NODES_ENDPOINT_IN_DIAGNOSTICS_KEY}
84-
title={i18n('settings.useNodesEndpoint.title')}
85-
helpPopoverContent={i18n('settings.useNodesEndpoint.popover')}
86-
/>
87-
<Setting
88-
settingKey={ENABLE_QUERY_MODES_FOR_EXPLAIN}
89-
title={i18n('settings.enableQueryModesForExplain.title')}
90-
helpPopoverContent={i18n('settings.enableQueryModesForExplain.popover')}
91-
/>
92-
{settings?.[SettingsSection.experiments]?.map((setting) => (
93-
<Setting key={setting.settingKey} {...setting} />
94-
))}
95-
</Settings.Section>
96-
</Settings.Page>
19+
{userSettings.map((page) => {
20+
const {id, title, icon, sections = []} = page;
21+
22+
return (
23+
<Settings.Page key={id} id={id} title={title} icon={icon}>
24+
{sections.map((section) => {
25+
const {title: sectionTitle, settings: sectionSettings = []} = section;
26+
27+
return (
28+
<Settings.Section key={id} title={sectionTitle}>
29+
{sectionSettings.map((setting) => {
30+
return <Setting key={setting.settingKey} {...setting} />;
31+
})}
32+
</Settings.Section>
33+
);
34+
})}
35+
</Settings.Page>
36+
);
37+
})}
9738
</Settings>
9839
);
9940
};

‎src/containers/UserSettings/settings.ts‎

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
import type {IconProps} from '@gravity-ui/uikit';
2+
3+
import favoriteFilledIcon from '../../assets/icons/star.svg';
4+
import flaskIcon from '../../assets/icons/flask.svg';
5+
6+
import {
7+
ENABLE_QUERY_MODES_FOR_EXPLAIN,
8+
INVERTED_DISKS_KEY,
9+
THEME_KEY,
10+
USE_NODES_ENDPOINT_IN_DIAGNOSTICS_KEY,
11+
} from '../../utils/constants';
12+
13+
import type {SettingProps} from './Setting';
14+
import i18n from './i18n';
15+
16+
export interface SettingsSection {
17+
id: string;
18+
title: string;
19+
settings: SettingProps[];
20+
}
21+
22+
export interface SettingsPage {
23+
id: string;
24+
title: string;
25+
icon: IconProps;
26+
sections: SettingsSection[];
27+
}
28+
29+
export type YDBEmbeddedUISettings = SettingsPage[];
30+
31+
const themeOptions = [
32+
{
33+
value: 'system',
34+
content: i18n('settings.theme.option-system'),
35+
},
36+
{
37+
value: 'light',
38+
content: i18n('settings.theme.option-light'),
39+
},
40+
{
41+
value: 'dark',
42+
content: i18n('settings.theme.option-dark'),
43+
},
44+
];
45+
46+
export const themeSetting: SettingProps = {
47+
settingKey: THEME_KEY,
48+
title: i18n('settings.theme.title'),
49+
type: 'radio',
50+
options: themeOptions,
51+
};
52+
export const invertedDisksSetting: SettingProps = {
53+
settingKey: INVERTED_DISKS_KEY,
54+
title: i18n('settings.invertedDisks.title'),
55+
};
56+
export const useNodesEndpointSetting: SettingProps = {
57+
settingKey: USE_NODES_ENDPOINT_IN_DIAGNOSTICS_KEY,
58+
title: i18n('settings.useNodesEndpoint.title'),
59+
helpPopoverContent: i18n('settings.useNodesEndpoint.popover'),
60+
};
61+
export const enableQueryModesForExplainSetting: SettingProps = {
62+
settingKey: ENABLE_QUERY_MODES_FOR_EXPLAIN,
63+
title: i18n('settings.enableQueryModesForExplain.title'),
64+
helpPopoverContent: i18n('settings.enableQueryModesForExplain.popover'),
65+
};
66+
67+
export const generalSection: SettingsSection = {
68+
id: 'generalSection',
69+
title: i18n('section.general'),
70+
settings: [themeSetting],
71+
};
72+
export const experimentsSection: SettingsSection = {
73+
id: 'experimentsSection',
74+
title: i18n('section.experiments'),
75+
settings: [invertedDisksSetting, useNodesEndpointSetting, enableQueryModesForExplainSetting],
76+
};
77+
78+
export const generalPage: SettingsPage = {
79+
id: 'generalPage',
80+
title: i18n('page.general'),
81+
icon: {data: favoriteFilledIcon, height: 14, width: 14},
82+
sections: [generalSection],
83+
};
84+
export const experimentsPage: SettingsPage = {
85+
id: 'experimentsPage',
86+
title: i18n('page.experiments'),
87+
icon: {data: flaskIcon},
88+
sections: [experimentsSection],
89+
};
90+
91+
export const settings: YDBEmbeddedUISettings = [generalPage, experimentsPage];

0 commit comments

Comments
 (0)