Reduce epic health status noise in epic tree

- Hide health status on epic in epic tree when no statuses are assigned
- Hide health status labels on epic cards

app/assets/stylesheets/components/related_items_list.scss

@@ -90,6 +90,10 @@ $item-weight-max-width: 48px;
     white-space: nowrap;
   }
 
+  .health-label-short {
+    display: none;
+  }
+
   @include media-breakpoint-down(lg) {
     .issue-count-badge {
       padding-left: 0;
@@ -100,7 +104,6 @@ $item-weight-max-width: 48px;
 .item-body,
 .card-header {
   .health-label-short {
-    display: initial;
     max-width: 0;
   }
 
@@ -135,6 +138,12 @@ $item-weight-max-width: 48px;
   }
 }
 
+.card-header {
+  .health-label-short {
+    display: initial;
+  }
+}
+
 .item-meta {
   flex-basis: 100%;
   font-size: $gl-font-size;
@@ -269,7 +278,6 @@ $item-weight-max-width: 48px;
     max-width: 90%;
   }
 
-  .item-body,
   .card-header {
     .health-label-short {
       max-width: 30px;
@@ -310,7 +318,6 @@ $item-weight-max-width: 48px;
     }
   }
 
-  .item-body,
   .card-header {
     .health-label-short {
       max-width: 60px;
@@ -330,7 +337,6 @@ $item-weight-max-width: 48px;
     }
   }
 
-  .item-body,
   .card-header {
     .health-label-short {
       max-width: 100px;
@@ -368,10 +374,6 @@ $item-weight-max-width: 48px;
     }
   }
 
-  .health-label-short {
-    display: initial;
-  }
-
   .health-label-long {
     display: none;
   }
@@ -415,8 +417,7 @@ $item-weight-max-width: 48px;
 }
 
 @media only screen and (min-width: 1500px) {
-  .card-header,
-  .item-body {
+  .card-header {
     .health-label-short {
       display: none;
     }

ee/app/assets/javascripts/related_items_tree/components/epic_health_status.vue

@@ -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>

ee/changelogs/unreleased/214675-reduce-epic-health-status-noise-in-epic-tree-when-no-statuses-a.yml

+---
+title: Reduce epic health status noise in epic tree
+merge_request: 31555
+author:
+type: changed

ee/spec/frontend/related_items_tree/components/epic_health_status_spec.js

@@ -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,27 +30,57 @@ describe('EpicHealthStatus', () => {
     expect(tooltip).toExist();
   });
 
-  it('renders with label with both short and long text', () => {
-    const longLabels = wrapper.findAll('.health-label-long');
-    const shortLabels = wrapper.findAll('.health-label-short');
+  describe('when no statuses are assigned', () => {
+    it('hasHealthStatus computed property returns false', () => {
+      expect(wrapper.vm.hasHealthStatus).toBe(false);
+    });
 
-    expect(longLabels).toHaveLength(3);
-    expect(shortLabels).toHaveLength(3);
+    it('does not render health labels', () => {
+      const longLabels = wrapper.findAll('.health-label-long');
+      const shortLabels = wrapper.findAll('.health-label-short');
 
-    const expectedLongLabels = ['issues on track', 'issues need attention', 'issues at risk'];
+      expect(longLabels).toHaveLength(0);
+      expect(shortLabels).toHaveLength(0);
+    });
+  });
 
-    expect(longLabels).toHaveLength(expectedLongLabels.length);
+  describe('when statuses are assigned', () => {
+    beforeEach(() => {
+      wrapper = createComponent({
+        healthStatus: {
+          issuesOnTrack: 1,
+          issuesNeedingAttention: 0,
+          issuesAtRisk: 0,
+        },
+      });
+    });
 
-    longLabels.wrappers.forEach((longLabelWrapper, index) => {
-      expect(longLabelWrapper.text()).toEqual(expectedLongLabels[index]);
+    it('hasHealthStatus computed property returns false', () => {
+      expect(wrapper.vm.hasHealthStatus).toBe(true);
     });
 
-    const expectedShortLabels = ['on track', 'need attention', 'at risk'];
+    it('renders label with both short and long text', () => {
+      const longLabels = wrapper.findAll('.health-label-long');
+      const shortLabels = wrapper.findAll('.health-label-short');
+
+      expect(longLabels).toHaveLength(3);
+      expect(shortLabels).toHaveLength(3);
+
+      const expectedLongLabels = ['issues on track', 'issues need attention', 'issues at risk'];
+
+      expect(longLabels).toHaveLength(expectedLongLabels.length);
+
+      longLabels.wrappers.forEach((longLabelWrapper, index) => {
+        expect(longLabelWrapper.text()).toEqual(expectedLongLabels[index]);
+      });
+
+      const expectedShortLabels = ['on track', 'need attention', 'at risk'];
 
-    expect(shortLabels).toHaveLength(expectedShortLabels.length);
+      expect(shortLabels).toHaveLength(expectedShortLabels.length);
 
-    shortLabels.wrappers.forEach((shortLabelWrapper, index) => {
-      expect(shortLabelWrapper.text()).toEqual(expectedShortLabels[index]);
+      shortLabels.wrappers.forEach((shortLabelWrapper, index) => {
+        expect(shortLabelWrapper.text()).toEqual(expectedShortLabels[index]);
+      });
     });
   });
 });