Refactored diff notes Vue app

It now relies on its Vue bundle rather than the window. Fixes some reactivity issues that was happening in EE

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');
 
@@ -10,13 +9,11 @@ const Vue = require('vue');
     },
     data() {
       return {
-        textareaIsEmpty: true
+        textareaIsEmpty: true,
+        discussion: {},
       };
     },
     computed: {
-      discussion: function () {
-        return CommentsStore.state[this.discussionId];
-      },
       showButton: function () {
         if (this.discussion) {
           return this.discussion.isResolvable();
@@ -43,6 +40,9 @@ const Vue = require('vue');
         }
       }
     },
+    created() {
+      this.discussion = CommentsStore.state[this.discussionId];
+    },
     mounted: function () {
       const $textarea = $(`#new-discussion-note-form-${this.discussionId} .note-textarea`);
       this.textareaIsEmpty = $textarea.val() === '';

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

 /* eslint-disable comma-dangle, object-shorthand, func-names, no-else-return, guard-for-in, no-restricted-syntax, one-var, space-before-function-paren, no-lonely-if, no-continue, brace-style, max-len, quotes */
-/* global Vue */
 /* global DiscussionMixins */
 /* global CommentsStore */
 const Vue = require('vue');
@@ -13,12 +12,10 @@ const Vue = require('vue');
     data: function () {
       return {
         discussions: CommentsStore.state,
+        discussion: {},
       };
     },
     computed: {
-      discussion: function () {
-        return this.discussions[this.discussionId];
-      },
       allResolved: function () {
         return this.unresolvedDiscussionCount === 0;
       },
@@ -187,7 +184,10 @@ const Vue = require('vue');
           offset: -($('.navbar-gitlab').outerHeight() + $('.layout-nav').outerHeight())
         });
       }
-    }
+    },
+    created() {
+      this.discussion = this.discussions[this.discussionId];
+    },
   });
 
   Vue.component('jump-to-discussion', JumpToDiscussion);

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

 /* eslint-disable comma-dangle, object-shorthand, func-names, quote-props, no-else-return, camelcase, no-new, max-len */
-/* global Vue */
 /* global CommentsStore */
 /* global ResolveService */
 /* global Flash */
@@ -11,15 +10,14 @@ const Vue = require('vue');
       noteId: Number,
       discussionId: String,
       resolved: Boolean,
-      projectPath: String,
       canResolve: Boolean,
       resolvedBy: String
     },
     data: function () {
       return {
-        note: {},
         discussions: CommentsStore.state,
-        loading: false
+        loading: false,
+        note: {},
       };
     },
     watch: {
@@ -68,10 +66,10 @@ const Vue = require('vue');
 
         if (this.isResolved) {
           promise = ResolveService
-            .unresolve(this.projectPath, this.noteId);
+            .unresolve(this.noteId);
         } else {
           promise = ResolveService
-            .resolve(this.projectPath, this.noteId);
+            .resolve(this.noteId);
         }
 
         promise.then((response) => {

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

 /* eslint-disable comma-dangle, object-shorthand, func-names, no-param-reassign */
-/* global Vue */
 /* global DiscussionMixins */
 /* global CommentsStore */
 const Vue = require('vue');

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

 /* eslint-disable object-shorthand, func-names, space-before-function-paren, comma-dangle, no-else-return, quotes, max-len */
-/* global Vue */
 /* global CommentsStore */
 /* global ResolveService */
 const Vue = require('vue');
@@ -9,12 +8,10 @@ const Vue = require('vue');
     props: {
       discussionId: String,
       mergeRequestId: Number,
-      projectPath: String,
       canResolve: Boolean,
     },
     data: function() {
       return {
-        discussions: CommentsStore.state,
         discussion: {},
       };
     },
@@ -50,13 +47,13 @@ const Vue = require('vue');
     },
     methods: {
       resolve: function () {
-        ResolveService.toggleResolveForDiscussion(this.projectPath, this.mergeRequestId, this.discussionId);
+        ResolveService.toggleResolveForDiscussion(this.mergeRequestId, this.discussionId);
       }
     },
     created: function () {
       CommentsStore.createDiscussion(this.discussionId, this.canResolve);
 
-      this.discussion = this.discussions[this.discussionId];
+      this.discussion = CommentsStore.state[this.discussionId];
     }
   });
 

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

@@ -18,7 +18,7 @@ $(() => {
   window.gl = window.gl || {};
   window.gl.diffNoteApps = {};
 
-  window.ResolveService = new ResolveServiceClass(projectPath);
+  window.ResolveService = new gl.DiffNotesResolveServiceClass(projectPath);
 
   gl.diffNotesCompileComponents = () => {
     const $components = $(COMPONENT_SELECTOR).filter(function () {

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

 /* eslint-disable class-methods-use-this, one-var, camelcase, no-new, comma-dangle, no-param-reassign, max-len */
-/* global Vue */
 /* global Flash */
 /* global CommentsStore */
 
+const Vue = window.Vue = require('vue');
 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`);
-    }
+  window.gl = window.gl || {};
 
-    setCSRF() {
-      Vue.http.headers.common['X-CSRF-Token'] = $.rails.csrfToken();
-    }
+  class ResolveServiceClass {
+    constructor(root) {
+      this.noteResource = Vue.resource(`${root}/notes{/noteId}/resolve`);
+      this.discussionResource = Vue.resource(`${root}/merge_requests{/mergeRequestId}/discussions{/discussionId}/resolve`);
 
-    prepareRequest() {
-      this.setCSRF();
+      Vue.http.interceptors.push((request, next) => {
+        if ($.rails) {
+          request.headers['X-CSRF-Token'] = $.rails.csrfToken();
+        }
+        next();
+      });
     }
 
-    resolve(projectPath, noteId) {
-      this.prepareRequest(projectPath);
-
+    resolve(noteId) {
       return this.noteResource.save({ noteId }, {});
     }
 
-    unresolve(projectPath, noteId) {
-      this.prepareRequest(projectPath);
-
+    unresolve(noteId) {
       return this.noteResource.delete({ noteId }, {});
     }
 
-    toggleResolveForDiscussion(projectPath, mergeRequestId, discussionId) {
+    toggleResolveForDiscussion(mergeRequestId, discussionId) {
       const discussion = CommentsStore.state[discussionId];
       const isResolved = discussion.isResolved();
       let promise;
 
       if (isResolved) {
-        promise = this.unResolveAll(projectPath, mergeRequestId, discussionId);
+        promise = this.unResolveAll(mergeRequestId, discussionId);
       } else {
-        promise = this.resolveAll(projectPath, mergeRequestId, discussionId);
+        promise = this.resolveAll(mergeRequestId, discussionId);
       }
 
       promise.then((response) => {
@@ -63,11 +60,9 @@ window.Vue.use(require('vue-resource'));
       });
     }
 
-    resolveAll(projectPath, mergeRequestId, discussionId) {
+    resolveAll(mergeRequestId, discussionId) {
       const discussion = CommentsStore.state[discussionId];
 
-      this.prepareRequest(projectPath);
-
       discussion.loading = true;
 
       return this.discussionResource.save({
@@ -76,11 +71,9 @@ window.Vue.use(require('vue-resource'));
       }, {});
     }
 
-    unResolveAll(projectPath, mergeRequestId, discussionId) {
+    unResolveAll(mergeRequestId, discussionId) {
       const discussion = CommentsStore.state[discussionId];
 
-      this.prepareRequest(projectPath);
-
       discussion.loading = true;
 
       return this.discussionResource.delete({
@@ -88,5 +81,7 @@ window.Vue.use(require('vue-resource'));
         discussionId
       }, {});
     }
-  };
+  }
+
+  gl.DiffNotesResolveServiceClass = ResolveServiceClass;
 })();

app/assets/javascripts/notes.js

@@ -455,7 +455,7 @@ require('vendor/task_list');
         var mergeRequestId = $form.data('noteable-iid');
 
         if (ResolveService != null) {
-          ResolveService.toggleResolveForDiscussion(projectPath, mergeRequestId, discussionId);
+          ResolveService.toggleResolveForDiscussion(mergeRequestId, discussionId);
         }
       }
 

app/views/discussions/_resolve_all.html.haml

 - if discussion.for_merge_request?
-  %resolve-discussion-btn{ ":project-path" => "'#{project_path(discussion.project)}'",
-      ":discussion-id" => "'#{discussion.id}'",
+  %resolve-discussion-btn{ ":discussion-id" => "'#{discussion.id}'",
       ":merge-request-id" => discussion.noteable.iid,
       ":can-resolve" => discussion.can_resolve?(current_user),
       "inline-template" => true }

app/views/projects/notes/_note.html.haml

@@ -30,8 +30,7 @@
 
             - if note.resolvable?
               - can_resolve = can?(current_user, :resolve_note, note)
-              %resolve-btn{ "project-path" => "#{project_path(note.project)}",
-                  "discussion-id" => "#{note.discussion_id}",
+              %resolve-btn{ "discussion-id" => "#{note.discussion_id}",
                   ":note-id" => note.id,
                   ":resolved" => note.resolved?,
                   ":can-resolve" => can_resolve,