IssueNotesRefactor: Fix error messages of edit/reply failure for discussions.

3 files changed, 20 insertions, 10 deletions

diff --git a/app/assets/javascripts/notes/components/issue_comment_form.vue b/app/assets/javascripts/notes/components/issue_comment_form.vue
index cb19dc9eb4b..7784b0191a2 100644
--- a/app/assets/javascripts/notes/components/issue_comment_form.vue
+++ b/app/assets/javascripts/notes/components/issue_comment_form.vue
@@ -96,6 +96,7 @@
     methods: {
       ...mapActions([
         'saveNote',
+        'removePlaceholderNotes',
       ]),
       setIsSubmitButtonDisabled(note, isSubmitting) {
         if (!_.isEmpty(note) && !isSubmitting) {
@@ -147,6 +148,12 @@
             .catch(() => {
               this.isSubmitting = false;
               this.discard(false);
+              Flash(
+                'Your comment could not be submitted! Please check your network connection and try again.',
+                'alert',
+                $(this.$el),
+              );
+              this.removePlaceholderNotes();
             });
         } else {
           this.toggleIssueState();
diff --git a/app/assets/javascripts/notes/components/issue_discussion.vue b/app/assets/javascripts/notes/components/issue_discussion.vue
index bbf9e0db45c..6fdc85e52e3 100644
--- a/app/assets/javascripts/notes/components/issue_discussion.vue
+++ b/app/assets/javascripts/notes/components/issue_discussion.vue
@@ -78,6 +78,7 @@
       ...mapActions([
         'saveNote',
         'toggleDiscussion',
+        'removePlaceholderNotes',
       ]),
       componentName(note) {
         if (note.isPlaceholderNote) {
@@ -126,7 +127,15 @@
             this.isReplying = false;
             this.resetAutoSave();
           })
-          .catch(() => Flash('Something went wrong while adding your reply. Please try again.'));
+          .catch(() => {
+            Flash(
+              'Your comment could not be submitted! Please check your network connection and try again.',
+              'alert',
+              $(this.$el),
+            );
+            this.removePlaceholderNotes();
+            this.$refs.noteForm.isSubmitting = false;
+          });
       },
     },
     mounted() {
@@ -191,7 +200,6 @@
                     :key="note.id"
                     />
                 </ul>
-                <div class="flash-container"></div>
                 <div
                   :class="{ 'is-replying': isReplying }"
                   class="discussion-reply-holder">
diff --git a/app/assets/javascripts/notes/stores/actions.js b/app/assets/javascripts/notes/stores/actions.js
index 7ddaadd648e..13cd74bfa1c 100644
--- a/app/assets/javascripts/notes/stores/actions.js
+++ b/app/assets/javascripts/notes/stores/actions.js
@@ -57,6 +57,9 @@ export const createNewNote = ({ commit }, { endpoint, data }) => service
     return res;
   });
 
+export const removePlaceholderNotes = ({ commit }) =>
+  commit(types.REMOVE_PLACEHOLDER_NOTES);
+
 export const saveNote = ({ commit, dispatch }, noteData) => {
   const { note } = noteData.data.note;
   let placeholderText = note;
@@ -127,14 +130,6 @@ export const saveNote = ({ commit, dispatch }, noteData) => {
       commit(types.REMOVE_PLACEHOLDER_NOTES);
 
       return res;
-    })
-    .catch(() => {
-      Flash(
-        'Your comment could not be submitted! Please check your network connection and try again.',
-        'alert',
-        $(noteData.flashContainer),
-      );
-      commit(types.REMOVE_PLACEHOLDER_NOTES);
     });
 };