Adds frontend support to render test reports on theMR widget

Creates an app to render grouped test reports in the MR widget
Ports CSS from EE into CE
Creates a reusable code component
Adds getters and utils to the existing reports store

1 files changed, 48 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..13b7fdf58bc
--- /dev/null
+++ b/app/assets/javascripts/reports/components/test_issue_body.vue
@@ -0,0 +1,48 @@
+<script>
+  import { mapActions } from 'vuex';
+
+  export default {
+    name: 'TestIssueBody',
+    props: {
+      issue: {
+        type: Object,
+        required: true,
+      },
+      // failed || success
+      status: {
+        type: String,
+        required: true,
+      },
+      isNew: {
+        type: Boolean,
+        required: false,
+        default: false,
+      },
+    },
+    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">
+      <button
+        type="button"
+        class="btn-link btn-blank text-left break-link vulnerability-name-button"
+        @click="handleIssueClick()"
+      >
+        <div
+          v-if="isNew"
+          class="badge badge-danger append-right-5"
+        >
+          {{ s__('New') }}
+        </div>{{ issue.name }}
+      </button>
+    </div>
+  </div>
+</template>