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

@@ -3,76 +3,74 @@
 import Vue from 'vue';
 import UserAvatarImage from '~/vue_shared/components/user_avatar/user_avatar_image';
-(() => {
-  describe('User Avatar Image Component', function () {
-    describe('Initialization', function () {
-      beforeEach(function () {
-        const propsData = this.propsData = {
-          size: 99,
-          src: 'myavatarurl.com',
-          alt: 'mydisplayname',
-          css: 'myextraavatarclass',
-          tooltipText: 'tooltip text',
-        };
-        this.vueInstance = new Vue({
-          data: propsData,
-          components: {
-            'user-avatar-image': UserAvatarImage,
-          },
-          template: `
-            <user-avatar-image 
-              :size='size' 
-              :src='src' 
-              :alt='alt' 
-              :css='css' 
-              :tooltip-text='tooltipText'>
-            </user-avatar-image>
-          `,
-        }).$mount();
-        this.UserAvatarImageComponent = this.vueInstance.$children[0];
-      });
-      it('should return a defined Vue component', function () {
-        expect(this.vueInstance).toBeDefined();
-      });
-      it('should have user-avatar-image as child component', function () {
-        expect(this.UserAvatarImageComponent).toBeDefined();
-        expect(this.vueInstance.$options.components['user-avatar-image']).toBeDefined();
-      });
-      it('should have <img> as a child element', function () {
-        const componentImgTag = this.UserAvatarImageComponent.$el.outerHTML;
-        expect(componentImgTag).toContain('<img');
-      });
-      it('should return neccessary props as defined', function (done) {
-        Vue.nextTick(() => {
-          _.each(this.propsData, (val, key) => {
-            expect(this.UserAvatarImageComponent[key]).toBeDefined();
-          });
-          done();
+describe('User Avatar Image Component', function () {
+  describe('Initialization', function () {
+    beforeEach(function () {
+      const propsData = this.propsData = {
+        size: 99,
+        src: 'myavatarurl.com',
+        alt: 'mydisplayname',
+        css: 'myextraavatarclass',
+        tooltipText: 'tooltip text',
+      };
+      this.vueInstance = new Vue({
+        data: propsData,
+        components: {
+          'user-avatar-image': UserAvatarImage,
+        },
+        template: `
+          <user-avatar-image 
+            :size='size' 
+            :src='src' 
+            :alt='alt' 
+            :css='css' 
+            :tooltip-text='tooltipText'>
+          </user-avatar-image>
+        `,
+      }).$mount();
+      this.UserAvatarImageComponent = this.vueInstance.$children[0];
+    });
+    it('should return a defined Vue component', function () {
+      expect(this.vueInstance).toBeDefined();
+    });
+    it('should have user-avatar-image as child component', function () {
+      expect(this.UserAvatarImageComponent).toBeDefined();
+      expect(this.vueInstance.$options.components['user-avatar-image']).toBeDefined();
+    });
+    it('should have <img> as a child element', function () {
+      const componentImgTag = this.UserAvatarImageComponent.$el.outerHTML;
+      expect(componentImgTag).toContain('<img');
+    });
+    it('should return neccessary props as defined', function (done) {
+      Vue.nextTick(() => {
+        _.each(this.propsData, (val, key) => {
+          expect(this.UserAvatarImageComponent[key]).toBeDefined();
         });
+        done();
       });
-      it('should properly compute tooltipContainer', function () {
-        expect(this.UserAvatarImageComponent.tooltipContainer).toBe('body');
-      });
-      it('should properly compute tooltipClass', function () {
-        expect(this.UserAvatarImageComponent.tooltipClass).toBe('has-tooltip');
-      });
-      it('should properly compute avatarSizeClass', function () {
-        expect(this.UserAvatarImageComponent.avatarSizeClass).toBe('s99');
-      });
-      it('should properly compute imgCss', function () {
-        expect(this.UserAvatarImageComponent.imgCss).toBe('avatar has-tooltip s99 myextraavatarclass');
-      });
+    });
+    it('should properly compute tooltipContainer', function () {
+      expect(this.UserAvatarImageComponent.tooltipContainer).toBe('body');
+    });
+    it('should properly compute tooltipClass', function () {
+      expect(this.UserAvatarImageComponent.tooltipClass).toBe('has-tooltip');
+    });
+    it('should properly compute avatarSizeClass', function () {
+      expect(this.UserAvatarImageComponent.avatarSizeClass).toBe('s99');
+    });
+    it('should properly compute imgCss', function () {
+      expect(this.UserAvatarImageComponent.imgCss).toBe('avatar has-tooltip s99 myextraavatarclass');
     });
   });
-})();
+});