Merge branch '17284-Edit-form-does-not-cancel-correctly' into 'master'

#17284 Edit form does not cancel correctly

## What does this MR do?

Replaces the markdown textarea with the currently saved note text when the note edit is cancelled.

## Are there points in the code the reviewer needs to double check?

No

## Why was this MR needed?

Allows the user to revert back to the original note text, as expected, using cancel.

## What are the relevant issue numbers?

Fixes #17284.

## Screenshots

![17284](/uploads/c3598de6f8e70d52275ef25907d92d42/17284.gif)

See merge request !4175

CHANGELOG

@@ -65,6 +65,7 @@ v 8.8.4 (unreleased)
   - Fix importer for GitHub comments on diff
   - Disable Webhooks before proceeding with the GitHub import
   - Added descriptions to notification settings dropdown
+  - Markdown editor now correctly resets the input value on edit cancellation !4175
 
 v 8.8.3
   - Fix 404 page when viewing TODOs that contain milestones or labels in different projects. !4312

app/assets/javascripts/notes.js.coffee

@@ -354,8 +354,7 @@ class @Notes
   Called in response to clicking the edit note link
 
   Replaces the note text with the note edit form
-  Adds a hidden div with the original content of the note to fill the edit note form with
-  if the user cancels
+  Adds a data attribute to the form with the original content of the note for cancellations
   ###
   showEditForm: (e, scrollTo, myLastNote) ->
     e.preventDefault()
@@ -371,6 +370,8 @@ class @Notes
     done = ($noteText) ->
       # Neat little trick to put the cursor at the end
       noteTextVal = $noteText.val()
+      # Store the original note text in a data attribute to retrieve if a user cancels edit.
+      form.find('form.edit-note').data 'original-note', noteTextVal
       $noteText.val('').val(noteTextVal);
 
     new GLForm form
@@ -393,14 +394,16 @@ class @Notes
   ###
   Called in response to clicking the edit note link
 
-  Hides edit form
+  Hides edit form and restores the original note text to the editor textarea.
   ###
   cancelEdit: (e) ->
     e.preventDefault()
     note = $(this).closest(".note")
+    form = note.find(".current-note-edit-form")
     note.removeClass "is-editting"
-    note.find(".current-note-edit-form")
-      .removeClass("current-note-edit-form")
+    form.removeClass("current-note-edit-form")
+    # Replace markdown textarea text with original note text.
+    form.find(".js-note-text").val(form.find('form.edit-note').data('original-note'))
 
   ###
   Called in response to deleting a note of any kind.