Update frontend to match backend routes.

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

@@ -4,7 +4,7 @@
 (() => {
   Vue.component('approvals-body', {
     name: 'approvals-body',
-    props: ['approverNames', 'approvalsLeft', 'userCanApprove', 'userHasApproved'],
+    props: ['approvedBy', 'approvalsLeft', 'userCanApprove', 'userHasApproved'],
     data() {
       return {
         loading: true,
@@ -16,12 +16,16 @@
           `${this.approvalsLeft} more approvals`;
       },
       approverNamesStringified() {
-        const lastIdx = this.approverNames.length - 1;
-        return this.approverNames.reduce((memo, curr, index) => {
-          const newList = index !== lastIdx ? `${memo} ${curr}, ` :
-            `${memo} or ${curr}`;
+        const approvers = this.approvedBy;
+        if (approvers && approvers.length) {
+          const lastIdx = approvers.length - 1;
+          return approvers.reduce((memo, curr, index) => {
+            const userDisplayName = curr.user.name;
+            const newList = index !== lastIdx ? `${memo} ${userDisplayName}, ` :
+              `${memo} or ${userDisplayName}`;
             return newList;
           }, '');
+        }
       },
       showApproveButton() {
         return this.userCanApprove && !this.userHasApproved;

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

@@ -6,7 +6,7 @@
 
   Vue.component('approvals-footer', {
     name: 'approvals-footer',
-    props: ['userCanApprove', 'userHasApproved', 'approvedByUsers', 'approvalsLeft', 'pendingAvatarSvg', 'checkmarkSvg'],
+    props: ['userCanApprove', 'userHasApproved', 'approvedBy', 'approvalsLeft', 'pendingAvatarSvg', 'checkmarkSvg'],
     data() {
       return {
         loading: true,
@@ -14,10 +14,10 @@
     },
     computed: {
       hasApprovers() {
-        return this.approvedByUsers && this.approvedByUsers.length;
+        return this.approvedBy && this.approvedBy.length;
       },
       showUnapproveButton() {
-        return this.userCanApprove && this.userHasApproved;
+        return this.userHasApproved;
       },
     },
     methods: {
@@ -33,12 +33,13 @@
     template: `
       <div v-if='hasApprovers' class='mr-widget-footer approved-by-users approvals-footer clearfix'>
         <span class='approvers-prefix'> Approved by </span>
-        <span v-for='approver in approvedByUsers'>
+        <span v-for='approver in approvedBy'>
           <link-to-member-avatar
             extra-link-class='approver-avatar'
-            :avatar-url='approver.avatar.url'
-            :display-name='approver.name'
-            :username='approver.username'
+            :avatar-url='approver.user.avatar_url'
+            :display-name='approver.user.name'
+            :username='approver.user.username'
+            :profile-url='approver.user.web_url'
             :avatar-html='checkmarkSvg'
             :show-tooltip='true'>
           </link-to-member-avatar>
@@ -60,3 +61,57 @@
     `,
   });
 })();
+
+/*
+ *{':user-can-approve' => 'approvals.user_can_approve', ':user-has-approved' => 'approvals.user-has-approved', ':approved-by' => 'approvals.approved_by', ':approvals-left':'approvals.approvals_left'}2
+approvals_required
+:
+3
+approved_by
+:
+Array[1]
+0
+:
+Object
+length
+:
+1
+__proto__
+:
+Array[0]
+created_at
+:
+"2016-10-17T17:26:13.169Z"
+description
+:
+"Quod corporis labore maiores voluptates ad nobis rem earum. Fugit aperiam officiis temporibus nemo qui consequatur. Perspiciatis maiores expedita est omnis vitae et assumenda."
+id
+:
+7
+iid
+:
+7
+merge_status
+:
+"can_be_merged"
+project_id
+:
+8
+state
+:
+"reopened"
+title
+:
+"Autem ea aut rem rerum sed et eligendi vel doloribus perferendis."
+updated_at
+:
+"2016-12-08T17:20:40.530Z"
+user_can_approve
+:
+false
+user_has_approved
+:
+true
+ *
+ *
+ * */

app/assets/javascripts/merge_request_widget/approvals/services/approvals_api.js.es6

@@ -8,24 +8,26 @@
     }
 
     init(mergeRequestEndpoint) {
-      const approvalsEndpoint = `${mergeRequestEndpoint}/approvals.json`;
-      this.resource = gl.ApprovalsResource = new gl.SubbableResource(approvalsEndpoint);
+      this.baseEndpoint = mergeRequestEndpoint;
     }
 
     fetchApprovals() {
-      return this.resource.get({ type: 'GET' }).fail((err) => {
+      const endpoint = `${this.baseEndpoint}/approvals`;
+      return Vue.http.get(endpoint).catch((err) => {
         console.error(`Error fetching approvals. ${err}`);
       });
     }
 
     approveMergeRequest() {
-      return this.resource.post({ type: 'POST' }).fail((err) => {
+      const endpoint = `${this.baseEndpoint}/approvals`;
+      return Vue.http.save(endpoint).catch((err) => {
         console.error(`Error approving merge request. ${err}`);
       });
     }
 
     unapproveMergeRequest() {
-      return this.resource.delete({ type: 'DELETE' }).fail((err) => {
+      const endpoint = `${this.baseEndpoint}/approvals`;
+      return Vue.http.delete(endpoint).catch((err) => {
         console.error(`Error unapproving merge request. ${err}`);
       });
     }

app/assets/javascripts/merge_request_widget/approvals/stores/approvals_store.js.es6

@@ -23,7 +23,7 @@
 
     fetch() {
       return this.api.fetchApprovals()
-        .then((data) => this.rootStore.assignToData(data));
+        .then((res) => this.assignToRootStore(res.data));
     }
 
     approve() {
@@ -40,3 +40,57 @@
   gl.ApprovalsStore = ApprovalsStore;
 })();
 
+
+/*
+ *2
+approvals_required
+:
+3
+approved_by
+:
+Array[1]
+0
+:
+Object
+length
+:
+1
+__proto__
+:
+Array[0]
+created_at
+:
+"2016-10-17T17:26:13.169Z"
+description
+:
+"Quod corporis labore maiores voluptates ad nobis rem earum. Fugit aperiam officiis temporibus nemo qui consequatur. Perspiciatis maiores expedita est omnis vitae et assumenda."
+id
+:
+7
+iid
+:
+7
+merge_status
+:
+"can_be_merged"
+project_id
+:
+8
+state
+:
+"reopened"
+title
+:
+"Autem ea aut rem rerum sed et eligendi vel doloribus perferendis."
+updated_at
+:
+"2016-12-08T17:20:40.530Z"
+user_can_approve
+:
+false
+user_has_approved
+:
+true
+ *
+ *
+ * */

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

@@ -28,7 +28,7 @@
 
     assignToData(key, val) {
       this.data[key] = {};
-      Object.assign(this.data[key], val);
+      return Object.assign(this.data[key], val);
     }
   }
   gl.MergeRequestWidgetStore = MergeRequestWidgetStore;

app/assets/javascripts/subbable_resource.js.es6

@@ -8,18 +8,13 @@
 * */
 
   class SubbableResource {
-    constructor(resourcePath, test) {
+    constructor(resourcePath) {
       this.endpoint = resourcePath;
-      this.defaultPayload = { url: resourcePath };
       // TODO: Switch to axios.create asap
-      this.resource = $.ajax;
+      this.resource = Vue.resource(resourcePath);
       this.subscribers = [];
     }
 
-    extendDefaultPayload(payload) {
-      return Object.assign(payload, this.defaultPayload);
-    }
-
     subscribe(callback) {
       this.subscribers.push(callback);
     }
@@ -33,26 +28,22 @@
     }
 
     get(payload) {
-      this.extendDefaultPayload(payload);
-      return this.resource(payload)
+      return this.resource.get(payload)
         .then(data => this.publish(data));
     }
 
-    post(payload) {
-      this.extendDefaultPayload(payload);
-      return this.resource(payload)
+    save(payload) {
+      return this.resource.save(payload)
         .then(data => this.publish(data));
     }
 
-    put(payload) {
-      this.extendDefaultPayload(payload);
-      return this.resource(payload)
+    update(payload) {
+      return this.resource.update(payload)
         .then(data => this.publish(data));
     }
 
-    delete(payload) {
-      this.extendDefaultPayload(payload);
-      return this.resource(payload)
+    remove(payload) {
+      return this.resource.remove(payload)
         .then(data => this.publish(data));
     }
   }

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{ 'data-approvals' => @merge_request.approvals.to_json, 'data-endpoint'=> merge_request_path(@merge_request)}
+#merge-request-widget-app.mr-state-widget{ approvals: @merge_request.approvals.to_json, 'data-endpoint'=> merge_request_path(@merge_request)}
   = render 'projects/merge_requests/widget/heading'
   .mr-widget-body
     -# After conflicts are resolved, the user is redirected back to the MR page.
@@ -27,7 +27,8 @@
     - elsif @merge_request.work_in_progress?
       = render 'projects/merge_requests/widget/open/wip'
     - elsif @merge_request.requires_approve? && !@merge_request.approved?
-      %approvals-body
+      %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'}
+
     - elsif @merge_request.merge_when_build_succeeds?
       = render 'projects/merge_requests/widget/open/merge_when_build_succeeds'
     - elsif !@merge_request.can_be_merged_by?(current_user)
@@ -51,6 +52,6 @@
         = mr_assign_issues_link
 
   - if @merge_request.approvals.any?
-    %approvals-footer{'pending-avatar-svg' => custom_icon('icon_dotted_circle'), 'checkmark-svg' => custom_icon('icon_checkmark') }
+    %approvals-footer{'pending-avatar-svg' => custom_icon('icon_dotted_circle'), 'checkmark-svg' => custom_icon('icon_checkmark'), ':user-can-approve' => 'approvals.user_can_approve', ':user-has-approved' => 'approvals.user_has_approved', ':approved-by' => 'approvals.approved_by', ':approvals-left':'approvals.approvals_left'}