Merge branch 'master' into feature/sm/3691-expose-per-project-pipeline-idfeature/sm/3691-expose-per-project-pipeline-id

10 files changed, 68 insertions, 46 deletions

diff --git a/app/assets/javascripts/boards/components/board_list.js b/app/assets/javascripts/boards/components/board_list.js
index bebca17fb1e..6159680f1e6 100644
--- a/app/assets/javascripts/boards/components/board_list.js
+++ b/app/assets/javascripts/boards/components/board_list.js
@@ -77,7 +77,7 @@ export default {
       this.showIssueForm = !this.showIssueForm;
     },
     onScroll() {
-      if ((this.scrollTop() > this.scrollHeight() - this.scrollOffset) && !this.list.loadingMore) {
+      if (!this.loadingMore && (this.scrollTop() > this.scrollHeight() - this.scrollOffset)) {
         this.loadNextPage();
       }
     },
@@ -165,11 +165,9 @@ export default {
         v-if="loading">
         <loading-icon />
       </div>
-      <transition name="slide-down">
-        <board-new-issue
-          :list="list"
-          v-if="list.type !== 'closed' && showIssueForm"/>
-      </transition>
+      <board-new-issue
+        :list="list"
+        v-if="list.type !== 'closed' && showIssueForm"/>
       <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 4af8b0c7713..bc28f7f45f4 100644
--- a/app/assets/javascripts/boards/components/board_new_issue.js
+++ b/app/assets/javascripts/boards/components/board_new_issue.js
@@ -6,7 +6,10 @@ const Store = gl.issueBoards.BoardsStore;
 export default {
   name: 'BoardNewIssue',
   props: {
-    list: Object,
+    list: {
+      type: Object,
+      required: true,
+    },
   },
   data() {
     return {
@@ -65,7 +68,7 @@ export default {
         <div class="flash-container"
           v-if="error">
           <div class="flash-alert">
-            An error occured. Please try again.
+            An error occurred. Please try again.
           </div>
         </div>
         <label class="label-light"
diff --git a/app/assets/javascripts/boards/components/board_sidebar.js b/app/assets/javascripts/boards/components/board_sidebar.js
index 590b7be36e3..9ae5e270a4b 100644
--- a/app/assets/javascripts/boards/components/board_sidebar.js
+++ b/app/assets/javascripts/boards/components/board_sidebar.js
@@ -1,15 +1,16 @@
 /* eslint-disable comma-dangle, space-before-function-paren, no-new */
-/* global IssuableContext */
 /* global MilestoneSelect */
-/* global LabelsSelect */
 /* global Sidebar */
-/* global Flash */
 
 import Vue from 'vue';
+import Flash from '../../flash';
 import eventHub from '../../sidebar/event_hub';
 import AssigneeTitle from '../../sidebar/components/assignees/assignee_title';
 import Assignees from '../../sidebar/components/assignees/assignees';
+import DueDateSelectors from '../../due_date_select';
 import './sidebar/remove_issue';
+import IssuableContext from '../../issuable_context';
+import LabelsSelect from '../../labels_select';
 
 const Store = gl.issueBoards.BoardsStore;
 
@@ -113,7 +114,7 @@ gl.issueBoards.BoardSidebar = Vue.extend({
   mounted () {
     new IssuableContext(this.currentUser);
     new MilestoneSelect();
-    new gl.DueDateSelectors();
+    new DueDateSelectors();
     new LabelsSelect();
     new Sidebar();
     gl.Subscription.bindAll('.subscription');
diff --git a/app/assets/javascripts/boards/components/issue_card_inner.js b/app/assets/javascripts/boards/components/issue_card_inner.js
index 9a5d87ede7e..bf474879024 100644
--- a/app/assets/javascripts/boards/components/issue_card_inner.js
+++ b/app/assets/javascripts/boards/components/issue_card_inner.js
@@ -64,10 +64,13 @@ gl.issueBoards.IssueCardInner = Vue.extend({
       return this.issue.assignees.length > this.numberOverLimit;
     },
     cardUrl() {
-      return `${this.issueLinkBase}/${this.issue.id}`;
+      return `${this.issueLinkBase}/${this.issue.iid}`;
     },
     issueId() {
-      return `#${this.issue.id}`;
+      if (this.issue.iid) {
+        return `#${this.issue.iid}`;
+      }
+      return false;
     },
     showLabelFooter() {
       return this.issue.labels.find(l => this.showLabel(l)) !== undefined;
@@ -143,7 +146,7 @@ gl.issueBoards.IssueCardInner = Vue.extend({
             :title="issue.title">{{ issue.title }}</a>
           <span
             class="card-number"
-            v-if="issue.id"
+            v-if="issueId"
           >
             {{ issueId }}
           </span>
diff --git a/app/assets/javascripts/boards/components/modal/empty_state.js b/app/assets/javascripts/boards/components/modal/empty_state.js
index 13569df0c20..e571b11a83d 100644
--- a/app/assets/javascripts/boards/components/modal/empty_state.js
+++ b/app/assets/javascripts/boards/components/modal/empty_state.js
@@ -8,11 +8,11 @@ gl.issueBoards.ModalEmptyState = Vue.extend({
     return ModalStore.store;
   },
   props: {
-    image: {
+    newIssuePath: {
       type: String,
       required: true,
     },
-    newIssuePath: {
+    emptyStateSvg: {
       type: String,
       required: true,
     },
@@ -42,7 +42,7 @@ gl.issueBoards.ModalEmptyState = Vue.extend({
     <section class="empty-state">
       <div class="row">
         <div class="col-xs-12 col-sm-6 col-sm-push-6">
-          <aside class="svg-content" v-html="image"></aside>
+          <aside class="svg-content"><img :src="emptyStateSvg"/></aside>
         </div>
         <div class="col-xs-12 col-sm-6 col-sm-pull-6">
           <div class="text-content">
diff --git a/app/assets/javascripts/boards/components/modal/footer.js b/app/assets/javascripts/boards/components/modal/footer.js
index 478a1335b2b..de9e44cef35 100644
--- a/app/assets/javascripts/boards/components/modal/footer.js
+++ b/app/assets/javascripts/boards/components/modal/footer.js
@@ -1,7 +1,7 @@
 /* eslint-disable no-new */
-/* global Flash */
 
 import Vue from 'vue';
+import Flash from '../../../flash';
 import './lists_dropdown';
 
 const ModalStore = gl.issueBoards.ModalStore;
@@ -29,7 +29,7 @@ gl.issueBoards.ModalFooter = Vue.extend({
       const firstListIndex = 1;
       const list = this.modal.selectedList || this.state.lists[firstListIndex];
       const selectedIssues = ModalStore.getSelectedIssues();
-      const issueIds = selectedIssues.map(issue => issue.globalId);
+      const issueIds = selectedIssues.map(issue => issue.id);
 
       // Post the data to the backend
       gl.boardService.bulkUpdate(issueIds, {
diff --git a/app/assets/javascripts/boards/components/modal/index.js b/app/assets/javascripts/boards/components/modal/index.js
index 96af69e7a36..d2044f20ebe 100644
--- a/app/assets/javascripts/boards/components/modal/index.js
+++ b/app/assets/javascripts/boards/components/modal/index.js
@@ -12,11 +12,11 @@ const ModalStore = gl.issueBoards.ModalStore;
 
 gl.issueBoards.IssuesModal = Vue.extend({
   props: {
-    blankStateImage: {
+    newIssuePath: {
       type: String,
       required: true,
     },
-    newIssuePath: {
+    emptyStateSvg: {
       type: String,
       required: true,
     },
@@ -150,14 +150,14 @@ gl.issueBoards.IssuesModal = Vue.extend({
           :label-path="labelPath">
         </modal-header>
         <modal-list
-          :image="blankStateImage"
           :issue-link-base="issueLinkBase"
           :root-path="rootPath"
+          :empty-state-svg="emptyStateSvg"
           v-if="!loading && showList && !filterLoading"></modal-list>
         <empty-state
           v-if="showEmptyState"
-          :image="blankStateImage"
-          :new-issue-path="newIssuePath"></empty-state>
+          :new-issue-path="newIssuePath"
+          :empty-state-svg="emptyStateSvg"></empty-state>
         <section
           class="add-issues-list text-center"
           v-if="loading || filterLoading">
diff --git a/app/assets/javascripts/boards/components/modal/list.js b/app/assets/javascripts/boards/components/modal/list.js
index b4a45feee4d..7c62134b3a3 100644
--- a/app/assets/javascripts/boards/components/modal/list.js
+++ b/app/assets/javascripts/boards/components/modal/list.js
@@ -15,7 +15,7 @@ gl.issueBoards.ModalList = Vue.extend({
       type: String,
       required: true,
     },
-    image: {
+    emptyStateSvg: {
       type: String,
       required: true,
     },
@@ -119,8 +119,8 @@ gl.issueBoards.ModalList = Vue.extend({
         class="empty-state add-issues-empty-state-filter text-center"
         v-if="issuesCount > 0 && issues.length === 0">
         <div
-          class="svg-content"
-          v-html="image">
+          class="svg-content">
+          <img :src="emptyStateSvg"/>
         </div>
         <div class="text-content">
           <h4>
diff --git a/app/assets/javascripts/boards/components/new_list_dropdown.js b/app/assets/javascripts/boards/components/new_list_dropdown.js
index 72bb9e10fbc..c19c989680d 100644
--- a/app/assets/javascripts/boards/components/new_list_dropdown.js
+++ b/app/assets/javascripts/boards/components/new_list_dropdown.js
@@ -1,6 +1,7 @@
-/* eslint-disable comma-dangle, func-names, no-new, space-before-function-paren, one-var,
+/* eslint-disable func-names, no-new, space-before-function-paren, one-var,
    promise/catch-or-return */
 import _ from 'underscore';
+import CreateLabelDropdown from '../../create_label';
 
 window.gl = window.gl || {};
 window.gl.issueBoards = window.gl.issueBoards || {};
@@ -15,19 +16,19 @@ $(document).off('created.label').on('created.label', (e, label) => {
     label: {
       id: label.id,
       title: label.title,
-      color: label.color
-    }
+      color: label.color,
+    },
   });
 });
 
 gl.issueBoards.newListDropdownInit = () => {
   $('.js-new-board-list').each(function () {
     const $this = $(this);
-    new gl.CreateLabelDropdown($this.closest('.dropdown').find('.dropdown-new-label'), $this.data('namespace-path'), $this.data('project-path'));
+    new CreateLabelDropdown($this.closest('.dropdown').find('.dropdown-new-label'), $this.data('namespace-path'), $this.data('project-path'));
 
     $this.glDropdown({
       data(term, callback) {
-        $.get($this.attr('data-labels'))
+        $.get($this.attr('data-list-labels-path'))
           .then((resp) => {
             callback(resp);
           });
@@ -38,17 +39,17 @@ gl.issueBoards.newListDropdownInit = () => {
         const $a = $('<a />', {
           class: (active ? `is-active js-board-list-${active.id}` : ''),
           text: label.title,
-          href: '#'
+          href: '#',
         });
         const $labelColor = $('<span />', {
           class: 'dropdown-label-box',
-          style: `background-color: ${label.color}`
+          style: `background-color: ${label.color}`,
         });
 
         return $li.append($a.prepend($labelColor));
       },
       search: {
-        fields: ['title']
+        fields: ['title'],
       },
       filterable: true,
       selectable: true,
@@ -66,13 +67,13 @@ gl.issueBoards.newListDropdownInit = () => {
             label: {
               id: label.id,
               title: label.title,
-              color: label.color
-            }
+              color: label.color,
+            },
           });
 
           Store.state.lists = _.sortBy(Store.state.lists, 'position');
         }
-      }
+      },
     });
   });
 };
diff --git a/app/assets/javascripts/boards/components/sidebar/remove_issue.js b/app/assets/javascripts/boards/components/sidebar/remove_issue.js
index 6a900d4abd0..1ad97211934 100644
--- a/app/assets/javascripts/boards/components/sidebar/remove_issue.js
+++ b/app/assets/javascripts/boards/components/sidebar/remove_issue.js
@@ -1,7 +1,7 @@
 /* eslint-disable no-new */
-/* global Flash */
 
 import Vue from 'vue';
+import Flash from '../../../flash';
 
 const Store = gl.issueBoards.BoardsStore;
 
@@ -18,17 +18,33 @@ gl.issueBoards.RemoveIssueBtn = Vue.extend({
       type: Object,
       required: true,
     },
+    issueUpdate: {
+      type: String,
+      required: true,
+    },
+  },
+  computed: {
+    updateUrl() {
+      return this.issueUpdate;
+    },
   },
   methods: {
     removeIssue() {
       const issue = this.issue;
       const lists = issue.getLists();
-      const labelIds = lists.map(list => list.label.id);
-
-      // Post the remove data
-      gl.boardService.bulkUpdate([issue.globalId], {
-        remove_label_ids: labelIds,
-      }).catch(() => {
+      const listLabelIds = lists.map(list => list.label.id);
+      let labelIds = this.issue.labels
+        .map(label => label.id)
+        .filter(id => !listLabelIds.includes(id));
+      if (labelIds.length === 0) {
+        labelIds = [''];
+      }
+      const data = {
+        issue: {
+          label_ids: labelIds,
+        },
+      };
+      Vue.http.patch(this.updateUrl, data).catch(() => {
         new Flash('Failed to remove issue from board, please try again.', 'alert');
 
         lists.forEach((list) => {