Autosave and autorestore unsaved comments.

Closes #1738.

CHANGELOG

@@ -67,6 +67,7 @@ v 7.8.0
   - When test web hook - show error message instead of 500 error page if connection to hook url was reset
   - Added support for firing system hooks on group create/destroy and adding/removing users to group (Boyan Tabakov)
   - Added persistent collapse button for left side nav bar (Jason Blanchard)
+  - Prevent losing unsaved comments by automatically restoring them when comment page is loaded again.
 
 v 7.7.2
   - Update GitLab Shell to version 2.4.2 that fixes a bug when developers can push to protected branch

app/assets/javascripts/application.js.coffee

@@ -17,6 +17,7 @@
 #= require jquery.blockUI
 #= require jquery.turbolinks
 #= require turbolinks
+#= require autosave
 #= require bootstrap
 #= require select2
 #= require raphael

app/assets/javascripts/autosave.js.coffee

+class @Autosave
+  constructor: (field, key) ->
+    @field = field
+
+    key = key.join("/") if key.join?
+    @key = "autosave/#{key}"
+
+    @field.data "autosave", this
+
+    @restore()
+
+    @field.on "input", => @save()
+
+  restore: ->
+    return unless window.localStorage?
+
+    text = window.localStorage.getItem @key
+    @field.val text if text?.length > 0
+    @field.trigger "input"    
+
+  save: ->
+    return unless window.localStorage?
+
+    text = @field.val()
+    if text?.length > 0
+      window.localStorage.setItem @key, text
+    else
+      @reset()
+
+  reset: ->
+    return unless window.localStorage?
+
+    window.localStorage.removeItem @key
\ No newline at end of file

app/assets/javascripts/notes.js.coffee

@@ -170,6 +170,8 @@ class @Notes
     form.find(".js-md-write-button").click()
     form.find(".js-note-text").val("").trigger "input"
 
+    form.find(".js-note-text").data("autosave").reset()
+
   ###
   Called when clicking the "Choose File" button.
 
@@ -220,12 +222,22 @@ class @Notes
     # setup preview buttons
     form.find(".js-md-write-button, .js-md-preview-button").tooltip placement: "left"
     previewButton = form.find(".js-md-preview-button")
-    form.find(".js-note-text").on "input", ->
+
+    textarea = form.find(".js-note-text")
+
+    textarea.on "input", ->
       if $(this).val().trim() isnt ""
         previewButton.removeClass("turn-off").addClass "turn-on"
       else
         previewButton.removeClass("turn-on").addClass "turn-off"
 
+    new Autosave textarea, [
+      "Note"
+      form.find("#note_commit_id").val()
+      form.find("#note_line_code").val()
+      form.find("#note_noteable_type").val()
+      form.find("#note_noteable_id").val()
+    ]
 
     # remove notify commit author checkbox for non-commit notes
     form.find(".js-notify-commit-author").remove()  if form.find("#note_noteable_type").val() isnt "Commit"
@@ -233,7 +245,6 @@ class @Notes
     new DropzoneInput(form)
     form.show()
 
-
   ###
   Called in response to the new note form being submitted
 
@@ -407,6 +418,8 @@ class @Notes
   removeDiscussionNoteForm: (form)->
     row = form.closest("tr")
 
+    form.find(".js-note-text").data("autosave").reset()
+
     # show the reply button (will only work for replies)
     form.prev(".js-discussion-reply-button").show()
     if row.is(".js-temp-notes-holder")