Update user avatar in settings sidebar realtime when a user updates the avatar

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() {

app/views/layouts/nav/sidebar/_profile.html.haml

@@ -3,7 +3,7 @@
     .context-header
       = link_to profile_path, title: _('Profile Settings') do
         .avatar-container.s40.settings-avatar
-          = image_tag avatar_icon_for_user(current_user, 40), class: "avatar s40 avatar-tile", alt: current_user.name
+          = image_tag avatar_icon_for_user(current_user, 40), class: "avatar s40 avatar-tile js-sidebar-user-avatar", alt: current_user.name, data: { testid: 'sidebar-user-avatar' }
         .sidebar-context-title= _('User Settings')
     %ul.sidebar-top-level-items
       = nav_link(path: 'profiles#show', html_options: {class: 'home'}) do

changelogs/unreleased/sidebar-user-avatar.yml

+---
+title: Update user avatar in sidebar realtime
+merge_request: 54135
+author: Yogi (@yo)
+type: changed

spec/features/uploads/user_uploads_avatar_to_profile_spec.rb

@@ -23,7 +23,7 @@ RSpec.describe 'User uploads avatar to profile' do
     expect(user.reload.avatar.file).to exist
   end
 
-  it 'their new avatar is immediately visible in the header', :js do
+  it 'their new avatar is immediately visible in the header and setting sidebar', :js do
     find('.js-user-avatar-input', visible: false).set(avatar_file_path)
 
     click_button 'Set new profile picture'
@@ -33,5 +33,6 @@ RSpec.describe 'User uploads avatar to profile' do
 
     data_uri = find('.avatar-image .avatar')['src']
     expect(page.find('.header-user-avatar')['src']).to eq data_uri
+    expect(page.find('[data-testid="sidebar-user-avatar"]')['src']).to eq data_uri
   end
 end