Fix #39604 - Update header avatar after user changes avatar

app/assets/javascripts/profile/profile.js

@@ -61,7 +61,13 @@ export default class Profile {
       url: this.form.attr('action'),
       data: formData,
     })
-      .then(({ data }) => flash(data.message, 'notice'))
+      .then(({ data }) => {
+        if (avatarBlob != null) {
+          this.updateHeaderAvatar();
+        }
+
+        flash(data.message, 'notice');
+      })
       .then(() => {
         window.scrollTo(0, 0);
         // Enable submit button after requests ends
@@ -70,6 +76,10 @@ export default class Profile {
       .catch(error => flash(error.message));
   }
 
+  updateHeaderAvatar() {
+    $('.header-user-avatar').attr('src', this.avatarGlCrop.dataURL);
+  }
+
   setRepoRadio() {
     const multiEditRadios = $('input[name="user[multi_file]"]');
     if (this.newRepoActivated || this.newRepoActivated === 'true') {

changelogs/unreleased/39604-update-top-right-avatar-after-changing-avatar.yml

@@ -0,0 +1,5 @@
+---
+title: Change avatar image in the header when user updates their avatar.
+merge_request: 20119
+author: Jamie Schembri
+type: added

spec/features/uploads/user_uploads_avatar_to_profile_spec.rb

@@ -1,17 +1,16 @@
 require 'rails_helper'
 
 feature 'User uploads avatar to profile' do
-  scenario 'they see their new avatar' do
-    user = create(:user)
-    sign_in(user)
+  let!(:user) { create(:user) }
+  let(:avatar_file_path) { Rails.root.join('spec', 'fixtures', 'dk.png') }
 
+  before do
+    sign_in user
     visit profile_path
-    attach_file(
-      'user_avatar',
-      Rails.root.join('spec', 'fixtures', 'dk.png'),
-      visible: false
-    )
+  end
 
+  scenario 'they see their new avatar on their profile' do
+    attach_file('user_avatar', avatar_file_path, visible: false)
     click_button 'Update profile settings'
 
     visit user_path(user)
@@ -21,4 +20,16 @@ feature 'User uploads avatar to profile' do
     # Cheating here to verify something that isn't user-facing, but is important
     expect(user.reload.avatar.file).to exist
   end
+
+  scenario 'their new avatar is immediately visible in the header', :js do
+    find('.js-user-avatar-input', visible: false).set(avatar_file_path)
+
+    click_button 'Set new profile picture'
+    click_button 'Update profile settings'
+
+    wait_for_all_requests
+
+    data_uri = find('.avatar-image .avatar')['src']
+    expect(page.find('.header-user-avatar')['src']).to eq data_uri
+  end
 end