Commit fcbd16f2 authored by Illya Klymov's avatar Illya Klymov

Merge branch...

Merge branch '214675-reduce-epic-health-status-noise-in-epic-tree-when-no-statuses-are-assigned' into 'master'

Reduce epic health status noise in epic tree

See merge request gitlab-org/gitlab!31555
parents 738e5695 625577ac
......@@ -85,6 +85,10 @@ $item-weight-max-width: 48px;
white-space: nowrap;
}
.health-label-short {
display: none;
}
@include media-breakpoint-down(lg) {
.issue-count-badge {
padding: 0;
......@@ -96,7 +100,6 @@ $item-weight-max-width: 48px;
.item-body,
.card-header {
.health-label-short {
display: initial;
max-width: 0;
}
......@@ -131,6 +134,12 @@ $item-weight-max-width: 48px;
}
}
.card-header {
.health-label-short {
display: initial;
}
}
.item-meta {
flex-basis: 100%;
font-size: $gl-font-size;
......@@ -265,7 +274,6 @@ $item-weight-max-width: 48px;
max-width: 90%;
}
.item-body,
.card-header {
.health-label-short {
max-width: 30px;
......@@ -306,7 +314,6 @@ $item-weight-max-width: 48px;
}
}
.item-body,
.card-header {
.health-label-short {
max-width: 60px;
......@@ -326,7 +333,6 @@ $item-weight-max-width: 48px;
}
}
.item-body,
.card-header {
.health-label-short {
max-width: 100px;
......@@ -364,10 +370,6 @@ $item-weight-max-width: 48px;
}
}
.health-label-short {
display: initial;
}
.health-label-long {
display: none;
}
......@@ -411,8 +413,7 @@ $item-weight-max-width: 48px;
}
@media only screen and (min-width: 1500px) {
.card-header,
.item-body {
.card-header {
.health-label-short {
display: none;
}
......
......@@ -12,11 +12,22 @@ export default {
default: () => {},
},
},
computed: {
hasHealthStatus() {
const { issuesOnTrack, issuesNeedingAttention, issuesAtRisk } = this.healthStatus;
const totalHealthStatuses = issuesOnTrack + issuesNeedingAttention + issuesAtRisk;
return totalHealthStatuses > 0;
},
},
};
</script>
<template>
<div ref="healthStatus" class="health-status d-inline-flex align-items-center">
<div
v-if="hasHealthStatus"
ref="healthStatus"
class="health-status d-inline-flex align-items-center"
>
<gl-tooltip :target="() => $refs.healthStatus" placement="top">
<span
><strong>{{ healthStatus.issuesOnTrack }}</strong
......@@ -34,36 +45,34 @@ export default {
>
</gl-tooltip>
<span class="gl-label gl-label-text-dark gl-label-sm status-on-track"
<span class="gl-label gl-label-text-dark gl-label-sm status-on-track mr-1"
><span class="gl-label-text">
{{ healthStatus.issuesOnTrack }}
</span></span
>
<span class="ml-1 mr-1 mr-md-2 text-secondary health-label-long">{{
__('issues on track')
}}</span>
<span class="ml-1 mr-1 mr-md-2 text-secondary text-truncate health-label-short">{{
<span class="mr-1 mr-md-2 text-secondary health-label-long">{{ __('issues on track') }}</span>
<span class="mr-1 mr-md-2 text-secondary text-truncate health-label-short">{{
__('on track')
}}</span>
<span class="gl-label gl-label-text-dark gl-label-sm status-needs-attention"
<span class="gl-label gl-label-text-dark gl-label-sm status-needs-attention mr-1"
><span class="gl-label-text">
{{ healthStatus.issuesNeedingAttention }}
</span></span
>
<span class="ml-1 mr-1 mr-md-2 text-secondary health-label-long">{{
<span class="mr-1 mr-md-2 text-secondary health-label-long">{{
__('issues need attention')
}}</span>
<span class="ml-1 mr-1 mr-md-2 text-secondary text-truncate health-label-short">{{
<span class="mr-1 mr-md-2 text-secondary text-truncate health-label-short">{{
__('need attention')
}}</span>
<span class="gl-label gl-label-text-dark gl-label-sm status-at-risk"
<span class="gl-label gl-label-text-dark gl-label-sm status-at-risk mr-1"
><span class="gl-label-text">
{{ healthStatus.issuesAtRisk }}
</span></span
>
<span class="ml-1 text-secondary health-label-long">{{ __('issues at risk') }}</span>
<span class="ml-1 text-secondary text-truncate health-label-short">{{ __('at risk') }}</span>
<span class="text-secondary health-label-long">{{ __('issues at risk') }}</span>
<span class="text-secondary text-truncate health-label-short">{{ __('at risk') }}</span>
</div>
</template>
---
title: Reduce epic health status noise in epic tree
merge_request: 31555
author:
type: changed
......@@ -5,9 +5,7 @@ import { mockEpic1 } from '../mock_data';
import EpicHealthStatus from 'ee/related_items_tree/components/epic_health_status.vue';
const createComponent = () => {
const { healthStatus } = mockEpic1;
const createComponent = ({ healthStatus = mockEpic1.healthStatus } = {}) => {
return shallowMount(EpicHealthStatus, {
propsData: {
healthStatus,
......@@ -32,7 +30,36 @@ describe('EpicHealthStatus', () => {
expect(tooltip).toExist();
});
it('renders with label with both short and long text', () => {
describe('when no statuses are assigned', () => {
it('hasHealthStatus computed property returns false', () => {
expect(wrapper.vm.hasHealthStatus).toBe(false);
});
it('does not render health labels', () => {
const longLabels = wrapper.findAll('.health-label-long');
const shortLabels = wrapper.findAll('.health-label-short');
expect(longLabels).toHaveLength(0);
expect(shortLabels).toHaveLength(0);
});
});
describe('when statuses are assigned', () => {
beforeEach(() => {
wrapper = createComponent({
healthStatus: {
issuesOnTrack: 1,
issuesNeedingAttention: 0,
issuesAtRisk: 0,
},
});
});
it('hasHealthStatus computed property returns false', () => {
expect(wrapper.vm.hasHealthStatus).toBe(true);
});
it('renders label with both short and long text', () => {
const longLabels = wrapper.findAll('.health-label-long');
const shortLabels = wrapper.findAll('.health-label-short');
......@@ -55,4 +82,5 @@ describe('EpicHealthStatus', () => {
expect(shortLabelWrapper.text()).toEqual(expectedShortLabels[index]);
});
});
});
});
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment