Fix diff comment button not showing after deleting a comment

3 files changed, 14 insertions, 6 deletions

diff --git a/app/assets/javascripts/diff_notes/components/diff_note_avatars.js b/app/assets/javascripts/diff_notes/components/diff_note_avatars.js
index c37249c060a..06ce84d7599 100644
--- a/app/assets/javascripts/diff_notes/components/diff_note_avatars.js
+++ b/app/assets/javascripts/diff_notes/components/diff_note_avatars.js
@@ -21,11 +21,13 @@ const DiffNoteAvatars = Vue.extend({
   },
   template: `
     <div class="diff-comment-avatar-holders"
+      :class="discussionClassName"
       v-show="notesCount !== 0">
       <div v-if="!isVisible">
         <!-- FIXME: Pass an alt attribute here for accessibility -->
         <user-avatar-image
           v-for="note in notesSubset"
+          :key="note.id"
           class="diff-comment-avatar js-diff-comment-avatar"
           @click.native="clickedAvatar($event)"
           :img-src="note.authorAvatar"
@@ -68,7 +70,8 @@ const DiffNoteAvatars = Vue.extend({
       });
     });
   },
-  destroyed() {
+  beforeDestroy() {
+    this.addNoCommentClass();
     $(document).off('toggle.comments');
   },
   watch: {
@@ -85,6 +88,9 @@ const DiffNoteAvatars = Vue.extend({
     },
   },
   computed: {
+    discussionClassName() {
+      return `js-diff-avatars-${this.discussionId}`;
+    },
     notesSubset() {
       let notes = [];
 
diff --git a/app/assets/javascripts/diff_notes/diff_notes_bundle.js b/app/assets/javascripts/diff_notes/diff_notes_bundle.js
index 5decfc1dc01..0863c3406bd 100644
--- a/app/assets/javascripts/diff_notes/diff_notes_bundle.js
+++ b/app/assets/javascripts/diff_notes/diff_notes_bundle.js
@@ -32,6 +32,10 @@ $(() => {
       const tmpApp = new tmp().$mount();
 
       $(this).replaceWith(tmpApp.$el);
+      $(tmpApp.$el).one('remove.vue', () => {
+        tmpApp.$destroy();
+        tmpApp.$el.remove();
+      });
     });
 
     const $components = $(COMPONENT_SELECTOR).filter(function () {
diff --git a/app/assets/javascripts/notes.js b/app/assets/javascripts/notes.js
index b38a6abc8d1..a09270d6d24 100644
--- a/app/assets/javascripts/notes.js
+++ b/app/assets/javascripts/notes.js
@@ -464,7 +464,6 @@ export default class Notes {
   }
 
   renderDiscussionAvatar(diffAvatarContainer, noteEntity) {
-    var commentButton = diffAvatarContainer.find('.js-add-diff-note-button');
     var avatarHolder = diffAvatarContainer.find('.diff-comment-avatar-holders');
 
     if (!avatarHolder.length) {
@@ -475,10 +474,6 @@ export default class Notes {
 
       gl.diffNotesCompileComponents();
     }
-
-    if (commentButton.length) {
-      commentButton.remove();
-    }
   }
 
   /**
@@ -767,6 +762,7 @@ export default class Notes {
         var $note, $notes;
         $note = $(el);
         $notes = $note.closest('.discussion-notes');
+        const discussionId = $('.notes', $notes).data('discussion-id');
 
         if (typeof gl.diffNotesCompileComponents !== 'undefined') {
           if (gl.diffNoteApps[noteElId]) {
@@ -783,6 +779,8 @@ export default class Notes {
           // "Discussions" tab
           $notes.closest('.timeline-entry').remove();
 
+          $(`.js-diff-avatars-${discussionId}`).trigger('remove.vue');
+
           // The notes tr can contain multiple lists of notes, like on the parallel diff
           if (notesTr.find('.discussion-notes').length > 1) {
             $notes.remove();