[skip ci] refactor styling

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

-import IssueCardHeader from './issue_card_header';
-import IssueCardLabels from './issue_card_labels';
+import IssueCardInner from './issue_card_inner';
 
 require('./issue_card_inner');
 
@@ -15,13 +14,7 @@ export default {
       @mousedown="mouseDown"
       @mousemove="mouseMove"
       @mouseup="showIssue($event)">
-      <issue-card-header
-        :list="list"
-        :issue="issue"
-        :issue-link-base="issueLinkBase"
-        :root-path="rootPath"
-        :update-filters="true" />
-      <issue-card-labels
+      <issue-card-inner
         :list="list"
         :issue="issue"
         :issue-link-base="issueLinkBase"
@@ -30,9 +23,7 @@ export default {
     </li>
   `,
   components: {
-    'issue-card-inner': gl.issueBoards.IssueCardInner,
-    'issue-card-header': IssueCardHeader,
-    'issue-card-labels': IssueCardLabels,
+    'issue-card-inner': IssueCardInner,
   },
   props: {
     list: Object,

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

 export default {
   name: 'IssueCardHeader',
   props: {
-    issue: { type: Object, required: true },
+    confidential: { type: Boolean, required: false, default: false },
+    title: { type: String, required: true },
+    issueId: { type: Number, required: true },
+    assignee: { type: Object, required: true },
     issueLinkBase: { type: String, required: true },
-    list: { type: Object, required: false },
     rootPath: { type: String, required: true },
-    updateFilters: { type: Boolean, required: false, default: false },
+  },
+  computed: {
+    hasAssignee() {
+      return Object.keys(this.assignee).length;
+    },
   },
   template: `
     <div class="card-header">
       <i class="fa fa-eye-slash confidential-icon"
-        v-if="issue.confidential">
+        v-if="confidential">
       </i>
       <h4 class="card-title">
-        <a :href="issueLinkBase + '/' + issue.id"
-          :title="issue.title">{{ issue.title.trim() }}</a>
+        <a :href="issueLinkBase + '/' + issueId"
+          :title="title">{{ title }}</a>
         <span class="card-number"
-          v-if="issue.id">
-          #{{ issue.id }}
+          v-if="issueId">
+          #{{ issueId }}
         </span>
       </h4>
       <a class="card-assignee has-tooltip"
-        :href="rootPath + issue.assignee.username"
-        :title="'Assigned to ' + issue.assignee.name"
-        v-if="issue.assignee"
+        :href="rootPath + assignee.username"
+        :title="'Assigned to ' + assignee.name"
+        v-if="hasAssignee"
         data-container="body">
         <img class="avatar avatar-inline s20"
-          :src="issue.assignee.avatar"
+          :src="assignee.avatar"
           width="20"
           height="20"
-          :alt="'Avatar for ' + issue.assignee.name" />
+          :alt="'Avatar for ' + assignee.name" />
       </a>
     </div>
   `,

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

-import Vue from 'vue';
-import eventHub from '../eventhub';
-
-(() => {
-  const Store = gl.issueBoards.BoardsStore;
-
-  window.gl = window.gl || {};
-  window.gl.issueBoards = window.gl.issueBoards || {};
-
-  gl.issueBoards.IssueCardInner = Vue.extend({
-    props: {
-      issue: {
-        type: Object,
-        required: true,
-      },
-      issueLinkBase: {
-        type: String,
-        required: true,
-      },
-      list: {
-        type: Object,
-        required: false,
-      },
-      rootPath: {
-        type: String,
-        required: true,
-      },
-      updateFilters: {
-        type: Boolean,
-        required: false,
-        default: false,
-      },
-    },
-    methods: {
-      showLabel(label) {
-        if (!this.list) return true;
-
-        return !this.list.label || label.id !== this.list.label.id;
-      },
-      filterByLabel(label, e) {
-        if (!this.updateFilters) return;
-
-        const filterPath = gl.issueBoards.BoardsStore.filter.path.split('&');
-        const labelTitle = encodeURIComponent(label.title);
-        const param = `label_name[]=${labelTitle}`;
-        const labelIndex = filterPath.indexOf(param);
-        $(e.currentTarget).tooltip('hide');
-
-        if (labelIndex === -1) {
-          filterPath.push(param);
-        } else {
-          filterPath.splice(labelIndex, 1);
-        }
-
-        gl.issueBoards.BoardsStore.filter.path = filterPath.join('&');
-
-        Store.updateFiltersUrl();
-
-        eventHub.$emit('updateTokens');
-      },
-      labelStyle(label) {
-        return {
-          backgroundColor: label.color,
-          color: label.textColor,
-        };
-      },
+import IssueCardHeader from './issue_card_header';
+import IssueCardLabels from './issue_card_labels';
+
+export default {
+  name: 'IssueCardInner',
+  props: {
+    issue: { type: Object, required: true },
+    issueLinkBase: { type: String, required: true },
+    list: { type: Object, required: false },
+    rootPath: { type: String, required: true },
+    updateFilters: { type: Boolean, required: false, default: false },
+  },
+  computed: {
+    assignee() {
+      if (this.issue.assignee === false) {
+        return {};
+      }
+
+      return this.issue.assignee;
     },
-    template: `
-      <div>
-        <h4 class="card-title">
-          <i
-            class="fa fa-eye-slash confidential-icon"
-            v-if="issue.confidential"></i>
-          <a
-            :href="issueLinkBase + '/' + issue.id"
-            :title="issue.title">
-            {{ issue.title }}
-          </a>
-        </h4>
-        <div class="card-footer">
-          <span
-            class="card-number"
-            v-if="issue.id">
-            #{{ issue.id }}
-          </span>
-          <a
-            class="card-assignee has-tooltip js-no-trigger"
-            :href="rootPath + issue.assignee.username"
-            :title="'Assigned to ' + issue.assignee.name"
-            v-if="issue.assignee"
-            data-container="body">
-            <img
-              class="avatar avatar-inline s20 js-no-trigger"
-              :src="issue.assignee.avatar"
-              width="20"
-              height="20"
-              :alt="'Avatar for ' + issue.assignee.name" />
-          </a>
-          <button
-            class="label color-label has-tooltip js-no-trigger"
-            v-for="label in issue.labels"
-            type="button"
-            v-if="showLabel(label)"
-            @click="filterByLabel(label, $event)"
-            :style="labelStyle(label)"
-            :title="label.description"
-            data-container="body">
-            {{ label.title }}
-          </button>
-        </div>
-      </div>
-    `,
-  });
-})();
+  },
+  components: {
+    'issue-card-header': IssueCardHeader,
+    'issue-card-labels': IssueCardLabels,
+  },
+  template: `
+    <div>
+      <issue-card-header
+        :confidential="issue.confidential"
+        :title="issue.title"
+        :issue-id="issue.id"
+        :assignee="assignee"
+        :issue-link-base="issueLinkBase"
+        :root-path="rootPath"/>
+      <issue-card-labels
+        :labels="issue.labels"
+        :list="list"
+        :update-filters="true" />
+    </div>
+  `,
+};

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

@@ -8,10 +8,8 @@ window.gl.issueBoards = window.gl.issueBoards || {};
 export default {
   name: 'IssueCardLabels',
   props: {
-    issue: { type: Object, required: true },
-    issueLinkBase: { type: String, required: true },
+    labels: { type: Array, required: true },
     list: { type: Object, required: false },
-    rootPath: { type: String, required: true },
     updateFilters: { type: Boolean, required: false, default: false },
   },
   methods: {
@@ -52,7 +50,7 @@ export default {
     <div class="card-footer">
       <button
         class="label color-label has-tooltip"
-        v-for="label in issue.labels"
+        v-for="label in labels"
         type="button"
         v-if="showLabel(label)"
         @click="filterByLabel(label, $event)"

app/assets/javascripts/boards/components/modal/list.js

@@ -2,6 +2,7 @@
 /* global bp */
 
 import Vue from 'vue';
+import IssueCardInner from '../issue_card_inner';
 
 (() => {
   const ModalStore = gl.issueBoards.ModalStore;
@@ -110,7 +111,7 @@ import Vue from 'vue';
       window.removeEventListener('resize', this.setColumnCountWrapper);
     },
     components: {
-      'issue-card-inner': gl.issueBoards.IssueCardInner,
+      'issue-card-inner': IssueCardInner,
     },
     template: `
       <section