fix MR widget approvals bundle

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

-/* global Vue */
 /* global Flash */
 
+window.Vue = require('vue');
+window.Vue.use(require('vue-resource'));
+
+const Vue = window.Vue;
 require('./approvals_store');
 
-(() => {
-  class ApprovalsApi {
-    constructor(endpoint) {
-      gl.ApprovalsApi = this;
-      this.init(endpoint);
-    }
+class ApprovalsApi {
+  constructor(endpoint) {
+    gl.ApprovalsApi = this;
+    this.init(endpoint);
+  }
 
-    init(mergeRequestEndpoint) {
-      this.baseEndpoint = `${mergeRequestEndpoint}/approvals`;
-      Vue.http.headers.common['X-CSRF-Token'] = $.rails.csrfToken();
-    }
+  init(mergeRequestEndpoint) {
+    this.baseEndpoint = `${mergeRequestEndpoint}/approvals`;
+    Vue.http.headers.common['X-CSRF-Token'] = $.rails.csrfToken();
+  }
 
-    fetchApprovals() {
-      const flashErrorMessage = 'An error occured while retrieving approval data for this merge request.';
+  fetchApprovals() {
+    const flashErrorMessage = 'An error occured while retrieving approval data for this merge request.';
 
-      return Vue.http.get(this.baseEndpoint).catch(() => new Flash(flashErrorMessage));
-    }
+    return Vue.http.get(this.baseEndpoint).catch(() => new Flash(flashErrorMessage));
+  }
 
-    approveMergeRequest() {
-      const flashErrorMessage = 'An error occured while submitting your approval.';
+  approveMergeRequest() {
+    const flashErrorMessage = 'An error occured while submitting your approval.';
 
-      return Vue.http.post(this.baseEndpoint).catch(() => new Flash(flashErrorMessage));
-    }
+    return Vue.http.post(this.baseEndpoint).catch(() => new Flash(flashErrorMessage));
+  }
 
-    unapproveMergeRequest() {
-      const flashErrorMessage = 'An error occured while removing your approval.';
+  unapproveMergeRequest() {
+    const flashErrorMessage = 'An error occured while removing your approval.';
 
-      return Vue.http.delete(this.baseEndpoint).catch(() => new Flash(flashErrorMessage));
-    }
+    return Vue.http.delete(this.baseEndpoint).catch(() => new Flash(flashErrorMessage));
   }
+}
 
-  gl.ApprovalsApi = ApprovalsApi;
-})();
+window.gl = window.gl || {};
+window.gl.ApprovalsApi = ApprovalsApi;

app/assets/javascripts/merge_request_widget/approvals/approvals_bundle.js.es6

-function requireAll(context) { return context.keys().map(context); }
-
 require('./approvals_store');
 require('./approvals_api');
-
-requireAll(require.context('./components', true, /^\.\/.*\.(js|es6)$/));
+require('./components/approvals_body');
+require('./components/approvals_footer');

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

-/* global Vue */
-
 require('./approvals_api');
 
-(() => {
-  let singleton;
+let singleton;
 
-  class MergeRequestApprovalsStore {
-    constructor(rootStore) {
-      if (!singleton) {
-        singleton = this;
-        this.init(rootStore);
-      }
-      return singleton;
+class MergeRequestApprovalsStore {
+  constructor(rootStore) {
+    if (!singleton) {
+      singleton = this;
+      this.init(rootStore);
     }
+    return singleton;
+  }
 
-    init(rootStore) {
-      this.rootStore = rootStore;
-      this.api = new gl.ApprovalsApi(rootStore.rootEl.dataset.endpoint);
-      this.state = {
-        fetching: false,
-      };
-    }
+  init(rootStore) {
+    this.rootStore = rootStore;
+    this.api = new gl.ApprovalsApi(rootStore.rootEl.dataset.endpoint);
+    this.state = {
+      fetching: false,
+    };
+  }
 
-    initStoreOnce() {
-      const state = this.state;
-      if (!state.fetching) {
-        state.fetching = true;
-        return this.fetch()
-          .then(() => {
-            state.fetching = false;
-            this.assignToRootStore('showApprovals', true);
-          });
-      }
-      return Promise.resolve();
-    }
+  initStoreOnce() {
+    const state = this.state;
+    if (!state.fetching) {
+      state.fetching = true;
+      return this.fetch()
+        .then(() => {
+          state.fetching = false;
+          this.assignToRootStore('showApprovals', true);
+        });
+    }
+    return Promise.resolve();
+  }
 
-    fetch() {
-      return this.api.fetchApprovals()
-        .then(res => this.assignToRootStore('approvals', res.json()))
-        .then(data => this.setMergeRequestAcceptanceStatus(data.approvals_left));
-    }
+  fetch() {
+    return this.api.fetchApprovals()
+      .then(res => this.assignToRootStore('approvals', res.json()))
+      .then(data => this.setMergeRequestAcceptanceStatus(data.approvals_left));
+  }
 
-    approve() {
-      return this.api.approveMergeRequest()
-        .then(res => this.assignToRootStore('approvals', res.json()))
-        .then(data => this.setMergeRequestAcceptanceStatus(data.approvals_left));
-    }
+  approve() {
+    return this.api.approveMergeRequest()
+      .then(res => this.assignToRootStore('approvals', res.json()))
+      .then(data => this.setMergeRequestAcceptanceStatus(data.approvals_left));
+  }
 
-    unapprove() {
-      return this.api.unapproveMergeRequest()
-        .then(res => this.assignToRootStore('approvals', res.json()))
-        .then(data => this.setMergeRequestAcceptanceStatus(data.approvals_left));
-    }
+  unapprove() {
+    return this.api.unapproveMergeRequest()
+      .then(res => this.assignToRootStore('approvals', res.json()))
+      .then(data => this.setMergeRequestAcceptanceStatus(data.approvals_left));
+  }
 
-    setMergeRequestAcceptanceStatus(approvalsLeft) {
-      return this.rootStore.assignToData('disableAcceptance', !!approvalsLeft);
-    }
+  setMergeRequestAcceptanceStatus(approvalsLeft) {
+    return this.rootStore.assignToData('disableAcceptance', !!approvalsLeft);
+  }
 
-    assignToRootStore(key, data) {
-      return this.rootStore.assignToData(key, data);
-    }
+  assignToRootStore(key, data) {
+    return this.rootStore.assignToData(key, data);
   }
-  gl.MergeRequestApprovalsStore = MergeRequestApprovalsStore;
-})(window.gl || (window.gl = {}));
+}
+
+window.gl = window.gl || {};
+window.gl.MergeRequestApprovalsStore = MergeRequestApprovalsStore;

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

 /* global Vue */
 
+const Vue = require('vue');
 require('../approvals_store');
 require('../approvals_api');
 
-(() => {
-  Vue.component('approvals-body', {
-    name: 'approvals-body',
-    props: {
-      approvedBy: {
-        type: Array,
-        required: false,
-      },
-      approvalsLeft: {
-        type: Number,
-        required: false,
-      },
-      userCanApprove: {
-        type: Boolean,
-        required: false,
-      },
-      userHasApproved: {
-        type: Boolean,
-        required: false,
-      },
-      suggestedApprovers: {
-        type: Array,
-        required: false,
-      },
+Vue.component('approvals-body', {
+  name: 'approvals-body',
+  props: {
+    approvedBy: {
+      type: Array,
+      required: false,
     },
-    data() {
-      return {
-        approving: false,
-      };
+    approvalsLeft: {
+      type: Number,
+      required: false,
     },
-    computed: {
-      approvalsRequiredStringified() {
-        const baseString = `${this.approvalsLeft} more approval`;
-        return this.approvalsLeft === 1 ? baseString : `${baseString}s`;
-      },
-      approverNamesStringified() {
-        const approvers = this.suggestedApprovers;
+    userCanApprove: {
+      type: Boolean,
+      required: false,
+    },
+    userHasApproved: {
+      type: Boolean,
+      required: false,
+    },
+    suggestedApprovers: {
+      type: Array,
+      required: false,
+    },
+  },
+  data() {
+    return {
+      approving: false,
+    };
+  },
+  computed: {
+    approvalsRequiredStringified() {
+      const baseString = `${this.approvalsLeft} more approval`;
+      return this.approvalsLeft === 1 ? baseString : `${baseString}s`;
+    },
+    approverNamesStringified() {
+      const approvers = this.suggestedApprovers;
 
-        if (!approvers) {
-          return '';
-        }
+      if (!approvers) {
+        return '';
+      }
 
-        return approvers.length === 1 ? approvers[0].name :
-          approvers.reduce((memo, curr, index) => {
-            const nextMemo = `${memo}${curr.name}`;
+      return approvers.length === 1 ? approvers[0].name :
+        approvers.reduce((memo, curr, index) => {
+          const nextMemo = `${memo}${curr.name}`;
 
-            if (index === approvers.length - 2) { // second to last index
-              return `${nextMemo} or `;
-            } else if (index === approvers.length - 1) { // last index
-              return nextMemo;
-            }
+          if (index === approvers.length - 2) { // second to last index
+            return `${nextMemo} or `;
+          } else if (index === approvers.length - 1) { // last index
+            return nextMemo;
+          }
 
-            return `${nextMemo}, `;
-          }, '');
-      },
-      showApproveButton() {
-        return this.userCanApprove && !this.userHasApproved;
-      },
-      showSuggestedApprovers() {
-        return this.suggestedApprovers && this.suggestedApprovers.length;
-      },
+          return `${nextMemo}, `;
+        }, '');
+    },
+    showApproveButton() {
+      return this.userCanApprove && !this.userHasApproved;
     },
-    methods: {
-      approveMergeRequest() {
-        this.approving = true;
-        return gl.ApprovalsStore.approve().then(() => {
-          this.approving = false;
-        });
-      },
+    showSuggestedApprovers() {
+      return this.suggestedApprovers && this.suggestedApprovers.length;
     },
-    beforeCreate() {
-      gl.ApprovalsStore.initStoreOnce();
+  },
+  methods: {
+    approveMergeRequest() {
+      this.approving = true;
+      return gl.ApprovalsStore.approve().then(() => {
+        this.approving = false;
+      });
     },
-    template: `
-      <div class='approvals-body mr-widget-footer mr-approvals-footer'>
-        <h4> Requires {{ approvalsRequiredStringified }}
-          <span v-if='showSuggestedApprovers'> (from {{ approverNamesStringified }}) </span>
-        </h4>
-        <div v-if='showApproveButton' class='append-bottom-10'>
-          <button
-            :disabled='approving'
-            @click='approveMergeRequest'
-            class='btn btn-primary approve-btn'>
-            Approve Merge Request
-          </button>
-        </div>
+  },
+  beforeCreate() {
+    gl.ApprovalsStore.initStoreOnce();
+  },
+  template: `
+    <div class='approvals-body mr-widget-footer mr-approvals-footer'>
+      <h4> Requires {{ approvalsRequiredStringified }}
+        <span v-if='showSuggestedApprovers'> (from {{ approverNamesStringified }}) </span>
+      </h4>
+      <div v-if='showApproveButton' class='append-bottom-10'>
+        <button
+          :disabled='approving'
+          @click='approveMergeRequest'
+          class='btn btn-primary approve-btn'>
+          Approve Merge Request
+        </button>
       </div>
-    `,
-  });
-})();
+    </div>
+  `,
+});

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

 /* global Vue */
 
+const Vue = require('vue');
 require('../approvals_store');
 require('../../../vue_common_component/link_to_member_avatar');
 
-(() => {
-  Vue.component('approvals-footer', {
-    name: 'approvals-footer',
-    props: {
-      approvedBy: {
-        type: Array,
-        required: false,
-      },
-      approvalsLeft: {
-        type: Number,
-        required: false,
-      },
-      userCanApprove: {
-        type: Boolean,
-        required: false,
-      },
-      userHasApproved: {
-        type: Boolean,
-        required: false,
-      },
-      suggestedApprovers: {
-        type: Array,
-        required: false,
-      },
-      pendingAvatarSvg: {
-        type: String,
-        required: true,
-      },
-      checkmarkSvg: {
-        type: String,
-        required: true,
-      },
+Vue.component('approvals-footer', {
+  name: 'approvals-footer',
+  props: {
+    approvedBy: {
+      type: Array,
+      required: false,
     },
-    data() {
-      return {
-        unapproving: false,
-      };
+    approvalsLeft: {
+      type: Number,
+      required: false,
     },
-    computed: {
-      showUnapproveButton() {
-        return this.userHasApproved && !this.userCanApprove;
-      },
+    userCanApprove: {
+      type: Boolean,
+      required: false,
     },
-    methods: {
-      unapproveMergeRequest() {
-        this.unapproving = true;
-        gl.ApprovalsStore.unapprove().then(() => {
-          this.unapproving = false;
-        });
-      },
+    userHasApproved: {
+      type: Boolean,
+      required: false,
     },
-    beforeCreate() {
-      gl.ApprovalsStore.initStoreOnce();
+    suggestedApprovers: {
+      type: Array,
+      required: false,
     },
-    template: `
-      <div class='mr-widget-footer approved-by-users approvals-footer clearfix mr-approvals-footer'>
-        <span class='approvers-prefix'> Approved by </span>
-        <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'
-            :avatar-html='checkmarkSvg'
-            :show-tooltip='true'>
-          </link-to-member-avatar>
-        </span>
-        <span v-for='n in approvalsLeft'>
-          <link-to-member-avatar
-            :clickable='false'
-            :avatar-html='pendingAvatarSvg'
-            :show-tooltip='false'
-            extra-link-class='hide-asset'>
-          </link-to-member-avatar>
-        </span>
-        <span class='unapprove-btn-wrap' v-if='showUnapproveButton'>
-          <button
-            :disabled='unapproving'
-            @click='unapproveMergeRequest'
-            class='btn btn-link unapprove-btn'>
-            <i class='fa fa-close'></i>
-            Remove your approval</span>
-          </button>
-        </span>
-      </div>
-    `,
-  });
-})();
+    pendingAvatarSvg: {
+      type: String,
+      required: true,
+    },
+    checkmarkSvg: {
+      type: String,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      unapproving: false,
+    };
+  },
+  computed: {
+    showUnapproveButton() {
+      return this.userHasApproved && !this.userCanApprove;
+    },
+  },
+  methods: {
+    unapproveMergeRequest() {
+      this.unapproving = true;
+      gl.ApprovalsStore.unapprove().then(() => {
+        this.unapproving = false;
+      });
+    },
+  },
+  beforeCreate() {
+    gl.ApprovalsStore.initStoreOnce();
+  },
+  template: `
+    <div class='mr-widget-footer approved-by-users approvals-footer clearfix mr-approvals-footer'>
+      <span class='approvers-prefix'> Approved by </span>
+      <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'
+          :avatar-html='checkmarkSvg'
+          :show-tooltip='true'>
+        </link-to-member-avatar>
+      </span>
+      <span v-for='n in approvalsLeft'>
+        <link-to-member-avatar
+          :clickable='false'
+          :avatar-html='pendingAvatarSvg'
+          :show-tooltip='false'
+          extra-link-class='hide-asset'>
+        </link-to-member-avatar>
+      </span>
+      <span class='unapprove-btn-wrap' v-if='showUnapproveButton'>
+        <button
+          :disabled='unapproving'
+          @click='unapproveMergeRequest'
+          class='btn btn-link unapprove-btn'>
+          <i class='fa fa-close'></i>
+          Remove your approval</span>
+        </button>
+      </span>
+    </div>
+  `,
+});

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

-/* global Vue */
-
+const Vue = require('vue');
 require('./widget_store');
 require('./approvals/approvals_bundle');
 
-(() => {
-  $(() => {
-    const rootEl = document.getElementById('merge-request-widget-app');
-    const widgetSharedStore = new gl.MergeRequestWidgetStore(rootEl);
+window.gl = window.gl || {};
+
+$(() => {
+  const rootEl = document.getElementById('merge-request-widget-app');
+  const widgetSharedStore = new gl.MergeRequestWidgetStore(rootEl);
 
-    gl.MergeRequestWidgetApp = new Vue({
-      el: rootEl,
-      data: widgetSharedStore.data,
-    });
+  gl.MergeRequestWidgetApp = new Vue({
+    el: rootEl,
+    data: widgetSharedStore.data,
   });
-})(window.gl || (window.gl = {}));
+});

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

 require('./approvals/approvals_store');
 
-(() => {
-  let singleton;
-
-  class MergeRequestWidgetStore {
-    constructor(rootEl) {
-      if (!singleton) {
-        singleton = gl.MergeRequestWidget.Store = this;
-        this.init(rootEl);
-      }
-      return singleton;
+let singleton;
+
+class MergeRequestWidgetStore {
+  constructor(rootEl) {
+    if (!singleton) {
+      singleton = gl.MergeRequestWidget.Store = this;
+      this.init(rootEl);
     }
+    return singleton;
+  }
 
-    init(rootEl) {
-      this.rootEl = rootEl;
-      this.data = {};
+  init(rootEl) {
+    this.rootEl = rootEl;
+    this.data = {};
 
-      // init other widget stores here
-      this.initWidgetState();
-      this.initApprovals();
-    }
+    // init other widget stores here
+    this.initWidgetState();
+    this.initApprovals();
+  }
 
-    initWidgetState() {
-      this.assignToData('showApprovals', false);
-      this.assignToData('disableAcceptance', this.rootEl.dataset.approvalPending === 'true');
-    }
+  initWidgetState() {
+    this.assignToData('showApprovals', false);
+    this.assignToData('disableAcceptance', this.rootEl.dataset.approvalPending === 'true');
+  }
 
-    initApprovals() {
-      gl.ApprovalsStore = new gl.MergeRequestApprovalsStore(this);
-      this.assignToData('approvals', {});
-    }
+  initApprovals() {
+    gl.ApprovalsStore = new gl.MergeRequestApprovalsStore(this);
+    this.assignToData('approvals', {});
+  }
 
-    assignToData(key, val) {
-      this.data[key] = val;
-      return val;
-    }
+  assignToData(key, val) {
+    this.data[key] = val;
+    return val;
   }
-  gl.MergeRequestWidgetStore = MergeRequestWidgetStore;
-})(window.gl || (window.gl = {}));
+}
+
+window.gl = window.gl || {};
+window.gl.MergeRequestWidgetStore = MergeRequestWidgetStore;