Comment & resolve button text is done through VueJS

4 files changed, 48 insertions, 4 deletions

diff --git a/app/assets/javascripts/diff_notes/components/resolve_comment_btn.js.es6 b/app/assets/javascripts/diff_notes/components/resolve_comment_btn.js.es6
new file mode 100644
index 00000000000..1ffe4cf99d6
--- /dev/null
+++ b/app/assets/javascripts/diff_notes/components/resolve_comment_btn.js.es6
@@ -0,0 +1,31 @@
+((w) => {
+  w.ResolveCommentBtn = Vue.extend({
+    props: {
+      discussionId: String
+    },
+    computed: {
+      isDiscussionResolved: function () {
+        const notes = CommentsStore.notesForDiscussion(this.discussionId),
+              discussion = CommentsStore.state[this.discussionId];
+        let allResolved = true;
+
+        for (const noteId of notes) {
+          const note = discussion[noteId];
+
+          if (!note.resolved) {
+            allResolved = false;
+          }
+        }
+
+        return allResolved;
+      },
+      buttonText: function () {
+        if (this.isDiscussionResolved) {
+          return "Comment & unresolve discussion";
+        } else {
+          return "Comment & resolve discussion";
+        }
+      }
+    }
+  });
+}(window));
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 dc9256b2d13..7e099fbee8d 100644
--- a/app/assets/javascripts/diff_notes/components/resolve_count.js.es6
+++ b/app/assets/javascripts/diff_notes/components/resolve_count.js.es6
@@ -15,7 +15,7 @@
           let resolved = true;
 
           for (const noteId in comments) {
-            const commentResolved = comments[noteId];
+            const commentResolved = comments[noteId].resolved;
 
             if (!commentResolved) {
               resolved = false;
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 0605ad0e750..b856c718034 100644
--- a/app/assets/javascripts/diff_notes/diff_notes_bundle.js.es6
+++ b/app/assets/javascripts/diff_notes/diff_notes_bundle.js.es6
@@ -11,6 +11,7 @@ $(() => {
     components: {
       'resolve-btn': ResolveBtn,
       'resolve-all-btn': ResolveAllBtn,
+      'resolve-comment-btn': ResolveCommentBtn,
     }
   });
 
diff --git a/app/assets/javascripts/notes.js b/app/assets/javascripts/notes.js
index cf951aa3899..0b202f04163 100644
--- a/app/assets/javascripts/notes.js
+++ b/app/assets/javascripts/notes.js
@@ -352,7 +352,7 @@
       form.find("#note_line_code").remove();
       form.find("#note_position").remove();
       form.find("#note_type").remove();
-      form.find('.js-comment-resolve-button').remove();
+      form.find('.js-comment-resolve-button').closest('resolve-comment-btn').remove();
       return this.parentTimeline = form.parents('.timeline');
     };
 
@@ -397,8 +397,6 @@
 
     Notes.prototype.addDiscussionNote = function(xhr, note, status) {
       var $form = $(xhr.target);
-      this.renderDiscussionNote(note);
-      this.removeDiscussionNoteForm($form);
 
       if ($form.attr('data-resolve-all') != null) {
         var namespacePath = $form.attr('data-namespace-path'),
@@ -411,6 +409,9 @@
           ResolveService.toggleResolveForDiscussion(namespace, mergeRequestId, discussionId);
         }
       }
+
+      this.renderDiscussionNote(note);
+      this.removeDiscussionNoteForm($form);
     };
 
 
@@ -588,6 +589,7 @@
      */
 
     Notes.prototype.setupDiscussionNoteForm = function(dataHolder, form) {
+      var canResolve = dataHolder.attr('data-resolvable');
       form.attr('id', "new-discussion-note-form-" + (dataHolder.data("discussionId")));
       form.attr("data-line-code", dataHolder.data("lineCode"));
       form.find("#note_type").val(dataHolder.data("noteType"));
@@ -598,6 +600,16 @@
       form.find("#note_noteable_type").val(dataHolder.data("noteableType"));
       form.find("#note_noteable_id").val(dataHolder.data("noteableId"));
       form.find('.js-note-discard').show().removeClass('js-note-discard').addClass('js-close-discussion-note-form').text(form.find('.js-close-discussion-note-form').data('cancel-text'));
+
+      if (canResolve === 'false') {
+        form.find('resolve-comment-btn').remove();
+      } else if (DiffNotesApp) {
+        var $commentBtn = form.find('resolve-comment-btn');
+        $commentBtn
+          .attr(':discussion-id', `'${dataHolder.data("discussionId")}'`);
+        DiffNotesApp.$compile($commentBtn.get(0));
+      }
+
       this.setupNoteForm(form);
       form.find(".js-note-text").focus();
       form