Add loading indicator to "Update username" button in account settings

app/assets/javascripts/profile/account/components/update_username.vue

@@ -90,7 +90,10 @@ Please update your Git repository remotes as soon as possible.`),
           this.isRequestPending = false;
         })
         .catch((error) => {
-          Flash(error.response.data.message);
+          Flash(
+            error?.response?.data?.message ||
+              s__('Profiles|An error occurred while updating your username, please try again.'),
+          );
           this.isRequestPending = false;
           throw error;
         });
@@ -121,7 +124,8 @@ Please update your Git repository remotes as soon as possible.`),
     </div>
     <gl-button
       v-gl-modal-directive="$options.modalId"
-      :disabled="isRequestPending || newUsername === username"
+      :disabled="newUsername === username"
+      :loading="isRequestPending"
       category="primary"
       variant="warning"
       data-testid="username-change-confirmation-modal"

changelogs/unreleased/21759-add-loading-indicator-to-update-username-button.yml

+---
+title: Add loading indicator to "Update username" button in account settings
+merge_request: 53142
+author: Kev @KevSlashNull
+type: changed

locale/gitlab.pot

@@ -22810,6 +22810,9 @@ msgstr ""
 msgid "Profiles|Add status emoji"
 msgstr ""
 
+msgid "Profiles|An error occurred while updating your username, please try again."
+msgstr ""
+
 msgid "Profiles|Avatar cropper"
 msgstr ""
 

spec/frontend/profile/account/components/update_username_spec.js

@@ -2,10 +2,13 @@ import { GlModal } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import MockAdapter from 'axios-mock-adapter';
 import { TEST_HOST } from 'helpers/test_constants';
+import { deprecatedCreateFlash as createFlash } from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 
 import UpdateUsername from '~/profile/account/components/update_username.vue';
 
+jest.mock('~/flash');
+
 describe('UpdateUsername component', () => {
   const rootUrl = TEST_HOST;
   const actionUrl = `${TEST_HOST}/update/username`;
@@ -105,7 +108,8 @@ describe('UpdateUsername component', () => {
 
       axiosMock.onPut(actionUrl).replyOnce(() => {
         expect(input.attributes('disabled')).toBe('disabled');
-        expect(openModalBtn.props('disabled')).toBe(true);
+        expect(openModalBtn.props('disabled')).toBe(false);
+        expect(openModalBtn.props('loading')).toBe(true);
 
         return [200, { message: 'Username changed' }];
       });
@@ -115,6 +119,7 @@ describe('UpdateUsername component', () => {
 
       expect(input.attributes('disabled')).toBe(undefined);
       expect(openModalBtn.props('disabled')).toBe(true);
+      expect(openModalBtn.props('loading')).toBe(false);
     });
 
     it('does not set the username after a erroneous update', async () => {
@@ -122,7 +127,8 @@ describe('UpdateUsername component', () => {
 
       axiosMock.onPut(actionUrl).replyOnce(() => {
         expect(input.attributes('disabled')).toBe('disabled');
-        expect(openModalBtn.props('disabled')).toBe(true);
+        expect(openModalBtn.props('disabled')).toBe(false);
+        expect(openModalBtn.props('loading')).toBe(true);
 
         return [400, { message: 'Invalid username' }];
       });
@@ -130,6 +136,29 @@ describe('UpdateUsername component', () => {
       await expect(wrapper.vm.onConfirm()).rejects.toThrow();
       expect(input.attributes('disabled')).toBe(undefined);
       expect(openModalBtn.props('disabled')).toBe(false);
+      expect(openModalBtn.props('loading')).toBe(false);
+    });
+
+    it('shows an error message if the error response has a `message` property', async () => {
+      axiosMock.onPut(actionUrl).replyOnce(() => {
+        return [400, { message: 'Invalid username' }];
+      });
+
+      await expect(wrapper.vm.onConfirm()).rejects.toThrow();
+
+      expect(createFlash).toBeCalledWith('Invalid username');
+    });
+
+    it("shows a fallback error message if the error response doesn't have a `message` property", async () => {
+      axiosMock.onPut(actionUrl).replyOnce(() => {
+        return [400];
+      });
+
+      await expect(wrapper.vm.onConfirm()).rejects.toThrow();
+
+      expect(createFlash).toBeCalledWith(
+        'An error occurred while updating your username, please try again.',
+      );
     });
   });
 });