Add frontend support for Relationships between Epics

Adds support for related Epics list in page
body above related Issues list.

ee/app/assets/javascripts/epic/components/epic_body.vue

@@ -2,17 +2,19 @@
 import { mapState } from 'vuex';
 
 import IssuableBody from '~/issue_show/components/app.vue';
-import RelatedIssues from 'ee/related_issues/components/related_issues_root.vue';
+import RelatedItems from 'ee/related_issues/components/related_issues_root.vue';
 
 export default {
+  epicsPathIdSeparator: '&',
   components: {
     IssuableBody,
-    RelatedIssues,
+    RelatedItems,
   },
   computed: {
     ...mapState([
       'endpoint',
       'updateEndpoint',
+      'epicLinksEndpoint',
       'issueLinksEndpoint',
       'groupPath',
       'markdownPreviewPath',
@@ -20,6 +22,7 @@ export default {
       'canUpdate',
       'canDestroy',
       'canAdmin',
+      'subepicsSupported',
       'initialTitleHtml',
       'initialTitleText',
       'initialDescriptionHtml',
@@ -52,12 +55,26 @@ export default {
         issuable-type="epic"
       />
     </div>
-    <related-issues
+    <related-items
+      v-if="subepicsSupported"
+      :endpoint="epicLinksEndpoint"
+      :can-admin="canAdmin"
+      :can-reorder="canAdmin"
+      :allow-auto-complete="false"
+      :path-id-separator="$options.epicsPathIdSeparator"
+      :title="__('Epics')"
+      :issuable-type="__('epic')"
+      css-class="js-related-epics-block"
+    />
+    <related-items
       :endpoint="issueLinksEndpoint"
       :can-admin="canAdmin"
       :can-reorder="canAdmin"
       :allow-auto-complete="false"
-      title="Issues"
+      :title="__('Issues')"
+      :issuable-type="__('issue')"
+      css-class="js-related-issues-block"
+      path-id-separator="#"
     />
   </div>
 </template>

ee/app/assets/javascripts/epic/store/state.js

@@ -3,6 +3,7 @@ export default {
   endpoint: '',
   updateEndpoint: '',
 
+  epicLinksEndpoint: '',
   issueLinksEndpoint: '',
   groupPath: '',
   markdownPreviewPath: '',
@@ -20,6 +21,7 @@ export default {
   canUpdate: false,
   canDestroy: false,
   canAdmin: false,
+  subepicsSupported: false,
 
   // Epic Information
   epicId: 0,

ee/spec/javascripts/epic/components/epic_body_spec.js

@@ -51,11 +51,27 @@ describe('EpicBodyComponent', () => {
       expect(vm.$el.querySelector('.description')).not.toBeNull();
     });
 
+    it('renders related epics list elements', () => {
+      const relatedEpicsEl = vm.$el.querySelector('.js-related-epics-block');
+
+      expect(relatedEpicsEl).not.toBeNull();
+      expect(relatedEpicsEl.querySelector('.card-title').innerText.trim()).toContain('Epics');
+      expect(relatedEpicsEl.querySelector('.js-related-issues-header-issue-count')).not.toBeNull();
+      expect(relatedEpicsEl.querySelector('button.js-issue-count-badge-add-button')).not.toBeNull();
+      expect(relatedEpicsEl.querySelector('.related-items-list')).not.toBeNull();
+    });
+
     it('renders related issues list elements', () => {
-      expect(vm.$el.querySelector('.related-issues-block')).not.toBeNull();
-      expect(vm.$el.querySelector('.js-related-issues-header-issue-count')).not.toBeNull();
-      expect(vm.$el.querySelector('.related-issues-token-body')).not.toBeNull();
-      expect(vm.$el.querySelector('.related-items-list')).not.toBeNull();
+      const relatedIssuesEl = vm.$el.querySelector('.js-related-issues-block');
+
+      expect(relatedIssuesEl).not.toBeNull();
+      expect(relatedIssuesEl.querySelector('.card-title').innerText.trim()).toContain('Issues');
+      expect(relatedIssuesEl.querySelector('.js-related-issues-header-issue-count')).not.toBeNull();
+      expect(
+        relatedIssuesEl.querySelector('button.js-issue-count-badge-add-button'),
+      ).not.toBeNull();
+
+      expect(relatedIssuesEl.querySelector('.related-items-list')).not.toBeNull();
     });
   });
 });