Move related issues components for reusability

We are building related MRs feature and it will have the same
look and feel with related issues widget.
However, related issues is a EE only feature but related MRs is not.
That’s why, to be able to reuse existing components,
I move them to ce/vue_shared and updated references.

ee/app/assets/javascripts/related_issues/components/issue_item.vue → app/assets/javascripts/vue_shared/components/issue/related_issuable_item.vue

@@ -3,9 +3,9 @@ import { GlTooltipDirective } from '@gitlab/ui';
 import { __, sprintf } from '~/locale';
 import IssueMilestone from '~/vue_shared/components/issue/issue_milestone.vue';
 import IssueAssignees from '~/vue_shared/components/issue/issue_assignees.vue';
+import relatedIssuableMixin from '~/vue_shared/mixins/related_issuable_mixin';
 import IssueDueDate from '~/boards/components/issue_due_date.vue';
 import IssueWeight from 'ee/boards/components/issue_card_weight.vue';
-import relatedIssueMixin from '../mixins/related_issues_mixin';
 
 export default {
   name: 'IssueItem',
@@ -18,7 +18,7 @@ export default {
   directives: {
     GlTooltip: GlTooltipDirective,
   },
-  mixins: [relatedIssueMixin],
+  mixins: [relatedIssuableMixin],
   props: {
     canReorder: {
       type: Boolean,
@@ -124,7 +124,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/issue_token.vue

 <script>
 import { __ } from '~/locale';
-import relatedIssueMixin from '../mixins/related_issues_mixin';
+import relatedIssuableMixin from '~/vue_shared/mixins/related_issuable_mixin';
 
 export default {
   name: 'IssueToken',
-  mixins: [relatedIssueMixin],
+  mixins: [relatedIssuableMixin],
   props: {
     isCondensed: {
       type: Boolean,
@@ -61,7 +61,7 @@ export default {
         }"
         class="js-issue-token-title"
       >
-        <span class="issue-token-title-text"> {{ title }} </span>
+        <span class="issue-token-title-text">{{ title }}</span>
       </component>
       <component
         :is="innerComponentType"
@@ -98,7 +98,7 @@ export default {
       class="js-issue-token-remove-button"
       @click="onRemoveRequest"
     >
-      <i class="fa fa-times" aria-hidden="true"> </i>
+      <i class="fa fa-times" aria-hidden="true"></i>
     </button>
   </div>
 </template>

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

@@ -2,10 +2,10 @@
 import Sortable from 'sortablejs';
 import tooltip from '~/vue_shared/directives/tooltip';
 import Icon from '~/vue_shared/components/icon.vue';
+import RelatedIssuableItem from '~/vue_shared/components/issue/related_issuable_item.vue';
 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 AddIssuableForm from './add_issuable_form.vue';
 import { issuableIconMap, issuableQaClassMap } from '../constants';
 
 export default {
@@ -15,8 +15,8 @@ export default {
   },
   components: {
     Icon,
-    addIssuableForm,
-    issueItem,
+    AddIssuableForm,
+    RelatedIssuableItem,
     GlLoadingIcon,
   },
   props: {
@@ -171,7 +171,8 @@ 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" /> {{ badgeLabel }}
+                <icon :name="issuableTypeIcon" class="mr-1 text-secondary"/>
+                {{ badgeLabel }}
               </span>
             </div>
             <button
@@ -218,11 +219,7 @@ 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
@@ -237,7 +234,7 @@ export default {
             :data-ordering-id="issuableOrderingId(issue)"
             class="js-related-issues-token-list-item list-item pt-0 pb-0"
           >
-            <issue-item
+            <related-issuable-item
               :id-key="issue.id"
               :display-reference="issue.reference"
               :confidential="issue.confidential"