Merge branch 'fix-broken-master-specs' into 'master'

Fix broken master specs

See merge request !1190

app/assets/javascripts/commit/pipelines/pipelines_store.js.es6

@@ -26,7 +26,7 @@ class PipelinesStore {
    */
   startTimeAgoLoops() {
     const startTimeLoops = () => {
-      this.timeLoopInterval = setInterval(function timeloopInterval() {
+      this.timeLoopInterval = setInterval(() => {
         this.$children[0].$children.reduce((acc, component) => {
           const timeAgoComponent = component.$children.filter(el => el.$options._componentTag === 'time-ago')[0];
           acc.push(timeAgoComponent);

app/assets/javascripts/diff_notes/components/comment_resolve_btn.js.es6

 /* eslint-disable comma-dangle, object-shorthand, func-names, no-else-return, quotes, no-lonely-if, max-len */
 /* global Vue */
 /* global CommentsStore */
+const Vue = require('vue');
 
 (() => {
   const CommentAndResolveBtn = Vue.extend({

app/assets/javascripts/diff_notes/components/jump_to_discussion.js.es6

@@ -2,6 +2,7 @@
 /* global Vue */
 /* global DiscussionMixins */
 /* global CommentsStore */
+const Vue = require('vue');
 
 (() => {
   const JumpToDiscussion = Vue.extend({

app/assets/javascripts/diff_notes/components/resolve_btn.js.es6

@@ -3,6 +3,7 @@
 /* global CommentsStore */
 /* global ResolveService */
 /* global Flash */
+const Vue = require('vue');
 
 (() => {
   const ResolveBtn = Vue.extend({
@@ -16,6 +17,7 @@
     },
     data: function () {
       return {
+        note: {},
         discussions: CommentsStore.state,
         loading: false
       };
@@ -30,13 +32,6 @@
       discussion: function () {
         return this.discussions[this.discussionId];
       },
-      note: function () {
-        if (this.discussion) {
-          return this.discussion.getNote(this.noteId);
-        } else {
-          return undefined;
-        }
-      },
       buttonText: function () {
         if (this.isResolved) {
           return `Resolved by ${this.resolvedByName}`;
@@ -106,6 +101,8 @@
     },
     created: function () {
       CommentsStore.create(this.discussionId, this.noteId, this.canResolve, this.resolved, this.resolvedBy);
+
+      this.note = this.discussion.getNote(this.noteId);
     }
   });
 

app/assets/javascripts/diff_notes/components/resolve_count.js.es6

@@ -2,6 +2,7 @@
 /* global Vue */
 /* global DiscussionMixins */
 /* global CommentsStore */
+const Vue = require('vue');
 
 ((w) => {
   w.ResolveCount = Vue.extend({

app/assets/javascripts/diff_notes/components/resolve_discussion_btn.js.es6

@@ -2,6 +2,7 @@
 /* global Vue */
 /* global CommentsStore */
 /* global ResolveService */
+const Vue = require('vue');
 
 (() => {
   const ResolveDiscussionBtn = Vue.extend({
@@ -13,13 +14,11 @@
     },
     data: function() {
       return {
-        discussions: CommentsStore.state
+        discussions: CommentsStore.state,
+        discussion: {},
       };
     },
     computed: {
-      discussion: function () {
-        return this.discussions[this.discussionId];
-      },
       showButton: function () {
         if (this.discussion) {
           return this.discussion.isResolvable();
@@ -56,6 +55,8 @@
     },
     created: function () {
       CommentsStore.createDiscussion(this.discussionId, this.canResolve);
+
+      this.discussion = this.discussions[this.discussionId];
     }
   });
 

app/assets/javascripts/diff_notes/diff_notes_bundle.js.es6

 /* eslint-disable func-names, comma-dangle, new-cap, no-new, import/newline-after-import, no-multi-spaces, max-len */
 /* global Vue */
 /* global ResolveCount */
+/* global ResolveServiceClass */
 
 function requireAll(context) { return context.keys().map(context); }
+const Vue = require('vue');
 requireAll(require.context('./models',     false, /^\.\/.*\.(js|es6)$/));
 requireAll(require.context('./stores',     false, /^\.\/.*\.(js|es6)$/));
 requireAll(require.context('./services',   false, /^\.\/.*\.(js|es6)$/));
@@ -10,11 +12,14 @@ requireAll(require.context('./mixins',     false, /^\.\/.*\.(js|es6)$/));
 requireAll(require.context('./components', false, /^\.\/.*\.(js|es6)$/));
 
 $(() => {
+  const projectPath = document.querySelector('.merge-request').dataset.projectPath;
   const COMPONENT_SELECTOR = 'resolve-btn, resolve-discussion-btn, jump-to-discussion, comment-and-resolve-btn';
 
   window.gl = window.gl || {};
   window.gl.diffNoteApps = {};
 
+  window.ResolveService = new ResolveServiceClass(projectPath);
+
   gl.diffNotesCompileComponents = () => {
     const $components = $(COMPONENT_SELECTOR).filter(function () {
       return $(this).closest('resolve-count').length !== 1;
@@ -44,6 +49,6 @@ $(() => {
     el: '#resolve-count-app',
     components: {
       'resolve-count': ResolveCount
-    }
+    },
   });
 });

app/assets/javascripts/diff_notes/services/resolve.js.es6

@@ -3,20 +3,21 @@
 /* global Flash */
 /* global CommentsStore */
 
-((w) => {
-  class ResolveServiceClass {
-    constructor() {
-      this.noteResource = Vue.resource('notes{/noteId}/resolve');
-      this.discussionResource = Vue.resource('merge_requests{/mergeRequestId}/discussions{/discussionId}/resolve');
+window.Vue.use(require('vue-resource'));
+
+(() => {
+  window.ResolveServiceClass = class ResolveServiceClass {
+    constructor(rootPath) {
+      this.noteResource = Vue.resource(`${rootPath}/notes{/noteId}/resolve`);
+      this.discussionResource = Vue.resource(`${rootPath}/merge_requests{/mergeRequestId}/discussions{/discussionId}/resolve`);
     }
 
     setCSRF() {
       Vue.http.headers.common['X-CSRF-Token'] = $.rails.csrfToken();
     }
 
-    prepareRequest(root) {
+    prepareRequest() {
       this.setCSRF();
-      Vue.http.options.root = root;
     }
 
     resolve(projectPath, noteId) {
@@ -87,7 +88,5 @@
         discussionId
       }, {});
     }
-  }
-
-  w.ResolveService = new ResolveServiceClass();
-})(window);
+  };
+})();

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 {
+class ApprovalsApi {
   constructor(endpoint) {
     gl.ApprovalsApi = this;
     this.init(endpoint);
@@ -32,7 +34,7 @@ require('./approvals_store');
 
     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 {
+class MergeRequestApprovalsStore {
   constructor(rootStore) {
     if (!singleton) {
       singleton = this;
@@ -60,6 +57,7 @@ require('./approvals_api');
   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', {
+Vue.component('approvals-body', {
   name: 'approvals-body',
   props: {
     approvedBy: {
@@ -91,5 +91,4 @@ require('../approvals_api');
       </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', {
+Vue.component('approvals-footer', {
   name: 'approvals-footer',
   props: {
     approvedBy: {
@@ -89,5 +89,4 @@ require('../../../vue_common_component/link_to_member_avatar');
       </span>
     </div>
   `,
-  });
-})();
+});

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

-/* global Vue */
-
+/* global merge_request_widget */
+const Vue = require('vue');
 require('./widget_store');
 require('./approvals/approvals_bundle');
 
-(() => {
-  $(() => {
+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,
+    mounted() {
+      // re-init the MiniPipelineGraph because of Vue is messing with the element
+      merge_request_widget.initMiniPipelineGraph();
+    },
   });
-  });
-})(window.gl || (window.gl = {}));
+});

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

 require('./approvals/approvals_store');
 
-(() => {
-  let singleton;
+let singleton;
 
-  class MergeRequestWidgetStore {
+class MergeRequestWidgetStore {
   constructor(rootEl) {
     if (!singleton) {
       singleton = gl.MergeRequestWidget.Store = this;
@@ -35,6 +34,7 @@ require('./approvals/approvals_store');
     this.data[key] = val;
     return val;
   }
-  }
-  gl.MergeRequestWidgetStore = MergeRequestWidgetStore;
-})(window.gl || (window.gl = {}));
+}
+
+window.gl = window.gl || {};
+window.gl.MergeRequestWidgetStore = MergeRequestWidgetStore;

app/assets/javascripts/vue_realtime_listener/index.js.es6

@@ -14,5 +14,16 @@
     window.addEventListener('focus', startIntervals);
     window.addEventListener('blur', removeIntervals);
     document.addEventListener('beforeunload', removeAll);
+
+    // add removeAll methods to stack
+    const stack = gl.VueRealtimeListener.reset;
+    gl.VueRealtimeListener.reset = () => {
+      gl.VueRealtimeListener.reset = stack;
+      removeAll();
+      stack();
+    };
   };
+
+  // remove all event listeners and intervals
+  gl.VueRealtimeListener.reset = () => undefined; // noop
 })(window.gl || (window.gl = {}));

app/views/projects/merge_requests/_show.html.haml

@@ -3,10 +3,9 @@
 - page_description     @merge_request.description
 - page_card_attributes @merge_request.card_attributes
 - content_for :page_specific_javascripts do
-  = page_specific_javascript_bundle_tag('lib_vue')
   = page_specific_javascript_bundle_tag('diff_notes')
 
-.merge-request{ 'data-url' => merge_request_path(@merge_request) }
+.merge-request{ 'data-url' => merge_request_path(@merge_request), 'data-project-path' => project_path(@merge_request.project) }
   = render "projects/merge_requests/show/mr_title"
 
   .merge-request-details.issuable-details{ data: { id: @merge_request.project.id } }

spec/javascripts/commit/pipelines/pipelines_store_spec.js.es6

@@ -7,6 +7,9 @@ describe('Store', () => {
     store = new gl.commits.pipelines.PipelinesStore();
   });
 
+  // unregister intervals and event handlers
+  afterEach(() => gl.VueRealtimeListener.reset());
+
   it('should start with a blank state', () => {
     expect(store.state.pipelines.length).toBe(0);
   });