Merge branch…

app/assets/javascripts/boards/components/board_sidebar.js

@@ -34,7 +34,10 @@ gl.issueBoards.BoardSidebar = Vue.extend({
     },
     milestoneTitle() {
       return this.issue.milestone ? this.issue.milestone.title : 'No Milestone';
-    }
+    },
+    canRemove() {
+      return !this.list.preset;
+    },
   },
   watch: {
     detail: {

app/assets/javascripts/boards/components/sidebar/remove_issue.js

@@ -46,8 +46,7 @@ gl.issueBoards.RemoveIssueBtn = Vue.extend({
   },
   template: `
     <div
-      class="block list"
-      v-if="list.type !== 'closed'">
+      class="block list">
       <button
         class="btn btn-default btn-block"
         type="button"

app/views/projects/boards/components/_sidebar.html.haml

@@ -23,4 +23,5 @@
           = render "projects/boards/components/sidebar/labels"
           = render "projects/boards/components/sidebar/notifications"
           %remove-btn{ ":issue" => "issue",
-            ":list" => "list" }
+            ":list" => "list",
+            "v-if" => "canRemove" }

changelogs/unreleased/34097-issue-board-remove-from-board-button-when-viewing-an-issue-gives-js-error-and-fails.yml

+---
+title: Remove "Remove from board" button from backlog and closed list
+merge_request: 12430
+author:

spec/features/boards/sidebar_spec.rb

@@ -79,6 +79,22 @@ describe 'Issue Boards', feature: true, js: true do
     end
   end
 
+  it 'does not show remove button for backlog or closed issues' do
+    create(:issue, project: project)
+    create(:issue, :closed, project: project)
+
+    visit namespace_project_board_path(project.namespace, project, board)
+    wait_for_requests
+
+    click_card(find('.board:nth-child(1)').first('.card'))
+
+    expect(find('.issue-boards-sidebar')).not_to have_button 'Remove from board'
+
+    click_card(find('.board:nth-child(3)').first('.card'))
+
+    expect(find('.issue-boards-sidebar')).not_to have_button 'Remove from board'
+  end
+
   context 'assignee' do
     it 'updates the issues assignee' do
       click_card(card)