Add latest changes from gitlab-org/gitlab@13-10-stable-eev13.10.0-rc40

3 files changed, 27 insertions, 8 deletions

diff --git a/app/assets/javascripts/profile/account/components/update_username.vue b/app/assets/javascripts/profile/account/components/update_username.vue
index c5478aa0226..f18c4d8f03e 100644
--- a/app/assets/javascripts/profile/account/components/update_username.vue
+++ b/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"
diff --git a/app/assets/javascripts/profile/preferences/components/profile_preferences.vue b/app/assets/javascripts/profile/preferences/components/profile_preferences.vue
index 184ee3810ac..07d8f3cc5f1 100644
--- a/app/assets/javascripts/profile/preferences/components/profile_preferences.vue
+++ b/app/assets/javascripts/profile/preferences/components/profile_preferences.vue
@@ -44,6 +44,8 @@ export default {
   data() {
     return {
       isSubmitEnabled: true,
+      darkModeOnCreate: null,
+      darkModeOnSubmit: null,
     };
   },
   computed: {
@@ -58,6 +60,7 @@ export default {
     this.formEl.addEventListener('ajax:beforeSend', this.handleLoading);
     this.formEl.addEventListener('ajax:success', this.handleSuccess);
     this.formEl.addEventListener('ajax:error', this.handleError);
+    this.darkModeOnCreate = this.darkModeSelected();
   },
   beforeDestroy() {
     this.formEl.removeEventListener('ajax:beforeSend', this.handleLoading);
@@ -65,16 +68,27 @@ export default {
     this.formEl.removeEventListener('ajax:error', this.handleError);
   },
   methods: {
+    darkModeSelected() {
+      const theme = this.getSelectedTheme();
+      return theme ? theme.css_class === 'gl-dark' : null;
+    },
+    getSelectedTheme() {
+      const themeId = new FormData(this.formEl).get('user[theme_id]');
+      return this.applicationThemes[themeId] ?? null;
+    },
     handleLoading() {
       this.isSubmitEnabled = false;
+      this.darkModeOnSubmit = this.darkModeSelected();
     },
     handleSuccess(customEvent) {
-      const formData = new FormData(this.formEl);
-      updateClasses(
-        this.bodyClasses,
-        this.applicationThemes[formData.get('user[theme_id]')].css_class,
-        this.selectedLayout,
-      );
+      // Reload the page if the theme has changed from light to dark mode or vice versa
+      // to correctly load all required styles.
+      const modeChanged = this.darkModeOnCreate ? !this.darkModeOnSubmit : this.darkModeOnSubmit;
+      if (modeChanged) {
+        window.location.reload();
+        return;
+      }
+      updateClasses(this.bodyClasses, this.getSelectedTheme().css_class, this.selectedLayout);
       const { message = this.$options.i18n.defaultSuccess, type = FLASH_TYPES.NOTICE } =
         customEvent?.detail?.[0] || {};
       createFlash({ message, type });
diff --git a/app/assets/javascripts/profile/profile.js b/app/assets/javascripts/profile/profile.js
index a7332b81b9f..dad2c18fb18 100644
--- a/app/assets/javascripts/profile/profile.js
+++ b/app/assets/javascripts/profile/profile.js
@@ -95,6 +95,7 @@ export default class Profile {
 
   updateHeaderAvatar() {
     $('.header-user-avatar').attr('src', this.avatarGlCrop.dataURL);
+    $('.js-sidebar-user-avatar').attr('src', this.avatarGlCrop.dataURL);
   }
 
   setRepoRadio() {