animate adding issue to boards

fix some false positive tests for board_new_issue

4 files changed, 20 insertions, 4 deletions

diff --git a/app/assets/javascripts/boards/components/board_list.js b/app/assets/javascripts/boards/components/board_list.js
index 7ee2696e720..bebca17fb1e 100644
--- a/app/assets/javascripts/boards/components/board_list.js
+++ b/app/assets/javascripts/boards/components/board_list.js
@@ -57,6 +57,9 @@ export default {
     scrollTop() {
       return this.$refs.list.scrollTop + this.listHeight();
     },
+    scrollToTop() {
+      this.$refs.list.scrollTop = 0;
+    },
     loadNextPage() {
       const getIssues = this.list.nextPage();
       const loadingDone = () => {
@@ -108,6 +111,7 @@ export default {
   },
   created() {
     eventHub.$on(`hide-issue-form-${this.list.id}`, this.toggleForm);
+    eventHub.$on(`scroll-board-list-${this.list.id}`, this.scrollToTop);
   },
   mounted() {
     const options = gl.issueBoards.getBoardSortableDefaultOptions({
@@ -150,6 +154,7 @@ export default {
   },
   beforeDestroy() {
     eventHub.$off(`hide-issue-form-${this.list.id}`, this.toggleForm);
+    eventHub.$off(`scroll-board-list-${this.list.id}`, this.scrollToTop);
     this.$refs.list.removeEventListener('scroll', this.onScroll);
   },
   template: `
@@ -160,9 +165,11 @@ export default {
         v-if="loading">
         <loading-icon />
       </div>
-      <board-new-issue
-        :list="list"
-        v-if="list.type !== 'closed' && showIssueForm"/>
+      <transition name="slide-down">
+        <board-new-issue
+          :list="list"
+          v-if="list.type !== 'closed' && showIssueForm"/>
+      </transition>
       <ul
         class="board-list"
         v-show="!loading"
diff --git a/app/assets/javascripts/boards/components/board_new_issue.js b/app/assets/javascripts/boards/components/board_new_issue.js
index 1ce95b62138..b1c47b09c35 100644
--- a/app/assets/javascripts/boards/components/board_new_issue.js
+++ b/app/assets/javascripts/boards/components/board_new_issue.js
@@ -48,6 +48,7 @@ export default {
           this.error = true;
         });
 
+      eventHub.$emit(`scroll-board-list-${this.list.id}`);
       this.cancel();
     },
     cancel() {
@@ -75,6 +76,7 @@ export default {
           type="text"
           v-model="title"
           ref="input"
+          autocomplete="off"
           :id="list.id + '-title'" />
         <div class="clearfix prepend-top-10">
           <button class="btn btn-success pull-left"
diff --git a/app/assets/javascripts/boards/models/list.js b/app/assets/javascripts/boards/models/list.js
index 90561d0f7a8..8514e7df1d3 100644
--- a/app/assets/javascripts/boards/models/list.js
+++ b/app/assets/javascripts/boards/models/list.js
@@ -103,13 +103,19 @@ class List {
   }
 
   newIssue (issue) {
-    this.addIssue(issue);
+    this.addIssue(issue, null, 0);
     this.issuesSize += 1;
 
     return gl.boardService.newIssue(this.id, issue)
       .then((resp) => {
         const data = resp.json();
         issue.id = data.iid;
+      })
+      .then(() => {
+        if (this.issuesSize > 1) {
+          const moveBeforeIid = this.issues[1].id;
+          gl.boardService.moveIssue(issue.id, null, null, null, moveBeforeIid);
+        }
       });
   }
 
diff --git a/app/assets/javascripts/boards/stores/boards_store.js b/app/assets/javascripts/boards/stores/boards_store.js
index ad9997ac334..7bddcdc3c1d 100644
--- a/app/assets/javascripts/boards/stores/boards_store.js
+++ b/app/assets/javascripts/boards/stores/boards_store.js
@@ -22,6 +22,7 @@ gl.issueBoards.BoardsStore = {
   create () {
     this.state.lists = [];
     this.filter.path = gl.utils.getUrlParamsArray().join('&');
+    this.detail = { issue: {} };
   },
   addList (listObj, defaultAvatar) {
     const list = new List(listObj, defaultAvatar);