}
onClose={onSaveClose}
confirm={{
title: msg.yes(),
@@ -113,7 +103,7 @@ SettingsToolbar.propTypes = {
onSave: PropTypes.func.isRequired,
onReset: PropTypes.func.isRequired,
onCancel: PropTypes.func.isRequired,
- translatedLabels: PropTypes.object.isRequired,
+ translatedLabels: PropTypes.array.isRequired,
enableSave: PropTypes.bool,
changes: PropTypes.array,
}
diff --git a/src/components/Settings/style.css b/src/components/Settings/style.css
index 6afca8517..918407300 100644
--- a/src/components/Settings/style.css
+++ b/src/components/Settings/style.css
@@ -61,7 +61,12 @@
:global(#settings-toolbar) {
margin-left: -20px;
}
-.changes-list{
+
+.section-list{
list-style-type: disc;
- list-style: inside;
+}
+
+.field-list{
+ list-style-type: circle;
+ margin-inline-start: 1em;
}
diff --git a/src/components/UserSettings/GlobalSettings.js b/src/components/UserSettings/GlobalSettings.js
index b57f773c8..90cb1f610 100644
--- a/src/components/UserSettings/GlobalSettings.js
+++ b/src/components/UserSettings/GlobalSettings.js
@@ -148,7 +148,7 @@ class GlobalSettings extends Component {
this.saveOptions(saveFields, id)
}
- buildSections (onChange, translatedLabels) {
+ buildSections (onChange) {
const { draftValues } = this.state
const { config, msg } = this.props
const idPrefix = 'global-user-settings'
@@ -156,139 +156,139 @@ class GlobalSettings extends Component {
[GENERAL_SECTION]: {
title: msg.general(),
fields: [
- {
+ ((name) => ({
title: msg.username(),
- name: 'username',
- body: {config.userName},
- },
- {
+ name,
+ body: {config[name]},
+ }))('userName'),
+ ((name) => ({
title: msg.email(),
- name: 'email',
- body: {config.email},
- },
- {
- title: translatedLabels.language,
- name: 'language',
+ name,
+ body: {config[name]},
+ }))('email'),
+ ((name) => ({
+ title: msg.language(),
+ name,
tooltip: draftValues.persistLocale ? undefined : msg.optionIsNotSavedOnTheServer({ persistenceReEnableHowTo: msg.persistenceReEnableHowTo({ advancedOptions: msg.advancedOptions() }) }),
body: (
({ id, value, isDefault: id === DEFAULT_LOCALE }))}
- selected={draftValues.language}
- onChange={onChange('language')}
+ selected={draftValues[name]}
+ onChange={onChange(name)}
/>
),
- },
- {
- title: translatedLabels.sshKey,
+ }))('language'),
+ ((name) => ({
+ title: msg.sshKey(),
tooltip: msg.sshKeyTooltip(),
- name: 'sshKey',
+ name,
body: (
onChange('sshKey')(e.target.value)}
- value={draftValues.sshKey || ''}
+ onChange={e => onChange(name)(e.target.value)}
+ value={draftValues[name] || ''}
rows={8}
/>
),
- },
+ }))('sshKey'),
],
},
refreshInterval: {
title: msg.refreshInterval(),
tooltip: msg.refreshIntervalTooltip(),
fields: [
- {
- title: translatedLabels.refreshInterval,
- name: 'refreshInterval',
+ ((name) => ({
+ title: msg.uiRefresh(),
+ name,
body: (
({ id, value, isDefault: id === AppConfiguration.schedulerFixedDelayInSeconds }))}
- selected={draftValues.refreshInterval}
- onChange={onChange('refreshInterval')}
+ selected={draftValues[name]}
+ onChange={onChange(name)}
/>
),
- },
+ }))('refreshInterval'),
],
},
notifications: {
title: msg.notifications(),
tooltip: msg.notificationSettingsAffectAllNotifications(),
fields: [
- {
- title: translatedLabels.showNotifications,
- name: 'showNotificatons',
+ ((name) => ({
+ title: msg.dontDisturb(),
+ name,
body: (
{
- onChange('showNotifications')(!dontDisturb)
+ onChange(name)(!dontDisturb)
}}
/>
),
- },
- {
- title: translatedLabels.notificationSnoozeDuration,
- name: 'notificationSnoozeDuration',
+ }))('showNotifications'),
+ ((name) => ({
+ title: msg.dontDisturbFor(),
+ name,
body: (
({ id, value, isDefault: id === AppConfiguration.notificationSnoozeDurationInMinutes }))}
- selected={draftValues.notificationSnoozeDuration}
- onChange={onChange('notificationSnoozeDuration')}
+ selected={draftValues[name]}
+ onChange={onChange(name)}
disabled={draftValues.showNotifications}
/>
),
- },
+ }))('notificationSnoozeDuration'),
],
},
advancedOptions: {
title: msg.advancedOptions(),
fields: [
- {
+ ((name) => ({
title: msg.persistLanguage(),
- name: 'persistLocale',
+ name,
tooltip: msg.persistLanguageTooltip(),
body: ( onChange('persistLocale')(persist)}
+ id={`${idPrefix}-${name}`}
+ isChecked={draftValues[name]}
+ onChange={(persist) => onChange(name)(persist)}
/>),
- },
+ }))('persistLocale'),
],
},
}
}
render () {
- const { lastTransactionId, currentValues, msg } = this.props
+ const { lastTransactionId, currentValues } = this.props
const { draftValues, baseValues, sentValues, defaultValues, activeSectionKey } = this.state
- // required also in Settings for error handling: the case of partial success(only some fields saved)
- // the alert shows the names of the fields that were NOT saved
- const translatedLabels = {
- sshKey: msg.sshKey(),
- language: msg.language(),
- showNotifications: msg.dontDisturb(),
- notificationSnoozeDuration: msg.dontDisturbFor(),
- refreshInterval: msg.uiRefresh(),
- persistLocale: msg.persistLanguage(),
- }
- const sections = this.buildSections(this.onChange, translatedLabels)
+ const sections = this.buildSections(this.onChange)
const { [activeSectionKey]: activeSection } = sections
+ // required in Settings for error handling and confirmation dialog
+ // the alert/dialog need to show the translated field labels (together with section labels)
+ // output: [ {sectionTitle: "globally unique + translated", fieldTitle: "translated", fieldName: "globally unique"}, ... ]}
+ // NOTE that the order of section/fields is preserved here
+ const translatedLabels = Object.values(sections)
+ .flatMap(section => section.sections ? Object.values(section.sections) : section)
+ .flatMap(({ title: sectionTitle, fields }) =>
+ // assume global uniqueness of: fieldName, sectionTitle
+ fields.map(({ name: fieldName, title: fieldTitle }) => ({ sectionTitle, fieldTitle, fieldName }))
+ )
const onSelect = result => {
this.setState({