IssueNotesRefactor: Implement ESC to cancel note form.

app/assets/javascripts/notes/components/issue_discussion.vue

@@ -61,7 +61,15 @@ export default {
     showReplyForm() {
       this.isReplying = true;
     },
-    cancelReplyForm() {
+    cancelReplyForm(shouldConfirm) {
+      if (shouldConfirm && this.$refs.noteForm.isDirty) {
+        const msg = 'Are you sure you want to cancel creating this comment?';
+        const isConfirmed = confirm(msg); // eslint-disable-line
+        if (!isConfirmed) {
+          return;
+        }
+      }
+
       this.isReplying = false;
     },
     saveReply({ note }) {
@@ -139,7 +147,8 @@ export default {
                       v-if="isReplying"
                       saveButtonTitle="Comment"
                       :updateHandler="saveReply"
-                      :cancelHandler="cancelReplyForm" />
+                      :cancelHandler="cancelReplyForm"
+                      ref="noteForm" />
                   <div
                     v-if="!canReply"
                     class="disabled-comment text-center">

app/assets/javascripts/notes/components/issue_note.vue

@@ -76,7 +76,15 @@ export default {
           new Flash('Something went wrong while editing your comment. Please try again.'); // eslint-disable-line
         });
     },
-    formCancelHandler() {
+    formCancelHandler(shouldConfirm) {
+      if (shouldConfirm && this.$refs.noteBody.$refs.noteForm.isDirty) {
+        const msg = 'Are you sure you want to cancel editing this comment?';
+        const isConfirmed = confirm(msg); // eslint-disable-line
+        if (!isConfirmed) {
+          return;
+        }
+      }
+
       this.isEditing = false;
     },
   },
@@ -115,7 +123,8 @@ export default {
           :note="note"
           :isEditing="isEditing"
           :formUpdateHandler="formUpdateHandler"
-          :formCancelHandler="formCancelHandler" />
+          :formCancelHandler="formCancelHandler"
+          ref="noteBody" />
       </div>
     </div>
   </li>

app/assets/javascripts/notes/components/issue_note_form.vue

@@ -24,6 +24,7 @@ export default {
   },
   data() {
     return {
+      initialNote: this.noteBody,
       note: this.noteBody,
       markdownPreviewUrl: '',
       markdownDocsUrl: '',
@@ -39,6 +40,11 @@ export default {
       });
     },
   },
+  computed: {
+    isDirty() {
+      return this.initialNote !== this.note;
+    },
+  },
   mounted() {
     const issuableDataEl = document.getElementById('js-issuable-app-initial-data');
     const issueData = JSON.parse(issuableDataEl.innerHTML.replace(/"/g, '"'));
@@ -68,7 +74,8 @@ export default {
           ref="textarea"
           slot="textarea"
           placeholder="Write a comment or drag your files here..."
-          @keydown.meta.enter="handleUpdate">
+          @keydown.meta.enter="handleUpdate"
+          @keydown.esc="cancelHandler(true)">
         </textarea>
       </markdown-field>
       <div class="note-form-actions clearfix">
@@ -79,7 +86,7 @@ export default {
           {{saveButtonTitle}}
         </button>
         <button
-          @click="cancelHandler"
+          @click="cancelHandler()"
           class="btn btn-nr btn-cancel"
           type="button">
           Cancel

app/assets/javascripts/notes/components/issue_notes.vue

@@ -39,7 +39,8 @@ export default {
     },
   },
   mounted() {
-    const { discussionsPath, notesPath, lastFetchedAt }  = this.$el.parentNode.dataset;
+    const { discussionsPath, notesPath, lastFetchedAt } = this.$el.parentNode.dataset;
+
     this.$store.dispatch('fetchNotes', discussionsPath)
       .then(() => {
         this.isLoading = false;
@@ -58,6 +59,9 @@ export default {
       this.$store.dispatch('poll', options)
         .then((res) => {
           options.lastFetchedAt = res.last_fetched_at;
+        })
+        .catch(() => {
+          new Flash('Something went wrong while fetching latest comments.'); // eslint-disable-line
         });
     }, 6000);
   },

app/assets/javascripts/notes/services/issue_notes_service.js

@@ -23,7 +23,7 @@ export default {
     const options = {
       headers: {
         'X-Last-Fetched-At': lastFetchedAt,
-      }
+      },
     };
 
     return Vue.http.get(endpoint, options);

app/assets/javascripts/notes/stores/issue_notes_store.js

@@ -136,18 +136,16 @@ const actions = {
           res.notes.forEach((note) => {
             if (notesById[note.id]) {
               context.commit('updateNote', note);
-            } else {
-              if (note.type === 'DiscussionNote') {
-                const discussion = findNoteObjectById(context.state.notes, note.discussion_id);
+            } else if (note.type === 'DiscussionNote') {
+              const discussion = findNoteObjectById(context.state.notes, note.discussion_id);
 
-                if (discussion) {
-                  context.commit('addNewReplyToDiscussion', note);
-                } else {
-                  context.commit('addNewNote', note);
-                }
+              if (discussion) {
+                context.commit('addNewReplyToDiscussion', note);
               } else {
                 context.commit('addNewNote', note);
               }
+            } else {
+              context.commit('addNewNote', note);
             }
           });
         }