Merge branch '31633-animate-issue' into 'master'

animate adding issue to boards

Closes #31633

See merge request !11785

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"

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"

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);
+        }
       });
   }
 

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);

app/assets/stylesheets/pages/boards.scss

@@ -175,21 +175,53 @@
   }
 }
 
+.slide-down-enter {
+  transform: translateY(-100%);
+}
+
+.slide-down-enter-active {
+  transition: transform $fade-in-duration;
+
+  + .board-list {
+    transform: translateY(-136px);
+    transition: none;
+  }
+}
+
+.slide-down-enter-to {
+  + .board-list {
+    transform: translateY(0);
+    transition: transform $fade-in-duration ease;
+  }
+}
+
+.slide-down-leave {
+  transform: translateY(0);
+}
+
+.slide-down-leave-active {
+  transition: all $fade-in-duration;
+  transform: translateY(-136px);
+
+  + .board-list {
+    transition: transform $fade-in-duration ease;
+    transform: translateY(-136px);
+  }
+}
+
 .board-list-component {
   height: calc(100% - 49px);
+  overflow: hidden;
 }
 
 .board-list {
   height: 100%;
+  width: 100%;
   margin-bottom: 0;
   padding: 5px;
   list-style: none;
   overflow-y: scroll;
   overflow-x: hidden;
-
-  &.is-smaller {
-    height: calc(100% - 136px);
-  }
 }
 
 .board-list-loading {
@@ -351,6 +383,7 @@
 }
 
 .board-new-issue-form {
+  z-index: 1;
   margin: 5px;
 }
 

changelogs/unreleased/31633-animate-issue.yml

+---
+title: animate adding issue to boards
+merge_request:
+author:

spec/javascripts/boards/board_new_issue_spec.js

@@ -19,6 +19,7 @@ describe('Issue boards new issue form', () => {
       };
     },
   };
+
   const submitIssue = () => {
     vm.$el.querySelector('.btn-success').click();
   };
@@ -107,7 +108,7 @@ describe('Issue boards new issue form', () => {
       setTimeout(() => {
         submitIssue();
 
-        expect(vm.$el.querySelector('.btn-success').disbled).not.toBe(true);
+        expect(vm.$el.querySelector('.btn-success').disabled).toBe(false);
         done();
       }, 0);
     });
@@ -115,36 +116,43 @@ describe('Issue boards new issue form', () => {
     it('clears title after submit', (done) => {
       vm.title = 'submit issue';
 
-      setTimeout(() => {
+      Vue.nextTick(() => {
         submitIssue();
 
-        expect(vm.title).toBe('');
-        done();
-      }, 0);
+        setTimeout(() => {
+          expect(vm.title).toBe('');
+          done();
+        }, 0);
+      });
     });
 
-    it('adds new issue to list after submit', (done) => {
+    it('adds new issue to top of list after submit request', (done) => {
       vm.title = 'submit issue';
 
       setTimeout(() => {
         submitIssue();
 
-        expect(list.issues.length).toBe(2);
-        expect(list.issues[1].title).toBe('submit issue');
-        expect(list.issues[1].subscribed).toBe(true);
-        done();
+        setTimeout(() => {
+          expect(list.issues.length).toBe(2);
+          expect(list.issues[0].title).toBe('submit issue');
+          expect(list.issues[0].subscribed).toBe(true);
+          done();
+        }, 0);
       }, 0);
     });
 
     it('sets detail issue after submit', (done) => {
+      expect(gl.issueBoards.BoardsStore.detail.issue.title).toBe(undefined);
       vm.title = 'submit issue';
 
       setTimeout(() => {
         submitIssue();
 
-        expect(gl.issueBoards.BoardsStore.detail.issue.title).toBe('submit issue');
-        done();
-      });
+        setTimeout(() => {
+          expect(gl.issueBoards.BoardsStore.detail.issue.title).toBe('submit issue');
+          done();
+        }, 0);
+      }, 0);
     });
 
     it('sets detail list after submit', (done) => {
@@ -153,8 +161,10 @@ describe('Issue boards new issue form', () => {
       setTimeout(() => {
         submitIssue();
 
-        expect(gl.issueBoards.BoardsStore.detail.list.id).toBe(list.id);
-        done();
+        setTimeout(() => {
+          expect(gl.issueBoards.BoardsStore.detail.list.id).toBe(list.id);
+          done();
+        }, 0);
       }, 0);
     });
   });
@@ -169,13 +179,12 @@ describe('Issue boards new issue form', () => {
         setTimeout(() => {
           expect(list.issues.length).toBe(1);
           done();
-        }, 500);
+        }, 0);
       }, 0);
     });
 
     it('shows error', (done) => {
       vm.title = 'error';
-      submitIssue();
 
       setTimeout(() => {
         submitIssue();
@@ -183,7 +192,7 @@ describe('Issue boards new issue form', () => {
         setTimeout(() => {
           expect(vm.error).toBe(true);
           done();
-        }, 500);
+        }, 0);
       }, 0);
     });
   });