Merge branch '4310-new-components-rows' into 'master'

Resolve "Group security issues panels in the MR widget"

See merge request gitlab-org/gitlab-ee!5116

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 prepend-left-default append-right-default">
+    <div class="report-block-list-icon append-right-10 prepend-left-5">
+      <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/help_popover.vue

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