4 files changed, 31 insertions, 25 deletions

diff --git a/app/assets/javascripts/boards/components/board_card.js b/app/assets/javascripts/boards/components/board_card.vue
index 079fb6438b9..0b220a56e0b 100644
--- a/app/assets/javascripts/boards/components/board_card.js
+++ b/app/assets/javascripts/boards/components/board_card.vue
@@ -1,25 +1,11 @@
+<script>
 import './issue_card_inner';
+import eventHub from '../eventhub';
 
 const Store = gl.issueBoards.BoardsStore;
 
 export default {
   name: 'BoardsIssueCard',
-  template: `
-    <li class="card"
-      :class="{ 'user-can-drag': !disabled && issue.id, 'is-disabled': disabled || !issue.id, 'is-active': issueDetailVisible }"
-      :index="index"
-      :data-issue-id="issue.id"
-      @mousedown="mouseDown"
-      @mousemove="mouseMove"
-      @mouseup="showIssue($event)">
-      <issue-card-inner
-        :list="list"
-        :issue="issue"
-        :issue-link-base="issueLinkBase"
-        :root-path="rootPath"
-        :update-filters="true" />
-    </li>
-  `,
   components: {
     'issue-card-inner': gl.issueBoards.IssueCardInner,
   },
@@ -56,12 +42,30 @@ export default {
         this.showDetail = false;
 
         if (Store.detail.issue && Store.detail.issue.id === this.issue.id) {
-          Store.detail.issue = {};
+          eventHub.$emit('clearDetailIssue');
         } else {
-          Store.detail.issue = this.issue;
+          eventHub.$emit('newDetailIssue', this.issue);
           Store.detail.list = this.list;
         }
       }
     },
   },
 };
+</script>
+
+<template>
+  <li class="card"
+    :class="{ 'user-can-drag': !disabled && issue.id, 'is-disabled': disabled || !issue.id, 'is-active': issueDetailVisible }"
+    :index="index"
+    :data-issue-id="issue.id"
+    @mousedown="mouseDown"
+    @mousemove="mouseMove"
+    @mouseup="showIssue($event)">
+    <issue-card-inner
+      :list="list"
+      :issue="issue"
+      :issue-link-base="issueLinkBase"
+      :root-path="rootPath"
+      :update-filters="true" />
+  </li>
+</template>
diff --git a/app/assets/javascripts/boards/components/board_list.js b/app/assets/javascripts/boards/components/board_list.js
index 6159680f1e6..29aeb8e84aa 100644
--- a/app/assets/javascripts/boards/components/board_list.js
+++ b/app/assets/javascripts/boards/components/board_list.js
@@ -1,6 +1,6 @@
 /* global Sortable */
 import boardNewIssue from './board_new_issue';
-import boardCard from './board_card';
+import boardCard from './board_card.vue';
 import eventHub from '../eventhub';
 import loadingIcon from '../../vue_shared/components/loading_icon.vue';
 
diff --git a/app/assets/javascripts/boards/components/board_sidebar.js b/app/assets/javascripts/boards/components/board_sidebar.js
index 9ae5e270a4b..faa76da964f 100644
--- a/app/assets/javascripts/boards/components/board_sidebar.js
+++ b/app/assets/javascripts/boards/components/board_sidebar.js
@@ -5,12 +5,13 @@
 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 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';
+import subscriptions from '../../sidebar/components/subscriptions/subscriptions.vue';
 
 const Store = gl.issueBoards.BoardsStore;
 
@@ -117,11 +118,11 @@ gl.issueBoards.BoardSidebar = Vue.extend({
     new DueDateSelectors();
     new LabelsSelect();
     new Sidebar();
-    gl.Subscription.bindAll('.subscription');
   },
   components: {
+    assigneeTitle,
+    assignees,
     removeBtn: gl.issueBoards.RemoveIssueBtn,
-    'assignee-title': AssigneeTitle,
-    assignees: Assignees,
+    subscriptions,
   },
 });
diff --git a/app/assets/javascripts/boards/components/modal/footer.js b/app/assets/javascripts/boards/components/modal/footer.js
index de9e44cef35..182957113a2 100644
--- a/app/assets/javascripts/boards/components/modal/footer.js
+++ b/app/assets/javascripts/boards/components/modal/footer.js
@@ -3,6 +3,7 @@
 import Vue from 'vue';
 import Flash from '../../../flash';
 import './lists_dropdown';
+import { pluralize } from '../../../lib/utils/text_utility';
 
 const ModalStore = gl.issueBoards.ModalStore;
 
@@ -21,7 +22,7 @@ gl.issueBoards.ModalFooter = Vue.extend({
     submitText() {
       const count = ModalStore.selectedCount();
 
-      return `Add ${count > 0 ? count : ''} ${gl.text.pluralize('issue', count)}`;
+      return `Add ${count > 0 ? count : ''} ${pluralize('issue', count)}`;
     },
   },
   methods: {