Mock suggested approvers.

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

@@ -4,23 +4,24 @@
 (() => {
   Vue.component('approvals-body', {
     name: 'approvals-body',
-    props: ['approvedBy', 'approvalsLeft', 'userCanApprove', 'userHasApproved'],
+    props: ['approvedBy', 'approvalsLeft', 'userCanApprove', 'userHasApproved', 'suggestedApprovers'],
     computed: {
       approvalsRequiredStringified() {
         return this.approvalsLeft === 1 ? 'one more approval' :
           `${this.approvalsLeft} more approvals`;
       },
       approverNamesStringified() {
-        const approvers = this.approvedBy;
+        const approvers = this.suggestedApprovers;
         if (approvers && approvers.length) {
           const lastIdx = approvers.length - 1;
           return approvers.reduce((memo, curr, index) => {
-            const userDisplayName = curr.user.name;
+            const userDisplayName = curr;
             const newList = index !== lastIdx ? `${memo} ${userDisplayName}, ` :
               `${memo} or ${userDisplayName}`;
             return newList;
           }, '');
         }
+        return null;
       },
       showApproveButton() {
         return this.userCanApprove && !this.userHasApproved;

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

@@ -23,12 +23,14 @@
 
     initApprovals() {
       gl.ApprovalsStore = new gl.ApprovalsStore(this);
-      this.assignToData('approvals', this.dataset.approvals);
+      this.assignToData('approvals', {});
     }
 
     assignToData(key, val) {
-      this.data[key] = {};
-      return Object.assign(this.data[key], val);
+      // TODO: Remove when passed in json
+      const base = { suggested_approvers: JSON.parse(this.dataset.suggestedApprovers) };
+      this.data[key] = Object.assign(base, val);
+      return this.data[key];
     }
   }
   gl.MergeRequestWidgetStore = MergeRequestWidgetStore;

app/assets/stylesheets/pages/merge_requests.scss

@@ -459,6 +459,9 @@
     border-left: 1px solid $gl-gray-light;
     padding-left: 15px;
     margin-left: 10px;
+    &:hover {
+      color: lighten($gl-gray, 10%);
+    }
   }
 
   .approver-avatar {

app/helpers/merge_requests_helper.rb

@@ -86,6 +86,7 @@ module MergeRequestsHelper
     end
   end
 
+  # This may be able to be removed with associated specs
   def render_require_section(merge_request)
     str = if merge_request.approvals_left == 1
             "Requires one more approval"

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

 - content_for :page_specific_javascripts do
   = page_specific_javascript_tag('merge_request_widget/widget_bundle.js')
 
-#merge-request-widget-app.mr-state-widget{ approvals: @merge_request.approvals.to_json, 'data-endpoint'=> merge_request_path(@merge_request)}
+- approvers_names = @merge_request.approvers_left.map(&:name)
+
+#merge-request-widget-app.mr-state-widget{ 'data-endpoint'=> merge_request_path(@merge_request), 'data-suggested-approvers' => approvers_names }
   = render 'projects/merge_requests/widget/heading'
   .mr-widget-body
     -# After conflicts are resolved, the user is redirected back to the MR page.
@@ -27,7 +29,7 @@
     - elsif @merge_request.work_in_progress?
       = render 'projects/merge_requests/widget/open/wip'
     - elsif @merge_request.requires_approve? && !@merge_request.approved?
-      %approvals-body{':user-can-approve' => 'approvals.user_can_approve', ':user-has-approved' => 'approvals.user_has_approved', ':approved-by' => 'approvals.approved_by', ':approvals-left':'approvals.approvals_left'}
+      %approvals-body{':user-can-approve' => 'approvals.user_can_approve', ':user-has-approved' => 'approvals.user_has_approved', ':approved-by' => 'approvals.approved_by', ':approvals-left':'approvals.approvals_left', ':suggested-approvers' => 'approvals.suggested_approvers'}
 
     - elsif @merge_request.merge_when_build_succeeds?
       = render 'projects/merge_requests/widget/open/merge_when_build_succeeds'