Merge branch 'kp-show-epic-group-path' into 'master'

Show group path in epic reference within Vue Epics list

See merge request gitlab-org/gitlab!60263

ee/app/assets/javascripts/epics_list/components/epics_list_root.vue

@@ -141,6 +141,13 @@ export default {
     },
   },
   methods: {
+    epicReference(epic) {
+      const reference = `${this.$options.epicSymbol}${epic.iid}`;
+      if (epic.group.fullPath !== this.groupFullPath) {
+        return `${epic.group.fullPath}${reference}`;
+      }
+      return reference;
+    },
     epicTimeframe({ startDate, dueDate }) {
       const start = startDate ? parsePikadayDate(startDate) : null;
       const due = dueDate ? parsePikadayDate(dueDate) : null;
@@ -225,6 +232,9 @@ export default {
         __('New epic')
       }}</gl-button>
     </template>
+    <template #reference="{ issuable }">
+      <span class="issuable-reference">{{ epicReference(issuable) }}</span>
+    </template>
     <template #timeframe="{ issuable }">
       <gl-icon name="calendar" />
       {{ epicTimeframe(issuable) }}

ee/app/assets/javascripts/epics_list/queries/group_epics.query.graphql

@@ -43,6 +43,9 @@ query groupEpics(
         webUrl
         userDiscussionsCount
         confidential
+        group {
+          fullPath
+        }
         author {
           ...Author
         }

ee/spec/frontend/epics_list/components/epics_list_root_spec.js

@@ -102,6 +102,32 @@ describe('EpicsListRoot', () => {
   });
 
   describe('methods', () => {
+    describe('epicReference', () => {
+      const mockEpicWithPath = {
+        ...mockFormattedEpic,
+        group: {
+          fullPath: 'gitlab-org/marketing',
+        },
+      };
+      const mockEpicWithoutPath = {
+        ...mockFormattedEpic,
+        group: {
+          fullPath: 'gitlab-org',
+        },
+      };
+
+      it.each`
+        epic                   | reference
+        ${mockEpicWithPath}    | ${'gitlab-org/marketing&2'}
+        ${mockEpicWithoutPath} | ${'&2'}
+      `(
+        'returns string "$reference" based on provided `epic.group.fullPath`',
+        ({ epic, reference }) => {
+          expect(wrapper.vm.epicReference(epic)).toBe(reference);
+        },
+      );
+    });
+
     describe('epicTimeframe', () => {
       it.each`
         startDate     | dueDate        | returnValue