Show avatars for approvals remaining.

app/assets/javascripts/merge_request_widget/approvals/components/approvals_footer.js.es6

@@ -13,6 +13,7 @@
     data() {
       return {
         loading: true,
+        pendingAvatar: '/assets/no_avatar.png'
       };
     },
     computed: {
@@ -34,14 +35,23 @@
       });
     },
     template: `
-      <div v-if='hasApprovers' class='mr-widget-footer approved-by-users'>
-        <div v-for='approver in approvedByUsers'>
+      <div v-if='hasApprovers' class='mr-widget-footer approved-by-users approvals-footer'>
+        <span v-for='approver in approvedByUsers'>
           <link-to-member-avatar
+            extra-link-class='approver-avatar'
             :avatar-url='approver.avatar.url'
             :display-name='approver.name'
-            :username='approver.username'>
+            :username='approver.username'
+            :show-tooltip='true'>
           </link-to-member-avatar>
-        </div>
+        </span>
+        <span v-for='n in approvalsLeft'>
+          <link-to-member-avatar
+            :non-user='true'
+            :avatar-url='pendingAvatar'
+            :show-tooltip='false'>
+          </link-to-member-avatar>
+        </span>
         <span  v-if='showUnapproveButton'>
           <i class='fa fa-close'></i>
           <button @click='removeApproval'>Remove your approval</button>

app/assets/javascripts/vue_common_component/link_to_member_avatar.js.es6

@@ -12,26 +12,36 @@
       },
       username: {
         type: String,
-        required: true
+        required: false,
       },
       displayName: {
         type: String,
-        required: true,
+        required: false,
       },
-      avatarClass: {
+      extraAvatarClass: {
         type: String,
-        default: 'avatar avatar-inline s48',
+        default: '',
         required: false,
       },
-      linkClass: {
+      extraLinkClass: {
         type: String,
-        default: 'author_link has-tooltip',
+        default: '',
         required: false,
       },
+      showTooltip: {
+        type: Boolean,
+        required: false,
+        default: false,
+      },
       size: {
         type: Number,
         default: 48,
         required: false
+      },
+      nonUser: {
+        type: Boolean,
+        default: false,
+        required: false,
       }
     },
     data() {
@@ -41,10 +51,22 @@
     },
     computed: {
       userProfileUrl() {
-        return `/${this.username}`;
+        return this.nonUser || !this.username ? '' : `/${this.username}`;
       },
       preppedAvatarUrl() {
         return this.avatarUrl || this.noAvatarUrl;
+      },
+      tooltipClass() {
+        return this.showTooltip ? 'has-tooltip' : '';
+      },
+      avatarClass() {
+        return `avatar avatar-inline s${this.size} ${this.extraAvatarClass}`
+      },
+      disabledClass() {
+        return this.nonUser ? 'disabled' : '';
+      },
+      linkClass() {
+        return `author_link ${this.tooltipClass} ${this.extraLinkClass} ${this.disabledClass}`
       }
     },
     template: `

app/assets/stylesheets/pages/merge_requests.scss

@@ -428,3 +428,23 @@
     padding-right: 0;
   }
 }
+
+.approvals-footer {
+  a.disabled {
+    pointer-events: none;
+    cursor: default;
+  }
+  .approver-avatar {
+    position: relative;
+    display: inline-block;
+    &::before {
+      content:'\2713';
+      color: green;
+      background: white;
+      position: absolute;
+      top: 0;
+      right: 32%;
+    }
+  }
+
+}

app/views/projects/merge_requests/widget/_open.html.haml

@@ -55,5 +55,4 @@
 
   - if @merge_request.approvals.any?
     %approvals-footer{':approved-by-users' => 'approvals.approvedByUsers', ':approver-names' => 'approvals.approverNames', ':approvals-left' => 'approvals.approvalsLeft', ':user-can-approve' => 'approvals.userCanApprove', ':user-has-approved' => 'approvals.userHasApproved'}
-      = icon('spinner spin', class: 'loading-icon')