Fixed up resolve discussions

8 files changed, 43 insertions, 27 deletions

diff --git a/app/assets/javascripts/diff_notes/components/comment_resolve_btn.js.es6 b/app/assets/javascripts/diff_notes/components/comment_resolve_btn.js.es6
index bd5d8f24593..52e2846d279 100644
--- a/app/assets/javascripts/diff_notes/components/comment_resolve_btn.js.es6
+++ b/app/assets/javascripts/diff_notes/components/comment_resolve_btn.js.es6
@@ -1,9 +1,13 @@
 /* eslint-disable */
-((w) => {
-  w.CommentAndResolveBtn = Vue.extend({
+(() => {
+  const CommentAndResolveBtn = Vue.extend({
     props: {
       discussionId: String,
-      textareaIsEmpty: Boolean
+    },
+    data() {
+      return {
+        textareaIsEmpty: true
+      }
     },
     computed: {
       discussion: function () {
@@ -47,4 +51,6 @@
       $(`#new-discussion-note-form-${this.discussionId} .note-textarea`).off('input.comment-and-resolve-btn');
     }
   });
+
+  Vue.component('comment-and-resolve-btn', CommentAndResolveBtn);
 })(window);
diff --git a/app/assets/javascripts/diff_notes/components/resolve_btn.js.es6 b/app/assets/javascripts/diff_notes/components/resolve_btn.js.es6
index 3db0b4319b1..27af9fc96ad 100644
--- a/app/assets/javascripts/diff_notes/components/resolve_btn.js.es6
+++ b/app/assets/javascripts/diff_notes/components/resolve_btn.js.es6
@@ -1,6 +1,6 @@
 /* eslint-disable */
-((w) => {
-  w.ResolveBtn = Vue.extend({
+(() => {
+  const ResolveBtn = Vue.extend({
     props: {
       noteId: Number,
       discussionId: String,
@@ -101,4 +101,6 @@
       CommentsStore.create(this.discussionId, this.noteId, this.canResolve, this.resolved, this.resolvedBy);
     }
   });
-})(window);
+
+  Vue.component('resolve-btn', ResolveBtn);
+})();
diff --git a/app/assets/javascripts/diff_notes/components/resolve_count.js.es6 b/app/assets/javascripts/diff_notes/components/resolve_count.js.es6
index 24a99e23132..b78d63314da 100644
--- a/app/assets/javascripts/diff_notes/components/resolve_count.js.es6
+++ b/app/assets/javascripts/diff_notes/components/resolve_count.js.es6
@@ -13,6 +13,9 @@
     computed: {
       allResolved: function () {
         return this.resolvedDiscussionCount === this.discussionCount;
+      },
+      resolvedCountText() {
+        return this.discussionCount === 0 ? 'discussion' : 'discussions';
       }
     }
   });
diff --git a/app/assets/javascripts/diff_notes/components/resolve_discussion_btn.js.es6 b/app/assets/javascripts/diff_notes/components/resolve_discussion_btn.js.es6
index 060034f049b..b945a09fcbe 100644
--- a/app/assets/javascripts/diff_notes/components/resolve_discussion_btn.js.es6
+++ b/app/assets/javascripts/diff_notes/components/resolve_discussion_btn.js.es6
@@ -1,6 +1,6 @@
 /* eslint-disable */
-((w) => {
-  w.ResolveDiscussionBtn = Vue.extend({
+(() => {
+  const ResolveDiscussionBtn = Vue.extend({
     props: {
       discussionId: String,
       mergeRequestId: Number,
@@ -54,4 +54,6 @@
       CommentsStore.createDiscussion(this.discussionId, this.canResolve);
     }
   });
-})(window);
+
+  Vue.component('resolve-discussion-btn', ResolveDiscussionBtn);
+})();
diff --git a/app/assets/javascripts/diff_notes/diff_notes_bundle.js.es6 b/app/assets/javascripts/diff_notes/diff_notes_bundle.js.es6
index 6149bfd052a..cc2d8744fd7 100644
--- a/app/assets/javascripts/diff_notes/diff_notes_bundle.js.es6
+++ b/app/assets/javascripts/diff_notes/diff_notes_bundle.js.es6
@@ -10,17 +10,18 @@
 $(() => {
   window.DiffNotesApp = new Vue({
     el: '#diff-notes-app',
-    components: {
-      'resolve-btn': ResolveBtn,
-      'resolve-discussion-btn': ResolveDiscussionBtn,
-      'comment-and-resolve-btn': CommentAndResolveBtn
-    },
     methods: {
       compileComponents: function () {
-        const $components = $('resolve-btn, resolve-discussion-btn, jump-to-discussion');
+        const $components = $('resolve-btn, resolve-discussion-btn, jump-to-discussion, comment-and-resolve-btn');
+
         if ($components.length) {
           $components.each(function () {
-            DiffNotesApp.$compile($(this).get(0));
+            const $this = $(this);
+            const tmp = Vue.extend({
+              template: $this.get(0).outerHTML,
+              parent: DiffNotesApp,
+            });
+            $this.replaceWith(new tmp().$mount().$el);
           });
         }
       }
diff --git a/app/assets/javascripts/notes.js b/app/assets/javascripts/notes.js
index 4976eef2896..aeaf90abb77 100644
--- a/app/assets/javascripts/notes.js
+++ b/app/assets/javascripts/notes.js
@@ -647,7 +647,8 @@
         var $commentBtn = form.find('comment-and-resolve-btn');
         $commentBtn
           .attr(':discussion-id', "'" + dataHolder.data('discussionId') + "'");
-        DiffNotesApp.$compile($commentBtn.get(0));
+
+        DiffNotesApp.compileComponents();
       }
 
       form.find(".js-note-text").focus();
diff --git a/app/views/projects/merge_requests/_show.html.haml b/app/views/projects/merge_requests/_show.html.haml
index f57abe73977..a497f418c7c 100644
--- a/app/views/projects/merge_requests/_show.html.haml
+++ b/app/views/projects/merge_requests/_show.html.haml
@@ -74,14 +74,15 @@
                 %span.badge= @merge_request.diff_size
             %li#resolve-count-app.line-resolve-all-container.pull-right.prepend-top-10.hidden-xs{ "v-cloak" => true }
               %resolve-count{ "inline-template" => true, ":logged-out" => "#{current_user.nil?}"  }
-                .line-resolve-all{ "v-show" => "discussionCount > 0",
-                  ":class" => "{ 'has-next-btn': !loggedOut && resolvedDiscussionCount !== discussionCount }" }
-                  %span.line-resolve-btn.is-disabled{ type: "button",
-                      ":class" => "{ 'is-active': resolvedDiscussionCount === discussionCount }" }
-                    = render "shared/icons/icon_status_success.svg"
-                  %span.line-resolve-text
-                    {{ resolvedDiscussionCount }}/{{ discussionCount }} {{ discussionCount | pluralize 'discussion' }} resolved
-                = render "discussions/jump_to_next"
+                %div
+                  .line-resolve-all{ "v-show" => "discussionCount > 0",
+                    ":class" => "{ 'has-next-btn': !loggedOut && resolvedDiscussionCount !== discussionCount }" }
+                    %span.line-resolve-btn.is-disabled{ type: "button",
+                        ":class" => "{ 'is-active': resolvedDiscussionCount === discussionCount }" }
+                      = render "shared/icons/icon_status_success.svg"
+                    %span.line-resolve-text
+                      {{ resolvedDiscussionCount }}/{{ discussionCount }} {{ resolvedCountText }} resolved
+                  = render "discussions/jump_to_next"
 
       .tab-content#diff-notes-app
         #notes.notes.tab-pane.voting_notes
diff --git a/app/views/projects/notes/_note.html.haml b/app/views/projects/notes/_note.html.haml
index ab719e38904..afff15228c1 100644
--- a/app/views/projects/notes/_note.html.haml
+++ b/app/views/projects/notes/_note.html.haml
@@ -32,7 +32,7 @@
                   "resolved-by" => "#{note.resolved_by.try(:name)}",
                   "v-show" => "#{can_resolve || note.resolved?}",
                   "inline-template" => true,
-                  "v-ref:note_#{note.id}" => true }
+                  "ref" => "note_#{note.id}" }
 
                 .note-action-button
                   = icon("spin spinner", "v-show" => "loading")
@@ -43,7 +43,7 @@
                       "@click" => "resolve",
                       ":title" => "buttonText",
                       "v-show" => "!loading",
-                      "v-el:button" => true }
+                      ":ref" => "'button'" }
 
                     = render "shared/icons/icon_status_success.svg"