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

5 files changed, 51 insertions, 4 deletions

diff --git a/app/assets/javascripts/vue_shared/components/code_block.vue b/app/assets/javascripts/vue_shared/components/code_block.vue
new file mode 100644
index 00000000000..30920a2a86d
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/code_block.vue
@@ -0,0 +1,16 @@
+<script>
+export default {
+  name: 'CodeBlock',
+  props: {
+    code: {
+      type: String,
+      required: true,
+    },
+  },
+};
+</script>
+<template>
+  <pre class="code-block build-trace-rounded">
+    <code class="bash">{{ code }}</code>
+  </pre>
+</template>
diff --git a/app/assets/javascripts/vue_shared/components/reports/issue_body.js b/app/assets/javascripts/vue_shared/components/reports/issue_body.js
index f2141e519da..54dfb7b16bf 100644
--- a/app/assets/javascripts/vue_shared/components/reports/issue_body.js
+++ b/app/assets/javascripts/vue_shared/components/reports/issue_body.js
@@ -1,3 +1,9 @@
-export const components = {};
+import TestIssueBody from '~/reports/components/test_issue_body.vue';
 
-export const componentNames = {};
+export const components = {
+  TestIssueBody,
+};
+
+export const componentNames = {
+  TestIssueBody: TestIssueBody.name,
+};
diff --git a/app/assets/javascripts/vue_shared/components/reports/issues_list.vue b/app/assets/javascripts/vue_shared/components/reports/issues_list.vue
index c01f77c2509..2545e84f932 100644
--- a/app/assets/javascripts/vue_shared/components/reports/issues_list.vue
+++ b/app/assets/javascripts/vue_shared/components/reports/issues_list.vue
@@ -18,6 +18,11 @@ export default {
   failed: STATUS_FAILED,
   neutral: STATUS_NEUTRAL,
   props: {
+    newIssues: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
     unresolvedIssues: {
       type: Array,
       required: false,
@@ -45,6 +50,15 @@ export default {
   <div class="report-block-container">
 
     <issues-block
+      v-if="newIssues.length"
+      :component="component"
+      :issues="newIssues"
+      class="js-mr-code-new-issues"
+      status="failed"
+      is-new
+    />
+
+    <issues-block
       v-if="unresolvedIssues.length"
       :component="component"
       :issues="unresolvedIssues"
diff --git a/app/assets/javascripts/vue_shared/components/reports/report_issues.vue b/app/assets/javascripts/vue_shared/components/reports/report_issues.vue
index 2d1f3d82234..1f13e555b31 100644
--- a/app/assets/javascripts/vue_shared/components/reports/report_issues.vue
+++ b/app/assets/javascripts/vue_shared/components/reports/report_issues.vue
@@ -24,6 +24,11 @@ export default {
       type: String,
       required: true,
     },
+    isNew: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
 };
 </script>
@@ -46,6 +51,7 @@ export default {
           :is="component"
           :issue="issue"
           :status="issue.status || status"
+          :is-new="isNew"
         />
       </li>
     </ul>
diff --git a/app/assets/javascripts/vue_shared/components/reports/summary_row.vue b/app/assets/javascripts/vue_shared/components/reports/summary_row.vue
index 997bad960e2..28156d7c983 100644
--- a/app/assets/javascripts/vue_shared/components/reports/summary_row.vue
+++ b/app/assets/javascripts/vue_shared/components/reports/summary_row.vue
@@ -29,7 +29,8 @@ export default {
     },
     popoverOptions: {
       type: Object,
-      required: true,
+      required: false,
+      default: null,
     },
   },
   computed: {
@@ -60,7 +61,11 @@ export default {
         {{ summary }}
       </div>
 
-      <popover :options="popoverOptions" />
+      <popover
+        v-if="popoverOptions"
+        :options="popoverOptions"
+      />
+
     </div>
   </div>
 </template>