MRWidget: MR changes. Mostly import and export.

11 files changed, 67 insertions, 65 deletions

diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_author_time.js b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_author_time.js
index 60bbf6f9785..0b0a1d468c3 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_author_time.js
+++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_author_time.js
@@ -1,4 +1,4 @@
-module.exports = {
+export default {
   name: 'MRWidgetAuthorTime',
   props: {
     actionText: { type: String, required: true, default: '' },
@@ -13,7 +13,7 @@ module.exports = {
         <img :src="author.avatarUrl" width="16" class="avatar avatar-inline s16" />
         <span class="author">{{author.name}}</span>
       </a>
-      <time :data-original-title='dateTitle' data-toggle="tooltip" data-placement="top" data-container="body">
+      <time :title='dateTitle' data-toggle="tooltip" data-placement="top" data-container="body">
         {{dateReadable}}
       </time>
     </h4>
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_header.js b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_header.js
index e047ea2557e..0a075d064fc 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_header.js
+++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_header.js
@@ -1,4 +1,4 @@
-module.exports = {
+export default {
   name: 'MRWidgetHeader',
   props: {
     targetBranch: { type: String, default: '', required: true },
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_merge_help.js b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_merge_help.js
index 18f664e0f43..72ebee73a8f 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_merge_help.js
+++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_merge_help.js
@@ -1,4 +1,4 @@
-module.exports = {
+export default {
   name: 'MRWidgetMergeHelp',
   template: `
     <section>
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_archived.js b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_archived.js
index 82be2f49aec..6a60bc7b411 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_archived.js
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_archived.js
@@ -1,4 +1,4 @@
-module.exports = {
+export default {
   name: 'MRWidgetArchived',
   template: `
     <div class="mr-widget-body">
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_closed.js b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_closed.js
index 9168ee2878b..fb62be4aa18 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_closed.js
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_closed.js
@@ -1,6 +1,6 @@
-const mrWidgetAuthorTime = require('../../components/mr_widget_author_time.js');
+import mrWidgetAuthorTime from '../../components/mr_widget_author_time';
 
-module.exports = {
+export default {
   name: 'MRWidgetClosed',
   props: {
     mr: { type: Object, required: true, default: () => ({}) },
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_locked.js b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_locked.js
index 2a89daf123f..f413bd2f348 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_locked.js
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_locked.js
@@ -1,4 +1,4 @@
-module.exports = {
+export default {
   name: 'MRWidgetLocked',
   props: {
     targetBranch: { type: Object, required: true, default: () => ({}) },
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merged.js b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merged.js
index cb703fccd24..580fc3d4c0a 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merged.js
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merged.js
@@ -1,6 +1,6 @@
-const mrWidgetAuthorTime = require('../../components/mr_widget_author_time.js');
+import mrWidgetAuthorTime from '../../components/mr_widget_author_time';
 
-module.exports = {
+export default {
   name: 'MRWidgetMerged',
   props: {
     mr: { type: Object, required: true, default: () => ({}) },
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_wip.js b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_wip.js
index b031db29cda..57edb9df83e 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_wip.js
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_wip.js
@@ -1,6 +1,6 @@
-const mrWidgetMergeHelp = require('../../components/mr_widget_merge_help.js');
+import mrWidgetMergeHelp from '../../components/mr_widget_merge_help';
 
-module.exports = {
+export default {
   name: 'MRWidgetWIP',
   components: {
     'mr-widget-merge-help': mrWidgetMergeHelp,
diff --git a/app/assets/javascripts/vue_merge_request_widget/index.js b/app/assets/javascripts/vue_merge_request_widget/index.js
index bbdbd9d8e3e..3d0809e90fe 100644
--- a/app/assets/javascripts/vue_merge_request_widget/index.js
+++ b/app/assets/javascripts/vue_merge_request_widget/index.js
@@ -1,50 +1,46 @@
-const Timeago = require('timeago.js');
-const Vue = window.Vue = require('vue');
-const WidgetHeader = require('./components/mr_widget_header.js');
-const MergedState = require('./components/states/mr_widget_merged.js');
-const ClosedState = require('./components/states/mr_widget_closed.js');
-const LockedState = require('./components/states/mr_widget_locked.js');
-const WipState = require('./components/states/mr_widget_wip.js');
-const ArchivedState = require('./components/states/mr_widget_archived.js');
-const MRWidgetStore = require('./stores/merge_request_store.js');
+import Vue from 'vue';
+import WidgetHeader from './components/mr_widget_header';
+import MergedState from './components/states/mr_widget_merged';
+import ClosedState from './components/states/mr_widget_closed';
+import LockedState from './components/states/mr_widget_locked';
+import WipState from './components/states/mr_widget_wip';
+import ArchivedState from './components/states/mr_widget_archived';
+import MRWidgetStore from './stores/merge_request_store';
 
-window.gl = window.gl || {};
-window.gl.mrWidget = window.gl.mrWidget || {};
+const mrWidgetOptions = () => ({
+  el: '#js-vue-mr-widget',
+  name: 'MRWidget',
+  data() {
+    const store = new MRWidgetStore(gl.mrWidgetData);
+    return {
+      mr: store,
+    };
+  },
+  components: {
+    'mr-widget-header': WidgetHeader,
+    'mr-widget-merged': MergedState,
+    'mr-widget-closed': ClosedState,
+    'mr-widget-locked': LockedState,
+    'mr-widget-wip': WipState,
+    'mr-widget-archived': ArchivedState,
+  },
+  template: `
+    <div class="mr-state-widget">
+      <mr-widget-header
+        :targetBranch="mr.targetBranch"
+        :sourceBranch="mr.sourceBranch"
+      />
 
-gl.mrWidget.timeagoInstance = new Timeago();
+      <mr-widget-merged :mr="mr" v-if="mr.isMerged" />
+      <mr-widget-closed :mr="mr" v-if="mr.isClosed" />
+      <mr-widget-locked :mr="mr" v-if="mr.isLocked" />
+      <mr-widget-archived v-if="mr.isArchived" />
+      <mr-widget-wip v-if="mr.isWip" />
 
-$(() => {
-  gl.mrWidget.instance = new Vue({
-    el: document.querySelector('.vue-merge-request-widget'),
-    name: 'MRWidget',
-    data() {
-      const store = new MRWidgetStore(gl.mrWidgetData);
-      return {
-        mr: store,
-      };
-    },
-    components: {
-      'mr-widget-header': WidgetHeader,
-      'mr-widget-merged': MergedState,
-      'mr-widget-closed': ClosedState,
-      'mr-widget-locked': LockedState,
-      'mr-widget-wip': WipState,
-      'mr-widget-archived': ArchivedState,
-    },
-    template: `
-      <div class="mr-state-widget">
-        <mr-widget-header
-          :targetBranch="mr.targetBranch"
-          :sourceBranch="mr.sourceBranch"
-        />
-
-        <mr-widget-merged :mr="mr" v-if="mr.isMerged" />
-        <mr-widget-closed :mr="mr" v-if="mr.isClosed" />
-        <mr-widget-locked :mr="mr" v-if="mr.isLocked" />
-        <mr-widget-archived v-if="mr.isArchived" />
-        <mr-widget-wip v-if="mr.isWip" />
+    </div>
+  `,
+});
 
-      </div>
-    `,
-  });
+document.addEventListener('DOMContentLoaded', () => {
+  new Vue(mrWidgetOptions()); // eslint-disable-line
 });
diff --git a/app/assets/javascripts/vue_merge_request_widget/stores/merge_request_store.js b/app/assets/javascripts/vue_merge_request_widget/stores/merge_request_store.js
index 95686602a10..9a9c07e66d9 100644
--- a/app/assets/javascripts/vue_merge_request_widget/stores/merge_request_store.js
+++ b/app/assets/javascripts/vue_merge_request_widget/stores/merge_request_store.js
@@ -1,25 +1,29 @@
-module.exports = class MergeRequestStore {
+import Timeago from 'timeago.js';
+
+export default class MergeRequestStore {
 
   constructor(data) {
     // TODO: Remove this
     this.rawData = data || {};
 
+    const currentUser = data.current_user;
+
     this.state = data.state;
     this.targetBranch = data.target_branch;
     this.sourceBranch = data.source_branch;
 
     this.updatedAt = data.updated_at;
     this.mergedAt = MergeRequestStore.getEventDate(data.merge_event);
-    this.mergedBy = MergeRequestStore.getUserObject(data.author); // FIXME: replace it with merge_event.author
+    // FIXME: replace it with merge_event.author
+    this.mergedBy = MergeRequestStore.getUserObject(data.author);
 
-    this.closedBy = MergeRequestStore.getUserObject(data.author); // FIXME: replace it with close_event.author
+    // FIXME: replace it with close_event.author
+    this.closedBy = MergeRequestStore.getUserObject(data.author);
     this.closedAt = MergeRequestStore.getEventDate(data.closed_event);
 
     this.targetBranchPath = data.target_branch_path;
     this.sourceBranchRemoved = !data.source_branch_exists;
 
-    const currentUser = data.current_user;
-
     this.canRemoveSourceBranch = currentUser.can_remove_source_branch || false;
     this.canRevert = currentUser.can_revert || false;
     this.canBeCherryPicked = data.can_be_cherry_picked || false;
@@ -41,11 +45,13 @@ module.exports = class MergeRequestStore {
   }
 
   static getEventDate(event) {
+    const timeagoInstance = new Timeago();
+
     if (!event) {
       return '';
     }
 
-    return gl.mrWidget.timeagoInstance.format(event.updated_at);
+    return timeagoInstance.format(event.updated_at);
   }
 
-};
+}
diff --git a/app/views/projects/merge_requests/widget/_show.html.haml b/app/views/projects/merge_requests/widget/_show.html.haml
index 3a0876d5adf..ce6759945b8 100644
--- a/app/views/projects/merge_requests/widget/_show.html.haml
+++ b/app/views/projects/merge_requests/widget/_show.html.haml
@@ -41,7 +41,7 @@
 
   merge_request_widget = new window.gl.MergeRequestWidget(opts);
 
-.vue-merge-request-widget
+#js-vue-mr-widget.mr-widget
 
 - content_for :page_specific_javascripts do
   = page_specific_javascript_bundle_tag('vue_merge_request_widget')