Reuse PathIdSeparator constants

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

 <script>
 import { mapState, mapGetters } from 'vuex';
 
+import { PathIdSeparator } from 'ee/related_issues/constants';
+
 import IssuableBody from '~/issue_show/components/app.vue';
 import IssuableSidebar from '~/issuable_sidebar/components/sidebar_app.vue';
 import RelatedItems from 'ee/related_issues/components/related_issues_root.vue';
@@ -8,7 +10,7 @@ import RelatedItems from 'ee/related_issues/components/related_issues_root.vue';
 import EpicSidebar from './epic_sidebar.vue';
 
 export default {
-  epicsPathIdSeparator: '&',
+  PathIdSeparator,
   components: {
     IssuableBody,
     IssuableSidebar,
@@ -78,7 +80,7 @@ export default {
       :can-admin="canAdmin"
       :can-reorder="canAdmin"
       :allow-auto-complete="false"
-      :path-id-separator="$options.epicsPathIdSeparator"
+      :path-id-separator="$options.PathIdSeparator.Epic"
       :title="__('Epics')"
       issuable-type="epic"
       css-class="js-related-epics-block"

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

@@ -34,6 +34,7 @@ import {
   pathIndeterminateErrorMap,
   addRelatedIssueErrorMap,
   issuableTypesMap,
+  PathIdSeparator,
 } from '../constants';
 
 export default {
@@ -79,7 +80,7 @@ export default {
     pathIdSeparator: {
       type: String,
       required: false,
-      default: '#',
+      default: PathIdSeparator.Issue,
     },
     cssClass: {
       type: String,

ee/app/assets/javascripts/related_issues/constants.js

@@ -59,3 +59,8 @@ export const issuableQaClassMap = {
   [issuableTypesMap.ISSUE]: 'qa-add-issues-button',
   [issuableTypesMap.EPIC]: 'qa-add-epics-button',
 };
+
+export const PathIdSeparator = {
+  Epic: '&',
+  Issue: '#',
+};

ee/app/assets/javascripts/related_items_tree/components/related_items_tree_app.vue

@@ -14,10 +14,9 @@ import TreeItemRemoveModal from './tree_item_remove_modal.vue';
 import RelatedItemsTreeHeader from './related_items_tree_header.vue';
 import RelatedItemsTreeBody from './related_items_tree_body.vue';
 
-import { PathIdSeparator, OVERFLOW_AFTER } from '../constants';
+import { OVERFLOW_AFTER } from '../constants';
 
 export default {
-  PathIdSeparator,
   OVERFLOW_AFTER,
   components: {
     GlLoadingIcon,

ee/app/assets/javascripts/related_items_tree/constants.js

@@ -12,11 +12,6 @@ export const ChildState = {
   Closed: 'closed',
 };
 
-export const PathIdSeparator = {
-  Epic: '&',
-  Issue: '#',
-};
-
 export const idProp = {
   Epic: 'id',
   Issue: 'epicIssueId',

ee/app/assets/javascripts/related_items_tree/store/getters.js

-import { issuableTypesMap } from 'ee/related_issues/constants';
-import { ChildType, PathIdSeparator } from '../constants';
+import { issuableTypesMap, PathIdSeparator } from 'ee/related_issues/constants';
+import { ChildType } from '../constants';
 
 export const autoCompleteSources = () => gl.GfmAutoComplete && gl.GfmAutoComplete.dataSources;
 

ee/app/assets/javascripts/related_items_tree/utils/epic_utils.js

 import createGqClient from '~/lib/graphql';
 
-import { ChildType, PathIdSeparator } from '../constants';
+import { PathIdSeparator } from 'ee/related_issues/constants';
+import { ChildType } from '../constants';
 
 export const gqClient = createGqClient();
 

ee/spec/frontend/related_issues/components/related_issuable_input_spec.js

 import { shallowMount } from '@vue/test-utils';
 import { TEST_HOST } from 'helpers/test_constants';
-import { issuableTypesMap } from 'ee/related_issues/constants';
+import { issuableTypesMap, PathIdSeparator } from 'ee/related_issues/constants';
 import RelatedIssuableInput from 'ee/related_issues/components/related_issuable_input.vue';
 
 jest.mock('ee_else_ce/gfm_auto_complete', () => ({
@@ -20,7 +20,7 @@ describe('RelatedIssuableInput', () => {
     propsData = {
       inputValue: '',
       references: [],
-      pathIdSeparator: '#',
+      pathIdSeparator: PathIdSeparator.Issue,
       issuableType: issuableTypesMap.issue,
       autoCompleteSources: {
         issues: `${TEST_HOST}/h5bp/html5-boilerplate/-/autocomplete_sources/issues`,

ee/spec/frontend/related_items_tree/utils/epic_utils_spec.js

 import * as epicUtils from 'ee/related_items_tree/utils/epic_utils';
 
-import { ChildType, PathIdSeparator } from 'ee/related_items_tree/constants';
+import { PathIdSeparator } from 'ee/related_issues/constants';
+import { ChildType } from 'ee/related_items_tree/constants';
 
 import {
   mockQueryResponse,

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

 import Vue from 'vue';
+import { PathIdSeparator } from 'ee/related_issues/constants';
 import addIssuableForm from 'ee/related_issues/components/add_issuable_form.vue';
 
 const issuable1 = {
@@ -19,7 +20,7 @@ const issuable2 = {
   state: 'opened',
 };
 
-const pathIdSeparator = '#';
+const pathIdSeparator = PathIdSeparator.Issue;
 
 describe('AddIssuableForm', () => {
   let AddIssuableForm;

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

 import Vue from 'vue';
+import { PathIdSeparator } from 'ee/related_issues/constants';
 import issueToken from 'ee/related_issues/components/issue_token.vue';
 
 describe('IssueToken', () => {
   const idKey = 200;
   const displayReference = 'foo/bar#123';
   const title = 'some title';
-  const pathIdSeparator = '#';
+  const pathIdSeparator = PathIdSeparator.Issue;
   const eventNamespace = 'pendingIssuable';
   let IssueToken;
   let vm;

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

@@ -7,6 +7,7 @@ import {
   issuable4,
   issuable5,
 } from 'spec/vue_shared/components/issue/related_issuable_mock_data';
+import { PathIdSeparator } from 'ee/related_issues/constants';
 
 describe('RelatedIssuesBlock', () => {
   let RelatedIssuesBlock;
@@ -26,7 +27,7 @@ describe('RelatedIssuesBlock', () => {
     beforeEach(() => {
       vm = new RelatedIssuesBlock({
         propsData: {
-          pathIdSeparator: '#',
+          pathIdSeparator: PathIdSeparator.Issue,
           issuableType: 'issue',
         },
       }).$mount();
@@ -49,7 +50,7 @@ describe('RelatedIssuesBlock', () => {
     beforeEach(() => {
       vm = new RelatedIssuesBlock({
         propsData: {
-          pathIdSeparator: '#',
+          pathIdSeparator: PathIdSeparator.Issue,
           isFetching: true,
           issuableType: 'issue',
         },
@@ -69,7 +70,7 @@ describe('RelatedIssuesBlock', () => {
     beforeEach(() => {
       vm = new RelatedIssuesBlock({
         propsData: {
-          pathIdSeparator: '#',
+          pathIdSeparator: PathIdSeparator.Issue,
           canAdmin: true,
           issuableType: 'issue',
         },
@@ -85,7 +86,7 @@ describe('RelatedIssuesBlock', () => {
     beforeEach(() => {
       vm = new RelatedIssuesBlock({
         propsData: {
-          pathIdSeparator: '#',
+          pathIdSeparator: PathIdSeparator.Issue,
           isFormVisible: true,
           issuableType: 'issue',
         },
@@ -101,7 +102,7 @@ describe('RelatedIssuesBlock', () => {
     beforeEach(() => {
       vm = new RelatedIssuesBlock({
         propsData: {
-          pathIdSeparator: '#',
+          pathIdSeparator: PathIdSeparator.Issue,
           relatedIssues: [issuable1, issuable2],
           issuableType: 'issue',
         },
@@ -117,7 +118,7 @@ describe('RelatedIssuesBlock', () => {
     beforeEach(() => {
       vm = new RelatedIssuesBlock({
         propsData: {
-          pathIdSeparator: '#',
+          pathIdSeparator: PathIdSeparator.Issue,
           relatedIssues: [issuable1, issuable2, issuable3, issuable4, issuable5],
           issuableType: 'issue',
         },
@@ -167,7 +168,7 @@ describe('RelatedIssuesBlock', () => {
       it(`issuableType=${issuableType} is passed`, () => {
         vm = new RelatedIssuesBlock({
           propsData: {
-            pathIdSeparator: '#',
+            pathIdSeparator: PathIdSeparator.Issue,
             issuableType,
           },
         }).$mount();
@@ -183,7 +184,7 @@ describe('RelatedIssuesBlock', () => {
     it('issuableType is epic', () => {
       vm = new RelatedIssuesBlock({
         propsData: {
-          pathIdSeparator: '#',
+          pathIdSeparator: PathIdSeparator.Issue,
           issuableType: 'issue',
         },
       }).$mount();
@@ -196,7 +197,7 @@ describe('RelatedIssuesBlock', () => {
     it('issuableType is issue', () => {
       vm = new RelatedIssuesBlock({
         propsData: {
-          pathIdSeparator: '#',
+          pathIdSeparator: PathIdSeparator.Issue,
           issuableType: 'epic',
         },
       }).$mount();
@@ -217,7 +218,7 @@ describe('RelatedIssuesBlock', () => {
     it('issuableType is epic', () => {
       vm = new RelatedIssuesBlock({
         propsData: {
-          pathIdSeparator: '#',
+          pathIdSeparator: PathIdSeparator.Issue,
           issuableType: 'epic',
           relatedIssues,
         },
@@ -233,7 +234,7 @@ describe('RelatedIssuesBlock', () => {
     it('issuableType is issue', () => {
       vm = new RelatedIssuesBlock({
         propsData: {
-          pathIdSeparator: '#',
+          pathIdSeparator: PathIdSeparator.Issue,
           issuableType: 'issue',
           relatedIssues,
         },

ee/spec/javascripts/related_items_tree/components/tree_item_body_spec.js

@@ -13,12 +13,13 @@ import StateTooltip from 'ee/related_items_tree/components/state_tooltip.vue';
 import createDefaultStore from 'ee/related_items_tree/store';
 import * as epicUtils from 'ee/related_items_tree/utils/epic_utils';
 import { ChildType, ChildState } from 'ee/related_items_tree/constants';
+import { PathIdSeparator } from 'ee/related_issues/constants';
 
 import { mockParentItem, mockInitialConfig, mockQueryResponse, mockIssue1 } from '../mock_data';
 
 const mockItem = Object.assign({}, mockIssue1, {
   type: ChildType.Issue,
-  pathIdSeparator: '#',
+  pathIdSeparator: PathIdSeparator.Issue,
   assignees: epicUtils.extractIssueAssignees(mockIssue1.assignees),
 });
 

ee/spec/javascripts/related_items_tree/components/tree_item_remove_modal_spec.js

@@ -6,12 +6,13 @@ import TreeItemRemoveModal from 'ee/related_items_tree/components/tree_item_remo
 import createDefaultStore from 'ee/related_items_tree/store';
 import * as epicUtils from 'ee/related_items_tree/utils/epic_utils';
 import { ChildType } from 'ee/related_items_tree/constants';
+import { PathIdSeparator } from 'ee/related_issues/constants';
 
 import { mockParentItem, mockQueryResponse, mockIssue1 } from '../mock_data';
 
 const mockItem = Object.assign({}, mockIssue1, {
   type: ChildType.Issue,
-  pathIdSeparator: '#',
+  pathIdSeparator: PathIdSeparator.Issue,
   assignees: epicUtils.extractIssueAssignees(mockIssue1.assignees),
 });
 

ee/spec/javascripts/related_items_tree/components/tree_item_spec.js

@@ -10,12 +10,13 @@ import TreeRoot from 'ee/related_items_tree/components/tree_root.vue';
 import createDefaultStore from 'ee/related_items_tree/store';
 import * as epicUtils from 'ee/related_items_tree/utils/epic_utils';
 import { ChildType } from 'ee/related_items_tree/constants';
+import { PathIdSeparator } from 'ee/related_issues/constants';
 
 import { mockParentItem, mockQueryResponse, mockEpic1 } from '../mock_data';
 
 const mockItem = Object.assign({}, mockEpic1, {
   type: ChildType.Epic,
-  pathIdSeparator: '&',
+  pathIdSeparator: PathIdSeparator.Epic,
 });
 
 const createComponent = (parentItem = mockParentItem, item = mockItem) => {

ee/spec/javascripts/related_items_tree/store/actions_spec.js

@@ -5,8 +5,8 @@ import * as actions from 'ee/related_items_tree/store/actions';
 import * as types from 'ee/related_items_tree/store/mutation_types';
 
 import * as epicUtils from 'ee/related_items_tree/utils/epic_utils';
-import { ChildType, ChildState, PathIdSeparator } from 'ee/related_items_tree/constants';
-import { issuableTypesMap } from 'ee/related_issues/constants';
+import { ChildType, ChildState } from 'ee/related_items_tree/constants';
+import { issuableTypesMap, PathIdSeparator } from 'ee/related_issues/constants';
 
 import axios from '~/lib/utils/axios_utils';
 import testAction from 'spec/helpers/vuex_action_helper';
@@ -970,7 +970,7 @@ describe('RelatedItemTree', () => {
           const createdEpic = Object.assign({}, mockEpics[0], {
             id: `gid://gitlab/Epic/${mockEpics[0].id}`,
             reference: `${mockEpics[0].group.fullPath}${mockEpics[0].reference}`,
-            pathIdSeparator: '&',
+            pathIdSeparator: PathIdSeparator.Epic,
           });
           state.epicsBeginAtIndex = 0;
           state.parentItem = {

spec/frontend/vue_shared/components/issue/related_issuable_item_spec.js

 import Vue from 'vue';
 import { formatDate } from '~/lib/utils/datetime_utility';
 import { mount, createLocalVue } from '@vue/test-utils';
+import { PathIdSeparator } from 'ee/related_issues/constants';
 import RelatedIssuableItem from '~/vue_shared/components/issue/related_issuable_item.vue';
 import {
   defaultAssignees,
@@ -12,7 +13,7 @@ describe('RelatedIssuableItem', () => {
   const props = {
     idKey: 1,
     displayReference: 'gitlab-org/gitlab-test#1',
-    pathIdSeparator: '#',
+    pathIdSeparator: PathIdSeparator.Issue,
     path: `${gl.TEST_HOST}/path`,
     title: 'title',
     confidential: true,