Added opened and closed descendant counts in epic

doc/user/group/epics/index.md

@@ -40,6 +40,7 @@ An epic's page contains the following tabs:
 
 - **Epics and Issues**: epics and issues added to this epic. Child epics, and their issues, are shown in a tree view.
   - Click on the <kbd>></kbd> beside a parent epic to reveal the child epics and issues.
+  - Hover over the total counts to see a breakdown of open and closed items.
 - **Roadmap**: a roadmap view of child epics which have start and due dates.
 
 ![epic view](img/epic_view_v12.3.png)

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

 <script>
 import { mapState, mapActions } from 'vuex';
 
-import { GlButton, GlTooltipDirective } from '@gitlab/ui';
+import { GlButton, GlTooltip } from '@gitlab/ui';
 
 import { issuableTypesMap } from 'ee/related_issues/constants';
-import { sprintf, s__ } from '~/locale';
 
 import Icon from '~/vue_shared/components/icon.vue';
 
@@ -14,19 +13,11 @@ export default {
   components: {
     Icon,
     GlButton,
+    GlTooltip,
     EpicActionsSplitButton,
   },
-  directives: {
-    GlTooltip: GlTooltipDirective,
-  },
   computed: {
     ...mapState(['parentItem', 'descendantCounts']),
-    badgeTooltip() {
-      return sprintf(s__('Epics|%{epicsCount} epics and %{issuesCount} issues'), {
-        epicsCount: this.totalEpicsCount,
-        issuesCount: this.totalIssuesCount,
-      });
-    },
     totalEpicsCount() {
       return this.descendantCounts.openedEpics + this.descendantCounts.closedEpics;
     },
@@ -59,11 +50,31 @@ export default {
 <template>
   <div class="card-header d-flex px-2">
     <div class="d-inline-flex flex-grow-1 lh-100 align-middle">
-      <div
-        v-gl-tooltip.hover:tooltipcontainer.bottom
-        class="issue-count-badge"
-        :title="badgeTooltip"
-      >
+      <gl-tooltip :target="() => $refs.countBadge">
+        <p class="font-weight-bold m-0">
+          {{ __('Epics') }} &#8226;
+          <span class="text-secondary-400 font-weight-normal"
+            >{{
+              sprintf(__('%{openedEpics} open, %{closedEpics} closed'), {
+                openedEpics: descendantCounts.openedEpics,
+                closedEpics: descendantCounts.closedEpics,
+              })
+            }}
+          </span>
+        </p>
+        <p class="font-weight-bold m-0">
+          {{ __('Issues') }} &#8226;
+          <span class="text-secondary-400 font-weight-normal"
+            >{{
+              sprintf(__('%{openedIssues} open, %{closedIssues} closed'), {
+                openedIssues: descendantCounts.openedIssues,
+                closedIssues: descendantCounts.closedIssues,
+              })
+            }}
+          </span>
+        </p>
+      </gl-tooltip>
+      <div ref="countBadge" class="issue-count-badge">
         <span class="d-inline-flex align-items-center">
           <icon :size="16" name="epic" class="text-secondary mr-1" />
           {{ totalEpicsCount }}

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

 import { shallowMount } from '@vue/test-utils';
-import { GlButton } from '@gitlab/ui';
+import { GlButton, GlTooltip } from '@gitlab/ui';
 
 import RelatedItemsTreeHeader from 'ee/related_items_tree/components/related_items_tree_header.vue';
 import createDefaultStore from 'ee/related_items_tree/store';
@@ -47,15 +47,19 @@ describe('RelatedItemsTree', () => {
       wrapper.destroy();
     });
 
-    describe('computed', () => {
+    describe('badgeTooltip', () => {
       beforeEach(() => {
         wrapper = createComponent();
       });
 
-      describe('badgeTooltip', () => {
-        it('returns string containing epic count and issues count based on available direct children within state', () => {
-          expect(wrapper.vm.badgeTooltip).toBe('2 epics and 2 issues');
-        });
+      it('returns string containing epic count based on available direct children within state', () => {
+        expect(wrapper.find(GlTooltip).text()).toContain(`Epics •
+        1 open, 1 closed`);
+      });
+
+      it('returns string containing issue count based on available direct children within state', () => {
+        expect(wrapper.find(GlTooltip).text()).toContain(`Issues •
+        1 open, 1 closed`);
       });
     });
 

locale/gitlab.pot

@@ -332,6 +332,12 @@ msgstr ""
 msgid "%{openOrClose} %{noteable}"
 msgstr ""
 
+msgid "%{openedEpics} open, %{closedEpics} closed"
+msgstr ""
+
+msgid "%{openedIssues} open, %{closedIssues} closed"
+msgstr ""
+
 msgid "%{percent}%% complete"
 msgstr ""
 
@@ -7122,9 +7128,6 @@ msgstr ""
 msgid "Epics let you manage your portfolio of projects more efficiently and with less effort"
 msgstr ""
 
-msgid "Epics|%{epicsCount} epics and %{issuesCount} issues"
-msgstr ""
-
 msgid "Epics|Add an epic"
 msgstr ""