IssueNotesRefactor: Implement note edit conflict warning.

3 files changed, 38 insertions, 5 deletions

diff --git a/app/assets/javascripts/notes/components/issue_note_actions.vue b/app/assets/javascripts/notes/components/issue_note_actions.vue
index 88f0fdb9a25..c733f2c8dfa 100644
--- a/app/assets/javascripts/notes/components/issue_note_actions.vue
+++ b/app/assets/javascripts/notes/components/issue_note_actions.vue
@@ -111,7 +111,7 @@ export default {
             <button
               @click="editHandler"
               type="button"
-              class="btn btn-transparent">
+              class="btn btn-transparent js-note-edit">
               Edit comment
             </button>
           </li>
@@ -126,7 +126,7 @@ export default {
           <a
             v-if="canEdit"
             @click.prevent="deleteHandler"
-            class="js-note-delete"
+            class="js-note-delete js-note-delete"
             href="#">
             <span class="text-danger">
               Delete comment
diff --git a/app/assets/javascripts/notes/components/issue_note_body.vue b/app/assets/javascripts/notes/components/issue_note_body.vue
index ee9318cbd6a..fd4040452bf 100644
--- a/app/assets/javascripts/notes/components/issue_note_body.vue
+++ b/app/assets/javascripts/notes/components/issue_note_body.vue
@@ -28,6 +28,11 @@ export default {
       required: true,
     },
   },
+  computed: {
+    noteBody() {
+      return this.note.note;
+    },
+  },
   components: {
     IssueNoteEditedText,
     IssueNoteAwardsList,
@@ -75,7 +80,8 @@ export default {
       ref="noteForm"
       :updateHandler="handleFormUpdate"
       :cancelHandler="formCancelHandler"
-      :noteBody="note.note" />
+      :noteBody="noteBody"
+      :noteId="note.id" />
     <textarea
       v-if="canEdit"
       v-model="note.note"
diff --git a/app/assets/javascripts/notes/components/issue_note_form.vue b/app/assets/javascripts/notes/components/issue_note_form.vue
index 86ff8bd8c69..b60141eacf6 100644
--- a/app/assets/javascripts/notes/components/issue_note_form.vue
+++ b/app/assets/javascripts/notes/components/issue_note_form.vue
@@ -9,6 +9,10 @@ export default {
       required: false,
       default: '',
     },
+    noteId: {
+      type: Number,
+      required: false,
+    },
     updateHandler: {
       type: Function,
       required: true,
@@ -29,8 +33,18 @@ export default {
       note: this.noteBody,
       markdownPreviewUrl: '',
       markdownDocsUrl: '',
+      conflictWhileEditing: false,
     };
   },
+  watch: {
+    noteBody() {
+      if (this.note === this.initialNote) {
+        this.note = this.noteBody;
+      } else {
+        this.conflictWhileEditing = true;
+      }
+    },
+  },
   components: {
     MarkdownField,
   },
@@ -57,6 +71,9 @@ export default {
     isDirty() {
       return this.initialNote !== this.note;
     },
+    noteHash() {
+      return `#note_${this.noteId}`;
+    },
   },
   mounted() {
     const issuableDataEl = document.getElementById('js-issuable-app-initial-data');
@@ -72,6 +89,16 @@ export default {
 
 <template>
   <div class="note-edit-form">
+    <div
+      v-if="conflictWhileEditing"
+      class="js-conflict-edit-warning alert alert-danger">
+      This comment has changed since you started editing, please review the
+      <a
+        :href="noteHash"
+        target="_blank"
+        rel="noopener noreferrer">updated comment</a>
+        to ensure information is not lost.
+    </div>
     <form class="edit-note common-note-form">
       <markdown-field
         :markdown-preview-url="markdownPreviewUrl"
@@ -79,7 +106,7 @@ export default {
         :addSpacingClasses="false">
         <textarea
           id="note-body"
-          class="note-textarea js-gfm-input js-autosize markdown-area"
+          class="note-textarea js-gfm-input js-autosize markdown-area js-note-text"
           data-supports-slash-commands="true"
           data-supports-quick-actions="true"
           aria-label="Description"
@@ -101,7 +128,7 @@ export default {
         </button>
         <button
           @click="cancelHandler()"
-          class="btn btn-nr btn-cancel"
+          class="btn btn-nr btn-cancel note-edit-cancel"
           type="button">
           Cancel
         </button>