Add ref path from the api for issuables list

Add ref path being returned from the api
instead of creating locally in the component

app/assets/javascripts/issuables_list/components/issuable.vue

@@ -3,7 +3,7 @@
  * This is tightly coupled to projects/issues/_issue.html.haml,
  * any changes done to the haml need to be reflected here.
  */
-import { escape, isNumber } from 'underscore';
+import { escape, isNumber } from 'lodash';
 import { GlLink, GlTooltipDirective as GlTooltip } from '@gitlab/ui';
 import {
   dateInWords,
@@ -19,8 +19,6 @@ import { mergeUrlParams } from '~/lib/utils/url_utility';
 import Icon from '~/vue_shared/components/icon.vue';
 import IssueAssignees from '~/vue_shared/components/issue/issue_assignees.vue';
 
-const ISSUE_TOKEN = '#';
-
 export default {
   components: {
     Icon,
@@ -119,8 +117,7 @@ export default {
       );
     },
     referencePath() {
-      // TODO: The API should return the reference path (it doesn't now) https://gitlab.com/gitlab-org/gitlab/issues/31301
-      return `${ISSUE_TOKEN}${this.issuable.iid}`;
+      return this.issuable.references.relative;
     },
     updatedDateString() {
       return formatDate(new Date(this.issuable.updated_at), 'mmm d, yyyy h:MMtt');
@@ -230,7 +227,7 @@ export default {
         </div>
 
         <div class="issuable-info">
-          <span>{{ referencePath }}</span>
+          <span class="js-ref-path">{{ referencePath }}</span>
 
           <span class="d-none d-sm-inline-block mr-1">
             &middot;

spec/frontend/issuables_list/components/issuable_spec.js

@@ -122,6 +122,10 @@ describe('Issuable component', () => {
       expect(finder().exists()).toBe(false);
     });
 
+    it('show relative reference path', () => {
+      expect(wrapper.find('.js-ref-path').text()).toBe(issuable.references.relative);
+    });
+
     it('does not have closed text', () => {
       expect(wrapper.text()).not.toContain(TEXT_CLOSED);
     });

spec/frontend/issuables_list/issuable_list_test_data.js

@@ -26,6 +26,9 @@ export const simpleIssue = {
   web_url: 'http://localhost:3001/h5bp/html5-boilerplate/issues/31',
   has_tasks: false,
   weight: null,
+  references: {
+    relative: 'html-boilerplate#45',
+  },
 };
 
 export const testLabels = [