Merge branch '9166-epic-icon' into 'master'

Display Epic Icon in epics list

Closes #9166

See merge request gitlab-org/gitlab-ee!9162

ee/app/assets/javascripts/related_issues/components/related_issues_block.vue

@@ -6,6 +6,7 @@ import sortableConfig from 'ee/sortable/sortable_config';
 import { GlLoadingIcon } from '@gitlab/ui';
 import issueItem from './issue_item.vue';
 import addIssuableForm from './add_issuable_form.vue';
+import { issuableIconMap } from '../constants';
 
 export default {
   name: 'RelatedIssuesBlock',
@@ -99,6 +100,9 @@ export default {
     hasHelpPath() {
       return this.helpPath.length > 0;
     },
+    issuableTypeIcon() {
+      return issuableIconMap[this.issuableType];
+    },
   },
   mounted() {
     if (this.canReorder) {
@@ -161,7 +165,7 @@ export default {
               class="js-related-issues-header-issue-count related-issues-header-issue-count issue-count-badge mx-1"
             >
               <span class="issue-count-badge-count">
-                <icon name="issues" class="mr-1 text-secondary" /> {{ badgeLabel }}
+                <icon :name="issuableTypeIcon" class="mr-1 text-secondary" /> {{ badgeLabel }}
               </span>
             </div>
             <button

ee/app/assets/javascripts/related_issues/constants.js

@@ -30,3 +30,13 @@ export const addRelatedIssueErrorMap = {
   issue: __("We can't find an issue that matches what you are looking for."),
   epic: __("We can't find an epic that matches what you are looking for."),
 };
+
+/**
+ * These are used to map issuableType to the correct icon.
+ * Since these are never used for any display purposes, don't wrap
+ * them inside i18n functions.
+ */
+export const issuableIconMap = {
+  issue: 'issues',
+  epic: 'epic',
+};

ee/changelogs/unreleased/9166-epic-icon.yml

+---
+title: Display epic icon in related epics list
+merge_request: 9166
+author:
+type: fixed

ee/spec/javascripts/issuable/related_issues/components/related_issues_block_spec.js

@@ -147,4 +147,30 @@ describe('RelatedIssuesBlock', () => {
       expect(beforeAfterIds.afterId).toBe(5);
     });
   });
+
+  describe('renders correct icon when', () => {
+    [
+      {
+        icon: 'issues',
+        issuableType: 'issue',
+      },
+      {
+        icon: 'epic',
+        issuableType: 'epic',
+      },
+    ].forEach(({ issuableType, icon }) => {
+      it(`issuableType=${issuableType} is passed`, () => {
+        vm = new RelatedIssuesBlock({
+          propsData: {
+            pathIdSeparator: '#',
+            issuableType,
+          },
+        }).$mount();
+
+        const el = vm.$el.querySelector(`.issue-count-badge-count .ic-${icon}`);
+
+        expect(el).not.toBeNull();
+      });
+    });
+  });
 });