Move spec files and mock data. Fix path references

Also some Prettier changes. Not sure why prettier-all-save
didn’t fix them in the previous commit.

app/assets/javascripts/vue_shared/components/issue/related_issuable_item.vue

@@ -89,8 +89,8 @@ export default {
             :milestone="milestone"
             class="d-flex align-items-center item-milestone"
           />
-          <slot name="dueDate"/>
-          <slot name="weight"/>
+          <slot name="dueDate"></slot>
+          <slot name="weight"></slot>
         </div>
         <issue-assignees
           v-if="assignees.length"
@@ -110,7 +110,7 @@ export default {
       aria-label="Remove"
       @click="onRemoveRequest"
     >
-      <icon :size="16" class="btn-item-remove-icon" name="close"/>
+      <icon :size="16" class="btn-item-remove-icon" name="close" />
     </button>
   </div>
 </template>

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

@@ -175,7 +175,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="issuableTypeIcon" class="mr-1 text-secondary"/>
+                <icon :name="issuableTypeIcon" class="mr-1 text-secondary" />
                 {{ badgeLabel }}
               </span>
             </div>
@@ -223,7 +223,11 @@ export default {
         class="related-issues-token-body"
       >
         <div v-if="isFetching" class="related-issues-loading-icon qa-related-issues-loading-icon">
-          <gl-loading-icon ref="loadingIcon" label="Fetching related issues" class="prepend-top-5"/>
+          <gl-loading-icon
+            ref="loadingIcon"
+            label="Fetching related issues"
+            class="prepend-top-5"
+          />
         </div>
         <ul ref="list" :class="{ 'content-list': !canReorder }" class="related-items-list">
           <li
@@ -258,15 +262,15 @@ export default {
             >
               <issue-weight
                 v-if="issue.weight"
-                :weight="issue.weight"
                 slot="weight"
+                :weight="issue.weight"
                 class="item-weight d-flex align-items-center"
                 tag-name="span"
               />
               <issue-due-date
                 v-if="issue.due_date"
-                :date="issue.due_date"
                 slot="dueDate"
+                :date="issue.due_date"
                 tooltip-placement="top"
                 css-class="item-due-date d-flex align-items-center"
               />

ee/changelogs/unreleased/related-mrs.yml

+---
+title: Make related issues components reusable
+merge_request: 9730
+author:
+type: other

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

 import Vue from 'vue';
 import relatedIssuesBlock from 'ee/related_issues/components/related_issues_block.vue';
-
-import { issuable1, issuable2, issuable3, issuable4, issuable5 } from '../mock_data';
+import {
+  issuable1,
+  issuable2,
+  issuable3,
+  issuable4,
+  issuable5,
+} from 'spec/vue_shared/components/issue/related_issuable_mock_data';
 
 describe('RelatedIssuesBlock', () => {
   let RelatedIssuesBlock;

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

@@ -2,8 +2,11 @@ import Vue from 'vue';
 import _ from 'underscore';
 import relatedIssuesRoot from 'ee/related_issues/components/related_issues_root.vue';
 import relatedIssuesService from 'ee/related_issues/services/related_issues_service';
-
-import { defaultProps, issuable1, issuable2 } from '../mock_data';
+import {
+  defaultProps,
+  issuable1,
+  issuable2,
+} from 'spec/vue_shared/components/issue/related_issuable_mock_data';
 
 describe('RelatedIssuesRoot', () => {
   let RelatedIssuesRoot;

ee/spec/javascripts/issuable/related_issues/stores/related_issues_store_spec.js

 import RelatedIssuesStore from 'ee/related_issues/stores/related_issues_store';
 
-import { issuable1, issuable2, issuable3, issuable4, issuable5 } from '../mock_data';
+import {
+  issuable1,
+  issuable2,
+  issuable3,
+  issuable4,
+  issuable5,
+} from 'spec/vue_shared/components/issue/related_issuable_mock_data';
 
 describe('RelatedIssuesStore', () => {
   let store;

qa/qa/ee/page/group/epic/show.rb

@@ -17,7 +17,7 @@ module QA
               element :add_issue_button
             end
 
-            view 'ee/app/assets/javascripts/related_issues/components/issue_item.vue' do
+            view 'app/assets/javascripts/vue_shared/components/issue/related_issuable_item.vue' do
               element :remove_issue_button
             end
 

ee/spec/javascripts/issuable/related_issues/components/issue_item_spec.js → spec/javascripts/vue_shared/components/issue/related_issuable_item_spec.js

 import Vue from 'vue';
-import issueItem from 'ee/related_issues/components/issue_item.vue';
+import issueItem from '~/vue_shared/components/issue/related_issuable_item.vue';
 import mountComponent from 'spec/helpers/vue_mount_component_helper';
-import { defaultMilestone, defaultAssignees } from '../mock_data';
+import { defaultMilestone, defaultAssignees } from './related_issuable_mock_data';
 
 describe('issueItem', () => {
   let vm;