Fix included avatar in the code copy

Changelog: fixed

app/assets/javascripts/diffs/components/diff_gutter_avatars.vue

@@ -82,7 +82,7 @@ export default {
         :img-src="note.author.avatar_url"
         :size="24"
         :tooltip-text="getTooltipText(note)"
-        lazy
+        pseudo
         class="diff-comment-avatar js-diff-comment-avatar"
         @click.native="$emit('toggleLineDiscussions')"
       />

app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_image.vue

@@ -68,6 +68,12 @@ export default {
       required: false,
       default: 'top',
     },
+    // Render avatar using pseudo-elements so that they cannot be selected or copied
+    pseudo: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   computed: {
     // API response sends null when gravatar is disabled and
@@ -96,14 +102,17 @@ export default {
 <template>
   <span ref="userAvatar">
     <gl-avatar
+      class="gl-bg-size-cover"
       :class="{
         lazy: lazy,
         [cssClasses]: true,
       }"
-      :src="resultantSrcAttribute"
+      :src="pseudo ? undefined : resultantSrcAttribute"
+      :style="pseudo ? { backgroundImage: `url('${sanitizedSource}')` } : null"
       :data-src="sanitizedSource"
       :size="size"
       :alt="imgAlt"
+      data-testid="user-avatar-image"
     />
 
     <gl-tooltip

app/assets/stylesheets/page_bundles/merge_requests.scss

@@ -44,7 +44,9 @@ $tabs-holder-z-index: 250;
 .diff-comment-avatar,
 .diff-comments-more-count {
   position: absolute;
-  left: 0;
+  // center 24px avatar on a 20px line
+  left: -2px;
+  top: -2px;
   margin-right: 0;
   border-color: var(--white, $white);
   cursor: pointer;

spec/features/merge_request/user_sees_avatar_on_diff_notes_spec.rb

@@ -95,14 +95,14 @@
         page.within find_line(position.line_code(project.repository)) do
           find('.diff-notes-collapse').send_keys(:return)
 
-          expect(page).to have_selector('.js-diff-comment-avatar img', count: 1)
+          expect(page).to have_selector('.js-diff-comment-avatar [data-testid="user-avatar-image"]', count: 1)
         end
       end
 
       it 'shows comment on note avatar' do
         page.within find_line(position.line_code(project.repository)) do
           find('.diff-notes-collapse').send_keys(:return)
-          first('.js-diff-comment-avatar img').hover
+          first('.js-diff-comment-avatar [data-testid="user-avatar-image"]').hover
         end
 
         expect(page).to have_content "#{note.author.name}: #{note.note.truncate(17)}"
@@ -116,7 +116,7 @@
         expect(page).not_to have_selector('.notes_holder')
 
         page.within find_line(position.line_code(project.repository)) do
-          first('.js-diff-comment-avatar img').click
+          first('.js-diff-comment-avatar [data-testid="user-avatar-image"]').click
         end
 
         expect(page).to have_selector('.notes_holder')
@@ -132,7 +132,7 @@
         wait_for_requests
 
         page.within find_line(position.line_code(project.repository)) do
-          expect(page).not_to have_selector('.js-diff-comment-avatar img')
+          expect(page).not_to have_selector('.js-diff-comment-avatar [data-testid="user-avatar-image"]')
         end
       end
 
@@ -151,7 +151,7 @@
         page.within find_line(position.line_code(project.repository)) do
           find('.diff-notes-collapse').send_keys(:return)
 
-          expect(page).to have_selector('.js-diff-comment-avatar img', count: 2)
+          expect(page).to have_selector('.js-diff-comment-avatar [data-testid="user-avatar-image"]', count: 2)
         end
       end
 
@@ -171,7 +171,7 @@
         page.within find_line(position.line_code(project.repository)) do
           find('.diff-notes-collapse').send_keys(:return)
 
-          expect(page).to have_selector('.js-diff-comment-avatar img', count: 3)
+          expect(page).to have_selector('.js-diff-comment-avatar [data-testid="user-avatar-image"]', count: 3)
           expect(find('.diff-comments-more-count')).to have_content '+1'
         end
       end

spec/frontend/diffs/components/diff_gutter_avatars_spec.js

 import { shallowMount } from '@vue/test-utils';
 import { nextTick } from 'vue';
 import DiffGutterAvatars from '~/diffs/components/diff_gutter_avatars.vue';
+import UserAvatarImage from '~/vue_shared/components/user_avatar/user_avatar_image.vue';
 import { HIDE_COMMENTS } from '~/diffs/i18n';
 import discussionsMockData from '../mock_data/diff_discussions';
 
@@ -11,7 +12,7 @@ describe('DiffGutterAvatars', () => {
 
   const findCollapseButton = () => wrapper.find('.diff-notes-collapse');
   const findMoreCount = () => wrapper.find('.diff-comments-more-count');
-  const findUserAvatars = () => wrapper.findAll('.diff-comment-avatar');
+  const findUserAvatars = () => wrapper.findAllComponents(UserAvatarImage);
 
   const createComponent = (props = {}) => {
     wrapper = shallowMount(DiffGutterAvatars, {
@@ -63,6 +64,11 @@ describe('DiffGutterAvatars', () => {
       expect(findUserAvatars().length).toBe(3);
     });
 
+    // Avoid images in file contents copy: https://gitlab.com/gitlab-org/gitlab/-/issues/337139
+    it('renders pseudo avatars', () => {
+      expect(findUserAvatars().wrappers.every((avatar) => avatar.props('pseudo'))).toBe(true);
+    });
+
     it('renders correct moreCount number', () => {
       expect(findMoreCount().text()).toBe('+2');
     });

spec/frontend/vue_shared/components/user_avatar/user_avatar_image_spec.js

@@ -150,4 +150,21 @@ describe('User Avatar Image Component', () => {
       });
     });
   });
+
+  describe('when pseudo prop is true', () => {
+    beforeEach(() => {
+      wrapper = shallowMount(UserAvatarImage, {
+        propsData: { ...PROVIDED_PROPS, pseudo: true },
+      });
+    });
+
+    it('passes image to GlAvatar through style attribute', () => {
+      // using falsy here to avoid issues with Vue 3
+      // eslint-disable-next-line jest/no-restricted-matchers
+      expect(wrapper.findComponent(GlAvatar).props('src')).toBeFalsy();
+      expect(wrapper.findComponent(GlAvatar).attributes('style')).toBe(
+        `background-image: url(${PROVIDED_PROPS.imgSrc}?width=${PROVIDED_PROPS.size});`,
+      );
+    });
+  });
 });

spec/frontend/vue_shared/components/user_avatar/user_avatar_link_spec.js

@@ -47,6 +47,7 @@ describe('User Avatar Link Component', () => {
       imgAlt: defaultProps.imgAlt,
       imgSrc: defaultProps.imgSrc,
       lazy: false,
+      pseudo: false,
       size: defaultProps.imgSize,
       tooltipPlacement: defaultProps.tooltipPlacement,
       tooltipText: '',