IssueNotesRefactor: Hide note reply form when submitted and show it again if there is an error.

1 files changed, 11 insertions, 9 deletions

diff --git a/app/assets/javascripts/notes/components/issue_discussion.vue b/app/assets/javascripts/notes/components/issue_discussion.vue
index 6fdc85e52e3..b131ef4b182 100644
--- a/app/assets/javascripts/notes/components/issue_discussion.vue
+++ b/app/assets/javascripts/notes/components/issue_discussion.vue
@@ -110,7 +110,7 @@
         this.resetAutoSave();
         this.isReplying = false;
       },
-      saveReply(noteText) {
+      saveReply(noteText, form, callback) {
         const replyData = {
           endpoint: this.newNotePath,
           flashContainer: this.$el,
@@ -121,20 +121,22 @@
             note: { note: noteText },
           },
         };
+        this.isReplying = false;
 
         this.saveNote(replyData)
           .then(() => {
-            this.isReplying = false;
             this.resetAutoSave();
+            callback();
           })
-          .catch(() => {
-            Flash(
-              'Your comment could not be submitted! Please check your network connection and try again.',
-              'alert',
-              $(this.$el),
-            );
+          .catch((err) => {
             this.removePlaceholderNotes();
-            this.$refs.noteForm.isSubmitting = false;
+            this.isReplying = true;
+            this.$nextTick(() => {
+              const msg = 'Your comment could not be submitted! Please check your network connection and try again.';
+              Flash(msg, 'alert', $(this.$el));
+              this.$refs.noteForm.note = noteText;
+              callback(err);
+            });
           });
       },
     },