Work item rolled up count by type

What does this MR do and why?

Work item rolled up count by type in work items

1. Show work item rolled up count by type as a badge in header
2. Show the work item rolled up count by type as details in children

MR acceptance checklist

Please evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.

Screenshots or screen recordings

Screenshots are required for UI changes, and strongly recommended for all other merge requests.

Use case	screenshot
Header with rolled up count by type
Child metadata rolled up count by type
Modal header rolled up count by type
No children information in header
Objective roll up data

How to set up and validate locally

Numbered steps to set up and validate the change are strongly suggested.

1. Go to any work item with hierarchy (objective/epic)
2. Associate different kinds of work items in the tree
3. See that the rollup count is visible

Related to #474913 (closed)

Resolves #478622 (closed)

app/assets/javascripts/work_items/components/work_item_links/work_item_rollup_count.vue

+<script>
+import { GlPopover, GlBadge, GlIcon } from '@gitlab/ui';
+import { s__, __ } from '~/locale';
+
+export default {
+  i18n: {
+    epicsClosed: s__('WorkItems|epics closed'),
+    issuesClosed: s__('WorkItems|issues closed'),
+    tasksClosed: s__('WorkItems|tasks closed'),
+    countPermissionText: __('Counts reflect children you may not have access to.'),
+  },
+  components: {
+    GlPopover,
+    GlBadge,
+    GlIcon,
+  },
+  props: {
+    rollUpCountsByType: {
+      type: Array,
+      required: true,
+    },
+  },
+  computed: {
+    totalCountAllByType() {
+      return [...this.rollUpCountsByType].reduce(
+        (total, rollUpCounts) => total + rollUpCounts.countsByState.all,
+        0,
+      );
+    },
+    epicsCountExists() {
+      return this.epicCount;
+    },
+    issuesCountExists() {
+      return this.issueCount;
+    },
+    tasksCountExists() {
+      return this.taskCount;
+    },
+    epicCount() {
+      // eslint-disable-next-line @gitlab/require-i18n-strings
+      return this.workItemTypeCount('Epic');
+    },
+    issueCount() {
+      // eslint-disable-next-line @gitlab/require-i18n-strings
+      return this.workItemTypeCount('Issue');
+    },
+    taskCount() {
+      // eslint-disable-next-line @gitlab/require-i18n-strings
+      return this.workItemTypeCount('Task');
+    },
+  },
+  methods: {
+    workItemTypeCount(workItemTypeName) {
+      return this.rollUpCountsByType.find(
+        (rollUpCount) => rollUpCount.workItemType.name === workItemTypeName,
+      );
+    },
+  },
+};
+</script>
+<template>
+  <div class="gl-text-base">
+    <gl-badge id="count-id" variant="neutral" class="gl-ml-2">{{ totalCountAllByType }}</gl-badge>
+    <gl-popover triggers="hover" target="count-id">
+      <div v-if="epicsCountExists">
+        <gl-icon :name="epicCount.workItemType.iconName" class="gl-mr-2" />
+        <span class="gl-font-bold"
+          >{{ epicCount.countsByState.closed }}/{{ epicCount.countsByState.all }}</span
+        >
+        {{ $options.i18n.epicsClosed }}
+      </div>
+      <div v-if="issuesCountExists" class="gl-mt-3">
+        <gl-icon :name="issueCount.workItemType.iconName" class="gl-mr-2" />
+        <span class="gl-font-bold"
+          >{{ issueCount.countsByState.closed }}/{{ issueCount.countsByState.all }}</span
+        >
+        {{ $options.i18n.issuesClosed }}
+      </div>
+      <div v-if="tasksCountExists" class="gl-mt-3">
+        <gl-icon :name="taskCount.workItemType.iconName" class="gl-mr-2" />
+        <span class="gl-font-bold">
+          {{ taskCount.countsByState.closed }}/{{ taskCount.countsByState.all }}
+        </span>
+        {{ $options.i18n.tasksClosed }}
+      </div>
+      <div class="gl-text-secondary gl-mt-3">
+        <gl-icon name="information-o" class="gl-mr-2" />{{ $options.i18n.countPermissionText }}
+      </div>
+    </gl-popover>
+  </div>
+</template>