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

@@ -26,10 +26,10 @@ const DiffNoteAvatars = Vue.extend({
         <!-- FIXME: Pass an alt attribute here for accessibility -->
         <user-avatar-image v-for="note in notesSubset"
           class="diff-comment-avatar js-diff-comment-avatar"
-          @click="clickedAvatar($event)
+          @click="clickedAvatar($event)"
           :img-src="note.authorAvatar"
           :img-size="19"
-          :tooltip-text="note.authorName + ': ' + note.noteTruncated"
+          :tooltip-text="getTooltipText(note)"
           :data-line-type="lineType"
           data-html="true"/>
         <span v-if="notesCount > shownAvatars"
@@ -151,6 +151,9 @@ const DiffNoteAvatars = Vue.extend({
     setDiscussionVisible() {
       this.isVisible = $(`.diffs .notes[data-discussion-id="${this.discussion.id}"]`).is(':visible');
     },
+    getTooltipText(note) {
+      return `${note.authorName}: ${note.noteTruncated}`;
+    },
   },
 });