From 23df5760cb2e23a19a38ccd6155356a65c9ac6cd Mon Sep 17 00:00:00 2001
From: Ashley Harrison <ashley.harrison@grafana.com>
Date: Mon, 19 May 2025 15:59:07 +0100
Subject: [PATCH] [release-12.0.1] Preferences: Disable the save button whilst
 saving preferences (#105612)

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

(cherry picked from commit 98c9bc50288b288137a6a256b68cdba69dffd81d)
---
 .../SharedPreferences.test.tsx                |  7 ++--
 .../SharedPreferences/SharedPreferences.tsx   | 36 ++++++++++++-------
 2 files changed, 26 insertions(+), 17 deletions(-)

diff --git a/public/app/core/components/SharedPreferences/SharedPreferences.test.tsx b/public/app/core/components/SharedPreferences/SharedPreferences.test.tsx
index d2a02b59252..aa6a1217338 100644
--- a/public/app/core/components/SharedPreferences/SharedPreferences.test.tsx
+++ b/public/app/core/components/SharedPreferences/SharedPreferences.test.tsx
@@ -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());
diff --git a/public/app/core/components/SharedPreferences/SharedPreferences.tsx b/public/app/core/components/SharedPreferences/SharedPreferences.tsx
index 2cd7ca041e9..0a456e07414 100644
--- a/public/app/core/components/SharedPreferences/SharedPreferences.tsx
+++ b/public/app/core/components/SharedPreferences/SharedPreferences.tsx
@@ -39,6 +39,7 @@ export interface Props {
 
 export type State = UserPreferencesDTO & {
   isLoading: boolean;
+  isSubmitting: boolean;
 };
 function getLanguageOptions(): ComboboxOption[] {
   const languageOptions = LANGUAGES.map((v) => ({
@@ -97,6 +98,7 @@ export class SharedPreferences extends PureComponent<Props, State> {
     this.service = new PreferencesService(props.resourceUri);
     this.state = {
       isLoading: false,
+      isSubmitting: false,
       theme: '',
       timezone: '',
       weekStart: '',
@@ -152,16 +154,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();
     }
   };
@@ -212,7 +219,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];
@@ -345,7 +352,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>