Merge branch '32425-fix-diff-notes-instant-editing' into 'master'

Fix ability to edit diff notes multiple times

Closes #32425

See merge request !11456

2 files changed, 44 insertions, 3 deletions

diff --git a/app/assets/javascripts/notes.js b/app/assets/javascripts/notes.js
index 67df1c0c4d7..62a46733cc4 100644
--- a/app/assets/javascripts/notes.js
+++ b/app/assets/javascripts/notes.js
@@ -578,12 +578,12 @@ const normalizeNewlines = function(str) {
     Updates the current note field.
      */
 
-    Notes.prototype.updateNote = function(_xhr, noteEntity, _status) {
+    Notes.prototype.updateNote = function(noteEntity, $targetNote) {
       var $noteEntityEl, $note_li;
       // Convert returned HTML to a jQuery object so we can modify it further
       $noteEntityEl = $(noteEntity.html);
       $noteEntityEl.addClass('fade-in-full');
-      this.revertNoteEditForm();
+      this.revertNoteEditForm($targetNote);
       gl.utils.localTimeAgo($('.js-timeago', $noteEntityEl));
       $noteEntityEl.renderGFM();
       $noteEntityEl.find('.js-task-list-container').taskList('enable');
@@ -1404,7 +1404,7 @@ const normalizeNewlines = function(str) {
       gl.utils.ajaxPost(formAction, formData)
         .then((note) => {
           // Submission successful! render final note element
-          this.updateNote(null, note, null);
+          this.updateNote(note, $editingNote);
         })
         .fail(() => {
           // Submission failed, revert back to original note
diff --git a/spec/javascripts/notes_spec.js b/spec/javascripts/notes_spec.js
index 7f12dea5277..d3494aaa94f 100644
--- a/spec/javascripts/notes_spec.js
+++ b/spec/javascripts/notes_spec.js
@@ -79,6 +79,47 @@ import '~/notes';
       });
     });
 
+    describe('updateNote', () => {
+      let sampleComment;
+      let noteEntity;
+      let $form;
+      let $notesContainer;
+
+      beforeEach(() => {
+        this.notes = new Notes('', []);
+        window.gon.current_username = 'root';
+        window.gon.current_user_fullname = 'Administrator';
+        sampleComment = 'foo';
+        noteEntity = {
+          id: 1234,
+          html: `<li class="note note-row-1234 timeline-entry" id="note_1234">
+                  <div class="note-text">${sampleComment}</div>
+                 </li>`,
+          note: sampleComment,
+          valid: true
+        };
+        $form = $('form.js-main-target-form');
+        $notesContainer = $('ul.main-notes-list');
+        $form.find('textarea.js-note-text').val(sampleComment);
+      });
+
+      it('updates note and resets edit form', () => {
+        const deferred = $.Deferred();
+        spyOn($, 'ajax').and.returnValue(deferred.promise());
+        spyOn(this.notes, 'revertNoteEditForm');
+
+        $('.js-comment-button').click();
+        deferred.resolve(noteEntity);
+
+        const $targetNote = $notesContainer.find(`#note_${noteEntity.id}`);
+        const updatedNote = Object.assign({}, noteEntity);
+        updatedNote.note = 'bar';
+        this.notes.updateNote(updatedNote, $targetNote);
+
+        expect(this.notes.revertNoteEditForm).toHaveBeenCalledWith($targetNote);
+      });
+    });
+
     describe('renderNote', () => {
       let notes;
       let note;