1 files changed, 40 insertions, 0 deletions
diff --git a/app/assets/javascripts/reports/components/test_issue_body.vue b/app/assets/javascripts/reports/components/test_issue_body.vue
new file mode 100644
index 00000000000..21dd1840807
--- /dev/null
+++ b/app/assets/javascripts/reports/components/test_issue_body.vue
@@ -0,0 +1,40 @@
+<script>
+  import { mapActions } from 'vuex';
+
+  export default {
+    props: {
+      issue: {
+        type: Object,
+        required: true,
+      },
+      // failed || success
+      status: {
+        type: String,
+        required: true,
+      },
+    },
+    methods: {
+      ...mapActions(['openModal']),
+      handleIssueClick() {
+        const { issue, status, openModal } = this;
+        openModal({ issue, status });
+      },
+    },
+  };
+</script>
+<template>
+  <div class="report-block-list-issue-description prepend-top-5 append-bottom-5">
+    <div class="report-block-list-issue-description-text">
+      <!-- TODO_SAM: I've duplicated this from modal_open_name, because it's expecting a title and we have name
+      Not sure if it's worth refactring now, or if it's ok to leave it duplciated and fix it when we move the components around
+       -->
+      <button
+        type="button"
+        class="btn-link btn-blank text-left break-link vulnerability-name-button"
+        @click="handleIssueClick()"
+      >
+        {{ issue.name }}
+      </button>
+    </div>
+  </div>
+</template>