Merge branch 'winh-issue-boards-addList-sort' into 'master'

Sort by position in issue boards store addList()

See merge request gitlab-org/gitlab-ce!28827

4 files changed, 25 insertions, 17 deletions

diff --git a/app/assets/javascripts/boards/components/board_blank_state.vue b/app/assets/javascripts/boards/components/board_blank_state.vue
index 47a46502bff..1cbd31729cd 100644
--- a/app/assets/javascripts/boards/components/board_blank_state.vue
+++ b/app/assets/javascripts/boards/components/board_blank_state.vue
@@ -1,6 +1,5 @@
 <script>
 /* global ListLabel */
-import _ from 'underscore';
 import Cookies from 'js-cookie';
 import boardsStore from '../stores/boards_store';
 
@@ -29,8 +28,6 @@ export default {
         });
       });
 
-      boardsStore.state.lists = _.sortBy(boardsStore.state.lists, 'position');
-
       // Save the labels
       gl.boardService
         .generateDefaultLists()
diff --git a/app/assets/javascripts/boards/index.js b/app/assets/javascripts/boards/index.js
index 25f686e4b28..bc6a3cf212e 100644
--- a/app/assets/javascripts/boards/index.js
+++ b/app/assets/javascripts/boards/index.js
@@ -1,5 +1,4 @@
 import $ from 'jquery';
-import _ from 'underscore';
 import Vue from 'vue';
 
 import Flash from '~/flash';
@@ -106,18 +105,23 @@ export default () => {
       gl.boardService
         .all()
         .then(res => res.data)
-        .then(data => {
-          data.forEach(board => {
-            const list = boardsStore.addList(board, this.defaultAvatar);
-
-            if (list.type === 'closed') {
-              list.position = Infinity;
-            } else if (list.type === 'backlog') {
-              list.position = -1;
+        .then(lists => {
+          lists.forEach(listObj => {
+            let { position } = listObj;
+            if (listObj.list_type === 'closed') {
+              position = Infinity;
+            } else if (listObj.list_type === 'backlog') {
+              position = -1;
             }
-          });
 
-          this.state.lists = _.sortBy(this.state.lists, 'position');
+            boardsStore.addList(
+              {
+                ...listObj,
+                position,
+              },
+              this.defaultAvatar,
+            );
+          });
 
           boardsStore.addBlankState();
           this.loading = false;
diff --git a/app/assets/javascripts/boards/stores/boards_store.js b/app/assets/javascripts/boards/stores/boards_store.js
index fef16c11c0d..05efcbaa3cc 100644
--- a/app/assets/javascripts/boards/stores/boards_store.js
+++ b/app/assets/javascripts/boards/stores/boards_store.js
@@ -45,7 +45,7 @@ const boardsStore = {
   },
   addList(listObj, defaultAvatar) {
     const list = new List(listObj, defaultAvatar);
-    this.state.lists.push(list);
+    this.state.lists = _.sortBy([...this.state.lists, list], 'position');
 
     return list;
   },
@@ -82,8 +82,6 @@ const boardsStore = {
       title: __('Welcome to your Issue Board!'),
       position: 0,
     });
-
-    this.state.lists = _.sortBy(this.state.lists, 'position');
   },
   removeBlankState() {
     this.removeList('blank');
diff --git a/spec/javascripts/boards/boards_store_spec.js b/spec/javascripts/boards/boards_store_spec.js
index 26e851b5641..d3e6eb78e5a 100644
--- a/spec/javascripts/boards/boards_store_spec.js
+++ b/spec/javascripts/boards/boards_store_spec.js
@@ -44,6 +44,15 @@ describe('Store', () => {
     expect(boardsStore.state.lists.length).toBe(0);
   });
 
+  describe('addList', () => {
+    it('sorts by position', () => {
+      boardsStore.addList({ position: 2 });
+      boardsStore.addList({ position: 1 });
+
+      expect(boardsStore.state.lists[0].position).toBe(1);
+    });
+  });
+
   describe('lists', () => {
     it('creates new list without persisting to DB', () => {
       boardsStore.addList(listObj);