1 files changed, 51 insertions, 32 deletions

diff --git a/app/assets/javascripts/boards/components/board_card.vue b/app/assets/javascripts/boards/components/board_card.vue
index e6009343626..aacea0b970c 100644
--- a/app/assets/javascripts/boards/components/board_card.vue
+++ b/app/assets/javascripts/boards/components/board_card.vue
@@ -1,14 +1,11 @@
 <script>
-import sidebarEventHub from '~/sidebar/event_hub';
-import eventHub from '../eventhub';
-import boardsStore from '../stores/boards_store';
-import BoardCardLayout from './board_card_layout.vue';
-import BoardCardLayoutDeprecated from './board_card_layout_deprecated.vue';
+import { mapActions, mapGetters, mapState } from 'vuex';
+import BoardCardInner from './board_card_inner.vue';
 
 export default {
-  name: 'BoardsIssueCard',
+  name: 'BoardCard',
   components: {
-    BoardCardLayout: gon.features?.graphqlBoardLists ? BoardCardLayout : BoardCardLayoutDeprecated,
+    BoardCardInner,
   },
   props: {
     list: {
@@ -16,34 +13,46 @@ export default {
       default: () => ({}),
       required: false,
     },
-    issue: {
+    item: {
       type: Object,
       default: () => ({}),
       required: false,
     },
+    disabled: {
+      type: Boolean,
+      default: false,
+      required: false,
+    },
+    index: {
+      type: Number,
+      default: 0,
+      required: false,
+    },
   },
-  methods: {
-    // These are methods instead of computed's, because boardsStore is not reactive.
+  computed: {
+    ...mapState(['selectedBoardItems', 'activeId']),
+    ...mapGetters(['isSwimlanesOn']),
     isActive() {
-      return this.getActiveId() === this.issue.id;
+      return this.item.id === this.activeId;
     },
-    getActiveId() {
-      return boardsStore.detail?.issue?.id;
+    multiSelectVisible() {
+      return (
+        !this.activeId &&
+        this.selectedBoardItems.findIndex((boardItem) => boardItem.id === this.item.id) > -1
+      );
     },
-    showIssue({ isMultiSelect }) {
-      // If no issues are opened, close all sidebars first
-      if (!this.getActiveId()) {
-        sidebarEventHub.$emit('sidebar.closeAll');
-      }
-      if (this.isActive()) {
-        eventHub.$emit('clearDetailIssue', isMultiSelect);
+  },
+  methods: {
+    ...mapActions(['toggleBoardItemMultiSelection', 'toggleBoardItem']),
+    toggleIssue(e) {
+      // Don't do anything if this happened on a no trigger element
+      if (e.target.classList.contains('js-no-trigger')) return;
 
-        if (isMultiSelect) {
-          eventHub.$emit('newDetailIssue', this.issue, isMultiSelect);
-        }
+      const isMultiSelect = e.ctrlKey || e.metaKey;
+      if (isMultiSelect) {
+        this.toggleBoardItemMultiSelection(this.item);
       } else {
-        eventHub.$emit('newDetailIssue', this.issue, isMultiSelect);
-        boardsStore.setListDetail(this.list);
+        this.toggleBoardItem({ boardItem: this.item });
       }
     },
   },
@@ -51,12 +60,22 @@ export default {
 </script>
 
 <template>
-  <board-card-layout
+  <li
     data-qa-selector="board_card"
-    :issue="issue"
-    :list="list"
-    :is-active="isActive()"
-    v-bind="$attrs"
-    @show="showIssue"
-  />
+    :class="{
+      'multi-select': multiSelectVisible,
+      'user-can-drag': !disabled && item.id,
+      'is-disabled': disabled || !item.id,
+      'is-active': isActive,
+    }"
+    :index="index"
+    :data-item-id="item.id"
+    :data-item-iid="item.iid"
+    :data-item-path="item.referencePath"
+    data-testid="board_card"
+    class="board-card gl-p-5 gl-rounded-base"
+    @mouseup="toggleIssue($event)"
+  >
+    <board-card-inner :list="list" :item="item" :update-filters="true" />
+  </li>
 </template>