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

@@ -29,6 +29,7 @@ describe('User Avatar Image Component', function () {
       }).$mount();
       this.userAvatarImage = this.vueInstance.$children[0];
+      this.imageElement = this.userAvatarImage.$refs.tooltipTarget;
     });
     it('should return a defined Vue component', function () {
@@ -56,10 +57,18 @@ describe('User Avatar Image Component', function () {
       expect(this.userAvatarImage.tooltipContainer).toBe('body');
     });
+    it('should properly render tooltipContainer', function () {
+      expect(this.imageElement).toContain('body');
+    });
+
     it('should properly compute tooltipClass', function () {
       expect(this.userAvatarImage.tooltipClass).toBe('has-tooltip');
     });
+    it('should properly render tooltipClass', function () {
+      expect(this.imageElement).toContain('has-tooltip');
+    });
+
     it('should properly compute avatarSizeClass', function () {
       expect(this.userAvatarImage.avatarSizeClass).toBe('s99');
     });
@@ -67,5 +76,9 @@ describe('User Avatar Image Component', function () {
     it('should properly compute imgCssClasses', function () {
       expect(this.userAvatarImage.imgCssClasses).toBe('avatar has-tooltip s99 myextraavatarclass');
     });
+
+    it('should properly render imgCssClasses', function () {
+      expect(this.imageElement).toContain('avatar has-tooltip s99 myextraavatarclass');
+    });
   });
 });