1 issue per row

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

@@ -144,11 +144,10 @@ export default {
         class="js-add-issuable-form-add-button btn btn-new pull-left"
         :disabled="isSubmitButtonDisabled">
         Add
-        <loadingIcon
+        <loading-icon
           ref="loadingIcon"
           v-if="isSubmitting"
-          :inline="true"
-          label="Submitting related issues" />
+          :inline="true" />
       </button>
       <button
         type="button"

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

+<script>
+import eventHub from '../event_hub';
+import tooltip from '../../../vue_shared/directives/tooltip';
+
+export default {
+  props: {
+    idKey: {
+      type: Number,
+      required: true,
+    },
+    displayReference: {
+      type: String,
+      required: true,
+    },
+    eventNamespace: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    title: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    path: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    state: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    canRemove: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
+
+  directives: {
+    tooltip,
+  },
+
+  computed: {
+    removeButtonLabel() {
+      return `Remove related issue ${this.displayReference}`;
+    },
+    hasState() {
+      return this.state && this.state.length > 0;
+    },
+    isOpen() {
+      return this.state === 'opened';
+    },
+    isClosed() {
+      return this.state === 'closed';
+    },
+    hasTitle() {
+      return this.title.length > 0;
+    },
+    computedLinkElementType() {
+      return this.path.length > 0 ? 'a' : 'span';
+    },
+    computedPath() {
+      return this.path.length ? this.path : null;
+    },
+  },
+
+  methods: {
+    onRemoveRequest() {
+      let namespacePrefix = '';
+      if (this.eventNamespace && this.eventNamespace.length > 0) {
+        namespacePrefix = `${this.eventNamespace}-`;
+      }
+
+      eventHub.$emit(`${namespacePrefix}removeRequest`, this.idKey);
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="flex-row">
+    <component
+      v-tooltip
+      :is="this.computedLinkElementType"
+      ref="link"
+      class="issue-token-link"
+      :href="computedPath"
+      :title="title"
+      data-placement="top">
+      <span
+        ref="reference"
+        class="issue-token-reference">
+        <i
+          ref="stateIcon"
+          v-if="hasState"
+          class="fa"
+          :class="{
+            'issue-token-state-icon-open fa-circle-o': isOpen,
+            'issue-token-state-icon-closed fa-minus': isClosed,
+          }"
+          :aria-label="state">
+        </i>
+        {{ displayReference }}
+      </span>
+      <span
+        v-if="hasTitle"
+        ref="title"
+        class="js-issue-token-title issue-token-title"
+        :class="{ 'issue-token-title-standalone': !canRemove }">
+        <span class="issue-token-title-text">
+          {{ title }}
+        </span>
+      </span>
+    </component>
+    <button
+      v-if="canRemove"
+      ref="removeButton"
+      type="button"
+      class="js-issue-token-remove-button btn btn-default"
+      style="margin-left: auto"
+      :aria-label="removeButtonLabel"
+      @click="onRemoveRequest">
+      <i
+        class="fa fa-times"
+        aria-hidden="true">
+      </i>
+    </button>
+  </div>
+</template>

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

@@ -2,7 +2,7 @@
 import loadingIcon from '~/vue_shared/components/loading_icon.vue';
 import tooltip from '~/vue_shared/directives/tooltip';
 import eventHub from '../event_hub';
-import issueToken from './issue_token.vue';
+import relatedIssue from './related_issue.vue';
 import addIssuableForm from './add_issuable_form.vue';
 
 export default {
@@ -67,7 +67,7 @@ export default {
   components: {
     loadingIcon,
     addIssuableForm,
-    issueToken,
+    relatedIssue,
   },
 
   computed: {
@@ -160,12 +160,12 @@ export default {
             label="Fetching related issues" />
         </div>
         <ul
-          class="related-issues-token-list">
+          class="flex-list content-list">
           <li
             :key="issue.id"
             v-for="issue in relatedIssues"
-            class="js-related-issues-token-list-item related-issues-token-list-item">
-            <issue-token
+            class="js-related-issues-token-list-item">
+            <related-issue
               event-namespace="relatedIssue"
               :id-key="issue.id"
               :display-reference="issue.reference"