1 files changed, 22 insertions, 90 deletions

diff --git a/app/assets/javascripts/boards/components/board_card.vue b/app/assets/javascripts/boards/components/board_card.vue
index 246d3b9dcd1..31050eef83d 100644
--- a/app/assets/javascripts/boards/components/board_card.vue
+++ b/app/assets/javascripts/boards/components/board_card.vue
@@ -1,6 +1,5 @@
 <script>
-/* eslint-disable vue/require-default-prop */
-import IssueCardInner from './issue_card_inner.vue';
+import BoardCardLayout from './board_card_layout.vue';
 import eventHub from '../eventhub';
 import sidebarEventHub from '~/sidebar/event_hub';
 import boardsStore from '../stores/boards_store';
@@ -8,7 +7,7 @@ import boardsStore from '../stores/boards_store';
 export default {
   name: 'BoardsIssueCard',
   components: {
-    IssueCardInner,
+    BoardCardLayout,
   },
   props: {
     list: {
@@ -21,80 +20,29 @@ export default {
       default: () => ({}),
       required: false,
     },
-    issueLinkBase: {
-      type: String,
-      default: '',
-      required: false,
-    },
-    disabled: {
-      type: Boolean,
-      default: false,
-      required: false,
-    },
-    index: {
-      type: Number,
-      default: 0,
-      required: false,
-    },
-    rootPath: {
-      type: String,
-      default: '',
-      required: false,
-    },
-    groupId: {
-      type: Number,
-      required: false,
-    },
-  },
-  data() {
-    return {
-      showDetail: false,
-      detailIssue: boardsStore.detail,
-      multiSelect: boardsStore.multiSelect,
-    };
-  },
-  computed: {
-    issueDetailVisible() {
-      return this.detailIssue.issue && this.detailIssue.issue.id === this.issue.id;
-    },
-    multiSelectVisible() {
-      return this.multiSelect.list.findIndex(issue => issue.id === this.issue.id) > -1;
-    },
-    canMultiSelect() {
-      return gon.features && gon.features.multiSelectBoard;
-    },
   },
   methods: {
-    mouseDown() {
-      this.showDetail = true;
+    // These are methods instead of computed's, because boardsStore is not reactive.
+    isActive() {
+      return this.getActiveId() === this.issue.id;
     },
-    mouseMove() {
-      this.showDetail = false;
+    getActiveId() {
+      return boardsStore.detail?.issue?.id;
     },
-    showIssue(e) {
-      if (e.target.classList.contains('js-no-trigger')) return;
-
+    showIssue({ isMultiSelect }) {
       // If no issues are opened, close all sidebars first
-      if (!boardsStore.detail?.issue?.id) {
+      if (!this.getActiveId()) {
         sidebarEventHub.$emit('sidebar.closeAll');
       }
+      if (this.isActive()) {
+        eventHub.$emit('clearDetailIssue', isMultiSelect);
 
-      // If CMD or CTRL is clicked
-      const isMultiSelect = this.canMultiSelect && (e.ctrlKey || e.metaKey);
-
-      if (this.showDetail || isMultiSelect) {
-        this.showDetail = false;
-
-        if (boardsStore.detail.issue && boardsStore.detail.issue.id === this.issue.id) {
-          eventHub.$emit('clearDetailIssue', isMultiSelect);
-
-          if (isMultiSelect) {
-            eventHub.$emit('newDetailIssue', this.issue, isMultiSelect);
-          }
-        } else {
+        if (isMultiSelect) {
           eventHub.$emit('newDetailIssue', this.issue, isMultiSelect);
-          boardsStore.setListDetail(this.list);
         }
+      } else {
+        eventHub.$emit('newDetailIssue', this.issue, isMultiSelect);
+        boardsStore.setListDetail(this.list);
       }
     },
   },
@@ -102,28 +50,12 @@ export default {
 </script>
 
 <template>
-  <li
-    :class="{
-      'multi-select': multiSelectVisible,
-      'user-can-drag': !disabled && issue.id,
-      'is-disabled': disabled || !issue.id,
-      'is-active': issueDetailVisible,
-    }"
-    :index="index"
-    :data-issue-id="issue.id"
+  <board-card-layout
     data-qa-selector="board_card"
-    class="board-card p-3 rounded"
-    @mousedown="mouseDown"
-    @mousemove="mouseMove"
-    @mouseup="showIssue($event)"
-  >
-    <issue-card-inner
-      :list="list"
-      :issue="issue"
-      :issue-link-base="issueLinkBase"
-      :group-id="groupId"
-      :root-path="rootPath"
-      :update-filters="true"
-    />
-  </li>
+    :issue="issue"
+    :list="list"
+    :is-active="isActive()"
+    v-bind="$attrs"
+    @show="showIssue"
+  />
 </template>