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

spec/javascripts/vue_shared/components/user_avatar_image_spec.js

@@ -12,33 +12,23 @@ fdescribe('User Avatar Image Component', function () {
         tooltipText: 'tooltip text',
       };
-      this.vueInstance = new Vue({
-        data: this.propsData,
-        components: {
-          'user-avatar-image': UserAvatarImage,
-        },
-        template: `
-          <user-avatar-image
-            :size="size"
-            :src="src"
-            :alt="alt"
-            :css-classes="cssClasses"
-            :tooltip-text="tooltipText"
-          />
-        `,
+      const UserAvatarImageComponent = Vue.extend(UserAvatarImage);
+
+      this.userAvatarImage = new Vue({
+        propsData: this.propsData,
       }).$mount();
-      this.userAvatarImage = this.vueInstance.$children[0];
+      this.userAvatarImage = this.userAvatarImage.$children[0];
       this.imageElement = this.userAvatarImage.$refs.tooltipTarget;
     });
     it('should return a defined Vue component', function () {
-      expect(this.vueInstance).toBeDefined();
+      expect(this.userAvatarImage).toBeDefined();
     });
     it('should have user-avatar-image as child component', function () {
       expect(this.userAvatarImage).toBeDefined();
-      expect(this.vueInstance.$options.components['user-avatar-image']).toBeDefined();
+      expect(this.userAvatarImage.$options.components['user-avatar-image']).toBeDefined();
     });
     it('should have <img> as a child element', function () {
@@ -89,7 +79,7 @@ fdescribe('User Avatar Image Component', function () {
         svg: avatarSvg,
       };
-      this.vueInstance = new Vue({
+      this.userAvatarImage = new Vue({
         data: this.propsData,
         components: {
           'user-avatar-image': UserAvatarImage,
@@ -101,7 +91,7 @@ fdescribe('User Avatar Image Component', function () {
         `,
       }).$mount();
-      this.userAvatarImageComponent = this.vueInstance.$children[0];
+      this.userAvatarImageComponent = this.userAvatarImage.$children[0];
       this.iconElement = this.userAvatarImageComponent.$el.querySelector('svg');
       this.imageElement = this.userAvatarImageComponent.$el.querySelector('img');
     });
@@ -125,7 +115,7 @@ fdescribe('User Avatar Image Component', function () {
       this.defaultAvatarUrl = gon.default_avatar_url;
       this.propsData = {};
-      this.vueInstance = new Vue({
+      this.userAvatarImage = new Vue({
         data: this.propsData,
         components: {
           'user-avatar-image': UserAvatarImage,
@@ -135,7 +125,7 @@ fdescribe('User Avatar Image Component', function () {
         `,
       }).$mount();
-      this.userAvatarImageComponent = this.vueInstance.$children[0];
+      this.userAvatarImageComponent = this.userAvatarImage.$children[0];
     });
     it('imgSourceWithFallback returns the default avatar URL', function () {