Commit 337e1fe2 authored by Mike Greiling's avatar Mike Greiling

Merge branch...

Merge branch '11824-extend-issues-epics-counter-tooltip-to-include-number-of-open-closed-items-2' into 'master'

Added opened and closed descendant counts in epic

See merge request gitlab-org/gitlab!21278
parents a2ffd9f6 49ea9408
......@@ -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)
......
<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 }}
......
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`);
});
});
......
......@@ -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 ""
......
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