Merge branch '4006-add-weight-indicator-to-issues-board' into 'master'

Resolve "Add issue weight indicator on the issue cards in the issue board"

Closes #4006

See merge request gitlab-org/gitlab-ee!4960

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

 import $ from 'jquery';
 import Vue from 'vue';
-import userAvatarLink from '../../vue_shared/components/user_avatar/user_avatar_link.vue';
+import IssueCardWeight from 'ee/boards/components/issue_card_weight.vue';
+import UserAvatarLink from '../../vue_shared/components/user_avatar/user_avatar_link.vue';
 import eventHub from '../eventhub';
 
 const Store = gl.issueBoards.BoardsStore;
@@ -45,7 +46,8 @@ gl.issueBoards.IssueCardInner = Vue.extend({
     };
   },
   components: {
-    userAvatarLink,
+    UserAvatarLink,
+    IssueCardWeight,
   },
   computed: {
     numberOverLimit() {
@@ -161,6 +163,9 @@ gl.issueBoards.IssueCardInner = Vue.extend({
           >
             <template v-if="groupId && issue.project">{{issue.project.path}}</template>{{ issueId }}
           </span>
+          <issue-card-weight 
+            v-if="issue.weight" 
+            :weight="issue.weight" />
         </h4>
         <div class="card-assignee">
           <user-avatar-link

app/controllers/boards/issues_controller.rb

@@ -94,7 +94,7 @@ module Boards
 
     def serialize_as_json(resource)
       resource.as_json(
-        only: [:id, :iid, :project_id, :title, :confidential, :due_date, :relative_position],
+        only: [:id, :iid, :project_id, :title, :confidential, :due_date, :relative_position, :weight],
         labels: true,
         sidebar_endpoints: true,
         include: {

ee/app/assets/javascripts/boards/components/issue_card_weight.vue

+<script>
+import tooltip from '~/vue_shared/directives/tooltip';
+import icon from '~/vue_shared/components/icon.vue';
+
+export default {
+  name: 'IssueCardWeight',
+  components: {
+    icon,
+  },
+  directives: {
+    tooltip,
+  },
+  props: {
+    weight: {
+      type: Number,
+      required: true,
+    },
+  },
+};
+</script>
+
+<template>
+  <span
+    class="card-weight card-number prepend-left-5"
+    v-tooltip
+    data-container="body"
+    data-placement="bottom"
+    :title="__('Weight')"
+  >
+    <icon name="scale" />
+    {{ weight }}
+  </span>
+</template>

ee/app/assets/stylesheets/pages/boards.scss

+.card-weight {
+  svg {
+    position: relative;
+    top: 3px;
+  }
+}

spec/fixtures/api/schemas/issue.json

@@ -9,6 +9,7 @@
     "id": { "type": "integer" },
     "iid": { "type": "integer" },
     "project_id": { "type": ["integer", "null"] },
+    "weight": { "type": ["integer", "null"] },
     "title": { "type": "string" },
     "confidential": { "type": "boolean" },
     "due_date": { "type": ["date", "null"] },

spec/javascripts/boards/ee_issue_card_spec.js

+import Vue from 'vue';
+import '~/boards/components/issue_card_inner';
+import ListIssue from '~/boards/models/issue';
+import mountComponent from 'spec/helpers/vue_mount_component_helper';
+import { listObj } from './mock_data';
+
+describe('Issue card component', () => {
+  let vm;
+  const Component = Vue.extend(gl.issueBoards.IssueCardInner);
+  const list = listObj;
+  const issue = new ListIssue({
+    title: 'Testing',
+    id: 1,
+    iid: 1,
+    confidential: false,
+    labels: [list.label],
+    assignees: [],
+  });
+
+  afterEach(() => {
+    vm.$destroy();
+  });
+
+  it('does not render issue weight if none specified', () => {
+    vm = mountComponent(Component, {
+      list,
+      issue,
+      issueLinkBase: '/test',
+      rootPath: '/',
+      groupId: null,
+    });
+
+    expect(
+      vm.$el.querySelector('.card-weight'),
+    ).toBeNull();
+  });
+
+  it('renders issue weight if specified', () => {
+    vm = mountComponent(Component, {
+      list,
+      issue: {
+        ...issue,
+        weight: 2,
+      },
+      issueLinkBase: '/test',
+      rootPath: '/',
+      groupId: null,
+    });
+    const el = vm.$el.querySelector('.card-weight');
+
+    expect(el).not.toBeNull();
+    expect(el.textContent.trim()).toBe('2');
+  });
+});