Skip to content

Commit 9172c62

Browse files
ironAiken2ironAiken2
committed
feat(FR-1720): implement theme color reset functionality
- Add resetThemeConfig function with functional updates to properly reset theme tokens - Support functional updates in useBAISettingUserState to prevent race conditions during bulk resets
1 parent 0918fad commit 9172c62

File tree

8 files changed

+236
-102
lines changed

8 files changed

+236
-102
lines changed

‎react/src/components/BrandingSettingItems/ThemeColorPicker.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ import { useBAISettingUserState } from 'src/hooks/useBAISetting';
1212

1313
type TokenPath = `token.${keyof AliasToken & string}`;
1414
type ComponentPath = `components.${keyof ComponentTokenMap & string}.${string}`;
15-
type ThemeConfigPath = TokenPath | ComponentPath;
15+
export type ThemeConfigPath = TokenPath | ComponentPath;
1616

1717
interface ThemeColorPickerSettingItemProps extends ColorPickerProps {
1818
tokenName?: ThemeConfigPath;

‎react/src/components/BrandingSettingList.tsx‎

Lines changed: 44 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,15 @@
11
import BAIAlert from './BAIAlert';
2-
import ThemeColorPicker from './BrandingSettingItems/ThemeColorPicker';
2+
import ThemeColorPicker, {
3+
ThemeConfigPath,
4+
} from './BrandingSettingItems/ThemeColorPicker';
35
import SettingList, { SettingGroup } from './SettingList';
46
import { ExportOutlined } from '@ant-design/icons';
57
import { App } from 'antd';
68
import { BAIButton, BAIFlex } from 'backend.ai-ui';
79
import _ from 'lodash';
810
import { useTranslation } from 'react-i18next';
911
import { downloadBlob } from 'src/helper/csv-util';
12+
import { useCustomThemeConfig } from 'src/helper/customThemeConfig';
1013
import { useBAISettingUserState } from 'src/hooks/useBAISetting';
1114

1215
interface BrandingSettingListProps {}
@@ -15,9 +18,28 @@ const BrandingSettingList: React.FC<BrandingSettingListProps> = () => {
1518
const { t } = useTranslation();
1619
const { message } = App.useApp();
1720

21+
const themeConfig = useCustomThemeConfig();
22+
1823
const [userCustomThemeConfig, setUserCustomThemeConfig] =
1924
useBAISettingUserState('custom_theme_config');
2025

26+
const resetThemeConfig = (tokenName: ThemeConfigPath) => {
27+
if (!themeConfig) return;
28+
29+
setUserCustomThemeConfig((prev: typeof userCustomThemeConfig) => {
30+
const newCustomThemeConfig = _.cloneDeep({
31+
...themeConfig,
32+
...prev,
33+
});
34+
const lightDefaultValue = _.get(themeConfig, `light.${tokenName}`);
35+
const darkDefaultValue = _.get(themeConfig, `dark.${tokenName}`);
36+
37+
_.set(newCustomThemeConfig, `light.${tokenName}`, lightDefaultValue);
38+
_.set(newCustomThemeConfig, `dark.${tokenName}`, darkDefaultValue);
39+
return newCustomThemeConfig;
40+
});
41+
};
42+
2143
const settingGroups: Array<SettingGroup> = [
2244
{
2345
'data-testid': 'group-theme-customization',
@@ -40,57 +62,63 @@ const BrandingSettingList: React.FC<BrandingSettingListProps> = () => {
4062
title: t('userSettings.theme.PrimaryColor'),
4163
description: t('userSettings.theme.PrimaryColorDesc'),
4264
children: <ThemeColorPicker tokenName="token.colorPrimary" />,
43-
// for reset feature
44-
defaultValue: {},
45-
setValue: setUserCustomThemeConfig,
65+
onReset: () => {
66+
resetThemeConfig('token.colorPrimary');
67+
},
4668
},
4769
{
4870
type: 'custom',
4971
title: t('userSettings.theme.HeaderBg'),
5072
description: t('userSettings.theme.HeaderBgDesc'),
5173
children: <ThemeColorPicker tokenName="components.Layout.headerBg" />,
52-
defaultValue: {},
53-
setValue: setUserCustomThemeConfig,
74+
onReset: () => {
75+
resetThemeConfig('components.Layout.headerBg');
76+
},
5477
},
5578
{
5679
type: 'custom',
5780
title: t('userSettings.theme.LinkColor'),
5881
description: t('userSettings.theme.LinkColorDesc'),
5982
children: <ThemeColorPicker tokenName="token.colorLink" />,
60-
defaultValue: {},
61-
setValue: setUserCustomThemeConfig,
83+
onReset: () => {
84+
resetThemeConfig('token.colorLink');
85+
},
6286
},
6387
{
6488
type: 'custom',
6589
title: t('userSettings.theme.InfoColor'),
6690
description: t('userSettings.theme.InfoColorDesc'),
6791
children: <ThemeColorPicker tokenName="token.colorInfo" />,
68-
defaultValue: {},
69-
setValue: setUserCustomThemeConfig,
92+
onReset: () => {
93+
resetThemeConfig('token.colorInfo');
94+
},
7095
},
7196
{
7297
type: 'custom',
7398
title: t('userSettings.theme.ErrorColor'),
7499
description: t('userSettings.theme.ErrorColorDesc'),
75100
children: <ThemeColorPicker tokenName="token.colorError" />,
76-
defaultValue: {},
77-
setValue: setUserCustomThemeConfig,
101+
onReset: () => {
102+
resetThemeConfig('token.colorError');
103+
},
78104
},
79105
{
80106
type: 'custom',
81107
title: t('userSettings.theme.SuccessColor'),
82108
description: t('userSettings.theme.SuccessColorDesc'),
83109
children: <ThemeColorPicker tokenName="token.colorSuccess" />,
84-
defaultValue: {},
85-
setValue: setUserCustomThemeConfig,
110+
onReset: () => {
111+
resetThemeConfig('token.colorSuccess');
112+
},
86113
},
87114
{
88115
type: 'custom',
89116
title: t('userSettings.theme.TextColor'),
90117
description: t('userSettings.theme.TextColorDesc'),
91118
children: <ThemeColorPicker tokenName="token.colorText" />,
92-
defaultValue: {},
93-
setValue: setUserCustomThemeConfig,
119+
onReset: () => {
120+
resetThemeConfig('token.colorText');
121+
},
94122
},
95123
],
96124
},

‎react/src/components/ConfigurationsSettingList.tsx‎

Lines changed: 37 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -157,10 +157,9 @@ const ConfigurationsSettingList = () => {
157157
{ label: t('settings.image.None'), value: 'none' },
158158
],
159159
},
160-
setValue: (value) => setImagePullingBehavior(value),
161160
defaultValue: defaultConfigurationsSettings.image_pulling_behavior,
162161
value: options.image_pulling_behavior,
163-
onChange: (value) => setImagePullingBehavior(value),
162+
setValue: (value) => setImagePullingBehavior(value),
164163
},
165164
{
166165
type: 'custom',
@@ -214,15 +213,19 @@ const ConfigurationsSettingList = () => {
214213
),
215214
value: options.cuda_gpu,
216215
defaultValue: defaultConfigurationsSettings.cuda_gpu,
217-
disabled: true,
216+
checkboxProps: {
217+
disabled: true,
218+
},
218219
},
219220
{
220221
type: 'checkbox',
221222
title: t('settings.ROCMGPUSupport'),
222223
description: t('settings.DescRocmGPUSupport'),
223224
value: options.rocm_gpu,
224225
defaultValue: defaultConfigurationsSettings.rocm_gpu,
225-
disabled: true,
226+
checkboxProps: {
227+
disabled: true,
228+
},
226229
},
227230
],
228231
},
@@ -249,7 +252,9 @@ const ConfigurationsSettingList = () => {
249252
),
250253
value: options.cuda_fgpu,
251254
defaultValue: defaultConfigurationsSettings.cuda_fgpu,
252-
disabled: true,
255+
checkboxProps: {
256+
disabled: true,
257+
},
253258
},
254259
{
255260
type: 'checkbox',
@@ -263,7 +268,9 @@ const ConfigurationsSettingList = () => {
263268
),
264269
value: options.tpu,
265270
defaultValue: defaultConfigurationsSettings.tpu,
266-
disabled: true,
271+
checkboxProps: {
272+
disabled: true,
273+
},
267274
},
268275
{
269276
type: 'checkbox',
@@ -277,7 +284,9 @@ const ConfigurationsSettingList = () => {
277284
),
278285
value: options.ipu,
279286
defaultValue: defaultConfigurationsSettings.ipu,
280-
disabled: true,
287+
checkboxProps: {
288+
disabled: true,
289+
},
281290
},
282291
{
283292
type: 'checkbox',
@@ -291,7 +300,9 @@ const ConfigurationsSettingList = () => {
291300
),
292301
value: options.atom,
293302
defaultValue: defaultConfigurationsSettings.atom,
294-
disabled: true,
303+
checkboxProps: {
304+
disabled: true,
305+
},
295306
},
296307
{
297308
type: 'checkbox',
@@ -305,7 +316,9 @@ const ConfigurationsSettingList = () => {
305316
),
306317
value: options.atom_plus,
307318
defaultValue: defaultConfigurationsSettings.atom_plus,
308-
disabled: true,
319+
checkboxProps: {
320+
disabled: true,
321+
},
309322
},
310323
{
311324
type: 'checkbox',
@@ -319,7 +332,9 @@ const ConfigurationsSettingList = () => {
319332
),
320333
value: options.atom_max,
321334
defaultValue: defaultConfigurationsSettings.atom_max,
322-
disabled: true,
335+
checkboxProps: {
336+
disabled: true,
337+
},
323338
},
324339
{
325340
type: 'checkbox',
@@ -333,7 +348,9 @@ const ConfigurationsSettingList = () => {
333348
),
334349
value: options.gaudi2,
335350
defaultValue: defaultConfigurationsSettings.gaudi2,
336-
disabled: true,
351+
checkboxProps: {
352+
disabled: true,
353+
},
337354
},
338355
{
339356
type: 'checkbox',
@@ -347,7 +364,9 @@ const ConfigurationsSettingList = () => {
347364
),
348365
value: options.warboy,
349366
defaultValue: defaultConfigurationsSettings.warboy,
350-
disabled: true,
367+
checkboxProps: {
368+
disabled: true,
369+
},
351370
},
352371
{
353372
type: 'checkbox',
@@ -361,7 +380,9 @@ const ConfigurationsSettingList = () => {
361380
),
362381
value: options.rngd,
363382
defaultValue: defaultConfigurationsSettings.rngd,
364-
disabled: true,
383+
checkboxProps: {
384+
disabled: true,
385+
},
365386
},
366387
{
367388
type: 'checkbox',
@@ -375,7 +396,9 @@ const ConfigurationsSettingList = () => {
375396
),
376397
value: options.hyperaccel_lpu,
377398
defaultValue: defaultConfigurationsSettings.hyperaccel_lpu,
378-
disabled: true,
399+
checkboxProps: {
400+
disabled: true,
401+
},
379402
},
380403
],
381404
},
@@ -387,7 +410,6 @@ const ConfigurationsSettingList = () => {
387410
settingGroups={settingGroupList}
388411
showSearchBar
389412
showChangedOptionFilter
390-
showResetButton
391413
/>
392414
<OverlayNetworkSettingModal
393415
onRequestClose={toggleOverlayNetworkModal}

‎react/src/components/MaintenanceSettingList.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -99,6 +99,7 @@ const MaintenanceSettingList = () => {
9999
: t('maintenance.RecalculateUsage')}
100100
</Button>
101101
),
102+
showResetButton: false,
102103
},
103104
],
104105
},
@@ -121,6 +122,7 @@ const MaintenanceSettingList = () => {
121122
: t('maintenance.RescanImages')}
122123
</Button>
123124
),
125+
showResetButton: false,
124126
},
125127
],
126128
},

0 commit comments

Comments
 (0)