mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
Chore: Remove Form usage from SharedPreferences.tsx (#81468)
* Chore: Remove Form usage from SharedPreferences.tsx * Update betterer * Update betterer
This commit is contained in:
Alex Khomenko
GitHub
parent
c310a20966
commit
1749ec9d5e
@ -1050,9 +1050,6 @@ exports[`better eslint`] = {
|
||||
[0, 0, 0, "Use data-testid for E2E selectors instead of aria-label", "0"],
|
||||
[0, 0, 0, "Styles should be written using objects.", "1"]
|
||||
],
|
||||
"public/app/core/components/SharedPreferences/SharedPreferences.tsx:5381": [
|
||||
[0, 0, 0, "Styles should be written using objects.", "0"]
|
||||
],
|
||||
"public/app/core/components/TagFilter/TagFilter.tsx:5381": [
|
||||
[0, 0, 0, "Unexpected any. Specify a different type.", "0"],
|
||||
[0, 0, 0, "Unexpected any. Specify a different type.", "1"],
|
||||
|
||||
@ -9,7 +9,6 @@ import {
|
||||
Button,
|
||||
Field,
|
||||
FieldSet,
|
||||
Form,
|
||||
Label,
|
||||
Select,
|
||||
stylesFactory,
|
||||
@ -87,7 +86,8 @@ export class SharedPreferences extends PureComponent<Props, State> {
|
||||
});
|
||||
}
|
||||
|
||||
onSubmitForm = async () => {
|
||||
onSubmitForm = async (event: React.FormEvent<HTMLFormElement>) => {
|
||||
event.preventDefault();
|
||||
const confirmationResult = this.props.onConfirm ? await this.props.onConfirm() : true;
|
||||
|
||||
if (confirmationResult) {
|
||||
@ -137,94 +137,84 @@ export class SharedPreferences extends PureComponent<Props, State> {
|
||||
const currentThemeOption = this.themeOptions.find((x) => x.value === theme) ?? this.themeOptions[0];
|
||||
|
||||
return (
|
||||
<Form onSubmit={this.onSubmitForm}>
|
||||
{() => {
|
||||
return (
|
||||
<>
|
||||
<FieldSet label={<Trans i18nKey="shared-preferences.title">Preferences</Trans>} disabled={disabled}>
|
||||
<Field label={t('shared-preferences.fields.theme-label', 'Interface theme')}>
|
||||
<Select
|
||||
options={this.themeOptions}
|
||||
value={currentThemeOption}
|
||||
onChange={this.onThemeChanged}
|
||||
inputId="shared-preferences-theme-select"
|
||||
/>
|
||||
</Field>
|
||||
<form onSubmit={this.onSubmitForm} className={styles.form}>
|
||||
<FieldSet label={<Trans i18nKey="shared-preferences.title">Preferences</Trans>} disabled={disabled}>
|
||||
<Field label={t('shared-preferences.fields.theme-label', 'Interface theme')}>
|
||||
<Select
|
||||
options={this.themeOptions}
|
||||
value={currentThemeOption}
|
||||
onChange={this.onThemeChanged}
|
||||
inputId="shared-preferences-theme-select"
|
||||
/>
|
||||
</Field>
|
||||
|
||||
<Field
|
||||
label={
|
||||
<Label htmlFor="home-dashboard-select">
|
||||
<span className={styles.labelText}>
|
||||
<Trans i18nKey="shared-preferences.fields.home-dashboard-label">Home Dashboard</Trans>
|
||||
</span>
|
||||
</Label>
|
||||
}
|
||||
data-testid="User preferences home dashboard drop down"
|
||||
>
|
||||
<DashboardPicker
|
||||
value={homeDashboardUID}
|
||||
onChange={(v) => this.onHomeDashboardChanged(v?.uid ?? '')}
|
||||
defaultOptions={true}
|
||||
isClearable={true}
|
||||
placeholder={t('shared-preferences.fields.home-dashboard-placeholder', 'Default dashboard')}
|
||||
inputId="home-dashboard-select"
|
||||
/>
|
||||
</Field>
|
||||
<Field
|
||||
label={
|
||||
<Label htmlFor="home-dashboard-select">
|
||||
<span className={styles.labelText}>
|
||||
<Trans i18nKey="shared-preferences.fields.home-dashboard-label">Home Dashboard</Trans>
|
||||
</span>
|
||||
</Label>
|
||||
}
|
||||
data-testid="User preferences home dashboard drop down"
|
||||
>
|
||||
<DashboardPicker
|
||||
value={homeDashboardUID}
|
||||
onChange={(v) => this.onHomeDashboardChanged(v?.uid ?? '')}
|
||||
defaultOptions={true}
|
||||
isClearable={true}
|
||||
placeholder={t('shared-preferences.fields.home-dashboard-placeholder', 'Default dashboard')}
|
||||
inputId="home-dashboard-select"
|
||||
/>
|
||||
</Field>
|
||||
|
||||
<Field
|
||||
label={t('shared-dashboard.fields.timezone-label', 'Timezone')}
|
||||
data-testid={selectors.components.TimeZonePicker.containerV2}
|
||||
>
|
||||
<TimeZonePicker
|
||||
includeInternal={true}
|
||||
value={timezone}
|
||||
onChange={this.onTimeZoneChanged}
|
||||
inputId="shared-preferences-timezone-picker"
|
||||
/>
|
||||
</Field>
|
||||
<Field
|
||||
label={t('shared-dashboard.fields.timezone-label', 'Timezone')}
|
||||
data-testid={selectors.components.TimeZonePicker.containerV2}
|
||||
>
|
||||
<TimeZonePicker
|
||||
includeInternal={true}
|
||||
value={timezone}
|
||||
onChange={this.onTimeZoneChanged}
|
||||
inputId="shared-preferences-timezone-picker"
|
||||
/>
|
||||
</Field>
|
||||
|
||||
<Field
|
||||
label={t('shared-preferences.fields.week-start-label', 'Week start')}
|
||||
data-testid={selectors.components.WeekStartPicker.containerV2}
|
||||
>
|
||||
<WeekStartPicker
|
||||
value={weekStart || ''}
|
||||
onChange={this.onWeekStartChanged}
|
||||
inputId={'shared-preferences-week-start-picker'}
|
||||
/>
|
||||
</Field>
|
||||
<Field
|
||||
label={t('shared-preferences.fields.week-start-label', 'Week start')}
|
||||
data-testid={selectors.components.WeekStartPicker.containerV2}
|
||||
>
|
||||
<WeekStartPicker
|
||||
value={weekStart || ''}
|
||||
onChange={this.onWeekStartChanged}
|
||||
inputId={'shared-preferences-week-start-picker'}
|
||||
/>
|
||||
</Field>
|
||||
|
||||
<Field
|
||||
label={
|
||||
<Label htmlFor="locale-select">
|
||||
<span className={styles.labelText}>
|
||||
<Trans i18nKey="shared-preferences.fields.locale-label">Language</Trans>
|
||||
</span>
|
||||
<FeatureBadge featureState={FeatureState.beta} />
|
||||
</Label>
|
||||
}
|
||||
data-testid="User preferences language drop down"
|
||||
>
|
||||
<Select
|
||||
value={languages.find((lang) => lang.value === language)}
|
||||
onChange={(lang: SelectableValue<string>) => this.onLanguageChanged(lang.value ?? '')}
|
||||
options={languages}
|
||||
placeholder={t('shared-preferences.fields.locale-placeholder', 'Choose language')}
|
||||
inputId="locale-select"
|
||||
/>
|
||||
</Field>
|
||||
</FieldSet>
|
||||
<Button
|
||||
type="submit"
|
||||
variant="primary"
|
||||
data-testid={selectors.components.UserProfile.preferencesSaveButton}
|
||||
>
|
||||
<Trans i18nKey="common.save">Save</Trans>
|
||||
</Button>
|
||||
</>
|
||||
);
|
||||
}}
|
||||
</Form>
|
||||
<Field
|
||||
label={
|
||||
<Label htmlFor="locale-select">
|
||||
<span className={styles.labelText}>
|
||||
<Trans i18nKey="shared-preferences.fields.locale-label">Language</Trans>
|
||||
</span>
|
||||
<FeatureBadge featureState={FeatureState.beta} />
|
||||
</Label>
|
||||
}
|
||||
data-testid="User preferences language drop down"
|
||||
>
|
||||
<Select
|
||||
value={languages.find((lang) => lang.value === language)}
|
||||
onChange={(lang: SelectableValue<string>) => this.onLanguageChanged(lang.value ?? '')}
|
||||
options={languages}
|
||||
placeholder={t('shared-preferences.fields.locale-placeholder', 'Choose language')}
|
||||
inputId="locale-select"
|
||||
/>
|
||||
</Field>
|
||||
</FieldSet>
|
||||
<Button type="submit" variant="primary" data-testid={selectors.components.UserProfile.preferencesSaveButton}>
|
||||
<Trans i18nKey="common.save">Save</Trans>
|
||||
</Button>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -233,9 +223,13 @@ export default SharedPreferences;
|
||||
|
||||
const getStyles = stylesFactory(() => {
|
||||
return {
|
||||
labelText: css`
|
||||
margin-right: 6px;
|
||||
`,
|
||||
labelText: css({
|
||||
marginRight: '6px',
|
||||
}),
|
||||
form: css({
|
||||
width: '100%',
|
||||
maxWidth: '600px',
|
||||
}),
|
||||
};
|
||||
});
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user