diff --git a/app/assets/javascripts/profile/profile.js b/app/assets/javascripts/profile/profile.js index 5d58d968d30..8cf7f2f23d0 100644 --- a/app/assets/javascripts/profile/profile.js +++ b/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') { diff --git a/changelogs/unreleased/39604-update-top-right-avatar-after-changing-avatar.yml b/changelogs/unreleased/39604-update-top-right-avatar-after-changing-avatar.yml new file mode 100644 index 00000000000..17192673996 --- /dev/null +++ b/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 diff --git a/spec/features/uploads/user_uploads_avatar_to_profile_spec.rb b/spec/features/uploads/user_uploads_avatar_to_profile_spec.rb index 52003bb0859..766bb4f09cd 100644 --- a/spec/features/uploads/user_uploads_avatar_to_profile_spec.rb +++ b/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