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

+/* eslint-disable no-restricted-syntax */
+
+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();
+        });
+      });
+
+      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');
+      });
+    });
+  });
+})();
+
+/**
+ * tooltipClass() {
+      return this.tooltipText ? 'has-tooltip' : '';
+    },
+    tooltipContainer() {
+      return this.tooltipText ? 'body' : null;
+    },
+    avatarSizeClass() {
+      return `s${this.size}`;
+    },
+    imgCss() {
+      return `avatar ${this.tooltipClass} ${this.avatarSizeClass} ${this.css}`;
+    },
+
+
+      <img 
+      :class="imgCss" 
+      :src="src" 
+      :width="size" 
+      :height="size" 
+      :alt="alt" 
+      :data-container='tooltipContainer'
+      :data-title='tooltipText'
+      :data-original-title='tooltipText'/>
+  `,
+};
+ * 
+ * 
+ */
\ No newline at end of file