Skip to content

Commit b61d6ac

Browse files
awoloszyn22awoloszyn22
authored
fix: Preferences dialog UX adjustments (#4484)
* fix: preferences dialog ux adjustments * fix: outdated comment * refactor: move ThemePreviewImage to a new file * test: fix settings tests * test: fix pagination test
1 parent 4b82ab9 commit b61d6ac

File tree

17 files changed

+167
-115
lines changed

17 files changed

+167
-115
lines changed

‎public/i18n/en.yaml‎

Lines changed: 23 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1415,7 +1415,25 @@ service-accounts:
14151415
service-management:
14161416
title: Service Management
14171417
settings:
1418-
clusters:
1418+
appearance:
1419+
themes:
1420+
light_dark:
1421+
description: Automatically matches your system settings
1422+
title: Light / Dark
1423+
sap_horizon:
1424+
description: Use in default office environments
1425+
title: Light
1426+
sap_horizon_dark:
1427+
description: Use in dimmed environments
1428+
title: Dark
1429+
sap_horizon_hcb:
1430+
description: Optimized contrast and accessibility for bright environments
1431+
title: High-Contrast Black
1432+
sap_horizon_hcw:
1433+
description: Optimized contrast and accessibility for dark environments
1434+
title: High-Contrast White
1435+
title: Appearance
1436+
general:
14191437
accessible-name:
14201438
validateResources: Validate Resources panel
14211439
description: Cluster interaction, resource validation
@@ -1437,29 +1455,12 @@ settings:
14371455
validateResources: Validate Resources
14381456
validation-disabled: Resource validation is disabled
14391457
showHiddenNamespaces: Show hidden Namespaces
1440-
title: Clusters
1441-
interface:
1442-
description: Appearance, language
1443-
themes:
1444-
light_dark:
1445-
description: Automatically matches your system settings
1446-
title: Light / Dark
1447-
sap_horizon:
1448-
description: Use in default office environments
1449-
title: Light
1450-
sap_horizon_dark:
1451-
description: Use in dimmed environments
1452-
title: Dark
1453-
sap_horizon_hcb:
1454-
description: Optimized contrast and accessibility for bright environments
1455-
title: High-Contrast Black
1456-
sap_horizon_hcw:
1457-
description: Optimized contrast and accessibility for dark environments
1458-
title: High-Contrast White
1459-
title: Interface
1460-
language: Language
1458+
title: Settings
1459+
language:
1460+
title: Language
14611461
other:
14621462
all: All
1463+
default-last-used: Default (last one used)
14631464
default-page-size: Default Page Size
14641465
info: Changes to the page size only take effect locally. To set the global default page size, go to Preferences.
14651466
of: of {{pagesCount}}

‎src/components/Preferences/ConfirmationSettings.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,12 +15,12 @@ export default function ConfirmationSettings() {
1515
for="dont-confirm-delete-switch"
1616
className="bsl-has-color-status-4"
1717
>
18-
{t('settings.clusters.dontConfirmDelete')}
18+
{t('settings.general.dontConfirmDelete')}
1919
</Label>
2020
<div>
2121
<Switch
2222
id="dont-confirm-delete-switch"
23-
accessibleName={t('settings.clusters.dontConfirmDelete')}
23+
accessibleName={t('settings.general.dontConfirmDelete')}
2424
checked={dontConfirmDelete}
2525
onChange={() =>
2626
setDontConfirmDelete((previousState) => !previousState)

‎src/components/Preferences/EditViewSettings.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -22,11 +22,11 @@ export default function EditViewSettings() {
2222
<>
2323
<div className="preferences-row">
2424
<Label for="editTypeComboBox" className="bsl-has-color-status-4">
25-
{t('settings.clusters.edit-view.choose')}
25+
{t('settings.general.edit-view.choose')}
2626
</Label>
2727
<Select
2828
id="editTypeComboBox"
29-
accessibleName={t('settings.clusters.edit-view.choose')}
29+
accessibleName={t('settings.general.edit-view.choose')}
3030
onChange={(e) => {
3131
setEditViewMode({
3232
preferencesViewType: e.target.value ?? 'MODE_DEFAULT',
@@ -41,7 +41,7 @@ export default function EditViewSettings() {
4141
value={available_option.key}
4242
selected={preferencesViewType === available_option.key}
4343
>
44-
{t(`settings.clusters.edit-view.${available_option.text}`)}
44+
{t(`settings.general.edit-view.${available_option.text}`)}
4545
</Option>
4646
))}
4747
</Select>

‎src/components/Preferences/LanguageSettings.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,11 +17,11 @@ export default function LanguageSettings() {
1717
return (
1818
<div className="preferences-row">
1919
<Label for="language-select" className="bsl-has-color-status-4">
20-
{t('settings.language')}
20+
{t('settings.language.title')}
2121
</Label>
2222
<Select
2323
id="language-select"
24-
accessibleName={t('settings.language')}
24+
accessibleName={t('settings.language.title')}
2525
onChange={onChange}
2626
>
2727
{AVAILABLE_LANGUAGES.map((available_language) => (

‎src/components/Preferences/NamespaceSettings.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,12 +19,12 @@ export default function NamespaceSettings() {
1919
for="show-hidden-namespaces-switch"
2020
className="bsl-has-color-status-4"
2121
>
22-
{t('settings.clusters.showHiddenNamespaces')}
22+
{t('settings.general.showHiddenNamespaces')}
2323
</Label>
2424
<div>
2525
<Switch
2626
id="show-hidden-namespaces-switch"
27-
accessibleName={t('settings.clusters.showHiddenNamespaces')}
27+
accessibleName={t('settings.general.showHiddenNamespaces')}
2828
checked={showHiddenNamespaces}
2929
onChange={toggleVisibility}
3030
/>

‎src/components/Preferences/OtherSettings.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ export default function OtherSettings() {
3232
key={available_size}
3333
selected={pageSize === Number(available_size)}
3434
>
35-
{available_size}
35+
{`${pageSize === Number(available_size) ? t('settings.other.default-last-used') : ''} ${available_size}`}
3636
</Option>
3737
))}
3838
<Option

‎src/components/Preferences/Preferences.tsx‎

Lines changed: 34 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -34,13 +34,12 @@ export function Preferences() {
3434

3535
const tabs = [
3636
{
37-
title: t('settings.interface.title'),
38-
description: t('settings.interface.description'),
37+
title: t('settings.appearance.title'),
3938
icon: (
4039
<Icon
4140
style={{ margin: 'auto' }}
42-
name="accelerated"
43-
accessibleName={t('settings.interface.title')}
41+
name="palette"
42+
accessibleName={t('settings.appearance.title')}
4443
className="bsl-icon-xl"
4544
/>
4645
),
@@ -52,18 +51,30 @@ export function Preferences() {
5251
},
5352
},
5453
{
55-
title: t('settings.clusters.title'),
56-
description: t('settings.clusters.description'),
54+
title: t('settings.language.title'),
5755
icon: (
5856
<Icon
5957
style={{ margin: 'auto' }}
60-
name="database"
61-
accessibleName={t('settings.clusters.title')}
58+
name="globe"
59+
accessibleName={t('settings.language.title')}
6260
className="bsl-icon-xl"
6361
/>
6462
),
6563
id: 2,
6664
},
65+
{
66+
title: t('settings.general.title'),
67+
description: t('settings.general.description'),
68+
icon: (
69+
<Icon
70+
style={{ margin: 'auto' }}
71+
name="database"
72+
accessibleName={t('settings.general.title')}
73+
className="bsl-icon-xl"
74+
/>
75+
),
76+
id: 3,
77+
},
6778
];
6879

6980
const handleCloseModal = () => {
@@ -86,7 +97,7 @@ export function Preferences() {
8697
design="Footer"
8798
endContent={
8899
<>
89-
<Button onClick={handleCloseModal}>
100+
<Button design="Transparent" onClick={handleCloseModal}>
90101
{t('common.buttons.close')}
91102
</Button>
92103
</>
@@ -108,22 +119,26 @@ export function Preferences() {
108119
>
109120
<ThemeChooser listRef={listRef} />
110121
</Tab>
111-
<Tab key="language-settings" text={t('settings.language')}>
122+
</TabContainer>
123+
</VerticalTabs.Content>
124+
<VerticalTabs.Content id={2}>
125+
<TabContainer
126+
tabLayout="Inline"
127+
contentBackgroundDesign="Transparent"
128+
>
129+
<Tab key="language-settings" text={t('settings.language.title')}>
112130
<LanguageSettings />
113131
</Tab>
114-
<Tab key="other-settings" text={t('settings.other.title')}>
115-
<OtherSettings />
116-
</Tab>
117132
</TabContainer>
118133
</VerticalTabs.Content>
119-
<VerticalTabs.Content id={2}>
134+
<VerticalTabs.Content id={3}>
120135
<TabContainer
121136
tabLayout="Inline"
122137
contentBackgroundDesign="Transparent"
123138
>
124139
<Tab
125140
key="cluster-interaction"
126-
text={t('settings.clusters.interaction.title')}
141+
text={t('settings.general.interaction.title')}
127142
>
128143
<div>
129144
<NamespaceSettings />
@@ -134,10 +149,13 @@ export function Preferences() {
134149
</Tab>
135150
<Tab
136151
key="resource-validation"
137-
text={t('settings.clusters.resourcesValidation.title')}
152+
text={t('settings.general.resourcesValidation.title')}
138153
>
139154
<ResourceValidationSettings />
140155
</Tab>
156+
<Tab key="other-settings" text={t('settings.other.title')}>
157+
<OtherSettings />
158+
</Tab>
141159
</TabContainer>
142160
</VerticalTabs.Content>
143161
</VerticalTabs>

‎src/components/Preferences/ProtectedSettings.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,12 +24,12 @@ export default function ProtectedSettings() {
2424
for="disable-resource-protection-switch"
2525
className="bsl-has-color-status-4"
2626
>
27-
{t('settings.clusters.disableResourceProtection')}
27+
{t('settings.general.disableResourceProtection')}
2828
</Label>
2929
<div>
3030
<Switch
3131
id="disable-resource-protection-switch"
32-
accessibleName={t('settings.clusters.disableResourceProtection')}
32+
accessibleName={t('settings.general.disableResourceProtection')}
3333
checked={disableResourceProtection}
3434
onChange={() =>
3535
setDisableResourceProtection((prevState) => !prevState)

‎src/components/Preferences/ResourceValidation/ResourceValidationSettings.tsx‎

Lines changed: 9 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -97,12 +97,12 @@ export default function ResourceValidationSettings() {
9797

9898
return (
9999
<UI5Panel
100-
title={t('settings.clusters.resourcesValidation.validateResources')}
101-
accessibleName={t('settings.clusters.accessible-name.validateResources')}
100+
title={t('settings.general.resourcesValidation.validateResources')}
101+
accessibleName={t('settings.general.accessible-name.validateResources')}
102102
headerActions={
103103
<Switch
104104
accessibleName={t(
105-
'settings.clusters.resourcesValidation.validateResources',
105+
'settings.general.resourcesValidation.validateResources',
106106
)}
107107
checked={isEnabled}
108108
onChange={toggleVisibility}
@@ -112,7 +112,7 @@ export default function ResourceValidationSettings() {
112112
{!isEnabled && (
113113
<div className="no-validation-info">
114114
<span className="bsl-has-color-status-4">
115-
{t('settings.clusters.resourcesValidation.validation-disabled')}
115+
{t('settings.general.resourcesValidation.validation-disabled')}
116116
</span>
117117
</div>
118118
)}
@@ -121,9 +121,7 @@ export default function ResourceValidationSettings() {
121121
policyList.filter((policy) => policy.selected).length > 0) && (
122122
<>
123123
<GenericList
124-
title={t(
125-
'settings.clusters.resourcesValidation.enabled-policies',
126-
)}
124+
title={t('settings.general.resourcesValidation.enabled-policies')}
127125
//@ts-expect-error Type mismatch between js and ts
128126
entries={
129127
choosePolicies
@@ -137,7 +135,7 @@ export default function ResourceValidationSettings() {
137135
{choosePolicies && (
138136
<Switch
139137
accessibleName={t(
140-
'settings.clusters.resourcesValidation.select-policy',
138+
'settings.general.resourcesValidation.select-policy',
141139
{
142140
name: entry.text,
143141
},
@@ -159,7 +157,7 @@ export default function ResourceValidationSettings() {
159157
endIcon="customize"
160158
onClick={enablePolicyCustomization}
161159
>
162-
{t('settings.clusters.resourcesValidation.customize')}
160+
{t('settings.general.resourcesValidation.customize')}
163161
</Button>
164162
)}
165163
{choosePolicies && (
@@ -168,15 +166,15 @@ export default function ResourceValidationSettings() {
168166
endIcon="reset"
169167
onClick={disablePolicyCustomization}
170168
>
171-
{t('settings.clusters.resourcesValidation.reset')}
169+
{t('settings.general.resourcesValidation.reset')}
172170
</Button>
173171
)}
174172
</>
175173
}
176174
searchSettings={{
177175
showSearchSuggestion: false,
178176
noSearchResultTitle: t(
179-
'settings.clusters.resourcesValidation.no-policies-found',
177+
'settings.general.resourcesValidation.no-policies-found',
180178
),
181179
noSearchResultSubtitle: '',
182180
textSearchProperties: ['key', 'text'],

‎src/components/Preferences/ThemeChooser.scss‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,9 @@
99
.icon-container {
1010
width: 40px;
1111
height: 40px;
12+
display: flex;
13+
justify-content: center;
14+
align-items: center;
1215
}
1316

1417
.theme-tile__text {

0 commit comments

Comments
 (0)