Implement link-to-member-avatar in approvals ui.

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

@@ -14,7 +14,7 @@
   };
 
   gl.MergeRequestWidget.approvalsFooter = {
-    props: ['approverNames', 'canApprove'],
+    props: ['approverNames', 'canApprove', 'approvedByUsers'],
     methods: {
       removeApproval() {
         this.$emit('remove-approval');
@@ -22,17 +22,25 @@
     },
     components: {
       'pending-approver': PendingApprover,
+    },
+    methods: {
+
     },
     template: `
       <div>
         Hello Approvals Footer
         <div>
-          <div v-for='approver in approverNames'>
-            {{ approver }}
+          <div v-for='approver in approvedByUsers'>
+            <link-to-member-avatar 
+              :avatar-url='approver.avatar.url'
+              :display-name='approver.name'
+              :username='approver.username'>
+            </link-to-member-avatar>
           </div>
           <span v-if='canApprove'>
             <i class='fa fa-close'></i>
             <button @click='removeApproval'>Remove your approval</button>
+            {{ approvedByUsers[0].name }}
           </span>
         </div>
       </div>

app/assets/javascripts/merge_request_widget/stores/widget_store.js.es6

@@ -30,6 +30,7 @@
       const dataset = this.dataset;
       Object.assign( this.data, { 
         approvals: {
+          approvedByUsers: JSON.parse(dataset.approvedByUsers),
           approverNames: JSON.parse(dataset.approverNames),
           approvalsLeft: Number(dataset.approvalsLeft),
           moreApprovals: Number(dataset.approvalsLeft),

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

-#merge-request-widget-app.mr-state-widget{ 'data-approver-names' => @merge_request.approvers_left.map(&:name),'data-approvals-left' => @merge_request.approvals_left,
+#merge-request-widget-app.mr-state-widget{ 'data-approved-by-users' => @merge_request.approved_by_users.to_json, 'data-approver-names' => @merge_request.approvers_left.map(&:name),'data-approvals-left' => @merge_request.approvals_left,
     'data-more-approvals' => (@merge_request.approvals_left - @merge_request.approvers_left.count),'data-can-edit' => @merge_request.can_approve?(current_user), 'data-endpoint'=> '/myendpoint/tho' }
   = render 'projects/merge_requests/widget/heading'
   .mr-widget-body
@@ -50,7 +50,5 @@
 
   - if @merge_request.approvals.any?
     .mr-widget-footer.approved-by-users
-      %approvals-footer{ '@remove-approval' => 'unapproveMergeRequest', ':approver-names' => 'approvals.approverNames', ':approvals-left' => 'approvals.approvalsLeft', ':more-approvals' => 'approvals.moreApprovals', ':can-approve' => 'permissions.canEdit' }
-        %span{ slot: 'links-to-members'}
-          - @merge_request.approved_by_users.each do |user|
-            = link_to_member(@project, user, name: false, size: 24)
+      %approvals-footer{ '@remove-approval' => 'unapproveMergeRequest', ':approved-by-users' => 'approvals.approvedByUsers', ':approver-names' => 'approvals.approverNames', ':approvals-left' => 'approvals.approvalsLeft', ':more-approvals' => 'approvals.moreApprovals', ':can-approve' => 'permissions.canEdit' }
+