Preferences: Disable the save button whilst saving preferences (#105605)

* disable the save button whilst saving preferences

* use .finally to always reset state of submit button

* fix unit tests
This commit is contained in:
Ashley Harrison
2025-05-19 12:42:44 +01:00
committed by GitHub
parent 808b371225
commit 98c9bc5028
2 changed files with 26 additions and 17 deletions

View File

@ -93,8 +93,8 @@ const defaultPreferences: UserPreferencesDTO = {
language: '',
};
const mockPrefsPatch = jest.fn();
const mockPrefsUpdate = jest.fn();
const mockPrefsPatch = jest.fn().mockResolvedValue(undefined);
const mockPrefsUpdate = jest.fn().mockResolvedValue(undefined);
const mockPrefsLoad = jest.fn().mockResolvedValue(mockPreferences);
jest.mock('app/core/services/PreferencesService', () => ({
@ -129,9 +129,6 @@ describe('SharedPreferences', () => {
});
beforeEach(async () => {
mockReload.mockReset();
mockPrefsUpdate.mockReset();
render(<SharedPreferences {...props} />);
await waitFor(() => expect(mockPrefsLoad).toHaveBeenCalled());

View File

@ -40,6 +40,7 @@ export interface Props {
export type State = UserPreferencesDTO & {
isLoading: boolean;
isSubmitting: boolean;
};
function getLanguageOptions(): ComboboxOption[] {
const languageOptions = LANGUAGES.map((v) => ({
@ -98,6 +99,7 @@ export class SharedPreferences extends PureComponent<Props, State> {
this.service = new PreferencesService(props.resourceUri);
this.state = {
isLoading: false,
isSubmitting: false,
theme: '',
timezone: '',
weekStart: '',
@ -153,16 +155,21 @@ export class SharedPreferences extends PureComponent<Props, State> {
theme,
language,
});
await this.service.update({
homeDashboardUID,
theme,
timezone,
weekStart,
language,
locale,
queryHistory,
navbar,
});
this.setState({ isSubmitting: true });
await this.service
.update({
homeDashboardUID,
theme,
timezone,
weekStart,
language,
locale,
queryHistory,
navbar,
})
.finally(() => {
this.setState({ isSubmitting: false });
});
window.location.reload();
}
};
@ -213,7 +220,7 @@ export class SharedPreferences extends PureComponent<Props, State> {
};
render() {
const { theme, timezone, weekStart, homeDashboardUID, language, isLoading, locale } = this.state;
const { theme, timezone, weekStart, homeDashboardUID, language, isLoading, isSubmitting, locale } = this.state;
const { disabled } = this.props;
const styles = getStyles();
const currentThemeOption = this.themeOptions.find((x) => x.value === theme) ?? this.themeOptions[0];
@ -346,7 +353,12 @@ export class SharedPreferences extends PureComponent<Props, State> {
</Field>
)}
</FieldSet>
<Button type="submit" variant="primary" data-testid={selectors.components.UserProfile.preferencesSaveButton}>
<Button
disabled={isSubmitting}
type="submit"
variant="primary"
data-testid={selectors.components.UserProfile.preferencesSaveButton}
>
<Trans i18nKey="common.save">Save</Trans>
</Button>
</form>