Shows error if response returns an errorissue-boards-new-issue

Added validation so the user shouldnt be able to submit the form without the title present

2 files changed, 22 insertions, 2 deletions

diff --git a/app/assets/javascripts/boards/components/board_new_issue.js.es6 b/app/assets/javascripts/boards/components/board_new_issue.js.es6
index 315c16ee242..58cc30b05af 100644
--- a/app/assets/javascripts/boards/components/board_new_issue.js.es6
+++ b/app/assets/javascripts/boards/components/board_new_issue.js.es6
@@ -8,7 +8,8 @@
     },
     data() {
       return {
-        title: ''
+        title: '',
+        error: false
       };
     },
     watch: {
@@ -19,6 +20,10 @@
     methods: {
       submit(e) {
         e.preventDefault();
+        if (this.title.trim() === '') return;
+
+        this.error = false;
+
         const labels = this.list.label ? [this.list.label] : [];
         const issue = new ListIssue({
           title: this.title,
@@ -26,9 +31,21 @@
         });
 
         this.list.newIssue(issue)
-          .then(() => {
+          .then((data) => {
+            // Need this because our jQuery very kindly disables buttons on ALL form submissions
+            $(this.$els.submitButton).enable();
+          })
+          .catch(() => {
             // Need this because our jQuery very kindly disables buttons on ALL form submissions
             $(this.$els.submitButton).enable();
+
+            // Remove issue with no ID
+            const issue = this.list.findIssue(undefined);
+            this.list.removeIssue(issue);
+
+            // Show error message
+            this.error = true;
+            this.showIssueForm = true;
           });
 
         this.cancel();
diff --git a/app/views/projects/boards/components/_board.html.haml b/app/views/projects/boards/components/_board.html.haml
index 26b2236b581..ba1502c97b6 100644
--- a/app/views/projects/boards/components/_board.html.haml
+++ b/app/views/projects/boards/components/_board.html.haml
@@ -46,6 +46,9 @@
             "v-show" => "list.type !== 'done' && showIssueForm" }
             .card.board-new-issue-form
               %form{ "@submit" => "submit($event)" }
+                .flash-container{ "v-if" => "error" }
+                  .flash-alert
+                    An error occured. Please try again.
                 %label.label-light{ ":for" => "list.id + '-title'" }
                   Title
                 %input.form-control{ type: "text",