From 103c78f18c0642c36a6093508707b82eb8d1dd77 Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Tue, 31 Jan 2017 14:35:53 +0000
Subject: [PATCH] Removes labels instead of closing issue when clicking remove
 button

---
 .../javascripts/boards/boards_bundle.js.es6   |  3 ++-
 .../components/modal/empty_state.js.es6       |  2 +-
 .../boards/components/modal/footer.js.es6     | 10 ++--------
 .../boards/components/modal/header.js.es6     |  2 +-
 .../boards/components/modal/index.js.es6      |  5 +++--
 .../components/sidebar/remove_issue.js.es6    | 13 +++++++++++--
 .../boards/services/board_service.js.es6      | 19 +++++++++++++++++--
 app/helpers/boards_helper.rb                  |  1 +
 app/views/projects/boards/_show.html.haml     |  1 -
 9 files changed, 38 insertions(+), 18 deletions(-)

diff --git a/app/assets/javascripts/boards/boards_bundle.js.es6 b/app/assets/javascripts/boards/boards_bundle.js.es6
index 1cce580df79..81df823cad1 100644
--- a/app/assets/javascripts/boards/boards_bundle.js.es6
+++ b/app/assets/javascripts/boards/boards_bundle.js.es6
@@ -45,6 +45,7 @@ $(() => {
       disabled: $boardApp.dataset.disabled === 'true',
       issueLinkBase: $boardApp.dataset.issueLinkBase,
       rootPath: $boardApp.dataset.rootPath,
+      bulkUpdatePath: $boardApp.dataset.bulkUpdatePath,
       detailIssue: Store.detail
     },
     computed: {
@@ -53,7 +54,7 @@ $(() => {
       },
     },
     created () {
-      gl.boardService = new BoardService(this.endpoint, this.boardId);
+      gl.boardService = new BoardService(this.endpoint, this.bulkUpdatePath, this.boardId);
     },
     mounted () {
       Store.disabled = this.disabled;
diff --git a/app/assets/javascripts/boards/components/modal/empty_state.js.es6 b/app/assets/javascripts/boards/components/modal/empty_state.js.es6
index c5137d966e2..93d250e07f5 100644
--- a/app/assets/javascripts/boards/components/modal/empty_state.js.es6
+++ b/app/assets/javascripts/boards/components/modal/empty_state.js.es6
@@ -44,7 +44,7 @@
                 :href="newIssuePath"
                 class="btn btn-success btn-inverted"
                 v-if="activeTab === 'all'">
-                Create issue
+                New issue
               </a>
               <button
                 type="button"
diff --git a/app/assets/javascripts/boards/components/modal/footer.js.es6 b/app/assets/javascripts/boards/components/modal/footer.js.es6
index 2ed81abe625..4c0f21fa1d6 100644
--- a/app/assets/javascripts/boards/components/modal/footer.js.es6
+++ b/app/assets/javascripts/boards/components/modal/footer.js.es6
@@ -4,9 +4,6 @@
   const ModalStore = gl.issueBoards.ModalStore;
 
   gl.issueBoards.ModalFooter = Vue.extend({
-    props: [
-      'bulkUpdatePath',
-    ],
     data() {
       return ModalStore.store;
     },
@@ -30,11 +27,8 @@
         const issueIds = selectedIssues.map(issue => issue.globalId);
 
         // Post the data to the backend
-        this.$http.post(this.bulkUpdatePath, {
-          update: {
-            issuable_ids: issueIds.join(','),
-            add_label_ids: [list.label.id],
-          },
+        gl.boardService.bulkUpdate(issueIds, {
+          add_label_ids: [list.label.id],
         });
 
         // Add the issues on the frontend
diff --git a/app/assets/javascripts/boards/components/modal/header.js.es6 b/app/assets/javascripts/boards/components/modal/header.js.es6
index 8024e89a29b..4a1845e4580 100644
--- a/app/assets/javascripts/boards/components/modal/header.js.es6
+++ b/app/assets/javascripts/boards/components/modal/header.js.es6
@@ -13,7 +13,7 @@
           return 'Select all';
         }
 
-        return 'Un-select all';
+        return 'Deselect all';
       },
     },
     methods: {
diff --git a/app/assets/javascripts/boards/components/modal/index.js.es6 b/app/assets/javascripts/boards/components/modal/index.js.es6
index 4536f5cfe6f..612657753d5 100644
--- a/app/assets/javascripts/boards/components/modal/index.js.es6
+++ b/app/assets/javascripts/boards/components/modal/index.js.es6
@@ -9,7 +9,7 @@
 
   gl.issueBoards.IssuesModal = Vue.extend({
     props: [
-      'blankStateImage', 'newIssuePath', 'bulkUpdatePath', 'issueLinkBase',
+      'blankStateImage', 'newIssuePath', 'issueLinkBase',
       'rootPath',
     ],
     data() {
@@ -33,6 +33,7 @@
         } else if (!this.showAddIssuesModal) {
           this.issues = [];
           this.selectedIssues = [];
+          this.issuesCount = false;
         }
       },
     },
@@ -101,7 +102,7 @@
               <i class="fa fa-spinner fa-spin"></i>
             </div>
           </section>
-          <modal-footer :bulk-update-path="bulkUpdatePath"></modal-footer>
+          <modal-footer></modal-footer>
         </div>
       </div>
     `,
diff --git a/app/assets/javascripts/boards/components/sidebar/remove_issue.js.es6 b/app/assets/javascripts/boards/components/sidebar/remove_issue.js.es6
index 3f965b7b9b2..70f7da17d49 100644
--- a/app/assets/javascripts/boards/components/sidebar/remove_issue.js.es6
+++ b/app/assets/javascripts/boards/components/sidebar/remove_issue.js.es6
@@ -11,9 +11,18 @@
     ],
     methods: {
       removeIssue() {
-        const doneList = Store.findList('type', 'done', false);
+        const lists = this.issue.getLists();
+        const labelIds = lists.map(list => list.label.id);
 
-        Store.moveIssueToList(this.list, doneList, this.issue, 0);
+        // Post the remove data
+        gl.boardService.bulkUpdate([this.issue.globalId], {
+          remove_label_ids: labelIds,
+        });
+
+        // Remove from the frontend store
+        lists.forEach((list) => {
+          list.removeIssue(this.issue);
+        });
 
         Store.detail.issue = {};
       },
diff --git a/app/assets/javascripts/boards/services/board_service.js.es6 b/app/assets/javascripts/boards/services/board_service.js.es6
index ad58abdcb45..065e90518df 100644
--- a/app/assets/javascripts/boards/services/board_service.js.es6
+++ b/app/assets/javascripts/boards/services/board_service.js.es6
@@ -2,7 +2,7 @@
 /* global Vue */
 
 class BoardService {
-  constructor (root, boardId) {
+  constructor (root, bulkUpdatePath, boardId) {
     this.boards = Vue.resource(`${root}{/id}.json`, {}, {
       issues: {
         method: 'GET',
@@ -16,7 +16,12 @@ class BoardService {
       }
     });
     this.issue = Vue.resource(`${root}/${boardId}/issues{/id}`, {});
-    this.issues = Vue.resource(`${root}/${boardId}/lists{/id}/issues`, {});
+    this.issues = Vue.resource(`${root}/${boardId}/lists{/id}/issues`, {}, {
+      bulkUpdate: {
+        method: 'POST',
+        url: bulkUpdatePath,
+      },
+    });
 
     Vue.http.interceptors.push((request, next) => {
       request.headers['X-CSRF-Token'] = $.rails.csrfToken();
@@ -75,6 +80,16 @@ class BoardService {
   getBacklog(data) {
     return this.boards.issues(data);
   }
+
+  bulkUpdate(issueIds, extraData = {}) {
+    const data = {
+      update: Object.assign(extraData, {
+        issuable_ids: issueIds.join(','),
+      }),
+    };
+
+    return this.issues.bulkUpdate(data);
+  }
 }
 
 window.BoardService = BoardService;
diff --git a/app/helpers/boards_helper.rb b/app/helpers/boards_helper.rb
index 0b1b79ce15b..f43827da446 100644
--- a/app/helpers/boards_helper.rb
+++ b/app/helpers/boards_helper.rb
@@ -8,6 +8,7 @@ module BoardsHelper
       disabled: "#{!can?(current_user, :admin_list, @project)}",
       issue_link_base: namespace_project_issues_path(@project.namespace, @project),
       root_path: root_path,
+      bulk_update_path: bulk_update_namespace_project_issues_path(@project.namespace, @project),
     }
   end
 end
diff --git a/app/views/projects/boards/_show.html.haml b/app/views/projects/boards/_show.html.haml
index a35f0ab557d..13bc20f2ae2 100644
--- a/app/views/projects/boards/_show.html.haml
+++ b/app/views/projects/boards/_show.html.haml
@@ -29,6 +29,5 @@
   = render "projects/boards/components/sidebar"
   %board-add-issues-modal{ "blank-state-image" => render('shared/empty_states/icons/issues.svg'),
     "new-issue-path" => new_namespace_project_issue_path(@project.namespace, @project),
-    "bulk-update-path" => bulk_update_namespace_project_issues_path(@project.namespace, @project),
     ":issue-link-base" => "issueLinkBase",
     ":root-path" => "rootPath" }