Skip to content

Check that `<user_avatar_link/>` in `app/assets/javascripts/notes/components/noteable_note.vue` works properly with `GlAvatar`

Kos Palchyk requested to merge 355867-check-that-user_avatar_link-in-app-assets-javascripts-notes-components-noteable_note-vue into master

Fixes #355867 (closed)

Adapts <user_avatar_link/> in noteable_note.vue to the new GLAvatar.

GLAvatar doesn't support 40x40 size, which was used in noteable_note.vue, so I had to use the 32x32 size (which is closest and also aligns with timeline icons)

Screenshots or screen recordings

Noteable note in "Overview"

Mobile:

before flag off flag on
Screenshot_2022-05-04_at_17.14.15 Screenshot_2022-05-04_at_16.37.15 Screenshot_2022-05-04_at_16.48.23

Desktop:

before flag off flag on
localhost_3000_h5bp_html5-boilerplate_-merge_requests_1 localhost_3000_h5bp_html5-boilerplate_-merge_requests_1__3 localhost_3000_h5bp_html5-boilerplate_-merge_requests_1__4

Noteable note in "Changes"

Mobile:

before flag off flag on
Screenshot_2022-05-04_at_17.12.26 Screenshot_2022-05-04_at_16.43.43 Screenshot_2022-05-04_at_16.51.04

Desktop:

before flag off flag on
localhost_3000_h5bp_html5-boilerplate_-merge_requests_1_diffs__4 localhost_3000_h5bp_html5-boilerplate_-merge_requests_1_diffs__2 localhost_3000_h5bp_html5-boilerplate_-merge_requests_1_diffs__3

How to set up and validate locally

  1. Open an MR (open or closed)
  2. Add a comment to the MR in Overview and in the Changes tab (code comment), add a subcomment.
  3. Note how both threads look in mobile and desktop view, in both tabs (Overview and Changes)
  4. Then enable feature flag that would switch user_avatar_link to use the new version of GLAvatar Feature.enable(:gl_avatar_for_all_user_avatars)
  5. Check the added comments again

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

Edited by Kos Palchyk

Merge request reports