Merge branch 'master' into go-go-gadget-webpack

* master: (181 commits)
  Fixed adding to list bug
  Remove unnecessary queries for .atom and .json in Dashboard::ProjectsController#index
  Fixed modal lists dropdown not updating when list is deleted
  Fixed remove btn error after creating new issue in list
  Removed duplicated test
  Removed Masonry, instead uses groups of data
  Uses mixins for repeated functions
  Fixed up specs
  Props use objects with required & type values
  Removes labels instead of closing issue when clicking remove button
  Fixed JS lint errors
  Fixed issue card spec
  Added webkit CSS properties
  Fixed bug with empty state showing after search Fixed users href path being incorrect
  Fixed bug where 2 un-selected issues would stay on selected tab
  Fixed DB schema Changed how components are added in objects
  Added remove button
  Add optional id property to the issue schema
  Fixed issue link href
  Disabled add issues button if no lists exist
  ...

5 files changed, 327 insertions, 19 deletions

diff --git a/spec/javascripts/boards/boards_store_spec.js.es6 b/spec/javascripts/boards/boards_store_spec.js.es6
index 4f1d8968521..9dd741a680b 100644
--- a/spec/javascripts/boards/boards_store_spec.js.es6
+++ b/spec/javascripts/boards/boards_store_spec.js.es6
@@ -18,7 +18,7 @@ require('./mock_data');
 describe('Store', () => {
   beforeEach(() => {
     Vue.http.interceptors.push(boardsMockInterceptor);
-    gl.boardService = new BoardService('/test/issue-boards/board', '1');
+    gl.boardService = new BoardService('/test/issue-boards/board', '', '1');
     gl.issueBoards.BoardsStore.create();
 
     Cookies.set('issue_board_welcome_hidden', 'false', {
@@ -56,18 +56,6 @@ describe('Store', () => {
       expect(list).toBeDefined();
     });
 
-    it('finds list limited by type', () => {
-      gl.issueBoards.BoardsStore.addList({
-        id: 1,
-        position: 0,
-        title: 'Test',
-        list_type: 'backlog'
-      });
-      const list = gl.issueBoards.BoardsStore.findList('id', 1, 'backlog');
-
-      expect(list).toBeDefined();
-    });
-
     it('gets issue when new list added', (done) => {
       gl.issueBoards.BoardsStore.addList(listObj);
       const list = gl.issueBoards.BoardsStore.findList('id', 1);
@@ -112,10 +100,7 @@ describe('Store', () => {
       expect(gl.issueBoards.BoardsStore.shouldAddBlankState()).toBe(false);
     });
 
-    it('check for blank state adding when backlog & done list exist', () => {
-      gl.issueBoards.BoardsStore.addList({
-        list_type: 'backlog'
-      });
+    it('check for blank state adding when done list exist', () => {
       gl.issueBoards.BoardsStore.addList({
         list_type: 'done'
       });
diff --git a/spec/javascripts/boards/issue_card_spec.js.es6 b/spec/javascripts/boards/issue_card_spec.js.es6
new file mode 100644
index 00000000000..4340a571017
--- /dev/null
+++ b/spec/javascripts/boards/issue_card_spec.js.es6
@@ -0,0 +1,191 @@
+/* global Vue */
+/* global ListUser */
+/* global ListLabel */
+/* global listObj */
+/* global ListIssue */
+
+require('~/boards/models/issue');
+require('~/boards/models/label');
+require('~/boards/models/list');
+require('~/boards/models/user');
+require('~/boards/stores/boards_store');
+require('~/boards/components/issue_card_inner');
+require('./mock_data');
+
+describe('Issue card component', () => {
+  const user = new ListUser({
+    id: 1,
+    name: 'testing 123',
+    username: 'test',
+    avatar: 'test_image',
+  });
+  const label1 = new ListLabel({
+    id: 3,
+    title: 'testing 123',
+    color: 'blue',
+    text_color: 'white',
+    description: 'test',
+  });
+  let component;
+  let issue;
+  let list;
+
+  beforeEach(() => {
+    setFixtures('<div class="test-container"></div>');
+
+    list = listObj;
+    issue = new ListIssue({
+      title: 'Testing',
+      iid: 1,
+      confidential: false,
+      labels: [list.label],
+    });
+
+    component = new Vue({
+      el: document.querySelector('.test-container'),
+      data() {
+        return {
+          list,
+          issue,
+          issueLinkBase: '/test',
+          rootPath: '/',
+        };
+      },
+      components: {
+        'issue-card': gl.issueBoards.IssueCardInner,
+      },
+      template: `
+        <issue-card
+          :issue="issue"
+          :list="list"
+          :issue-link-base="issueLinkBase"
+          :root-path="rootPath"></issue-card>
+      `,
+    });
+  });
+
+  it('renders issue title', () => {
+    expect(
+      component.$el.querySelector('.card-title').textContent,
+    ).toContain(issue.title);
+  });
+
+  it('includes issue base in link', () => {
+    expect(
+      component.$el.querySelector('.card-title a').getAttribute('href'),
+    ).toContain('/test');
+  });
+
+  it('includes issue title on link', () => {
+    expect(
+      component.$el.querySelector('.card-title a').getAttribute('title'),
+    ).toBe(issue.title);
+  });
+
+  it('does not render confidential icon', () => {
+    expect(
+      component.$el.querySelector('.fa-eye-flash'),
+    ).toBeNull();
+  });
+
+  it('renders confidential icon', (done) => {
+    component.issue.confidential = true;
+
+    setTimeout(() => {
+      expect(
+        component.$el.querySelector('.confidential-icon'),
+      ).not.toBeNull();
+      done();
+    }, 0);
+  });
+
+  it('renders issue ID with #', () => {
+    expect(
+      component.$el.querySelector('.card-number').textContent,
+    ).toContain(`#${issue.id}`);
+  });
+
+  describe('assignee', () => {
+    it('does not render assignee', () => {
+      expect(
+        component.$el.querySelector('.card-assignee'),
+      ).toBeNull();
+    });
+
+    describe('exists', () => {
+      beforeEach((done) => {
+        component.issue.assignee = user;
+
+        setTimeout(() => {
+          done();
+        }, 0);
+      });
+
+      it('renders assignee', () => {
+        expect(
+          component.$el.querySelector('.card-assignee'),
+        ).not.toBeNull();
+      });
+
+      it('sets title', () => {
+        expect(
+          component.$el.querySelector('.card-assignee').getAttribute('title'),
+        ).toContain(`Assigned to ${user.name}`);
+      });
+
+      it('sets users path', () => {
+        expect(
+          component.$el.querySelector('.card-assignee').getAttribute('href'),
+        ).toBe('/test');
+      });
+
+      it('renders avatar', () => {
+        expect(
+          component.$el.querySelector('.card-assignee img'),
+        ).not.toBeNull();
+      });
+    });
+  });
+
+  describe('labels', () => {
+    it('does not render any', () => {
+      expect(
+        component.$el.querySelector('.label'),
+      ).toBeNull();
+    });
+
+    describe('exists', () => {
+      beforeEach((done) => {
+        component.issue.addLabel(label1);
+
+        setTimeout(() => {
+          done();
+        }, 0);
+      });
+
+      it('does not render list label', () => {
+        expect(
+          component.$el.querySelectorAll('.label').length,
+        ).toBe(1);
+      });
+
+      it('renders label', () => {
+        expect(
+          component.$el.querySelector('.label').textContent,
+        ).toContain(label1.title);
+      });
+
+      it('sets label description as title', () => {
+        expect(
+          component.$el.querySelector('.label').getAttribute('title'),
+        ).toContain(label1.description);
+      });
+
+      it('sets background color of button', () => {
+        expect(
+          component.$el.querySelector('.label').style.backgroundColor,
+        ).toContain(label1.color);
+      });
+    });
+  });
+});
diff --git a/spec/javascripts/boards/issue_spec.js.es6 b/spec/javascripts/boards/issue_spec.js.es6
index 5514f34c828..aab4d9c501e 100644
--- a/spec/javascripts/boards/issue_spec.js.es6
+++ b/spec/javascripts/boards/issue_spec.js.es6
@@ -15,7 +15,7 @@ describe('Issue model', () => {
   let issue;
 
   beforeEach(() => {
-    gl.boardService = new BoardService('/test/issue-boards/board', '1');
+    gl.boardService = new BoardService('/test/issue-boards/board', '', '1');
     gl.issueBoards.BoardsStore.create();
 
     issue = new ListIssue({
diff --git a/spec/javascripts/boards/list_spec.js.es6 b/spec/javascripts/boards/list_spec.js.es6
index 31b49e3e27a..4397a32fedc 100644
--- a/spec/javascripts/boards/list_spec.js.es6
+++ b/spec/javascripts/boards/list_spec.js.es6
@@ -19,7 +19,7 @@ describe('List model', () => {
 
   beforeEach(() => {
     Vue.http.interceptors.push(boardsMockInterceptor);
-    gl.boardService = new BoardService('/test/issue-boards/board', '1');
+    gl.boardService = new BoardService('/test/issue-boards/board', '', '1');
     gl.issueBoards.BoardsStore.create();
 
     list = new List(listObj);
diff --git a/spec/javascripts/boards/modal_store_spec.js.es6 b/spec/javascripts/boards/modal_store_spec.js.es6
new file mode 100644
index 00000000000..1815847f3fa
--- /dev/null
+++ b/spec/javascripts/boards/modal_store_spec.js.es6
@@ -0,0 +1,132 @@
+/* global Vue */
+/* global ListIssue */
+
+require('~/boards/models/issue');
+require('~/boards/models/label');
+require('~/boards/models/list');
+require('~/boards/models/user');
+require('~/boards/stores/modal_store');
+
+describe('Modal store', () => {
+  let issue;
+  let issue2;
+  const Store = gl.issueBoards.ModalStore;
+
+  beforeEach(() => {
+    // Setup default state
+    Store.store.issues = [];
+    Store.store.selectedIssues = [];
+
+    issue = new ListIssue({
+      title: 'Testing',
+      iid: 1,
+      confidential: false,
+      labels: [],
+    });
+    issue2 = new ListIssue({
+      title: 'Testing',
+      iid: 2,
+      confidential: false,
+      labels: [],
+    });
+    Store.store.issues.push(issue);
+    Store.store.issues.push(issue2);
+  });
+
+  it('returns selected count', () => {
+    expect(Store.selectedCount()).toBe(0);
+  });
+
+  it('toggles the issue as selected', () => {
+    Store.toggleIssue(issue);
+
+    expect(issue.selected).toBe(true);
+    expect(Store.selectedCount()).toBe(1);
+  });
+
+  it('toggles the issue as un-selected', () => {
+    Store.toggleIssue(issue);
+    Store.toggleIssue(issue);
+
+    expect(issue.selected).toBe(false);
+    expect(Store.selectedCount()).toBe(0);
+  });
+
+  it('toggles all issues as selected', () => {
+    Store.toggleAll();
+
+    expect(issue.selected).toBe(true);
+    expect(issue2.selected).toBe(true);
+    expect(Store.selectedCount()).toBe(2);
+  });
+
+  it('toggles all issues as un-selected', () => {
+    Store.toggleAll();
+    Store.toggleAll();
+
+    expect(issue.selected).toBe(false);
+    expect(issue2.selected).toBe(false);
+    expect(Store.selectedCount()).toBe(0);
+  });
+
+  it('toggles all if a single issue is selected', () => {
+    Store.toggleIssue(issue);
+    Store.toggleAll();
+
+    expect(issue.selected).toBe(true);
+    expect(issue2.selected).toBe(true);
+    expect(Store.selectedCount()).toBe(2);
+  });
+
+  it('adds issue to selected array', () => {
+    issue.selected = true;
+    Store.addSelectedIssue(issue);
+
+    expect(Store.selectedCount()).toBe(1);
+  });
+
+  it('removes issue from selected array', () => {
+    Store.addSelectedIssue(issue);
+    Store.removeSelectedIssue(issue);
+
+    expect(Store.selectedCount()).toBe(0);
+  });
+
+  it('returns selected issue index if present', () => {
+    Store.toggleIssue(issue);
+
+    expect(Store.selectedIssueIndex(issue)).toBe(0);
+  });
+
+  it('returns -1 if issue is not selected', () => {
+    expect(Store.selectedIssueIndex(issue)).toBe(-1);
+  });
+
+  it('finds the selected issue', () => {
+    Store.toggleIssue(issue);
+
+    expect(Store.findSelectedIssue(issue)).toBe(issue);
+  });
+
+  it('does not find a selected issue', () => {
+    expect(Store.findSelectedIssue(issue)).toBe(undefined);
+  });
+
+  it('does not remove from selected issue if tab is not all', () => {
+    Store.store.activeTab = 'selected';
+
+    Store.toggleIssue(issue);
+    Store.toggleIssue(issue);
+
+    expect(Store.store.selectedIssues.length).toBe(1);
+    expect(Store.selectedCount()).toBe(0);
+  });
+
+  it('gets selected issue array with only selected issues', () => {
+    Store.toggleIssue(issue);
+    Store.toggleIssue(issue2);
+    Store.toggleIssue(issue2);
+
+    expect(Store.getSelectedIssues().length).toBe(1);
+  });
+});