From 91f490690103fc20a772b39b31cddbb5927e08b9 Mon Sep 17 00:00:00 2001
From: Fatih Acet <acetfatih@gmail.com>
Date: Tue, 4 Jul 2017 01:31:11 +0300
Subject: [PATCH] IssueNotesRefactor: Implement ESC to cancel note form.

---
 .../notes/components/issue_discussion.vue          | 13 +++++++++++--
 .../javascripts/notes/components/issue_note.vue    | 13 +++++++++++--
 .../notes/components/issue_note_form.vue           | 11 +++++++++--
 .../javascripts/notes/components/issue_notes.vue   |  6 +++++-
 .../notes/services/issue_notes_service.js          |  2 +-
 .../javascripts/notes/stores/issue_notes_store.js  | 14 ++++++--------
 6 files changed, 43 insertions(+), 16 deletions(-)

diff --git a/app/assets/javascripts/notes/components/issue_discussion.vue b/app/assets/javascripts/notes/components/issue_discussion.vue
index cf4f63968ec..901462a40db 100644
--- a/app/assets/javascripts/notes/components/issue_discussion.vue
+++ b/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">
diff --git a/app/assets/javascripts/notes/components/issue_note.vue b/app/assets/javascripts/notes/components/issue_note.vue
index ac906e9440e..870a06b34cd 100644
--- a/app/assets/javascripts/notes/components/issue_note.vue
+++ b/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>
diff --git a/app/assets/javascripts/notes/components/issue_note_form.vue b/app/assets/javascripts/notes/components/issue_note_form.vue
index 137e84fb361..b322f777968 100644
--- a/app/assets/javascripts/notes/components/issue_note_form.vue
+++ b/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(/&quot;/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
diff --git a/app/assets/javascripts/notes/components/issue_notes.vue b/app/assets/javascripts/notes/components/issue_notes.vue
index 72fbadbcd21..37bdc9ed8d6 100644
--- a/app/assets/javascripts/notes/components/issue_notes.vue
+++ b/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);
   },
diff --git a/app/assets/javascripts/notes/services/issue_notes_service.js b/app/assets/javascripts/notes/services/issue_notes_service.js
index 6400e607d8a..0a9df556292 100644
--- a/app/assets/javascripts/notes/services/issue_notes_service.js
+++ b/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);
diff --git a/app/assets/javascripts/notes/stores/issue_notes_store.js b/app/assets/javascripts/notes/stores/issue_notes_store.js
index 0eec355975e..16824b72ebc 100644
--- a/app/assets/javascripts/notes/stores/issue_notes_store.js
+++ b/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);
             }
           });
         }