diff --git a/app/assets/javascripts/boards/components/board_card_inner.vue b/app/assets/javascripts/boards/components/board_card_inner.vue index f7e881defb78e7e5410d53f7ccaabf3050c8ada1..098d429a62a9be5c47d1ab1f71935d4461c0c575 100644 --- a/app/assets/javascripts/boards/components/board_card_inner.vue +++ b/app/assets/javascripts/boards/components/board_card_inner.vue @@ -38,6 +38,8 @@ export default { GlSprintf, BoardCardMoveToPosition, WorkItemTypeIcon, + IssueHealthStatus: () => + import('ee_component/related_items_tree/components/issue_health_status.vue'), }, directives: { GlTooltip: GlTooltipDirective, @@ -381,6 +383,7 @@ export default { :weight="item.weight" @click="filterByWeight(item.weight)" /> + <issue-health-status v-if="item.healthStatus" :health-status="item.healthStatus" /> </span> </span> </div> diff --git a/app/assets/stylesheets/page_bundles/boards.scss b/app/assets/stylesheets/page_bundles/boards.scss index 2b55a87f04a1d22744f97e840c30d8845259b956..d45bc865da56f31a01dc99ffd5c48443894265e8 100644 --- a/app/assets/stylesheets/page_bundles/boards.scss +++ b/app/assets/stylesheets/page_bundles/boards.scss @@ -182,10 +182,8 @@ } .board-card-number { - font-size: $gl-font-size-xs; - - @include media-breakpoint-up(md) { - font-size: $label-font-size; + @include media-breakpoint-down(md) { + font-size: $gl-font-size-sm; } } diff --git a/ee/app/assets/javascripts/boards/graphql/issue.fragment.graphql b/ee/app/assets/javascripts/boards/graphql/issue.fragment.graphql index 3279fabf77a8a77b5244c685732af46e9cb1e22f..133930df2199ffad856a5ac69c3394999048ce7c 100644 --- a/ee/app/assets/javascripts/boards/graphql/issue.fragment.graphql +++ b/ee/app/assets/javascripts/boards/graphql/issue.fragment.graphql @@ -17,4 +17,5 @@ fragment Issue on Issue { title } } + healthStatus } diff --git a/ee/app/assets/javascripts/related_items_tree/components/issue_health_status.vue b/ee/app/assets/javascripts/related_items_tree/components/issue_health_status.vue index de414e1ad0376655ed62275845d7703c04fa9b9a..2c9dee4231a57b15e539fc2ff79ce8f5470e2d20 100644 --- a/ee/app/assets/javascripts/related_items_tree/components/issue_health_status.vue +++ b/ee/app/assets/javascripts/related_items_tree/components/issue_health_status.vue @@ -10,6 +10,7 @@ export default { healthStatus: { type: String, required: true, + validator: (value) => Object.keys(issueHealthStatus).includes(value), }, }, computed: { diff --git a/ee/spec/frontend/boards/board_card_inner_spec.js b/ee/spec/frontend/boards/board_card_inner_spec.js index b928aac8a1b89096d70dbaac949864ff34e16379..52eccab49776680f41a1bab2927d181358970eb6 100644 --- a/ee/spec/frontend/boards/board_card_inner_spec.js +++ b/ee/spec/frontend/boards/board_card_inner_spec.js @@ -2,6 +2,7 @@ import { GlLabel } from '@gitlab/ui'; import { shallowMount } from '@vue/test-utils'; import Vuex from 'vuex'; import IssueCardWeight from 'ee/boards/components/issue_card_weight.vue'; +import IssueHealthStatus from 'ee/related_items_tree/components/issue_health_status.vue'; import BoardCardInner from '~/boards/components/board_card_inner.vue'; import { issuableTypes } from '~/boards/constants'; import defaultStore from '~/boards/stores'; @@ -72,6 +73,7 @@ describe('Board card component', () => { weight: 1, blocked: true, blockedByCount: 2, + healthStatus: 'onTrack', }; }); @@ -134,4 +136,12 @@ describe('Board card component', () => { expect(wrapper.findComponent(IssueCardWeight).exists()).toBe(true); }); }); + + describe('health status', () => { + it('shows healthStatus component', () => { + createComponent(); + + expect(wrapper.findComponent(IssueHealthStatus).props('healthStatus')).toBe('onTrack'); + }); + }); });