From 5d57965a0b4e0a103145a0a264c06c98790247ce Mon Sep 17 00:00:00 2001
From: Bryce Johnson <bryce@gitlab.com>
Date: Sat, 15 Apr 2017 19:38:07 -0400
Subject: [PATCH 1/4] Consolidate user avatar Vue logic

---
 .../boards/components/issue_card_inner.js     | 27 +++----
 .../components/stage_code_component.js        |  7 +-
 .../components/stage_issue_component.js       |  8 +-
 .../components/stage_plan_component.js        |  9 ++-
 .../components/stage_production_component.js  |  8 +-
 .../components/stage_review_component.js      |  8 +-
 .../components/stage_staging_component.js     |  7 +-
 .../components/diff_note_avatars.js           | 28 ++++---
 .../components/environment_item.vue           | 19 ++---
 .../pipelines/components/pipeline_url.js      | 22 ++---
 .../vue_shared/components/commit.js           | 20 ++---
 .../user_avatar/user_avatar_image.vue         | 79 ++++++++++++++++++
 .../user_avatar/user_avatar_link.vue          | 80 +++++++++++++++++++
 .../user_avatar/user_avatar_size_mixin.js     | 13 +++
 .../user_avatar/user_avatar_svg.vue           | 42 ++++++++++
 app/assets/stylesheets/framework/icons.scss   |  4 +
 .../stylesheets/pages/environments.scss       |  4 -
 config/webpack.config.js                      |  5 +-
 .../merge_requests/diff_notes_avatars_spec.rb |  2 +-
 spec/javascripts/boards/issue_card_spec.js    |  2 +-
 .../pipelines/pipeline_url_spec.js            |  2 +-
 .../vue_shared/components/commit_spec.js      |  2 +-
 .../components/pipelines_table_row_spec.js    | 43 +++++++++-
 .../components/user_avatar_image_spec.js      | 60 ++++++++++++++
 .../components/user_avatar_link_spec.js       | 58 ++++++++++++++
 .../components/user_avatar_size_mixin_spec.js | 37 +++++++++
 .../components/user_avatar_svg_spec.js        | 35 ++++++++
 27 files changed, 554 insertions(+), 77 deletions(-)
 create mode 100644 app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_image.vue
 create mode 100644 app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_link.vue
 create mode 100644 app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_size_mixin.js
 create mode 100644 app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_svg.vue
 create mode 100644 spec/javascripts/vue_shared/components/user_avatar_image_spec.js
 create mode 100644 spec/javascripts/vue_shared/components/user_avatar_link_spec.js
 create mode 100644 spec/javascripts/vue_shared/components/user_avatar_size_mixin_spec.js
 create mode 100644 spec/javascripts/vue_shared/components/user_avatar_svg_spec.js

diff --git a/app/assets/javascripts/boards/components/issue_card_inner.js b/app/assets/javascripts/boards/components/issue_card_inner.js
index 710207db0c7416..4699ef5a51c7b6 100644
--- a/app/assets/javascripts/boards/components/issue_card_inner.js
+++ b/app/assets/javascripts/boards/components/issue_card_inner.js
@@ -1,4 +1,5 @@
 import Vue from 'vue';
+import userAvatarLink from '../../vue_shared/components/user_avatar/user_avatar_link.vue';
 import eventHub from '../eventhub';
 
 const Store = gl.issueBoards.BoardsStore;
@@ -38,6 +39,9 @@ gl.issueBoards.IssueCardInner = Vue.extend({
       maxCounter: 99,
     };
   },
+  components: {
+    userAvatarLink,
+  },
   computed: {
     numberOverLimit() {
       return this.issue.assignees.length - this.limitBeforeCounter;
@@ -146,23 +150,16 @@ gl.issueBoards.IssueCardInner = Vue.extend({
           </span>
         </h4>
         <div class="card-assignee">
-          <a
-            class="has-tooltip js-no-trigger"
-            :href="assigneeUrl(assignee)"
-            :title="assigneeUrlTitle(assignee)"
+          <user-avatar-link
             v-for="(assignee, index) in issue.assignees"
             v-if="shouldRenderAssignee(index)"
-            data-container="body"
-            data-placement="bottom"
-          >
-            <img
-              class="avatar avatar-inline s20"
-              :src="assignee.avatar"
-              width="20"
-              height="20"
-              :alt="avatarUrlTitle(assignee)"
-            />
-          </a>
+            class="js-no-trigger"
+            :link-href="assigneeUrl(assignee)"
+            :img-alt="avatarUrlTitle(assignee)"
+            :img-src="assignee.avatar"
+            :tooltip-text="assigneeUrlTitle(assignee)"
+            tooltip-placement="bottom"
+          />
           <span
             class="avatar-counter has-tooltip"
             :title="assigneeCounterTooltip"
diff --git a/app/assets/javascripts/cycle_analytics/components/stage_code_component.js b/app/assets/javascripts/cycle_analytics/components/stage_code_component.js
index 0d9ad197abf18d..eeb61826ace197 100644
--- a/app/assets/javascripts/cycle_analytics/components/stage_code_component.js
+++ b/app/assets/javascripts/cycle_analytics/components/stage_code_component.js
@@ -1,6 +1,7 @@
 /* eslint-disable no-param-reassign */
 
 import Vue from 'vue';
+import userAvatarImage from '../../vue_shared/components/user_avatar/user_avatar_image.vue';
 
 const global = window.gl || (window.gl = {});
 global.cycleAnalytics = global.cycleAnalytics || {};
@@ -10,6 +11,9 @@ global.cycleAnalytics.StageCodeComponent = Vue.extend({
     items: Array,
     stage: Object,
   },
+  components: {
+    userAvatarImage,
+  },
   template: `
     <div>
       <div class="events-description">
@@ -19,7 +23,8 @@ global.cycleAnalytics.StageCodeComponent = Vue.extend({
       <ul class="stage-event-list">
         <li v-for="mergeRequest in items" class="stage-event-item">
           <div class="item-details">
-            <img class="avatar" :src="mergeRequest.author.avatarUrl">
+            <!-- FIXME: Pass an alt attribute here for accessibility -->
+            <user-avatar-image :img-src="mergeRequest.author.avatarUrl"/>
             <h5 class="item-title merge-merquest-title">
               <a :href="mergeRequest.url">
                 {{ mergeRequest.title }}
diff --git a/app/assets/javascripts/cycle_analytics/components/stage_issue_component.js b/app/assets/javascripts/cycle_analytics/components/stage_issue_component.js
index ad285874643fd8..09fb390787d572 100644
--- a/app/assets/javascripts/cycle_analytics/components/stage_issue_component.js
+++ b/app/assets/javascripts/cycle_analytics/components/stage_issue_component.js
@@ -1,6 +1,6 @@
 /* eslint-disable no-param-reassign */
-
 import Vue from 'vue';
+import userAvatarImage from '../../vue_shared/components/user_avatar/user_avatar_image.vue';
 
 const global = window.gl || (window.gl = {});
 global.cycleAnalytics = global.cycleAnalytics || {};
@@ -10,6 +10,9 @@ global.cycleAnalytics.StageIssueComponent = Vue.extend({
     items: Array,
     stage: Object,
   },
+  components: {
+    userAvatarImage,
+  },
   template: `
     <div>
       <div class="events-description">
@@ -19,7 +22,8 @@ global.cycleAnalytics.StageIssueComponent = Vue.extend({
       <ul class="stage-event-list">
         <li v-for="issue in items" class="stage-event-item">
           <div class="item-details">
-            <img class="avatar" :src="issue.author.avatarUrl">
+            <!-- FIXME: Pass an alt attribute here for accessibility -->
+            <user-avatar-image :img-src="issue.author.avatarUrl"/>
             <h5 class="item-title issue-title">
               <a class="issue-title" :href="issue.url">
                 {{ issue.title }}
diff --git a/app/assets/javascripts/cycle_analytics/components/stage_plan_component.js b/app/assets/javascripts/cycle_analytics/components/stage_plan_component.js
index 222084deee94c3..6bdac63b68106a 100644
--- a/app/assets/javascripts/cycle_analytics/components/stage_plan_component.js
+++ b/app/assets/javascripts/cycle_analytics/components/stage_plan_component.js
@@ -1,5 +1,6 @@
 /* eslint-disable no-param-reassign */
 import Vue from 'vue';
+import userAvatarImage from '../../vue_shared/components/user_avatar/user_avatar_image.vue';
 import iconCommit from '../svg/icon_commit.svg';
 
 const global = window.gl || (window.gl = {});
@@ -10,11 +11,12 @@ global.cycleAnalytics.StagePlanComponent = Vue.extend({
     items: Array,
     stage: Object,
   },
-
+  components: {
+    userAvatarImage,
+  },
   data() {
     return { iconCommit };
   },
-
   template: `
     <div>
       <div class="events-description">
@@ -24,7 +26,8 @@ global.cycleAnalytics.StagePlanComponent = Vue.extend({
       <ul class="stage-event-list">
         <li v-for="commit in items" class="stage-event-item">
           <div class="item-details item-conmmit-component">
-            <img class="avatar" :src="commit.author.avatarUrl">
+            <!-- FIXME: Pass an alt attribute here for accessibility -->
+            <user-avatar-image :img-src="commit.author.avatarUrl"/>
             <h5 class="item-title commit-title">
               <a :href="commit.commitUrl">
                 {{ commit.title }}
diff --git a/app/assets/javascripts/cycle_analytics/components/stage_production_component.js b/app/assets/javascripts/cycle_analytics/components/stage_production_component.js
index a14ebc3ece9429..bdf86b4ff3ca6d 100644
--- a/app/assets/javascripts/cycle_analytics/components/stage_production_component.js
+++ b/app/assets/javascripts/cycle_analytics/components/stage_production_component.js
@@ -1,6 +1,6 @@
 /* eslint-disable no-param-reassign */
-
 import Vue from 'vue';
+import userAvatarImage from '../../vue_shared/components/user_avatar/user_avatar_image.vue';
 
 const global = window.gl || (window.gl = {});
 global.cycleAnalytics = global.cycleAnalytics || {};
@@ -10,6 +10,9 @@ global.cycleAnalytics.StageProductionComponent = Vue.extend({
     items: Array,
     stage: Object,
   },
+  components: {
+    userAvatarImage,
+  },
   template: `
     <div>
       <div class="events-description">
@@ -19,7 +22,8 @@ global.cycleAnalytics.StageProductionComponent = Vue.extend({
       <ul class="stage-event-list">
         <li v-for="issue in items" class="stage-event-item">
           <div class="item-details">
-            <img class="avatar" :src="issue.author.avatarUrl">
+            <!-- FIXME: Pass an alt attribute here for accessibility -->
+            <user-avatar-image :img-src="issue.author.avatarUrl"/>
             <h5 class="item-title issue-title">
               <a class="issue-title" :href="issue.url">
                 {{ issue.title }}
diff --git a/app/assets/javascripts/cycle_analytics/components/stage_review_component.js b/app/assets/javascripts/cycle_analytics/components/stage_review_component.js
index 1a5bf9bc0b5118..cfb7a4ab5760b1 100644
--- a/app/assets/javascripts/cycle_analytics/components/stage_review_component.js
+++ b/app/assets/javascripts/cycle_analytics/components/stage_review_component.js
@@ -1,6 +1,6 @@
 /* eslint-disable no-param-reassign */
-
 import Vue from 'vue';
+import userAvatarImage from '../../vue_shared/components/user_avatar/user_avatar_image.vue';
 
 const global = window.gl || (window.gl = {});
 global.cycleAnalytics = global.cycleAnalytics || {};
@@ -10,6 +10,9 @@ global.cycleAnalytics.StageReviewComponent = Vue.extend({
     items: Array,
     stage: Object,
   },
+  components: {
+    userAvatarImage,
+  },
   template: `
     <div>
       <div class="events-description">
@@ -19,7 +22,8 @@ global.cycleAnalytics.StageReviewComponent = Vue.extend({
       <ul class="stage-event-list">
         <li v-for="mergeRequest in items" class="stage-event-item">
           <div class="item-details">
-            <img class="avatar" :src="mergeRequest.author.avatarUrl">
+            <!-- FIXME: Pass an alt attribute here for accessibility -->
+            <user-avatar-image :img-src="mergeRequest.author.avatarUrl"/>
             <h5 class="item-title merge-merquest-title">
               <a :href="mergeRequest.url">
                 {{ mergeRequest.title }}
diff --git a/app/assets/javascripts/cycle_analytics/components/stage_staging_component.js b/app/assets/javascripts/cycle_analytics/components/stage_staging_component.js
index b1e9362434f1f6..e7d8b576fe7a43 100644
--- a/app/assets/javascripts/cycle_analytics/components/stage_staging_component.js
+++ b/app/assets/javascripts/cycle_analytics/components/stage_staging_component.js
@@ -1,5 +1,6 @@
 /* eslint-disable no-param-reassign */
 import Vue from 'vue';
+import userAvatarImage from '../../vue_shared/components/user_avatar/user_avatar_image.vue';
 import iconBranch from '../svg/icon_branch.svg';
 
 const global = window.gl || (window.gl = {});
@@ -13,6 +14,9 @@ global.cycleAnalytics.StageStagingComponent = Vue.extend({
   data() {
     return { iconBranch };
   },
+  components: {
+    userAvatarImage,
+  },
   template: `
     <div>
       <div class="events-description">
@@ -22,7 +26,8 @@ global.cycleAnalytics.StageStagingComponent = Vue.extend({
       <ul class="stage-event-list">
         <li v-for="build in items" class="stage-event-item item-build-component">
           <div class="item-details">
-            <img class="avatar" :src="build.author.avatarUrl">
+            <!-- FIXME: Pass an alt attribute here for accessibility -->
+            <user-avatar-image :img-src="build.author.avatarUrl"/>
             <h5 class="item-title">
               <a :href="build.url" class="pipeline-id">#{{ build.id }}</a>
               <i class="fa fa-code-fork"></i>
diff --git a/app/assets/javascripts/diff_notes/components/diff_note_avatars.js b/app/assets/javascripts/diff_notes/components/diff_note_avatars.js
index f3a688fbf2f851..c282b917ee099d 100644
--- a/app/assets/javascripts/diff_notes/components/diff_note_avatars.js
+++ b/app/assets/javascripts/diff_notes/components/diff_note_avatars.js
@@ -3,6 +3,7 @@
 
 import Vue from 'vue';
 import collapseIcon from '../icons/collapse_icon.svg';
+import userAvatarImage from '../../vue_shared/components/user_avatar/user_avatar_image.vue';
 
 const DiffNoteAvatars = Vue.extend({
   props: ['discussionId'],
@@ -15,22 +16,24 @@ const DiffNoteAvatars = Vue.extend({
       collapseIcon,
     };
   },
+  components: {
+    userAvatarImage,
+  },
   template: `
     <div class="diff-comment-avatar-holders"
       v-show="notesCount !== 0">
       <div v-if="!isVisible">
-        <img v-for="note in notesSubset"
-          class="avatar diff-comment-avatar has-tooltip js-diff-comment-avatar"
-          width="19"
-          height="19"
-          role="button"
-          data-container="body"
-          data-placement="top"
-          data-html="true"
+        <!-- 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.native="clickedAvatar($event)"
+          :img-src="note.authorAvatar"
+          :tooltip-text="getTooltipText(note)"
           :data-line-type="lineType"
-          :title="note.authorName + ': ' + note.noteTruncated"
-          :src="note.authorAvatar"
-          @click="clickedAvatar($event)" />
+          :size="19"
+          data-html="true"
+        />
         <span v-if="notesCount > shownAvatars"
           class="diff-comments-more-count has-tooltip js-diff-comment-avatar"
           data-container="body"
@@ -150,6 +153,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}`;
+    },
   },
 });
 
diff --git a/app/assets/javascripts/environments/components/environment_item.vue b/app/assets/javascripts/environments/components/environment_item.vue
index 11741771b4bf25..771488a5750343 100644
--- a/app/assets/javascripts/environments/components/environment_item.vue
+++ b/app/assets/javascripts/environments/components/environment_item.vue
@@ -1,6 +1,8 @@
 <script>
 import Timeago from 'timeago.js';
+import _ from 'underscore';
 import '../../lib/utils/text_utility';
+import userAvatarLink from '../../vue_shared/components/user_avatar/user_avatar_link.vue';
 import ActionsComponent from './environment_actions.vue';
 import ExternalUrlComponent from './environment_external_url.vue';
 import StopComponent from './environment_stop.vue';
@@ -14,6 +16,7 @@ const timeagoInstance = new Timeago();
 
 export default {
   components: {
+    userAvatarLink,
     'commit-component': CommitComponent,
     'actions-component': ActionsComponent,
     'external-url-component': ExternalUrlComponent,
@@ -499,15 +502,13 @@ export default {
 
       <span v-if="!model.isFolder && deploymentHasUser">
         by
-        <a
-          :href="deploymentUser.web_url"
-          class="js-deploy-user-container">
-          <img
-            class="avatar has-tooltip s20"
-            :src="deploymentUser.avatar_url"
-            :alt="userImageAltDescription"
-            :title="deploymentUser.username" />
-        </a>
+        <user-avatar-link
+          class="js-deploy-user-container"
+          :link-href="deploymentUser.web_url"
+          :img-src="deploymentUser.avatar_url"
+          :img-alt="userImageAltDescription"
+          :tooltip-text="deploymentUser.username"
+        />
       </span>
     </td>
 
diff --git a/app/assets/javascripts/pipelines/components/pipeline_url.js b/app/assets/javascripts/pipelines/components/pipeline_url.js
index 4e183d5c8eca14..088314536af6a9 100644
--- a/app/assets/javascripts/pipelines/components/pipeline_url.js
+++ b/app/assets/javascripts/pipelines/components/pipeline_url.js
@@ -1,3 +1,5 @@
+import userAvatarLink from '../../vue_shared/components/user_avatar/user_avatar_link.vue';
+
 export default {
   props: [
     'pipeline',
@@ -7,6 +9,9 @@ export default {
       return !!this.pipeline.user;
     },
   },
+  components: {
+    userAvatarLink,
+  },
   template: `
     <td>
       <a
@@ -15,18 +20,13 @@ export default {
         <span class="pipeline-id">#{{pipeline.id}}</span>
       </a>
       <span>by</span>
-      <a
-        class="js-pipeline-url-user"
+      <user-avatar-link
         v-if="user"
-        :href="pipeline.user.web_url">
-        <img
-          v-if="user"
-          class="avatar has-tooltip s20 "
-          :title="pipeline.user.name"
-          data-container="body"
-          :src="pipeline.user.avatar_url"
-        >
-      </a>
+        class="js-pipeline-url-user"
+        :link-href="pipeline.user.web_url"
+        :img-src="pipeline.user.avatar_url"
+        :tooltip-text="pipeline.user.name"
+      />
       <span
         v-if="!user"
         class="js-pipeline-url-api api monospace">
diff --git a/app/assets/javascripts/vue_shared/components/commit.js b/app/assets/javascripts/vue_shared/components/commit.js
index fb68abd95a2182..81425368f32769 100644
--- a/app/assets/javascripts/vue_shared/components/commit.js
+++ b/app/assets/javascripts/vue_shared/components/commit.js
@@ -1,4 +1,5 @@
 import commitIconSvg from 'icons/_icon_commit.svg';
+import userAvatarLink from './user_avatar/user_avatar_link.vue';
 
 export default {
   props: {
@@ -110,6 +111,9 @@ export default {
     return { commitIconSvg };
   },
 
+  components: {
+    userAvatarLink,
+  },
   template: `
     <div class="branch-commit">
 
@@ -133,16 +137,14 @@ export default {
 
       <p class="commit-title">
         <span v-if="title">
-          <a v-if="hasAuthor"
+          <user-avatar-link
+            v-if="hasAuthor"
             class="avatar-image-container"
-            :href="author.web_url">
-            <img
-              class="avatar has-tooltip s20"
-              :src="author.avatar_url"
-              :alt="userImageAltDescription"
-              :title="author.username" />
-          </a>
-
+            :link-href="author.web_url"
+            :img-src="author.avatar_url"
+            :img-alt="userImageAltDescription"
+            :tooltip-text="author.username"
+          />
           <a class="commit-row-message"
             :href="commitUrl">
             {{title}}
diff --git a/app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_image.vue b/app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_image.vue
new file mode 100644
index 00000000000000..4891e7f927c619
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_image.vue
@@ -0,0 +1,79 @@
+<script>
+
+/* This is a re-usable vue component for rendering a user avatar that
+  does not need to link to the user's profile. The image and an optional
+  tooltip can be configured by props passed to this component.
+
+  Sample configuration:
+
+  <user-avatar-image
+    :img-src="userAvatarSrc"
+    :img-alt="tooltipText"
+    :tooltip-text="tooltipText"
+    tooltip-placement="top"
+  />
+
+*/
+
+import defaultAvatarUrl from 'images/no_avatar.png';
+import UserAvatarSizeMixin from './user_avatar_size_mixin';
+import TooltipMixin from '../../mixins/tooltip';
+
+export default {
+  name: 'UserAvatarImage',
+  mixins: [UserAvatarSizeMixin, TooltipMixin],
+  props: {
+    imgSrc: {
+      type: String,
+      required: false,
+      default: defaultAvatarUrl,
+    },
+    cssClasses: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    imgAlt: {
+      type: String,
+      required: false,
+      default: 'user avatar',
+    },
+    size: {
+      type: Number,
+      required: false,
+      default: 20,
+    },
+    tooltipText: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    tooltipPlacement: {
+      type: String,
+      required: false,
+      default: 'top',
+    },
+  },
+  computed: {
+    tooltipContainer() {
+      return this.tooltipText ? 'body' : null;
+    },
+    imgCssClasses() {
+      return `avatar ${this.avatarSizeClass} ${this.cssClasses}`;
+    },
+  },
+};
+</script>
+
+<template>
+  <img
+    :class="imgCssClasses"
+    :src="imgSrc"
+    :style="avatarSizeStylesMap"
+    :alt="imgAlt"
+    :data-container="tooltipContainer"
+    :data-placement="tooltipPlacement"
+    :title="tooltipText"
+    ref="tooltip"
+  />
+</template>
diff --git a/app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_link.vue b/app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_link.vue
new file mode 100644
index 00000000000000..95898d54cf7bdc
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_link.vue
@@ -0,0 +1,80 @@
+<script>
+
+/* This is a re-usable vue component for rendering a user avatar wrapped in
+  a clickable link (likely to the user's profile). The link, image, and
+  tooltip can be configured by props passed to this component.
+
+  Sample configuration:
+
+  <user-avatar-link
+    :link-href="userProfileUrl"
+    :img-src="userAvatarSrc"
+    :img-alt="tooltipText"
+    :img-size="20"
+    :tooltip-text="tooltipText"
+    tooltip-placement="top"
+  />
+
+*/
+
+import userAvatarImage from './user_avatar_image.vue';
+
+export default {
+  name: 'UserAvatarLink',
+  components: {
+    userAvatarImage,
+  },
+  props: {
+    linkHref: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    imgSrc: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    imgAlt: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    imgCssClasses: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    imgSize: {
+      type: Number,
+      required: false,
+      default: 20,
+    },
+    tooltipText: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    tooltipPlacement: {
+      type: String,
+      required: false,
+      default: 'top',
+    },
+  },
+};
+</script>
+
+<template>
+  <a
+    class="user-avatar-link"
+    :href="linkHref">
+    <user-avatar-image
+      :img-src="imgSrc"
+      :img-alt="imgAlt"
+      :css-classes="imgCssClasses"
+      :size="imgSize"
+      :tooltip-text="tooltipText"
+      :tooltip-placement="tooltipPlacement"
+    />
+  </a>
+</template>
diff --git a/app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_size_mixin.js b/app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_size_mixin.js
new file mode 100644
index 00000000000000..b6155ffd28e3a3
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_size_mixin.js
@@ -0,0 +1,13 @@
+export default {
+  computed: {
+    avatarSizeStylesMap() {
+      return {
+        width: `${this.size}px`,
+        height: `${this.size}px`,
+      };
+    },
+    avatarSizeClass() {
+      return `s${this.size}`;
+    },
+  },
+};
diff --git a/app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_svg.vue b/app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_svg.vue
new file mode 100644
index 00000000000000..39b4d37c91e3f8
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_svg.vue
@@ -0,0 +1,42 @@
+<script>
+
+/* This is a re-usable vue component for rendering a user avatar svg (typically
+  for a blank state). It will receive styles comparable to the user avatar,
+  but no image is loaded, it isn't wrapped in a link, and tooltips aren't supported.
+  The svg and avatar size can be configured by props passed to this component.
+
+  Sample configuration:
+
+  <user-avatar-svg
+    :svg="potentialApproverSvg"
+    :size="20"
+  />
+
+*/
+
+import UserAvatarSizeMixin from './user_avatar_size_mixin';
+
+export default {
+  mixins: [UserAvatarSizeMixin],
+  props: {
+    svg: {
+      type: String,
+      required: true,
+    },
+    size: {
+      type: Number,
+      required: false,
+      default: 20,
+    },
+  },
+};
+</script>
+
+<template>
+  <svg
+    :class="avatarSizeClass"
+    :style="avatarSizeStylesMap"
+    v-html="svg">
+  </svg>
+</template>
+
diff --git a/app/assets/stylesheets/framework/icons.scss b/app/assets/stylesheets/framework/icons.scss
index 1b7d4e4225813a..ef864e8f6a9da3 100644
--- a/app/assets/stylesheets/framework/icons.scss
+++ b/app/assets/stylesheets/framework/icons.scss
@@ -65,3 +65,7 @@
     text-decoration: none;
   }
 }
+
+.user-avatar-link {
+  text-decoration: none;
+}
diff --git a/app/assets/stylesheets/pages/environments.scss b/app/assets/stylesheets/pages/environments.scss
index e52b58906e16c4..75b8e225bfca6e 100644
--- a/app/assets/stylesheets/pages/environments.scss
+++ b/app/assets/stylesheets/pages/environments.scss
@@ -73,10 +73,6 @@
       margin: 0;
     }
 
-    .avatar-image-container {
-      text-decoration: none;
-    }
-
     .icon-play {
       height: 13px;
       width: 12px;
diff --git a/config/webpack.config.js b/config/webpack.config.js
index 4fcbd60337cbab..ed2f2e82c2452d 100644
--- a/config/webpack.config.js
+++ b/config/webpack.config.js
@@ -88,9 +88,9 @@ var config = {
         loader: 'raw-loader',
       },
       {
-        test: /\.gif$/,
+        test: /\.(gif|png)$/,
         loader: 'url-loader',
-        query: { mimetype: 'image/gif' },
+        options: { limit: 2048 },
       },
       {
         test: /\.(worker\.js|pdf)$/,
@@ -186,6 +186,7 @@ var config = {
       'emojis':         path.join(ROOT_PATH, 'fixtures/emojis'),
       'empty_states':   path.join(ROOT_PATH, 'app/views/shared/empty_states'),
       'icons':          path.join(ROOT_PATH, 'app/views/shared/icons'),
+      'images':         path.join(ROOT_PATH, 'app/assets/images'),
       'vendor':         path.join(ROOT_PATH, 'vendor/assets/javascripts'),
       'vue$':           'vue/dist/vue.esm.js',
     }
diff --git a/spec/features/merge_requests/diff_notes_avatars_spec.rb b/spec/features/merge_requests/diff_notes_avatars_spec.rb
index b2e170513c4a4b..ccf047d3efa3cd 100644
--- a/spec/features/merge_requests/diff_notes_avatars_spec.rb
+++ b/spec/features/merge_requests/diff_notes_avatars_spec.rb
@@ -91,7 +91,7 @@
         page.within find("[id='#{position.line_code(project.repository)}']") do
           find('.diff-notes-collapse').click
 
-          expect(first('img.js-diff-comment-avatar')["title"]).to eq("#{note.author.name}: #{note.note.truncate(17)}")
+          expect(first('img.js-diff-comment-avatar')["data-original-title"]).to eq("#{note.author.name}: #{note.note.truncate(17)}")
         end
       end
 
diff --git a/spec/javascripts/boards/issue_card_spec.js b/spec/javascripts/boards/issue_card_spec.js
index fddde799d01acf..bd9b4fbfdd3b79 100644
--- a/spec/javascripts/boards/issue_card_spec.js
+++ b/spec/javascripts/boards/issue_card_spec.js
@@ -129,7 +129,7 @@ describe('Issue card component', () => {
 
       it('sets title', () => {
         expect(
-          component.$el.querySelector('.card-assignee a').getAttribute('title'),
+          component.$el.querySelector('.card-assignee img').getAttribute('data-original-title'),
         ).toContain(`Assigned to ${user.name}`);
       });
 
diff --git a/spec/javascripts/pipelines/pipeline_url_spec.js b/spec/javascripts/pipelines/pipeline_url_spec.js
index 53931d67ad78e5..0bcc390570262d 100644
--- a/spec/javascripts/pipelines/pipeline_url_spec.js
+++ b/spec/javascripts/pipelines/pipeline_url_spec.js
@@ -60,7 +60,7 @@ describe('Pipeline Url Component', () => {
     expect(
       component.$el.querySelector('.js-pipeline-url-user').getAttribute('href'),
     ).toEqual(mockData.pipeline.user.web_url);
-    expect(image.getAttribute('title')).toEqual(mockData.pipeline.user.name);
+    expect(image.getAttribute('data-original-title')).toEqual(mockData.pipeline.user.name);
     expect(image.getAttribute('src')).toEqual(mockData.pipeline.user.avatar_url);
   });
 
diff --git a/spec/javascripts/vue_shared/components/commit_spec.js b/spec/javascripts/vue_shared/components/commit_spec.js
index df547299d75cbd..45df291470218e 100644
--- a/spec/javascripts/vue_shared/components/commit_spec.js
+++ b/spec/javascripts/vue_shared/components/commit_spec.js
@@ -86,7 +86,7 @@ describe('Commit component', () => {
 
       it('Should render the author avatar with title and alt attributes', () => {
         expect(
-          component.$el.querySelector('.commit-title .avatar-image-container img').getAttribute('title'),
+          component.$el.querySelector('.commit-title .avatar-image-container img').getAttribute('data-original-title'),
         ).toContain(props.author.username);
         expect(
           component.$el.querySelector('.commit-title .avatar-image-container img').getAttribute('alt'),
diff --git a/spec/javascripts/vue_shared/components/pipelines_table_row_spec.js b/spec/javascripts/vue_shared/components/pipelines_table_row_spec.js
index 699625cdbb7e1a..b1fc136705fe92 100644
--- a/spec/javascripts/vue_shared/components/pipelines_table_row_spec.js
+++ b/spec/javascripts/vue_shared/components/pipelines_table_row_spec.js
@@ -55,7 +55,7 @@ describe('Pipelines Table Row', () => {
         ).toEqual(pipeline.user.web_url);
 
         expect(
-          component.$el.querySelector('td:nth-child(2) img').getAttribute('title'),
+          component.$el.querySelector('td:nth-child(2) img').getAttribute('data-original-title'),
         ).toEqual(pipeline.user.name);
       });
     });
@@ -67,6 +67,47 @@ describe('Pipelines Table Row', () => {
         component.$el.querySelector('td:nth-child(3) .commit-id').getAttribute('href'),
       ).toEqual(pipeline.commit.commit_path);
     });
+
+    const findElements = () => {
+      const commitTitleElement = component.$el.querySelector('.branch-commit .commit-title');
+      const commitAuthorElement = commitTitleElement.querySelector('a.avatar-image-container');
+
+      if (!commitAuthorElement) {
+        return { commitAuthorElement };
+      }
+
+      const commitAuthorLink = commitAuthorElement.getAttribute('href');
+      const commitAuthorName = commitAuthorElement.querySelector('img.avatar').getAttribute('data-original-title');
+
+      return { commitAuthorElement, commitAuthorLink, commitAuthorName };
+    };
+
+    it('renders nothing without commit', () => {
+      expect(pipelineWithoutCommit.commit).toBe(null);
+      component = buildComponent(pipelineWithoutCommit);
+
+      const { commitAuthorElement } = findElements();
+
+      expect(commitAuthorElement).toBe(null);
+    });
+
+    it('renders commit author', () => {
+      component = buildComponent(pipeline);
+      const { commitAuthorLink, commitAuthorName } = findElements();
+
+      expect(commitAuthorLink).toEqual(pipeline.commit.author.web_url);
+      expect(commitAuthorName).toEqual(pipeline.commit.author.username);
+    });
+
+    it('renders commit with unregistered author', () => {
+      expect(pipelineWithoutAuthor.commit.author).toBe(null);
+      component = buildComponent(pipelineWithoutAuthor);
+
+      const { commitAuthorLink, commitAuthorName } = findElements();
+
+      expect(commitAuthorLink).toEqual(`mailto:${pipelineWithoutAuthor.commit.author_email}`);
+      expect(commitAuthorName).toEqual(pipelineWithoutAuthor.commit.author_name);
+    });
   });
 
   describe('stages column', () => {
diff --git a/spec/javascripts/vue_shared/components/user_avatar_image_spec.js b/spec/javascripts/vue_shared/components/user_avatar_image_spec.js
new file mode 100644
index 00000000000000..0b5ec736b1ef08
--- /dev/null
+++ b/spec/javascripts/vue_shared/components/user_avatar_image_spec.js
@@ -0,0 +1,60 @@
+import Vue from 'vue';
+import UserAvatarImage from '~/vue_shared/components/user_avatar/user_avatar_image.vue';
+
+const UserAvatarImageComponent = Vue.extend(UserAvatarImage);
+
+describe('User Avatar Image Component', function () {
+  describe('Initialization', function () {
+    beforeEach(function () {
+      this.propsData = {
+        size: 99,
+        imgSrc: 'myavatarurl.com',
+        imgAlt: 'mydisplayname',
+        cssClasses: 'myextraavatarclass',
+        tooltipText: 'tooltip text',
+        tooltipPlacement: 'bottom',
+      };
+
+      this.userAvatarImage = new UserAvatarImageComponent({
+        propsData: this.propsData,
+      }).$mount();
+
+      this.imageElement = this.userAvatarImage.$el.outerHTML;
+    });
+
+    it('should return a defined Vue component', function () {
+      expect(this.userAvatarImage).toBeDefined();
+    });
+
+    it('should have <img> as a child element', function () {
+      const componentImgTag = this.userAvatarImage.$el.outerHTML;
+      expect(componentImgTag).toContain('<img');
+    });
+
+    it('should return neccessary props as defined', function () {
+      _.each(this.propsData, (val, key) => {
+        expect(this.userAvatarImage[key]).toBeDefined();
+      });
+    });
+
+    it('should properly compute tooltipContainer', function () {
+      expect(this.userAvatarImage.tooltipContainer).toBe('body');
+    });
+
+    it('should properly render tooltipContainer', function () {
+      expect(this.imageElement).toContain('data-container="body"');
+    });
+
+    it('should properly compute avatarSizeClass', function () {
+      expect(this.userAvatarImage.avatarSizeClass).toBe('s99');
+    });
+
+    it('should properly compute imgCssClasses', function () {
+      expect(this.userAvatarImage.imgCssClasses).toBe('avatar s99 myextraavatarclass');
+    });
+
+    it('should properly render imgCssClasses', function () {
+      expect(this.imageElement).toContain('avatar s99 myextraavatarclass');
+    });
+  });
+});
diff --git a/spec/javascripts/vue_shared/components/user_avatar_link_spec.js b/spec/javascripts/vue_shared/components/user_avatar_link_spec.js
new file mode 100644
index 00000000000000..770daa9f0de7e0
--- /dev/null
+++ b/spec/javascripts/vue_shared/components/user_avatar_link_spec.js
@@ -0,0 +1,58 @@
+import Vue from 'vue';
+import UserAvatarLink from '~/vue_shared/components/user_avatar/user_avatar_link.vue';
+
+describe('User Avatar Link Component', function () {
+  beforeEach(function () {
+    this.propsData = {
+      linkHref: 'myavatarurl.com',
+      imgSize: 99,
+      imgSrc: 'myavatarurl.com',
+      imgAlt: 'mydisplayname',
+      imgCssClasses: 'myextraavatarclass',
+      tooltipText: 'tooltip text',
+      tooltipPlacement: 'bottom',
+    };
+
+    const UserAvatarLinkComponent = Vue.extend(UserAvatarLink);
+
+    this.userAvatarLink = new UserAvatarLinkComponent({
+      propsData: this.propsData,
+    }).$mount();
+
+    this.userAvatarImage = this.userAvatarLink.$children[0];
+  });
+
+  it('should return a defined Vue component', function () {
+    expect(this.userAvatarLink).toBeDefined();
+  });
+
+  it('should have user-avatar-image registered as child component', function () {
+    expect(this.userAvatarLink.$options.components.userAvatarImage).toBeDefined();
+  });
+
+  it('user-avatar-link should have user-avatar-image as child component', function () {
+    expect(this.userAvatarImage).toBeDefined();
+  });
+
+  it('should render <a> as a child element', function () {
+    const componentLinkTag = this.userAvatarLink.$el.outerHTML;
+    expect(componentLinkTag).toContain('<a');
+  });
+
+  it('should have <img> as a child element', function () {
+    const componentImgTag = this.userAvatarLink.$el.outerHTML;
+    expect(componentImgTag).toContain('<img');
+  });
+
+  it('should return neccessary props as defined', function () {
+    _.each(this.propsData, (val, key) => {
+      expect(this.userAvatarLink[key]).toBeDefined();
+    });
+  });
+
+  it('should include props in the rendered output', function () {
+    _.each(this.propsData, (val) => {
+      expect(this.userAvatarLink.$el.outerHTML).toContain(val);
+    });
+  });
+});
diff --git a/spec/javascripts/vue_shared/components/user_avatar_size_mixin_spec.js b/spec/javascripts/vue_shared/components/user_avatar_size_mixin_spec.js
new file mode 100644
index 00000000000000..b37813cdb3d368
--- /dev/null
+++ b/spec/javascripts/vue_shared/components/user_avatar_size_mixin_spec.js
@@ -0,0 +1,37 @@
+import Vue from 'vue';
+import UserAvatarSizeMixin from '~/vue_shared/components/user_avatar/user_avatar_size_mixin';
+
+describe('User Avatar Size Mixin', () => {
+  beforeEach(() => {
+    this.vueInstance = new Vue({
+      data: {
+        size: 99,
+      },
+      mixins: [UserAvatarSizeMixin],
+    });
+  });
+
+  describe('#avatarSizeClass', () => {
+    it('should be a defined computed value', () => {
+      expect(this.vueInstance.avatarSizeClass).toBeDefined();
+    });
+
+    it('should correctly transform size into the class name', () => {
+      expect(this.vueInstance.avatarSizeClass).toBe('s99');
+    });
+  });
+
+  describe('#avatarSizeStylesMap', () => {
+    it('should be a defined computed value', () => {
+      expect(this.vueInstance.avatarSizeStylesMap).toBeDefined();
+    });
+
+    it('should return a correctly formatted styles width', () => {
+      expect(this.vueInstance.avatarSizeStylesMap.width).toBe('99px');
+    });
+
+    it('should return a correctly formatted styles height', () => {
+      expect(this.vueInstance.avatarSizeStylesMap.height).toBe('99px');
+    });
+  });
+});
diff --git a/spec/javascripts/vue_shared/components/user_avatar_svg_spec.js b/spec/javascripts/vue_shared/components/user_avatar_svg_spec.js
new file mode 100644
index 00000000000000..809886c5dbd8e5
--- /dev/null
+++ b/spec/javascripts/vue_shared/components/user_avatar_svg_spec.js
@@ -0,0 +1,35 @@
+import Vue from 'vue';
+import UserAvatarSvg from '~/vue_shared/components/user_avatar/user_avatar_svg.vue';
+import avatarSvg from 'icons/_icon_random.svg';
+
+const UserAvatarSvgComponent = Vue.extend(UserAvatarSvg);
+
+describe('User Avatar Svg Component', function () {
+  describe('Initialization', function () {
+    beforeEach(function () {
+      this.propsData = {
+        size: 99,
+        svg: avatarSvg,
+      };
+
+      this.userAvatarSvg = new UserAvatarSvgComponent({
+        propsData: this.propsData,
+      }).$mount();
+    });
+
+    it('should return a defined Vue component', function () {
+      expect(this.userAvatarSvg).toBeDefined();
+    });
+
+    it('should have <svg> as a child element', function () {
+      expect(this.userAvatarSvg.$el.tagName).toEqual('svg');
+      expect(this.userAvatarSvg.$el.innerHTML).toContain('<path');
+    });
+
+    it('should return neccessary props as defined', function () {
+      _.each(this.propsData, (val, key) => {
+        expect(this.userAvatarSvg[key]).toBeDefined();
+      });
+    });
+  });
+});
-- 
GitLab


From 596acd53e7da44d676063e9c264c43b564d4d059 Mon Sep 17 00:00:00 2001
From: Bryce Johnson <bryce@gitlab.com>
Date: Wed, 10 May 2017 09:12:38 -0400
Subject: [PATCH 2/4] Replace link-to-member-avatar with user-avatar-link.

---
 .../components/approvals/approvals_footer.js  |  32 +++---
 .../components/link_to_member_avatar.js       | 105 ------------------
 .../javascripts/vue_shared/mixins/tooltip.js  |   9 ++
 .../stylesheets/pages/merge_requests.scss     |  23 ++--
 .../components/link_to_member_avatar_spec.js  |  76 -------------
 .../components/pipelines_table_row_spec.js    |  41 -------
 6 files changed, 35 insertions(+), 251 deletions(-)
 delete mode 100644 app/assets/javascripts/vue_shared/components/link_to_member_avatar.js
 create mode 100644 app/assets/javascripts/vue_shared/mixins/tooltip.js
 delete mode 100644 spec/javascripts/vue_shared/components/link_to_member_avatar_spec.js

diff --git a/app/assets/javascripts/vue_merge_request_widget/ee/components/approvals/approvals_footer.js b/app/assets/javascripts/vue_merge_request_widget/ee/components/approvals/approvals_footer.js
index 3acc0eaa225372..14d434760666cf 100644
--- a/app/assets/javascripts/vue_merge_request_widget/ee/components/approvals/approvals_footer.js
+++ b/app/assets/javascripts/vue_merge_request_widget/ee/components/approvals/approvals_footer.js
@@ -1,6 +1,7 @@
 /* global Flash */
 import pendingAvatarSvg from 'icons/_icon_dotted_circle.svg';
-import LinkToMemberAvatar from '~/vue_shared/components/link_to_member_avatar';
+import UserAvatarLink from '../../../../vue_shared/components/user_avatar/user_avatar_link.vue';
+import UserAvatarSvg from '../../../../vue_shared/components/user_avatar/user_avatar_svg.vue';
 import eventHub from '../../../event_hub';
 
 export default {
@@ -42,7 +43,8 @@ export default {
     };
   },
   components: {
-    'link-to-member-avatar': LinkToMemberAvatar,
+    'user-avatar-link': UserAvatarLink,
+    'user-avatar-svg': UserAvatarSvg,
   },
   computed: {
     showUnapproveButton() {
@@ -71,19 +73,21 @@ export default {
         <p class="approvers-prefix">Approved by</p>
         <div class="approvers-list">
           <span v-for="approver in approvedBy">
-            <link-to-member-avatar
-              extra-link-class="approver-avatar"
-              :avatar-url="approver.user.avatar_url"
-              :display-name="approver.user.name"
-              :profile-url="approver.user.web_url"
-              :show-tooltip="true" />
+            <user-avatar-link
+              class="approver-avatar"
+              :href="approver.user.web_url"
+              :img-src="approver.user.avatar_url"
+              :img-size="18"
+              :tooltip-text="approver.user.name"
+            />
           </span>
-          <span class="potential-approvers-list" v-for="n in approvalsLeft">
-            <link-to-member-avatar
-              :clickable="false"
-              :avatar-html="pendingAvatarSvg"
-              :show-tooltip="false"
-              extra-link-class="hide-asset" />
+          <span class="potential-approvers-list">
+            <user-avatar-svg
+              v-for="n in approvalsLeft"
+              class="hide-asset"
+              :svg="pendingAvatarSvg"
+              :size="18"
+            />
           </span>
         </div>
         <span class="unapprove-btn-wrap" v-if="showUnapproveButton">
diff --git a/app/assets/javascripts/vue_shared/components/link_to_member_avatar.js b/app/assets/javascripts/vue_shared/components/link_to_member_avatar.js
deleted file mode 100644
index 357a7d6e4508ad..00000000000000
--- a/app/assets/javascripts/vue_shared/components/link_to_member_avatar.js
+++ /dev/null
@@ -1,105 +0,0 @@
-// Analogue of link_to_member_avatar in app/helpers/projects_helper.rb
-
-export default {
-  props: {
-    avatarUrl: {
-      type: String,
-      required: false,
-    },
-    profileUrl: {
-      type: String,
-      required: false,
-      default: '',
-    },
-    displayName: {
-      type: String,
-      required: false,
-    },
-    extraAvatarClass: {
-      type: String,
-      default: '',
-      required: false,
-    },
-    extraLinkClass: {
-      type: String,
-      default: '',
-      required: false,
-    },
-    showTooltip: {
-      type: Boolean,
-      required: false,
-      default: true,
-    },
-    clickable: {
-      type: Boolean,
-      default: true,
-      required: false,
-    },
-    tooltipContainer: {
-      type: String,
-      required: false,
-    },
-    avatarHtml: {
-      type: String,
-      required: false,
-    },
-    avatarSize: {
-      type: Number,
-      required: false,
-      default: 32,
-    },
-  },
-  data() {
-    return {
-      avatarBaseClass: 'avatar avatar-inline',
-    };
-  },
-  computed: {
-    avatarSizeClass() {
-      return `s${this.avatarSize}`;
-    },
-    avatarHtmlClass() {
-      return `${this.avatarSizeClass} ${this.avatarBaseClass}`;
-    },
-    tooltipClass() {
-      return this.showTooltip ? 'has-tooltip' : '';
-    },
-    avatarClass() {
-      return `${this.avatarBaseClass} ${this.avatarSizeClass} ${this.extraAvatarClass}`;
-    },
-    disabledClass() {
-      return !this.clickable ? 'disabled' : '';
-    },
-    linkClass() {
-      return `author_link ${this.tooltipClass} ${this.extraLinkClass} ${this.disabledClass}`;
-    },
-    tooltipContainerAttr() {
-      return this.tooltipContainer || 'body';
-    },
-  },
-  template: `
-    <div class="link-to-member-avatar">
-      <a
-        :href="profileUrl"
-        :class="linkClass"
-        :title="displayName"
-        :data-container="tooltipContainerAttr">
-        <svg
-          v-if="avatarHtml"
-          v-html="avatarHtml"
-          :class="avatarHtmlClass"
-          :width="avatarSize"
-          :height="avatarSize"
-          :alt="displayName">
-        </svg>
-
-        <img
-          :class="avatarClass"
-          :src="avatarUrl"
-          :width="avatarSize"
-          :height="avatarSize"
-          :alt="displayName"/>
-      </a>
-    </div>
-  `,
-};
diff --git a/app/assets/javascripts/vue_shared/mixins/tooltip.js b/app/assets/javascripts/vue_shared/mixins/tooltip.js
new file mode 100644
index 00000000000000..9bb948bff66b26
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/mixins/tooltip.js
@@ -0,0 +1,9 @@
+export default {
+  mounted() {
+    $(this.$refs.tooltip).tooltip();
+  },
+
+  updated() {
+    $(this.$refs.tooltip).tooltip('fixTitle');
+  },
+};
diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss
index 40f146b47389aa..51b7e019e5f8aa 100644
--- a/app/assets/stylesheets/pages/merge_requests.scss
+++ b/app/assets/stylesheets/pages/merge_requests.scss
@@ -755,7 +755,13 @@
     align-self: center;
   }
 
+  .potential-approvers-list {
+    margin-left: -5px;
+  }
+
   .hide-asset {
+    margin-right: 3px;
+
     img {
       display: none;
     }
@@ -773,9 +779,8 @@
   }
 
   .approvers-list img {
-    width: 18px;
-    height: 18px;
-    margin-top: 3px;
+    margin-top: 7px;
+    margin-right: 5px;
   }
 
   .unapprove-btn {
@@ -808,18 +813,6 @@
   }
 }
 
-.link-to-member-avatar {
-  .disabled {
-    pointer-events: none;
-    cursor: default;
-  }
-
-  .avatar {
-    margin-bottom: -2px;
-    margin-right: 3px;
-  }
-}
-
 .mr-memory-usage {
   p.usage-info-loading {
     margin-bottom: 6px;
diff --git a/spec/javascripts/vue_shared/components/link_to_member_avatar_spec.js b/spec/javascripts/vue_shared/components/link_to_member_avatar_spec.js
deleted file mode 100644
index efab9285348955..00000000000000
--- a/spec/javascripts/vue_shared/components/link_to_member_avatar_spec.js
+++ /dev/null
@@ -1,76 +0,0 @@
-/* eslint-disable no-restricted-syntax */
-
-import Vue from 'vue';
-import linkToMemberAvatar from '~/vue_shared/components/link_to_member_avatar';
-
-(() => {
-  function initComponent(propsData = {}) {
-    setFixtures(`
-      <div>
-        <div id="mock-container"></div>
-      </div>
-    `);
-
-    const LinkToMembersComponent = Vue.extend(linkToMemberAvatar);
-
-    this.component = new LinkToMembersComponent({
-      el: '#mock-container',
-      propsData,
-    }).$mount();
-
-    this.$document = $(document);
-  }
-  describe('Link To Members Components', function () {
-    describe('Initialization', function () {
-      beforeEach(function () {
-        const propsData = this.propsData = {
-          avatarSize: 32,
-          avatarUrl: 'myavatarurl.com',
-          displayName: 'mydisplayname',
-          extraAvatarClass: 'myextraavatarclass',
-          extraLinkClass: 'myextralinkclass',
-          showTooltip: true,
-        };
-        initComponent.call(this, {
-          propsData,
-        });
-      });
-
-      it('should return a defined Vue component', function () {
-        expect(this.component).toBeDefined();
-        expect(this.component.$data).toBeDefined();
-      });
-
-      it('should have <a> and <img> children', function () {
-        const componentLink = this.component.$el.querySelector('a');
-        const componentImg = componentLink.querySelector('img');
-
-        expect(componentLink).not.toBeNull();
-        expect(componentImg).not.toBeNull();
-      });
-
-      it('should correctly compute computed values', function (done) {
-        const correctVals = {
-          disabledClass: '',
-          avatarSizeClass: 's32',
-          avatarHtmlClass: 's32 avatar avatar-inline',
-          avatarClass: 'avatar avatar-inline s32 ',
-          tooltipClass: 'has-tooltip',
-          linkClass: 'author_link has-tooltip  ',
-          tooltipContainerAttr: 'body',
-        };
-
-        Vue.nextTick(() => {
-          for (const computedKey in correctVals) {
-            if (Object.prototype.hasOwnProperty.call(correctVals, computedKey)) {
-              const expectedVal = correctVals[computedKey];
-              const actualComputed = this.component[computedKey];
-              expect(actualComputed).toBe(expectedVal);
-            }
-          }
-          done();
-        });
-      });
-    });
-  });
-})();
diff --git a/spec/javascripts/vue_shared/components/pipelines_table_row_spec.js b/spec/javascripts/vue_shared/components/pipelines_table_row_spec.js
index b1fc136705fe92..5e7d52e205bd64 100644
--- a/spec/javascripts/vue_shared/components/pipelines_table_row_spec.js
+++ b/spec/javascripts/vue_shared/components/pipelines_table_row_spec.js
@@ -67,47 +67,6 @@ describe('Pipelines Table Row', () => {
         component.$el.querySelector('td:nth-child(3) .commit-id').getAttribute('href'),
       ).toEqual(pipeline.commit.commit_path);
     });
-
-    const findElements = () => {
-      const commitTitleElement = component.$el.querySelector('.branch-commit .commit-title');
-      const commitAuthorElement = commitTitleElement.querySelector('a.avatar-image-container');
-
-      if (!commitAuthorElement) {
-        return { commitAuthorElement };
-      }
-
-      const commitAuthorLink = commitAuthorElement.getAttribute('href');
-      const commitAuthorName = commitAuthorElement.querySelector('img.avatar').getAttribute('data-original-title');
-
-      return { commitAuthorElement, commitAuthorLink, commitAuthorName };
-    };
-
-    it('renders nothing without commit', () => {
-      expect(pipelineWithoutCommit.commit).toBe(null);
-      component = buildComponent(pipelineWithoutCommit);
-
-      const { commitAuthorElement } = findElements();
-
-      expect(commitAuthorElement).toBe(null);
-    });
-
-    it('renders commit author', () => {
-      component = buildComponent(pipeline);
-      const { commitAuthorLink, commitAuthorName } = findElements();
-
-      expect(commitAuthorLink).toEqual(pipeline.commit.author.web_url);
-      expect(commitAuthorName).toEqual(pipeline.commit.author.username);
-    });
-
-    it('renders commit with unregistered author', () => {
-      expect(pipelineWithoutAuthor.commit.author).toBe(null);
-      component = buildComponent(pipelineWithoutAuthor);
-
-      const { commitAuthorLink, commitAuthorName } = findElements();
-
-      expect(commitAuthorLink).toEqual(`mailto:${pipelineWithoutAuthor.commit.author_email}`);
-      expect(commitAuthorName).toEqual(pipelineWithoutAuthor.commit.author_name);
-    });
   });
 
   describe('stages column', () => {
-- 
GitLab


From 6321e4c1c11a559b692ec8886ea287286dfa9868 Mon Sep 17 00:00:00 2001
From: Bryce Johnson <bryce@gitlab.com>
Date: Mon, 15 May 2017 15:58:22 -0400
Subject: [PATCH 3/4] Remove unused underscore ref.

---
 .../javascripts/environments/components/environment_item.vue     | 1 -
 1 file changed, 1 deletion(-)

diff --git a/app/assets/javascripts/environments/components/environment_item.vue b/app/assets/javascripts/environments/components/environment_item.vue
index 771488a5750343..355dce488aa0df 100644
--- a/app/assets/javascripts/environments/components/environment_item.vue
+++ b/app/assets/javascripts/environments/components/environment_item.vue
@@ -1,6 +1,5 @@
 <script>
 import Timeago from 'timeago.js';
-import _ from 'underscore';
 import '../../lib/utils/text_utility';
 import userAvatarLink from '../../vue_shared/components/user_avatar/user_avatar_link.vue';
 import ActionsComponent from './environment_actions.vue';
-- 
GitLab


From f5f5310c07176f11dca1caa6012cf73c104332e1 Mon Sep 17 00:00:00 2001
From: Bryce Johnson <bryce@gitlab.com>
Date: Wed, 17 May 2017 11:22:26 -0400
Subject: [PATCH 4/4] Fixes per feedback on user avatar components.

---
 .../user_avatar/user_avatar_image.vue         | 13 ++++---
 .../user_avatar/user_avatar_size_mixin.js     | 13 -------
 .../user_avatar/user_avatar_svg.vue           | 11 ++++--
 .../components/user_avatar_image_spec.js      | 26 +++++--------
 .../components/user_avatar_link_spec.js       | 12 +-----
 .../components/user_avatar_size_mixin_spec.js | 37 -------------------
 .../components/user_avatar_svg_spec.js        |  6 ---
 7 files changed, 26 insertions(+), 92 deletions(-)
 delete mode 100644 app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_size_mixin.js
 delete mode 100644 spec/javascripts/vue_shared/components/user_avatar_size_mixin_spec.js

diff --git a/app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_image.vue b/app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_image.vue
index 4891e7f927c619..b8db6afda12a80 100644
--- a/app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_image.vue
+++ b/app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_image.vue
@@ -16,12 +16,11 @@
 */
 
 import defaultAvatarUrl from 'images/no_avatar.png';
-import UserAvatarSizeMixin from './user_avatar_size_mixin';
 import TooltipMixin from '../../mixins/tooltip';
 
 export default {
   name: 'UserAvatarImage',
-  mixins: [UserAvatarSizeMixin, TooltipMixin],
+  mixins: [TooltipMixin],
   props: {
     imgSrc: {
       type: String,
@@ -58,8 +57,8 @@ export default {
     tooltipContainer() {
       return this.tooltipText ? 'body' : null;
     },
-    imgCssClasses() {
-      return `avatar ${this.avatarSizeClass} ${this.cssClasses}`;
+    avatarSizeClass() {
+      return `s${this.size}`;
     },
   },
 };
@@ -67,9 +66,11 @@ export default {
 
 <template>
   <img
-    :class="imgCssClasses"
+    class="avatar"
+    :class="[avatarSizeClass, cssClasses]"
     :src="imgSrc"
-    :style="avatarSizeStylesMap"
+    :width="size"
+    :height="size"
     :alt="imgAlt"
     :data-container="tooltipContainer"
     :data-placement="tooltipPlacement"
diff --git a/app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_size_mixin.js b/app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_size_mixin.js
deleted file mode 100644
index b6155ffd28e3a3..00000000000000
--- a/app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_size_mixin.js
+++ /dev/null
@@ -1,13 +0,0 @@
-export default {
-  computed: {
-    avatarSizeStylesMap() {
-      return {
-        width: `${this.size}px`,
-        height: `${this.size}px`,
-      };
-    },
-    avatarSizeClass() {
-      return `s${this.size}`;
-    },
-  },
-};
diff --git a/app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_svg.vue b/app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_svg.vue
index 39b4d37c91e3f8..d2ff2ac006e3f3 100644
--- a/app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_svg.vue
+++ b/app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_svg.vue
@@ -14,10 +14,7 @@
 
 */
 
-import UserAvatarSizeMixin from './user_avatar_size_mixin';
-
 export default {
-  mixins: [UserAvatarSizeMixin],
   props: {
     svg: {
       type: String,
@@ -29,13 +26,19 @@ export default {
       default: 20,
     },
   },
+  computed: {
+    avatarSizeClass() {
+      return `s${this.size}`;
+    },
+  },
 };
 </script>
 
 <template>
   <svg
     :class="avatarSizeClass"
-    :style="avatarSizeStylesMap"
+    :height="size"
+    :width="size"
     v-html="svg">
   </svg>
 </template>
diff --git a/spec/javascripts/vue_shared/components/user_avatar_image_spec.js b/spec/javascripts/vue_shared/components/user_avatar_image_spec.js
index 0b5ec736b1ef08..8daa761027454f 100644
--- a/spec/javascripts/vue_shared/components/user_avatar_image_spec.js
+++ b/spec/javascripts/vue_shared/components/user_avatar_image_spec.js
@@ -18,8 +18,6 @@ describe('User Avatar Image Component', function () {
       this.userAvatarImage = new UserAvatarImageComponent({
         propsData: this.propsData,
       }).$mount();
-
-      this.imageElement = this.userAvatarImage.$el.outerHTML;
     });
 
     it('should return a defined Vue component', function () {
@@ -27,14 +25,7 @@ describe('User Avatar Image Component', function () {
     });
 
     it('should have <img> as a child element', function () {
-      const componentImgTag = this.userAvatarImage.$el.outerHTML;
-      expect(componentImgTag).toContain('<img');
-    });
-
-    it('should return neccessary props as defined', function () {
-      _.each(this.propsData, (val, key) => {
-        expect(this.userAvatarImage[key]).toBeDefined();
-      });
+      expect(this.userAvatarImage.$el.tagName).toBe('IMG');
     });
 
     it('should properly compute tooltipContainer', function () {
@@ -42,19 +33,22 @@ describe('User Avatar Image Component', function () {
     });
 
     it('should properly render tooltipContainer', function () {
-      expect(this.imageElement).toContain('data-container="body"');
+      expect(this.userAvatarImage.$el.getAttribute('data-container')).toBe('body');
     });
 
     it('should properly compute avatarSizeClass', function () {
       expect(this.userAvatarImage.avatarSizeClass).toBe('s99');
     });
 
-    it('should properly compute imgCssClasses', function () {
-      expect(this.userAvatarImage.imgCssClasses).toBe('avatar s99 myextraavatarclass');
-    });
+    it('should properly render img css', function () {
+      const classList = this.userAvatarImage.$el.classList;
+      const containsAvatar = classList.contains('avatar');
+      const containsSizeClass = classList.contains('s99');
+      const containsCustomClass = classList.contains('myextraavatarclass');
 
-    it('should properly render imgCssClasses', function () {
-      expect(this.imageElement).toContain('avatar s99 myextraavatarclass');
+      expect(containsAvatar).toBe(true);
+      expect(containsSizeClass).toBe(true);
+      expect(containsCustomClass).toBe(true);
     });
   });
 });
diff --git a/spec/javascripts/vue_shared/components/user_avatar_link_spec.js b/spec/javascripts/vue_shared/components/user_avatar_link_spec.js
index 770daa9f0de7e0..52e450e9ba5196 100644
--- a/spec/javascripts/vue_shared/components/user_avatar_link_spec.js
+++ b/spec/javascripts/vue_shared/components/user_avatar_link_spec.js
@@ -35,13 +35,11 @@ describe('User Avatar Link Component', function () {
   });
 
   it('should render <a> as a child element', function () {
-    const componentLinkTag = this.userAvatarLink.$el.outerHTML;
-    expect(componentLinkTag).toContain('<a');
+    expect(this.userAvatarLink.$el.tagName).toBe('A');
   });
 
   it('should have <img> as a child element', function () {
-    const componentImgTag = this.userAvatarLink.$el.outerHTML;
-    expect(componentImgTag).toContain('<img');
+    expect(this.userAvatarLink.$el.querySelector('img')).not.toBeNull();
   });
 
   it('should return neccessary props as defined', function () {
@@ -49,10 +47,4 @@ describe('User Avatar Link Component', function () {
       expect(this.userAvatarLink[key]).toBeDefined();
     });
   });
-
-  it('should include props in the rendered output', function () {
-    _.each(this.propsData, (val) => {
-      expect(this.userAvatarLink.$el.outerHTML).toContain(val);
-    });
-  });
 });
diff --git a/spec/javascripts/vue_shared/components/user_avatar_size_mixin_spec.js b/spec/javascripts/vue_shared/components/user_avatar_size_mixin_spec.js
deleted file mode 100644
index b37813cdb3d368..00000000000000
--- a/spec/javascripts/vue_shared/components/user_avatar_size_mixin_spec.js
+++ /dev/null
@@ -1,37 +0,0 @@
-import Vue from 'vue';
-import UserAvatarSizeMixin from '~/vue_shared/components/user_avatar/user_avatar_size_mixin';
-
-describe('User Avatar Size Mixin', () => {
-  beforeEach(() => {
-    this.vueInstance = new Vue({
-      data: {
-        size: 99,
-      },
-      mixins: [UserAvatarSizeMixin],
-    });
-  });
-
-  describe('#avatarSizeClass', () => {
-    it('should be a defined computed value', () => {
-      expect(this.vueInstance.avatarSizeClass).toBeDefined();
-    });
-
-    it('should correctly transform size into the class name', () => {
-      expect(this.vueInstance.avatarSizeClass).toBe('s99');
-    });
-  });
-
-  describe('#avatarSizeStylesMap', () => {
-    it('should be a defined computed value', () => {
-      expect(this.vueInstance.avatarSizeStylesMap).toBeDefined();
-    });
-
-    it('should return a correctly formatted styles width', () => {
-      expect(this.vueInstance.avatarSizeStylesMap.width).toBe('99px');
-    });
-
-    it('should return a correctly formatted styles height', () => {
-      expect(this.vueInstance.avatarSizeStylesMap.height).toBe('99px');
-    });
-  });
-});
diff --git a/spec/javascripts/vue_shared/components/user_avatar_svg_spec.js b/spec/javascripts/vue_shared/components/user_avatar_svg_spec.js
index 809886c5dbd8e5..b8d639ffbec77c 100644
--- a/spec/javascripts/vue_shared/components/user_avatar_svg_spec.js
+++ b/spec/javascripts/vue_shared/components/user_avatar_svg_spec.js
@@ -25,11 +25,5 @@ describe('User Avatar Svg Component', function () {
       expect(this.userAvatarSvg.$el.tagName).toEqual('svg');
       expect(this.userAvatarSvg.$el.innerHTML).toContain('<path');
     });
-
-    it('should return neccessary props as defined', function () {
-      _.each(this.propsData, (val, key) => {
-        expect(this.userAvatarSvg[key]).toBeDefined();
-      });
-    });
   });
 });
-- 
GitLab