Related issues FE -- Step 1: Add IssueToken

See Base MR: https://gitlab.com/gitlab-org/gitlab-ee/merge_requests/1797

• Adds IssueToken

---

easy testing `issuable_bundle.js`

import Vue from 'vue';
import {
  FETCHING_STATUS,
  FETCH_SUCCESS_STATUS,
  FETCH_ERROR_STATUS,
} from './related_issues/constants';

require('./time_tracking/time_tracking_bundle');

document.addEventListener('DOMContentLoaded', () => {
  const relatedIssuesRootElement = document.querySelector('.js-task-list-container');
  if (relatedIssuesRootElement) {
    relatedIssuesRootElement.insertAdjacentHTML('beforebegin', `
    
      .issue-token {
        margin-bottom: 0.5em;
        margin-right: 1em;
      }
    `);
// eslint-disable-next-line no-new
new Vue({
  el: relatedIssuesRootElement,
  data() {
    return {
      FETCHING_STATUS,
      FETCH_SUCCESS_STATUS,
      FETCH_ERROR_STATUS,
    };
  },
  components: {
    issueToken: require('./related_issues/components/issue_token.vue'),
  },
  template: `
    <div style="margin-top: 10px;">
      <issue-token
        reference="foo/bar#41"
        displayReference="#41"
        title="related issue test2"
        path="/foo/bar/issues/123"
        state="opened"
        :can-remove="true" />
      <issue-token
        reference="foo/bar#38"
        displayReference="#38"
        title="Service Desk (from eric@gitlab.com): efawewffewfew"
        path="/foo/bar/issues/123"
        state="opened"
        :can-remove="true" />
      <issue-token
        reference="foo/bar#123"
        displayReference="#123"
        title="Some Title"
        path="/foo/bar/issues/123"
        state="closed"
        :can-remove="true" />
      <issue-token
        reference="qux/garply#123"
        displayReference="qux/garply#123"
        title="No remove button"
        path="/foo/bar/issues/123"
        state="opened"
        :can-remove="false" />
      <issue-token
        reference="#foo/bar123"
        displayReference="#123"
        title="No remove button"
        path="/foo/bar/issues/123"
        :can-remove="false" />
      <issue-token
        reference="foo/bar#123"
        displayReference="#123"
        :fetch-status="FETCHING_STATUS"
        :can-remove="true" />
      <issue-token
        reference="foo/bar#123"
        displayReference="#123"
        :fetch-status="FETCH_ERROR_STATUS"
        :can-remove="true" />
    </div>
  `,
});

}
});