Prettify notes.

1 files changed, 460 insertions, 204 deletions

diff --git a/app/assets/javascripts/notes.js b/app/assets/javascripts/notes.js
index 6d1b2f452c0..659ae575219 100644
--- a/app/assets/javascripts/notes.js
+++ b/app/assets/javascripts/notes.js
@@ -28,7 +28,13 @@ import GLForm from './gl_form';
 import loadAwardsHandler from './awards_handler';
 import Autosave from './autosave';
 import TaskList from './task_list';
-import { isInViewport, getPagePath, scrollToElement, isMetaKey, hasVueMRDiscussionsCookie } from './lib/utils/common_utils';
+import {
+  isInViewport,
+  getPagePath,
+  scrollToElement,
+  isMetaKey,
+  hasVueMRDiscussionsCookie,
+} from './lib/utils/common_utils';
 import imageDiffHelper from './image_diff/helpers/index';
 import { localTimeAgo } from './lib/utils/datetime_utility';
 
@@ -42,9 +48,21 @@ const MAX_VISIBLE_COMMIT_LIST_COUNT = 3;
 const REGEX_QUICK_ACTIONS = /^\/\w+.*$/gm;
 
 export default class Notes {
-  static initialize(notes_url, note_ids, last_fetched_at, view, enableGFM = true) {
+  static initialize(
+    notes_url,
+    note_ids,
+    last_fetched_at,
+    view,
+    enableGFM = true,
+  ) {
     if (!this.instance) {
-      this.instance = new Notes(notes_url, note_ids, last_fetched_at, view, enableGFM);
+      this.instance = new Notes(
+        notes_url,
+        note_ids,
+        last_fetched_at,
+        view,
+        enableGFM,
+      );
     }
   }
 
@@ -82,7 +100,8 @@ export default class Notes {
     this.updatedNotesTrackingMap = {};
     this.last_fetched_at = last_fetched_at;
     this.noteable_url = document.URL;
-    this.notesCountBadge || (this.notesCountBadge = $('.issuable-details').find('.notes-tab .badge'));
+    this.notesCountBadge ||
+      (this.notesCountBadge = $('.issuable-details').find('.notes-tab .badge'));
     this.basePollingInterval = 15000;
     this.maxPollingSteps = 4;
 
@@ -93,15 +112,17 @@ export default class Notes {
     this.taskList = new TaskList({
       dataType: 'note',
       fieldName: 'note',
-      selector: '.notes'
+      selector: '.notes',
     });
     this.collapseLongCommitList();
     this.setViewType(view);
 
     // We are in the Merge Requests page so we need another edit form for Changes tab
     if (getPagePath(1) === 'merge_requests') {
-      $('.note-edit-form').clone()
-        .addClass('mr-note-edit-form').insertAfter('.note-edit-form');
+      $('.note-edit-form')
+        .clone()
+        .addClass('mr-note-edit-form')
+        .insertAfter('.note-edit-form');
     }
 
     const hash = getLocationHash();
@@ -117,7 +138,9 @@ export default class Notes {
   }
 
   addBinding() {
-    this.$wrapperEl = hasVueMRDiscussionsCookie() ? $(document).find('.diffs') : $(document);
+    this.$wrapperEl = hasVueMRDiscussionsCookie()
+      ? $(document).find('.diffs')
+      : $(document);
 
     // Edit note link
     this.$wrapperEl.on('click', '.js-note-edit', this.showEditForm.bind(this));
@@ -125,27 +148,55 @@ export default class Notes {
     // Reopen and close actions for Issue/MR combined with note form submit
     this.$wrapperEl.on('click', '.js-comment-submit-button', this.postComment);
     this.$wrapperEl.on('click', '.js-comment-save-button', this.updateComment);
-    this.$wrapperEl.on('keyup input', '.js-note-text', this.updateTargetButtons);
+    this.$wrapperEl.on(
+      'keyup input',
+      '.js-note-text',
+      this.updateTargetButtons,
+    );
     // resolve a discussion
     this.$wrapperEl.on('click', '.js-comment-resolve-button', this.postComment);
     // remove a note (in general)
     this.$wrapperEl.on('click', '.js-note-delete', this.removeNote);
     // delete note attachment
-    this.$wrapperEl.on('click', '.js-note-attachment-delete', this.removeAttachment);
+    this.$wrapperEl.on(
+      'click',
+      '.js-note-attachment-delete',
+      this.removeAttachment,
+    );
     // reset main target form when clicking discard
     this.$wrapperEl.on('click', '.js-note-discard', this.resetMainTargetForm);
     // update the file name when an attachment is selected
-    this.$wrapperEl.on('change', '.js-note-attachment-input', this.updateFormAttachment);
+    this.$wrapperEl.on(
+      'change',
+      '.js-note-attachment-input',
+      this.updateFormAttachment,
+    );
     // reply to diff/discussion notes
-    this.$wrapperEl.on('click', '.js-discussion-reply-button', this.onReplyToDiscussionNote);
+    this.$wrapperEl.on(
+      'click',
+      '.js-discussion-reply-button',
+      this.onReplyToDiscussionNote,
+    );
     // add diff note
     this.$wrapperEl.on('click', '.js-add-diff-note-button', this.onAddDiffNote);
     // add diff note for images
-    this.$wrapperEl.on('click', '.js-add-image-diff-note-button', this.onAddImageDiffNote);
+    this.$wrapperEl.on(
+      'click',
+      '.js-add-image-diff-note-button',
+      this.onAddImageDiffNote,
+    );
     // hide diff note form
-    this.$wrapperEl.on('click', '.js-close-discussion-note-form', this.cancelDiscussionForm);
+    this.$wrapperEl.on(
+      'click',
+      '.js-close-discussion-note-form',
+      this.cancelDiscussionForm,
+    );
     // toggle commit list
-    this.$wrapperEl.on('click', '.system-note-commit-list-toggler', this.toggleCommitList);
+    this.$wrapperEl.on(
+      'click',
+      '.system-note-commit-list-toggler',
+      this.toggleCommitList,
+    );
 
     this.$wrapperEl.on('click', '.js-toggle-lazy-diff', this.loadLazyDiff);
     // fetch notes when tab becomes visible
@@ -154,9 +205,21 @@ export default class Notes {
     this.$wrapperEl.on('issuable:change', this.refresh);
     // ajax:events that happen on Form when actions like Reopen, Close are performed on Issues and MRs.
     this.$wrapperEl.on('ajax:success', '.js-main-target-form', this.addNote);
-    this.$wrapperEl.on('ajax:success', '.js-discussion-note-form', this.addDiscussionNote);
-    this.$wrapperEl.on('ajax:success', '.js-main-target-form', this.resetMainTargetForm);
-    this.$wrapperEl.on('ajax:complete', '.js-main-target-form', this.reenableTargetFormSubmitButton);
+    this.$wrapperEl.on(
+      'ajax:success',
+      '.js-discussion-note-form',
+      this.addDiscussionNote,
+    );
+    this.$wrapperEl.on(
+      'ajax:success',
+      '.js-main-target-form',
+      this.resetMainTargetForm,
+    );
+    this.$wrapperEl.on(
+      'ajax:complete',
+      '.js-main-target-form',
+      this.reenableTargetFormSubmitButton,
+    );
     // when a key is clicked on the notes
     this.$wrapperEl.on('keydown', '.js-note-text', this.keydownNoteText);
     // When the URL fragment/hash has changed, `#note_xxx`
@@ -195,10 +258,16 @@ export default class Notes {
   }
 
   static initCommentTypeToggle(form) {
-    const dropdownTrigger = form.querySelector('.js-comment-type-dropdown .dropdown-toggle');
-    const dropdownList = form.querySelector('.js-comment-type-dropdown .dropdown-menu');
+    const dropdownTrigger = form.querySelector(
+      '.js-comment-type-dropdown .dropdown-toggle',
+    );
+    const dropdownList = form.querySelector(
+      '.js-comment-type-dropdown .dropdown-menu',
+    );
     const noteTypeInput = form.querySelector('#note_type');
-    const submitButton = form.querySelector('.js-comment-type-dropdown .js-comment-submit-button');
+    const submitButton = form.querySelector(
+      '.js-comment-type-dropdown .js-comment-submit-button',
+    );
     const closeButton = form.querySelector('.js-note-target-close');
     const reopenButton = form.querySelector('.js-note-target-reopen');
 
@@ -215,7 +284,13 @@ export default class Notes {
   }
 
   keydownNoteText(e) {
-    var $textarea, discussionNoteForm, editNote, myLastNote, myLastNoteEditBtn, newText, originalText;
+    var $textarea,
+      discussionNoteForm,
+      editNote,
+      myLastNote,
+      myLastNoteEditBtn,
+      newText,
+      originalText;
     if (isMetaKey(e)) {
       return;
     }
@@ -227,7 +302,12 @@ export default class Notes {
         if ($textarea.val() !== '') {
           return;
         }
-        myLastNote = $(`li.note[data-author-id='${gon.current_user_id}'][data-editable]:last`, $textarea.closest('.note, .notes_holder, #notes'));
+        myLastNote = $(
+          `li.note[data-author-id='${
+            gon.current_user_id
+          }'][data-editable]:last`,
+          $textarea.closest('.note, .notes_holder, #notes'),
+        );
         if (myLastNote.length) {
           myLastNoteEditBtn = myLastNote.find('.js-note-edit');
           return myLastNoteEditBtn.trigger('click', [true, myLastNote]);
@@ -238,7 +318,9 @@ export default class Notes {
         discussionNoteForm = $textarea.closest('.js-discussion-note-form');
         if (discussionNoteForm.length) {
           if ($textarea.val() !== '') {
-            if (!confirm('Are you sure you want to cancel creating this comment?')) {
+            if (
+              !confirm('Are you sure you want to cancel creating this comment?')
+            ) {
               return;
             }
           }
@@ -250,7 +332,9 @@ export default class Notes {
           originalText = $textarea.closest('form').data('originalNote');
           newText = $textarea.val();
           if (originalText !== newText) {
-            if (!confirm('Are you sure you want to cancel editing this comment?')) {
+            if (
+              !confirm('Are you sure you want to cancel editing this comment?')
+            ) {
               return;
             }
           }
@@ -263,11 +347,14 @@ export default class Notes {
     if (Notes.interval) {
       clearInterval(Notes.interval);
     }
-    return Notes.interval = setInterval((function(_this) {
-      return function() {
-        return _this.refresh();
-      };
-    })(this), this.pollingInterval);
+    return (Notes.interval = setInterval(
+      (function(_this) {
+        return function() {
+          return _this.refresh();
+        };
+      })(this),
+      this.pollingInterval,
+    ));
   }
 
   refresh() {
@@ -283,20 +370,23 @@ export default class Notes {
 
     this.refreshing = true;
 
-    axios.get(`${this.notes_url}?html=true`, {
-      headers: {
-        'X-Last-Fetched-At': this.last_fetched_at,
-      },
-    }).then(({ data }) => {
-      const notes = data.notes;
-      this.last_fetched_at = data.last_fetched_at;
-      this.setPollingInterval(data.notes.length);
-      $.each(notes, (i, note) => this.renderNote(note));
-
-      this.refreshing = false;
-    }).catch(() => {
-      this.refreshing = false;
-    });
+    axios
+      .get(`${this.notes_url}?html=true`, {
+        headers: {
+          'X-Last-Fetched-At': this.last_fetched_at,
+        },
+      })
+      .then(({ data }) => {
+        const notes = data.notes;
+        this.last_fetched_at = data.last_fetched_at;
+        this.setPollingInterval(data.notes.length);
+        $.each(notes, (i, note) => this.renderNote(note));
+
+        this.refreshing = false;
+      })
+      .catch(() => {
+        this.refreshing = false;
+      });
   }
 
   /**
@@ -312,7 +402,8 @@ export default class Notes {
     if (shouldReset == null) {
       shouldReset = true;
     }
-    nthInterval = this.basePollingInterval * Math.pow(2, this.maxPollingSteps - 1);
+    nthInterval =
+      this.basePollingInterval * Math.pow(2, this.maxPollingSteps - 1);
     if (shouldReset) {
       this.pollingInterval = this.basePollingInterval;
     } else if (this.pollingInterval < nthInterval) {
@@ -331,12 +422,17 @@ export default class Notes {
       if ('emoji_award' in noteEntity.commands_changes) {
         votesBlock = $('.js-awards-block').eq(0);
 
-        loadAwardsHandler().then((awardsHandler) => {
-          awardsHandler.addAwardToEmojiBar(votesBlock, noteEntity.commands_changes.emoji_award);
-          awardsHandler.scrollToAwards();
-        }).catch(() => {
-          // ignore
-        });
+        loadAwardsHandler()
+          .then(awardsHandler => {
+            awardsHandler.addAwardToEmojiBar(
+              votesBlock,
+              noteEntity.commands_changes.emoji_award,
+            );
+            awardsHandler.scrollToAwards();
+          })
+          .catch(() => {
+            // ignore
+          });
       }
     }
   }
@@ -381,11 +477,17 @@ export default class Notes {
 
     if (!noteEntity.valid) {
       if (noteEntity.errors && noteEntity.errors.commands_only) {
-        if (noteEntity.commands_changes &&
-            Object.keys(noteEntity.commands_changes).length > 0) {
+        if (
+          noteEntity.commands_changes &&
+          Object.keys(noteEntity.commands_changes).length > 0
+        ) {
           $notesList.find('.system-note.being-posted').remove();
         }
-        this.addFlash(noteEntity.errors.commands_only, 'notice', this.parentTimeline.get(0));
+        this.addFlash(
+          noteEntity.errors.commands_only,
+          'notice',
+          this.parentTimeline.get(0),
+        );
         this.refresh();
       }
       return;
@@ -407,28 +509,30 @@ export default class Notes {
       this.setupNewNote($newNote);
       this.refresh();
       return this.updateNotesCount(1);
-    }
-    // The server can send the same update multiple times so we need to make sure to only update once per actual update.
-    else if (Notes.isUpdatedNote(noteEntity, $note)) {
+    } else if (Notes.isUpdatedNote(noteEntity, $note)) {
+      // The server can send the same update multiple times so we need to make sure to only update once per actual update.
       const isEditing = $note.hasClass('is-editing');
       const initialContent = normalizeNewlines(
-        $note.find('.original-note-content').text().trim()
+        $note
+          .find('.original-note-content')
+          .text()
+          .trim(),
       );
       const $textarea = $note.find('.js-note-text');
       const currentContent = $textarea.val();
       // There can be CRLF vs LF mismatches if we don't sanitize and compare the same way
       const sanitizedNoteNote = normalizeNewlines(noteEntity.note);
-      const isTextareaUntouched = currentContent === initialContent || currentContent === sanitizedNoteNote;
+      const isTextareaUntouched =
+        currentContent === initialContent ||
+        currentContent === sanitizedNoteNote;
 
       if (isEditing && isTextareaUntouched) {
         $textarea.val(noteEntity.note);
         this.updatedNotesTrackingMap[noteEntity.id] = noteEntity;
-      }
-      else if (isEditing && !isTextareaUntouched) {
+      } else if (isEditing && !isTextareaUntouched) {
         this.putConflictEditWarningInPlace(noteEntity, $note);
         this.updatedNotesTrackingMap[noteEntity.id] = noteEntity;
-      }
-      else {
+      } else {
         const $updatedNote = Notes.animateUpdateNote(noteEntity.html, $note);
         this.setupNewNote($updatedNote);
       }
@@ -452,17 +556,31 @@ export default class Notes {
     }
     this.note_ids.push(noteEntity.id);
 
-    form = $form || $(`.js-discussion-note-form[data-discussion-id="${noteEntity.discussion_id}"]`);
-    row = (form.length || !noteEntity.discussion_line_code) ? form.closest('tr') : $(`#${noteEntity.discussion_line_code}`);
+    form =
+      $form ||
+      $(
+        `.js-discussion-note-form[data-discussion-id="${
+          noteEntity.discussion_id
+        }"]`,
+      );
+    row =
+      form.length || !noteEntity.discussion_line_code
+        ? form.closest('tr')
+        : $(`#${noteEntity.discussion_line_code}`);
 
     if (noteEntity.on_image) {
       row = form;
     }
 
     lineType = this.isParallelView() ? form.find('#line_type').val() : 'old';
-    diffAvatarContainer = row.prevAll('.line_holder').first().find('.js-avatar-container.' + lineType + '_line');
+    diffAvatarContainer = row
+      .prevAll('.line_holder')
+      .first()
+      .find('.js-avatar-container.' + lineType + '_line');
     // is this the first note of discussion?
-    discussionContainer = $(`.notes[data-discussion-id="${noteEntity.discussion_id}"]`);
+    discussionContainer = $(
+      `.notes[data-discussion-id="${noteEntity.discussion_id}"]`,
+    );
     if (!discussionContainer.length) {
       discussionContainer = form.closest('.discussion').find('.notes');
     }
@@ -470,25 +588,42 @@ export default class Notes {
       if (noteEntity.diff_discussion_html) {
         var $discussion = $(noteEntity.diff_discussion_html).renderGFM();
 
-        if (!this.isParallelView() || row.hasClass('js-temp-notes-holder') || noteEntity.on_image) {
+        if (
+          !this.isParallelView() ||
+          row.hasClass('js-temp-notes-holder') ||
+          noteEntity.on_image
+        ) {
           // insert the note and the reply button after the temp row
           row.after($discussion);
         } else {
           // Merge new discussion HTML in
-          var $notes = $discussion.find(`.notes[data-discussion-id="${noteEntity.discussion_id}"]`);
-          var contentContainerClass = '.' + $notes.closest('.notes_content')
-            .attr('class')
-            .split(' ')
-            .join('.');
-
-          row.find(contentContainerClass + ' .content').append($notes.closest('.content').children());
+          var $notes = $discussion.find(
+            `.notes[data-discussion-id="${noteEntity.discussion_id}"]`,
+          );
+          var contentContainerClass =
+            '.' +
+            $notes
+              .closest('.notes_content')
+              .attr('class')
+              .split(' ')
+              .join('.');
+
+          row
+            .find(contentContainerClass + ' .content')
+            .append($notes.closest('.content').children());
         }
       }
       // Init discussion on 'Discussion' page if it is merge request page
       const page = $('body').attr('data-page');
-      if ((page && page.indexOf('projects:merge_request') !== -1) || !noteEntity.diff_discussion_html) {
+      if (
+        (page && page.indexOf('projects:merge_request') !== -1) ||
+        !noteEntity.diff_discussion_html
+      ) {
         if (!hasVueMRDiscussionsCookie()) {
-          Notes.animateAppendNote(noteEntity.discussion_html, $('.main-notes-list'));
+          Notes.animateAppendNote(
+            noteEntity.discussion_html,
+            $('.main-notes-list'),
+          );
         }
       }
     } else {
@@ -496,7 +631,10 @@ export default class Notes {
       Notes.animateAppendNote(noteEntity.html, discussionContainer);
     }
 
-    if (typeof gl.diffNotesCompileComponents !== 'undefined' && noteEntity.discussion_resolvable) {
+    if (
+      typeof gl.diffNotesCompileComponents !== 'undefined' &&
+      noteEntity.discussion_resolvable
+    ) {
       gl.diffNotesCompileComponents();
 
       this.renderDiscussionAvatar(diffAvatarContainer, noteEntity);
@@ -508,7 +646,8 @@ export default class Notes {
   }
 
   getLineHolder(changesDiscussionContainer) {
-    return $(changesDiscussionContainer).closest('.notes_holder')
+    return $(changesDiscussionContainer)
+      .closest('.notes_holder')
       .prevAll('.line_holder')
       .first()
       .get(0);
@@ -541,8 +680,14 @@ export default class Notes {
     form.find('.js-errors').remove();
     // reset text and preview
     form.find('.js-md-write-button').click();
-    form.find('.js-note-text').val('').trigger('input');
-    form.find('.js-note-text').data('autosave').reset();
+    form
+      .find('.js-note-text')
+      .val('')
+      .trigger('input');
+    form
+      .find('.js-note-text')
+      .data('autosave')
+      .reset();
 
     var event = document.createEvent('Event');
     event.initEvent('autosize:update', true, false);
@@ -578,7 +723,10 @@ export default class Notes {
     form.find('#note_type').val('');
     form.find('#note_project_id').remove();
     form.find('#in_reply_to_discussion_id').remove();
-    form.find('.js-comment-resolve-button').closest('comment-and-resolve-btn').remove();
+    form
+      .find('.js-comment-resolve-button')
+      .closest('comment-and-resolve-btn')
+      .remove();
     this.parentTimeline = form.parents('.timeline');
 
     if (form.length) {
@@ -632,11 +780,17 @@ export default class Notes {
     } else if ($form.hasClass('js-discussion-note-form')) {
       formParentTimeline = $form.closest('.discussion-notes').find('.notes');
     }
-    return this.addFlash('Your comment could not be submitted! Please check your network connection and try again.', 'alert', formParentTimeline.get(0));
+    return this.addFlash(
+      'Your comment could not be submitted! Please check your network connection and try again.',
+      'alert',
+      formParentTimeline.get(0),
+    );
   }
 
   updateNoteError($parentTimeline) {
-    new Flash('Your comment could not be updated! Please check your network connection and try again.');
+    new Flash(
+      'Your comment could not be updated! Please check your network connection and try again.',
+    );
   }
 
   /**
@@ -685,14 +839,16 @@ export default class Notes {
   }
 
   checkContentToAllowEditing($el) {
-    var initialContent = $el.find('.original-note-content').text().trim();
+    var initialContent = $el
+      .find('.original-note-content')
+      .text()
+      .trim();
     var currentContent = $el.find('.js-note-text').val();
     var isAllowed = true;
 
     if (currentContent === initialContent) {
       this.removeNoteEditForm($el);
-    }
-    else {
+    } else {
       var $buttons = $el.find('.note-form-actions');
       var isWidgetVisible = isInViewport($el.get(0));
 
@@ -754,8 +910,7 @@ export default class Notes {
       this.setupNewNote($newNote);
       // Now that we have taken care of the update, clear it out
       delete this.updatedNotesTrackingMap[noteId];
-    }
-    else {
+    } else {
       $note.find('.js-finish-edit-warning').hide();
       this.removeNoteEditForm($note);
     }
@@ -788,7 +943,9 @@ export default class Notes {
     form.removeClass('current-note-edit-form');
     form.find('.js-finish-edit-warning').hide();
     // Replace markdown textarea text with original note text.
-    return form.find('.js-note-text').val(form.find('form.edit-note').data('originalNote'));
+    return form
+      .find('.js-note-text')
+      .val(form.find('form.edit-note').data('originalNote'));
   }
 
   /**
@@ -802,58 +959,67 @@ export default class Notes {
     $note = $(e.currentTarget).closest('.note');
     noteElId = $note.attr('id');
     noteId = $note.attr('data-note-id');
-    lineHolder = $(e.currentTarget).closest('.notes[data-discussion-id]')
+    lineHolder = $(e.currentTarget)
+      .closest('.notes[data-discussion-id]')
       .closest('.notes_holder')
       .prev('.line_holder');
-    $(`.note[id="${noteElId}"]`).each((function(_this) {
-      // A same note appears in the "Discussion" and in the "Changes" tab, we have
-      // to remove all. Using $('.note[id='noteId']') ensure we get all the notes,
-      // where $('#noteId') would return only one.
-      return function(i, el) {
-        var $note, $notes;
-        $note = $(el);
-        $notes = $note.closest('.discussion-notes');
-        const discussionId = $('.notes', $notes).data('discussionId');
-
-        if (typeof gl.diffNotesCompileComponents !== 'undefined') {
-          if (gl.diffNoteApps[noteElId]) {
-            gl.diffNoteApps[noteElId].$destroy();
+    $(`.note[id="${noteElId}"]`).each(
+      (function(_this) {
+        // A same note appears in the "Discussion" and in the "Changes" tab, we have
+        // to remove all. Using $('.note[id='noteId']') ensure we get all the notes,
+        // where $('#noteId') would return only one.
+        return function(i, el) {
+          var $note, $notes;
+          $note = $(el);
+          $notes = $note.closest('.discussion-notes');
+          const discussionId = $('.notes', $notes).data('discussionId');
+
+          if (typeof gl.diffNotesCompileComponents !== 'undefined') {
+            if (gl.diffNoteApps[noteElId]) {
+              gl.diffNoteApps[noteElId].$destroy();
+            }
           }
-        }
-
-        $note.remove();
-
-        // check if this is the last note for this line
-        if ($notes.find('.note').length === 0) {
-          var notesTr = $notes.closest('tr');
-
-          // "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
-          // notesTr does not exist for image diffs
-          if (notesTr.find('.discussion-notes').length > 1 || notesTr.length === 0) {
-            const $diffFile = $notes.closest('.diff-file');
-            if ($diffFile.length > 0) {
-              const removeBadgeEvent = new CustomEvent('removeBadge.imageDiff', {
-                detail: {
-                  // badgeNumber's start with 1 and index starts with 0
-                  badgeNumber: $notes.index() + 1,
-                },
-              });
 
-              $diffFile[0].dispatchEvent(removeBadgeEvent);
+          $note.remove();
+
+          // check if this is the last note for this line
+          if ($notes.find('.note').length === 0) {
+            var notesTr = $notes.closest('tr');
+
+            // "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
+            // notesTr does not exist for image diffs
+            if (
+              notesTr.find('.discussion-notes').length > 1 ||
+              notesTr.length === 0
+            ) {
+              const $diffFile = $notes.closest('.diff-file');
+              if ($diffFile.length > 0) {
+                const removeBadgeEvent = new CustomEvent(
+                  'removeBadge.imageDiff',
+                  {
+                    detail: {
+                      // badgeNumber's start with 1 and index starts with 0
+                      badgeNumber: $notes.index() + 1,
+                    },
+                  },
+                );
+
+                $diffFile[0].dispatchEvent(removeBadgeEvent);
+              }
+
+              $notes.remove();
+            } else if (notesTr.length > 0) {
+              notesTr.remove();
             }
-
-            $notes.remove();
-          } else if (notesTr.length > 0) {
-            notesTr.remove();
           }
-        }
-      };
-    })(this));
+        };
+      })(this),
+    );
 
     Notes.refreshVueNotes();
     Notes.checkMergeRequestStatus();
@@ -935,7 +1101,12 @@ export default class Notes {
     // DiffNote
     form.find('#note_position').val(dataHolder.attr('data-position'));
 
-    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('cancelText'));
+    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('cancelText'));
     form.find('.js-note-target-close').remove();
     form.find('.js-note-new-discussion').remove();
     this.setupNoteForm(form);
@@ -971,7 +1142,7 @@ export default class Notes {
     this.toggleDiffNote({
       target: $link,
       lineType: link.dataset.lineType,
-      showReplyInput
+      showReplyInput,
     });
   }
 
@@ -987,7 +1158,9 @@ export default class Notes {
 
     // Setup comment form
     let newForm;
-    const $noteContainer = $link.closest('.diff-viewer').find('.note-container');
+    const $noteContainer = $link
+      .closest('.diff-viewer')
+      .find('.note-container');
     const $form = $noteContainer.find('> .discussion-form');
 
     if ($form.length === 0) {
@@ -1000,13 +1173,17 @@ export default class Notes {
     this.setupDiscussionNoteForm($link, newForm);
   }
 
-  toggleDiffNote({
-    target,
-    lineType,
-    forceShow,
-    showReplyInput = false,
-  }) {
-    var $link, addForm, hasNotes, newForm, noteForm, replyButton, row, rowCssToAdd, targetContent, isDiffCommentAvatar;
+  toggleDiffNote({ target, lineType, forceShow, showReplyInput = false }) {
+    var $link,
+      addForm,
+      hasNotes,
+      newForm,
+      noteForm,
+      replyButton,
+      row,
+      rowCssToAdd,
+      targetContent,
+      isDiffCommentAvatar;
     $link = $(target);
     row = $link.closest('tr');
     const nextRow = row.next();
@@ -1018,11 +1195,13 @@ export default class Notes {
     hasNotes = nextRow.is('.notes_holder');
     addForm = false;
     let lineTypeSelector = '';
-    rowCssToAdd = '<tr class="notes_holder js-temp-notes-holder"><td class="notes_line" colspan="2"></td><td class="notes_content"><div class="content"></div></td></tr>';
+    rowCssToAdd =
+      '<tr class="notes_holder js-temp-notes-holder"><td class="notes_line" colspan="2"></td><td class="notes_content"><div class="content"></div></td></tr>';
     // In parallel view, look inside the correct left/right pane
     if (this.isParallelView()) {
       lineTypeSelector = `.${lineType}`;
-      rowCssToAdd = '<tr class="notes_holder js-temp-notes-holder"><td class="notes_line old"></td><td class="notes_content parallel old"><div class="content"></div></td><td class="notes_line new"></td><td class="notes_content parallel new"><div class="content"></div></td></tr>';
+      rowCssToAdd =
+        '<tr class="notes_holder js-temp-notes-holder"><td class="notes_line old"></td><td class="notes_content parallel old"><div class="content"></div></td><td class="notes_line new"></td><td class="notes_content parallel new"><div class="content"></div></td></tr>';
     }
     const notesContentSelector = `.notes_content${lineTypeSelector} .content`;
     let notesContent = targetRow.find(notesContentSelector);
@@ -1050,7 +1229,9 @@ export default class Notes {
       notesContent = targetRow.find(notesContentSelector);
       addForm = true;
     } else {
-      const isCurrentlyShown = targetRow.find('.content:not(:empty)').is(':visible');
+      const isCurrentlyShown = targetRow
+        .find('.content:not(:empty)')
+        .is(':visible');
       const isForced = forceShow === true || forceShow === false;
       const showNow = forceShow === true || (!isCurrentlyShown && !isForced);
 
@@ -1077,11 +1258,12 @@ export default class Notes {
     row = form.closest('tr');
     glForm = form.data('glForm');
     glForm.destroy();
-    form.find('.js-note-text').data('autosave').reset();
-    // show the reply button (will only work for replies)
     form
-      .prev('.discussion-reply-holder')
-      .show();
+      .find('.js-note-text')
+      .data('autosave')
+      .reset();
+    // show the reply button (will only work for replies)
+    form.prev('.discussion-reply-holder').show();
     if (row.is('.js-temp-notes-holder')) {
       // remove temporary row for diff lines
       return row.remove();
@@ -1122,7 +1304,9 @@ export default class Notes {
     var filename, form;
     form = $(this).closest('form');
     // get only the basename
-    filename = $(this).val().replace(/^.*[\\\/]/, '');
+    filename = $(this)
+      .val()
+      .replace(/^.*[\\\/]/, '');
     return form.find('.js-attachment-filename').text(filename);
   }
 
@@ -1194,12 +1378,16 @@ export default class Notes {
 
     this.glForm = new GLForm($editForm.find('form'), this.enableGFM);
 
-    $editForm.find('form')
+    $editForm
+      .find('form')
       .attr('action', `${postUrl}?html=true`)
       .attr('data-remote', 'true');
     $editForm.find('.js-form-target-id').val(targetId);
     $editForm.find('.js-form-target-type').val(targetType);
-    $editForm.find('.js-note-text').focus().val(originalContent);
+    $editForm
+      .find('.js-note-text')
+      .focus()
+      .val(originalContent);
     $editForm.find('.js-md-write-button').trigger('click');
     $editForm.find('.referenced-users').hide();
   }
@@ -1208,7 +1396,9 @@ export default class Notes {
     if ($note.find('.js-conflict-edit-warning').length === 0) {
       const $alert = $(`<div class="js-conflict-edit-warning alert alert-danger">
         This comment has changed since you started editing, please review the
-        <a href="#note_${noteEntity.id}" target="_blank" rel="noopener noreferrer">
+        <a href="#note_${
+          noteEntity.id
+        }" target="_blank" rel="noopener noreferrer">
           updated comment
         </a>
         to ensure information is not lost
@@ -1218,12 +1408,15 @@ export default class Notes {
   }
 
   updateNotesCount(updateCount) {
-    return this.notesCountBadge.text(parseInt(this.notesCountBadge.text(), 10) + updateCount);
+    return this.notesCountBadge.text(
+      parseInt(this.notesCountBadge.text(), 10) + updateCount,
+    );
   }
 
   static renderPlaceholderComponent($container) {
     const el = $container.find('.js-code-placeholder').get(0);
-    new Vue({ // eslint-disable-line no-new
+    new Vue({
+      // eslint-disable-line no-new
       el,
       components: {
         SkeletonLoadingContainer,
@@ -1248,7 +1441,9 @@ export default class Notes {
     $container.find('.line_content').html(
       $(`
         <div class="nothing-here-block">
-          ${__('Unable to load the diff.')} <a class="js-toggle-lazy-diff" href="javascript:void(0)">Try again</a>?
+          ${__(
+            'Unable to load the diff.',
+          )} <a class="js-toggle-lazy-diff" href="javascript:void(0)">Try again</a>?
         </div>
       `),
     );
@@ -1266,7 +1461,8 @@ export default class Notes {
     const fileHolder = $container.find('.file-holder');
     const url = fileHolder.data('linesPath');
 
-    axios.get(url)
+    axios
+      .get(url)
       .then(({ data }) => {
         Notes.renderDiffContent($container, data);
       })
@@ -1277,9 +1473,14 @@ export default class Notes {
 
   toggleCommitList(e) {
     const $element = $(e.currentTarget);
-    const $closestSystemCommitList = $element.siblings('.system-note-commit-list');
+    const $closestSystemCommitList = $element.siblings(
+      '.system-note-commit-list',
+    );
 
-    $element.find('.fa').toggleClass('fa-angle-down').toggleClass('fa-angle-up');
+    $element
+      .find('.fa')
+      .toggleClass('fa-angle-down')
+      .toggleClass('fa-angle-up');
     $closestSystemCommitList.toggleClass('hide-shade');
   }
 
@@ -1289,11 +1490,17 @@ export default class Notes {
    * intrusive.
    */
   collapseLongCommitList() {
-    const systemNotes = $('#notes-list').find('li.system-note').has('ul');
+    const systemNotes = $('#notes-list')
+      .find('li.system-note')
+      .has('ul');
 
     $.each(systemNotes, function(index, systemNote) {
       const $systemNote = $(systemNote);
-      const headerMessage = $systemNote.find('.note-text').find('p:first').text().replace(':', '');
+      const headerMessage = $systemNote
+        .find('.note-text')
+        .find('p:first')
+        .text()
+        .replace(':', '');
 
       $systemNote.find('.note-header .system-note-message').html(headerMessage);
 
@@ -1301,7 +1508,9 @@ export default class Notes {
         $systemNote.find('.note-text').addClass('system-note-commit-list');
         $systemNote.find('.system-note-commit-list-toggler').show();
       } else {
-        $systemNote.find('.note-text').addClass('system-note-commit-list hide-shade');
+        $systemNote
+          .find('.note-text')
+          .addClass('system-note-commit-list hide-shade');
       }
     });
   }
@@ -1319,14 +1528,10 @@ export default class Notes {
 
   cleanForm($form) {
     // Remove JS classes that are not needed here
-    $form
-      .find('.js-comment-type-dropdown')
-      .removeClass('btn-group');
+    $form.find('.js-comment-type-dropdown').removeClass('btn-group');
 
     // Remove dropdown
-    $form
-      .find('.dropdown-menu')
-      .remove();
+    $form.find('.dropdown-menu').remove();
 
     return $form;
   }
@@ -1345,7 +1550,11 @@ export default class Notes {
     // There can be CRLF vs LF mismatches if we don't sanitize and compare the same way
     const sanitizedNoteEntityText = normalizeNewlines(noteEntity.note.trim());
     const currentNoteText = normalizeNewlines(
-      $note.find('.original-note-content').first().text().trim()
+      $note
+        .find('.original-note-content')
+        .first()
+        .text()
+        .trim(),
     );
     return sanitizedNoteEntityText !== currentNoteText;
   }
@@ -1435,7 +1644,14 @@ export default class Notes {
    * Once comment is _actually_ posted on server, we will have final element
    * in response that we will show in place of this temporary element.
    */
-  createPlaceholderNote({ formContent, uniqueId, isDiscussionNote, currentUsername, currentUserFullname, currentUserAvatar }) {
+  createPlaceholderNote({
+    formContent,
+    uniqueId,
+    isDiscussionNote,
+    currentUsername,
+    currentUserFullname,
+    currentUserAvatar,
+  }) {
     const discussionClass = isDiscussionNote ? 'discussion' : '';
     const $tempNote = $(
       `<li id="${uniqueId}" class="note being-posted fade-in-half timeline-entry">
@@ -1449,8 +1665,12 @@ export default class Notes {
                <div class="note-header">
                   <div class="note-header-info">
                      <a href="/${_.escape(currentUsername)}">
-                       <span class="hidden-xs">${_.escape(currentUsername)}</span>
-                       <span class="note-headline-light">${_.escape(currentUsername)}</span>
+                       <span class="hidden-xs">${_.escape(
+                         currentUsername,
+                       )}</span>
+                       <span class="note-headline-light">${_.escape(
+                         currentUsername,
+                       )}</span>
                      </a>
                   </div>
                </div>
@@ -1461,11 +1681,13 @@ export default class Notes {
                </div>
             </div>
          </div>
-      </li>`
+      </li>`,
     );
 
     $tempNote.find('.hidden-xs').text(_.escape(currentUserFullname));
-    $tempNote.find('.note-headline-light').text(`@${_.escape(currentUsername)}`);
+    $tempNote
+      .find('.note-headline-light')
+      .text(`@${_.escape(currentUsername)}`);
 
     return $tempNote;
   }
@@ -1481,7 +1703,7 @@ export default class Notes {
              <i>${formContent}</i>
            </div>
          </div>
-       </li>`
+       </li>`,
     );
 
     return $tempNote;
@@ -1513,11 +1735,22 @@ export default class Notes {
     const $submitBtn = $(e.target);
     let $form = $submitBtn.parents('form');
     const $closeBtn = $form.find('.js-note-target-close');
-    const isDiscussionNote = $submitBtn.parent().find('li.droplab-item-selected').attr('id') === 'discussion';
+    const isDiscussionNote =
+      $submitBtn
+        .parent()
+        .find('li.droplab-item-selected')
+        .attr('id') === 'discussion';
     const isMainForm = $form.hasClass('js-main-target-form');
     const isDiscussionForm = $form.hasClass('js-discussion-note-form');
-    const isDiscussionResolve = $submitBtn.hasClass('js-comment-resolve-button');
-    const { formData, formContent, formAction, formContentOriginal } = this.getFormData($form);
+    const isDiscussionResolve = $submitBtn.hasClass(
+      'js-comment-resolve-button',
+    );
+    const {
+      formData,
+      formContent,
+      formAction,
+      formContentOriginal,
+    } = this.getFormData($form);
     let noteUniqueId;
     let systemNoteUniqueId;
     let hasQuickActions = false;
@@ -1547,23 +1780,30 @@ export default class Notes {
     // Show placeholder note
     if (tempFormContent) {
       noteUniqueId = _.uniqueId('tempNote_');
-      $notesContainer.append(this.createPlaceholderNote({
-        formContent: tempFormContent,
-        uniqueId: noteUniqueId,
-        isDiscussionNote,
-        currentUsername: gon.current_username,
-        currentUserFullname: gon.current_user_fullname,
-        currentUserAvatar: gon.current_user_avatar_url,
-      }));
+      $notesContainer.append(
+        this.createPlaceholderNote({
+          formContent: tempFormContent,
+          uniqueId: noteUniqueId,
+          isDiscussionNote,
+          currentUsername: gon.current_username,
+          currentUserFullname: gon.current_user_fullname,
+          currentUserAvatar: gon.current_user_avatar_url,
+        }),
+      );
     }
 
     // Show placeholder system note
     if (hasQuickActions) {
       systemNoteUniqueId = _.uniqueId('tempSystemNote_');
-      $notesContainer.append(this.createPlaceholderSystemNote({
-        formContent: this.getQuickActionDescription(formContent, AjaxCache.get(gl.GfmAutoComplete.dataSources.commands)),
-        uniqueId: systemNoteUniqueId,
-      }));
+      $notesContainer.append(
+        this.createPlaceholderSystemNote({
+          formContent: this.getQuickActionDescription(
+            formContent,
+            AjaxCache.get(gl.GfmAutoComplete.dataSources.commands),
+          ),
+          uniqueId: systemNoteUniqueId,
+        }),
+      );
     }
 
     // Clear the form textarea
@@ -1577,8 +1817,9 @@ export default class Notes {
 
     /* eslint-disable promise/catch-or-return */
     // Make request to submit comment on server
-    axios.post(`${formAction}?html=true`, formData)
-      .then((res) => {
+    axios
+      .post(`${formAction}?html=true`, formData)
+      .then(res => {
         const note = res.data;
 
         // Submission successful! remove placeholder
@@ -1595,7 +1836,9 @@ export default class Notes {
 
         // Reset cached commands list when command is applied
         if (hasQuickActions) {
-          $form.find('textarea.js-note-text').trigger('clear-commands-cache.atwho');
+          $form
+            .find('textarea.js-note-text')
+            .trigger('clear-commands-cache.atwho');
         }
 
         // Clear previous form errors
@@ -1640,11 +1883,14 @@ export default class Notes {
 
           // append flash-container to the Notes list
           if ($notesContainer.length) {
-            $notesContainer.append('<div class="flash-container" style="display: none;"></div>');
+            $notesContainer.append(
+              '<div class="flash-container" style="display: none;"></div>',
+            );
           }
 
           Notes.refreshVueNotes();
-        } else if (isMainForm) { // Check if this was main thread comment
+        } else if (isMainForm) {
+          // Check if this was main thread comment
           // Show final note element on UI and perform form and action buttons cleanup
           this.addNote($form, note);
           this.reenableTargetFormSubmitButton(e);
@@ -1655,7 +1901,8 @@ export default class Notes {
         }
 
         $form.trigger('ajax:success', [note]);
-      }).catch(() => {
+      })
+      .catch(() => {
         // Submission failed, remove placeholder note and show Flash error message
         $notesContainer.find(`#${noteUniqueId}`).remove();
 
@@ -1675,7 +1922,9 @@ export default class Notes {
 
         // Show form again on UI on failure
         if (isDiscussionForm && $notesContainer.length) {
-          const replyButton = $notesContainer.parent().find('.js-discussion-reply-button');
+          const replyButton = $notesContainer
+            .parent()
+            .find('.js-discussion-reply-button');
           this.replyToDiscussionNote(replyButton[0]);
           $form = $notesContainer.parent().find('form');
         }
@@ -1720,12 +1969,19 @@ export default class Notes {
 
     // Show updated comment content temporarily
     $noteBodyText.html(formContent);
-    $editingNote.removeClass('is-editing fade-in-full').addClass('being-posted fade-in-half');
-    $editingNote.find('.note-headline-meta a').html('<i class="fa fa-spinner fa-spin" aria-label="Comment is being updated" aria-hidden="true"></i>');
+    $editingNote
+      .removeClass('is-editing fade-in-full')
+      .addClass('being-posted fade-in-half');
+    $editingNote
+      .find('.note-headline-meta a')
+      .html(
+        '<i class="fa fa-spinner fa-spin" aria-label="Comment is being updated" aria-hidden="true"></i>',
+      );
 
     /* eslint-disable promise/catch-or-return */
     // Make request to update comment on server
-    axios.post(`${formAction}?html=true`, formData)
+    axios
+      .post(`${formAction}?html=true`, formData)
       .then(({ data }) => {
         // Submission successful! render final note element
         this.updateNote(data, $editingNote);