Added remove button

5 files changed, 77 insertions, 2 deletions

diff --git a/app/assets/javascripts/boards/components/board_card.js.es6 b/app/assets/javascripts/boards/components/board_card.js.es6
index ab4226ded1d..037100c0859 100644
--- a/app/assets/javascripts/boards/components/board_card.js.es6
+++ b/app/assets/javascripts/boards/components/board_card.js.es6
@@ -50,6 +50,7 @@
             Store.detail.issue = {};
           } else {
             Store.detail.issue = this.issue;
+            Store.detail.list = this.list;
           }
         }
       }
diff --git a/app/assets/javascripts/boards/components/board_sidebar.js.es6 b/app/assets/javascripts/boards/components/board_sidebar.js.es6
index 75dfcb66bb0..e5937c178f2 100644
--- a/app/assets/javascripts/boards/components/board_sidebar.js.es6
+++ b/app/assets/javascripts/boards/components/board_sidebar.js.es6
@@ -4,6 +4,7 @@
 /* global MilestoneSelect */
 /* global LabelsSelect */
 /* global Sidebar */
+//= require ./sidebar/remove_issue
 
 (() => {
   const Store = gl.issueBoards.BoardsStore;
@@ -18,7 +19,8 @@
     data() {
       return {
         detail: Store.detail,
-        issue: {}
+        issue: {},
+        list: {},
       };
     },
     computed: {
@@ -36,6 +38,7 @@
           }
 
           this.issue = this.detail.issue;
+          this.list = this.detail.list;
         },
         deep: true
       },
@@ -60,6 +63,9 @@
       new LabelsSelect();
       new Sidebar();
       gl.Subscription.bindAll('.subscription');
-    }
+    },
+    components: {
+      'remove-btn': gl.issueBoards.RemoveIssueBtn,
+    },
   });
 })();
diff --git a/app/assets/javascripts/boards/components/sidebar/remove_issue.js.es6 b/app/assets/javascripts/boards/components/sidebar/remove_issue.js.es6
new file mode 100644
index 00000000000..3f965b7b9b2
--- /dev/null
+++ b/app/assets/javascripts/boards/components/sidebar/remove_issue.js.es6
@@ -0,0 +1,34 @@
+/* global Vue */
+(() => {
+  const Store = gl.issueBoards.BoardsStore;
+
+  window.gl = window.gl || {};
+  window.gl.issueBoards = window.gl.issueBoards || {};
+
+  gl.issueBoards.RemoveIssueBtn = Vue.extend({
+    props: [
+      'issue', 'list',
+    ],
+    methods: {
+      removeIssue() {
+        const doneList = Store.findList('type', 'done', false);
+
+        Store.moveIssueToList(this.list, doneList, this.issue, 0);
+
+        Store.detail.issue = {};
+      },
+    },
+    template: `
+      <div
+        class="block list"
+        v-if="list.type !== 'done'">
+        <button
+          class="btn btn-default btn-block"
+          type="button"
+          @click="removeIssue">
+          Remove from board
+        </button>
+      </div>
+    `,
+  });
+})();
diff --git a/app/views/projects/boards/components/_sidebar.html.haml b/app/views/projects/boards/components/_sidebar.html.haml
index df7fa9ddaf2..24d76da6f06 100644
--- a/app/views/projects/boards/components/_sidebar.html.haml
+++ b/app/views/projects/boards/components/_sidebar.html.haml
@@ -22,3 +22,5 @@
           = render "projects/boards/components/sidebar/due_date"
           = render "projects/boards/components/sidebar/labels"
           = render "projects/boards/components/sidebar/notifications"
+          %remove-btn{ ":issue" => "issue",
+            ":list" => "list" }
diff --git a/spec/features/boards/sidebar_spec.rb b/spec/features/boards/sidebar_spec.rb
index a0f32d2ab76..ea135d0cc95 100644
--- a/spec/features/boards/sidebar_spec.rb
+++ b/spec/features/boards/sidebar_spec.rb
@@ -70,6 +70,38 @@ describe 'Issue Boards', feature: true, js: true do
     end
   end
 
+  it 'removes card from board when clicking remove button' do
+    page.within(first('.board')) do
+      first('.card').click
+    end
+
+    page.within('.issue-boards-sidebar') do
+      click_button 'Remove from board'
+    end
+
+    page.within(first('.board')) do
+      expect(page).to have_selector('.card', count: 1)
+    end
+  end
+
+  it 'does not show remove issue button when issue is closed' do
+    page.within(first('.board')) do
+      first('.card').click
+    end
+
+    page.within('.issue-boards-sidebar') do
+      click_button 'Remove from board'
+    end
+
+    page.within(find('.board:nth-child(2)')) do
+      first('.card').click
+    end
+
+    page.within('.issue-boards-sidebar') do
+      expect(page).not_to have_button 'Remove from board'
+    end
+  end
+
   context 'assignee' do
     it 'updates the issues assignee' do
       page.within(first('.board')) do