Adds new components for grouped report in MR widget view

ee/app/assets/javascripts/vue_shared/security_reports/components/error_row.vue

+<script>
+import CiIcon from '~/vue_shared/components/ci_icon.vue';
+
+/**
+ * Renders the error row for each security report
+ */
+export default {
+  name: 'SecurityErrorRow',
+  components: {
+    CiIcon,
+  },
+  computed: {
+    iconStatus() {
+      return {
+        group: 'warning',
+        icon: 'status_warning',
+      };
+    },
+  },
+};
+</script>
+<template>
+  <div class="report-block-list-issue">
+    <div class="report-block-list-icon append-right-10 prepend-left-10">
+      <ci-icon :status="iconStatus" />
+    </div>
+    <div class="report-block-list-issue-description">
+      {{ __("There was an error loading results") }}
+    </div>
+  </div>
+</template>

ee/app/assets/javascripts/vue_shared/security_reports/components/loading_row.vue

+<script>
+import LoadingIcon from '~/vue_shared/components/loading_icon.vue';
+
+/**
+ * Renders the loading row for each security report
+ */
+
+export default {
+  name: 'SecurityLoadingRow',
+  components: {
+    LoadingIcon,
+  },
+};
+</script>
+<template>
+  <div class="report-block-list-issue">
+    <div class="report-block-list-icon append-right-15 prepend-left-10">
+      <loading-icon />
+    </div>
+    <div class="report-block-list-issue-description">
+      {{ __("in progress") }}
+    </div>
+  </div>
+</template>

ee/app/assets/javascripts/vue_shared/security_reports/components/summary_row.vue

+<script>
+import Icon from '~/vue_shared/components/icon.vue';
+import CiIcon from '~/vue_shared/components/ci_icon.vue';
+import popover from '~/vue_shared/directives/popover';
+
+/**
+ * Renders the summary row for each security report
+ */
+
+export default {
+  name: 'SecuritySummaryRow',
+  components: {
+    Icon,
+    CiIcon,
+  },
+  directives: {
+    popover,
+  },
+  props: {
+    summary: {
+      type: String,
+      required: true,
+    },
+    statusIcon: {
+      type: String,
+      required: true,
+    },
+    popoverTitle: {
+      type: String,
+      required: true,
+    },
+    popoverContent: {
+      type: String,
+      required: true,
+    },
+  },
+  computed: {
+    popoverOptions() {
+      return {
+        html: true,
+        trigger: 'focus',
+        placement: 'top',
+        title: this.popoverTitle,
+        content: this.popoverContent,
+        template: '<div class="popover" role="tooltip"><div class="arrow"></div><p class="popover-title"></p><div class="popover-content"></div></div>',
+      };
+    },
+    iconStatus() {
+      return {
+        group: this.statusIcon,
+        icon: `status_${this.statusIcon}`,
+      };
+    },
+  },
+};
+</script>
+<template>
+  <div class="report-block-list-issue">
+    <div class="report-block-list-icon append-right-10 prepend-left-10">
+      <ci-icon :status="iconStatus" />
+    </div>
+
+    <div class="report-block-list-issue-description">
+      <div class="report-block-list-issue-description-text append-right-5">
+        {{ summary }}
+      </div>
+
+      <button
+        type="button"
+        class="btn-transparent btn-blank"
+        v-popover="popoverOptions"
+        tabindex="0"
+      >
+        <icon name="question" />
+      </button>
+    </div>
+  </div>
+</template>

spec/javascripts/vue_shared/security_reports/components/error_row_spec.js

+import Vue from 'vue';
+import component from 'ee/vue_shared/security_reports/components/error_row.vue';
+import mountComponent from 'spec/helpers/vue_mount_component_helper';
+
+describe('loading row', () => {
+  const Component = Vue.extend(component);
+  let vm;
+
+  beforeEach(() => {
+    vm = mountComponent(Component);
+  });
+
+  afterEach(() => {
+    vm.$destroy();
+  });
+
+  it('renders warning icon with error message', () => {
+    expect(vm.$el.querySelector('.report-block-list-icon span').classList).toContain(
+      'js-ci-status-icon-warning',
+    );
+    expect(vm.$el.querySelector('.report-block-list-issue-description').textContent.trim()).toEqual(
+      'There was an error loading results',
+    );
+  });
+});

spec/javascripts/vue_shared/security_reports/components/loading_row_spec.js

+import Vue from 'vue';
+import component from 'ee/vue_shared/security_reports/components/loading_row.vue';
+import mountComponent from 'spec/helpers/vue_mount_component_helper';
+
+describe('loading row', () => {
+  const Component = Vue.extend(component);
+  let vm;
+
+  beforeEach(() => {
+    vm = mountComponent(Component);
+  });
+
+  afterEach(() => {
+    vm.$destroy();
+  });
+
+  it('renders loading icon with message', () => {
+    expect(vm.$el.querySelector('.report-block-list-icon i').classList).toContain('fa-spin');
+    expect(vm.$el.querySelector('.report-block-list-issue-description').textContent.trim()).toEqual(
+      'in progress',
+    );
+  });
+});

spec/javascripts/vue_shared/security_reports/components/summary_row_spec.js

+import Vue from 'vue';
+import component from 'ee/vue_shared/security_reports/components/summary_row.vue';
+import mountComponent from 'spec/helpers/vue_mount_component_helper';
+
+describe('Summary row', () => {
+  const Component = Vue.extend(component);
+  let vm;
+
+  const props = {
+    summary: 'SAST detected 1 new vulnerability and 1 fixed vulnerability',
+    popoverTitle: 'Static Application Security Testing (SAST)',
+    popoverContent: '<a>Learn more about SAST</a>',
+    statusIcon: 'warning',
+  };
+
+  beforeEach(() => {
+    vm = mountComponent(Component, props);
+  });
+
+  afterEach(() => {
+    vm.$destroy();
+  });
+
+  it('renders provided summary', () => {
+    expect(
+      vm.$el.querySelector('.report-block-list-issue-description-text').textContent.trim(),
+    ).toEqual(props.summary);
+  });
+
+  it('renders provided icon', () => {
+    expect(vm.$el.querySelector('.report-block-list-icon span').classList).toContain(
+      'js-ci-status-icon-warning',
+    );
+  });
+
+  it('renders tooltip with provided title and content', () => {
+    expect(vm.popoverOptions.title).toEqual(props.popoverTitle);
+    expect(vm.popoverOptions.content).toEqual(props.popoverContent);
+  });
+});