From e12e518a978bdd8631a1f38895b9736b3abd508c Mon Sep 17 00:00:00 2001
From: Florie Guibert <fguibert@gitlab.com>
Date: Thu, 25 Aug 2022 00:43:39 +0000
Subject: [PATCH] Display health status on issue board cards
Changelog: added
---
.../javascripts/boards/components/board_card_inner.vue | 3 +++
app/assets/stylesheets/page_bundles/boards.scss | 6 ++----
.../javascripts/boards/graphql/issue.fragment.graphql | 1 +
.../components/issue_health_status.vue | 1 +
ee/spec/frontend/boards/board_card_inner_spec.js | 10 ++++++++++
5 files changed, 17 insertions(+), 4 deletions(-)
diff --git a/app/assets/javascripts/boards/components/board_card_inner.vue b/app/assets/javascripts/boards/components/board_card_inner.vue
index f7e881defb78..098d429a62a9 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 2b55a87f04a1..d45bc865da56 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 3279fabf77a8..133930df2199 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 de414e1ad037..2c9dee4231a5 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 b928aac8a1b8..52eccab49776 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');
+ });
+ });
});
--
GitLab