Remove href link from pending references with a empty path

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

@@ -50,6 +50,12 @@ export default {
     hasTitle() {
       return this.title.length > 0;
     },
+    computedLinkElementType() {
+      return this.path.length > 0 ? 'a' : 'span';
+    },
+    computedPath() {
+      return this.path.length ? this.path : null;
+    },
   },
 
   methods: {
@@ -79,10 +85,11 @@ export default {
 
 <template>
   <div class="issue-token">
-    <a
+    <component
+      :is="this.computedLinkElementType"
       ref="link"
       class="issue-token-link"
-      :href="path"
+      :href="computedPath"
       :title="title"
       data-toggle="tooltip"
       data-placement="top">
@@ -110,7 +117,7 @@ export default {
           {{ title }}
         </span>
       </span>
-    </a>
+    </component>
     <button
       ref="removeButton"
       v-if="canRemove"

app/assets/stylesheets/pages/issues.scss

@@ -292,6 +292,12 @@ ul.related-merge-requests > li {
   display: inline-flex;
   min-width: 0;
 
+  color: $gl-text-color-secondary;
+
+  &[href] {
+    color: $gl-link-color;
+  }
+
   &:hover,
   &:focus {
     outline: none;

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

@@ -3,7 +3,7 @@ import eventHub from '~/issuable/related_issues/event_hub';
 import issueToken from '~/issuable/related_issues/components/issue_token.vue';
 
 describe('IssueToken', () => {
-  const idKey = '200';
+  const idKey = 200;
   const displayReference = 'foo/bar#123';
   const title = 'some title';
   let IssueToken;
@@ -32,6 +32,11 @@ describe('IssueToken', () => {
     it('shows reference', () => {
       expect(vm.$el.textContent.trim()).toEqual(displayReference);
     });
+
+    it('does not link without path specified', () => {
+      expect(vm.$refs.link.tagName.toLowerCase()).toEqual('span');
+      expect(vm.$refs.link.getAttribute('href')).toBeNull();
+    });
   });
 
   describe('with reference and title supplied', () => {