Consolidate user avatar Vue logic

Creates 3 vue components:

1. user-avatar-link
2. user-avatar-image
3. user-avatar-svg

and implements them in several places.

Closes https://gitlab.com/gitlab-org/gitlab-ce/issues/31017

• Port to EE
• Test each implementation manually

EE Compatible Branch: https://gitlab.com/gitlab-org/gitlab-ee/merge_requests/1699

app/assets/javascripts/diff_notes/components/diff_note_avatars.js

@@ -3,6 +3,7 @@
 import Vue from 'vue';
 import collapseIcon from '../icons/collapse_icon.svg';
+import UserAvatarImage from '../vue_shared/components/user_avatar/user_avatar_image';
 const DiffNoteAvatars = Vue.extend({
   props: ['discussionId'],
@@ -15,22 +16,21 @@ const DiffNoteAvatars = Vue.extend({
       collapseIcon,
     };
   },
+  components: {
+    'user-avatar-image': UserAvatarImage,
+  },
   template: `
     <div class="diff-comment-avatar-holders"
       v-show="notesCount !== 0">
       <div v-if="!isVisible">
-        <img v-for="note in notesSubset"
-          class="avatar diff-comment-avatar has-tooltip js-diff-comment-avatar"
-          width="19"
-          height="19"
-          role="button"
-          data-container="body"
-          data-placement="top"
-          data-html="true"
+        <user-avatar-image v-for="note in notesSubset"
+          class="diff-comment-avatar js-diff-comment-avatar"
+          @click="clickedAvatar($event)
+          :img-src="note.authorAvatar"
+          :img-size="19"
+          :tooltip-text="note.authorName + ': ' + note.noteTruncated"
           :data-line-type="lineType"
-          :title="note.authorName + ': ' + note.noteTruncated"
-          :src="note.authorAvatar"
-          @click="clickedAvatar($event)" />
+          data-html="true"/>
         <span v-if="notesCount > shownAvatars"
           class="diff-comments-more-count has-tooltip js-diff-comment-avatar"
           data-container="body"