add related issues component to Epic

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

@@ -54,6 +54,10 @@ export default {
       required: false,
       default: () => ({}),
     },
+    title: {
+      type: String,
+      required: true,
+    },
   },
 
   directives: {
@@ -100,7 +104,7 @@ export default {
         class="panel-heading"
         :class="{ 'panel-empty-heading': !this.hasBody }">
         <h3 class="panel-title">
-          Related issues
+          {{ title }}
           <a
             v-if="hasHelpPath"
             :href="helpPath">

app/assets/javascripts/issuable/related_issues/components/related_issues_root.vue

@@ -50,6 +50,11 @@ export default {
       required: false,
       default: '',
     },
+    title: {
+      type: String,
+      required: false,
+      default: 'Related issues',
+    },
   },
 
   data() {
@@ -137,7 +142,11 @@ export default {
           this.store.setRelatedIssues(issues);
           this.isFetching = false;
         })
-        .catch(() => new Flash('An error occurred while fetching related issues.'));
+        .catch(() => {
+          this.store.setRelatedIssues([]);
+          this.isFetching = false;
+          Flash('An error occurred while fetching issues.')
+        });
     },
 
     onInput(newValue, caretPos) {
@@ -215,5 +224,7 @@ export default {
     :pending-references="state.pendingReferences"
     :is-form-visible="isFormVisible"
     :input-value="inputValue"
-    :auto-complete-sources="autoCompleteSources" />
+    :auto-complete-sources="autoCompleteSources"
+    :title="title"
+  />
 </template>

app/assets/javascripts/issuable/related_issues/stores/related_issues_store.js

@@ -8,7 +8,7 @@ class RelatedIssuesStore {
     };
   }
 
-  setRelatedIssues(issues) {
+  setRelatedIssues(issues = []) {
     this.state.relatedIssues = issues;
   }
 

ee/app/assets/javascripts/epics/epic_show/components/epic_show_app.vue

 <script>
   import issuableApp from '~/issue_show/components/app.vue';
   import epicHeader from './epic_header.vue';
+  import relatedIssuesRoot from '~/issuable/related_issues/components/related_issues_root.vue';
+
 
   export default {
     name: 'epicShowApp',
@@ -59,6 +61,13 @@
     components: {
       epicHeader,
       issuableApp,
+      relatedIssuesRoot,
+    },
+    computed: {
+      // TODO: this should be a prop here, from a data-attribute on epic-show-app element
+      issuesEndpoint() {
+        return `${this.endpoint}/links`;
+      },
     },
     created() {
       // Epics specific configuration
@@ -91,6 +100,12 @@
         :project-namespace="projectNamespace"
         :show-inline-edit-button="true"
       />
+      <related-issues-root
+        :endpoint="issuesEndpoint"
+        :can-add-related-issues="true"
+        title="Issues"
+        help-path="/"
+      />
     </div>
   </div>
 </template>