Backports security reports reusable components into CE code base

7 files changed, 539 insertions, 0 deletions

diff --git a/app/assets/javascripts/vue_shared/components/reports/help_popover.vue b/app/assets/javascripts/vue_shared/components/reports/help_popover.vue
new file mode 100644
index 00000000000..c5faa29fd2a
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/reports/help_popover.vue
@@ -0,0 +1,48 @@
+<script>
+import $ from 'jquery';
+import Icon from '~/vue_shared/components/icon.vue';
+import { inserted } from '~/feature_highlight/feature_highlight_helper';
+import { mouseenter, debouncedMouseleave, togglePopover } from '~/shared/popover';
+
+export default {
+  name: 'ReportsHelpPopover',
+  components: {
+    Icon,
+  },
+  props: {
+    options: {
+      type: Object,
+      required: true,
+    },
+  },
+  mounted() {
+    const $el = $(this.$el);
+
+    $el
+      .popover({
+        html: true,
+        trigger: 'focus',
+        container: 'body',
+        placement: 'top',
+        template:
+          '<div class="popover" role="tooltip"><div class="arrow"></div><p class="popover-header"></p><div class="popover-body"></div></div>',
+        ...this.options,
+      })
+      .on('mouseenter', mouseenter)
+      .on('mouseleave', debouncedMouseleave(300))
+      .on('inserted.bs.popover', inserted)
+      .on('show.bs.popover', () => {
+        window.addEventListener('scroll', togglePopover.bind($el, false), { once: true });
+      });
+  },
+};
+</script>
+<template>
+  <button
+    type="button"
+    class="btn btn-blank btn-transparent btn-help"
+    tabindex="0"
+  >
+    <icon name="question" />
+  </button>
+</template>
diff --git a/app/assets/javascripts/vue_shared/components/reports/issues_list.vue b/app/assets/javascripts/vue_shared/components/reports/issues_list.vue
new file mode 100644
index 00000000000..e1e03e39ee0
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/reports/issues_list.vue
@@ -0,0 +1,99 @@
+<script>
+import IssuesBlock from './report_issues.vue';
+
+/**
+ * Renders block of issues
+ */
+
+export default {
+  components: {
+    IssuesBlock,
+  },
+  props: {
+    unresolvedIssues: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
+    resolvedIssues: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
+    neutralIssues: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
+    allIssues: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
+    type: {
+      type: String,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      isFullReportVisible: false,
+    };
+  },
+  computed: {
+    unresolvedIssuesStatus() {
+      return this.type === 'license' ? 'neutral' : 'failed';
+    },
+  },
+  methods: {
+    openFullReport() {
+      this.isFullReportVisible = true;
+    },
+  },
+};
+</script>
+<template>
+  <div class="report-block-container">
+
+    <issues-block
+      v-if="unresolvedIssues.length"
+      :type="type"
+      :status="unresolvedIssuesStatus"
+      :issues="unresolvedIssues"
+      class="js-mr-code-new-issues"
+    />
+
+    <issues-block
+      v-if="isFullReportVisible"
+      :type="type"
+      :issues="allIssues"
+      class="js-mr-code-all-issues"
+      status="failed"
+    />
+
+    <issues-block
+      v-if="neutralIssues.length"
+      :type="type"
+      :issues="neutralIssues"
+      class="js-mr-code-non-issues"
+      status="neutral"
+    />
+
+    <issues-block
+      v-if="resolvedIssues.length"
+      :type="type"
+      :issues="resolvedIssues"
+      class="js-mr-code-resolved-issues"
+      status="success"
+    />
+
+    <button
+      v-if="allIssues.length && !isFullReportVisible"
+      type="button"
+      class="btn-link btn-blank prepend-left-10 js-expand-full-list break-link"
+      @click="openFullReport"
+    >
+      {{ s__("ciReport|Show complete code vulnerabilities report") }}
+    </button>
+  </div>
+</template>
diff --git a/app/assets/javascripts/vue_shared/components/reports/modal_open_name.vue b/app/assets/javascripts/vue_shared/components/reports/modal_open_name.vue
new file mode 100644
index 00000000000..4f81cee2a38
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/reports/modal_open_name.vue
@@ -0,0 +1,33 @@
+<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>
+  <button
+    type="button"
+    class="btn-link btn-blank text-left break-link vulnerability-name-button"
+    @click="handleIssueClick()"
+  >
+    {{ issue.title }}
+  </button>
+</template>
diff --git a/app/assets/javascripts/vue_shared/components/reports/report_issues.vue b/app/assets/javascripts/vue_shared/components/reports/report_issues.vue
new file mode 100644
index 00000000000..ecffb02a3a0
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/reports/report_issues.vue
@@ -0,0 +1,72 @@
+<script>
+import Icon from '~/vue_shared/components/icon.vue';
+
+export default {
+  name: 'ReportIssues',
+  components: {
+    Icon,
+  },
+  props: {
+    issues: {
+      type: Array,
+      required: true,
+    },
+    type: {
+      type: String,
+      required: true,
+    },
+    // failed || success
+    status: {
+      type: String,
+      required: true,
+    },
+  },
+  computed: {
+    iconName() {
+      if (this.isStatusFailed) {
+        return 'status_failed_borderless';
+      } else if (this.isStatusSuccess) {
+        return 'status_success_borderless';
+      }
+
+      return 'status_created_borderless';
+    },
+    isStatusFailed() {
+      return this.status === 'failed';
+    },
+    isStatusSuccess() {
+      return this.status === 'success';
+    },
+    isStatusNeutral() {
+      return this.status === 'neutral';
+    },
+  },
+};
+</script>
+<template>
+  <div>
+    <ul class="report-block-list">
+      <li
+        v-for="(issue, index) in issues"
+        :class="{ 'is-dismissed': issue.isDismissed }"
+        :key="index"
+        class="report-block-list-issue"
+      >
+        <div
+          :class="{
+            failed: isStatusFailed,
+            success: isStatusSuccess,
+            neutral: isStatusNeutral,
+          }"
+          class="report-block-list-icon append-right-5"
+        >
+          <icon
+            :name="iconName"
+            :size="32"
+          />
+        </div>
+
+      </li>
+    </ul>
+  </div>
+</template>
diff --git a/app/assets/javascripts/vue_shared/components/reports/report_link.vue b/app/assets/javascripts/vue_shared/components/reports/report_link.vue
new file mode 100644
index 00000000000..74d68f9f439
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/reports/report_link.vue
@@ -0,0 +1,29 @@
+<script>
+export default {
+  name: 'ReportIssueLink',
+  props: {
+    issue: {
+      type: Object,
+      required: true,
+    },
+  },
+};
+</script>
+<template>
+  <div class="report-block-list-issue-description-link">
+    in
+
+    <a
+      v-if="issue.urlPath"
+      :href="issue.urlPath"
+      target="_blank"
+      rel="noopener noreferrer nofollow"
+      class="break-link"
+    >
+      {{ issue.path }}<template v-if="issue.line">:{{ issue.line }}</template>
+    </a>
+    <template v-else>
+      {{ issue.path }}<template v-if="issue.line">:{{ issue.line }}</template>
+    </template>
+  </div>
+</template>
diff --git a/app/assets/javascripts/vue_shared/components/reports/report_section.vue b/app/assets/javascripts/vue_shared/components/reports/report_section.vue
new file mode 100644
index 00000000000..d383ed99a0c
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/reports/report_section.vue
@@ -0,0 +1,192 @@
+<script>
+import { __ } from '~/locale';
+import StatusIcon from '~/vue_merge_request_widget/components/mr_widget_status_icon.vue';
+import IssuesList from './issues_list.vue';
+import Popover from './help_popover.vue';
+
+const LOADING = 'LOADING';
+const ERROR = 'ERROR';
+const SUCCESS = 'SUCCESS';
+
+export default {
+  name: 'ReportSection',
+  components: {
+    IssuesList,
+    StatusIcon,
+    Popover,
+  },
+  props: {
+    alwaysOpen: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    type: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    status: {
+      type: String,
+      required: true,
+    },
+    loadingText: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    errorText: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    successText: {
+      type: String,
+      required: true,
+    },
+    unresolvedIssues: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
+    resolvedIssues: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
+    neutralIssues: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
+    allIssues: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
+    infoText: {
+      type: [String, Boolean],
+      required: false,
+      default: false,
+    },
+    hasIssues: {
+      type: Boolean,
+      required: true,
+    },
+    popoverOptions: {
+      type: Object,
+      default: () => ({}),
+      required: false,
+    },
+  },
+
+  data() {
+    return {
+      isCollapsed: true,
+    };
+  },
+
+  computed: {
+    collapseText() {
+      return this.isCollapsed ? __('Expand') : __('Collapse');
+    },
+    isLoading() {
+      return this.status === LOADING;
+    },
+    loadingFailed() {
+      return this.status === ERROR;
+    },
+    isSuccess() {
+      return this.status === SUCCESS;
+    },
+    isCollapsible() {
+      return !this.alwaysOpen && this.hasIssues;
+    },
+    isExpanded() {
+      return this.alwaysOpen || !this.isCollapsed;
+    },
+    statusIconName() {
+      if (this.isLoading) {
+        return 'loading';
+      }
+      if (this.loadingFailed || this.unresolvedIssues.length || this.neutralIssues.length) {
+        return 'warning';
+      }
+      return 'success';
+    },
+    headerText() {
+      if (this.isLoading) {
+        return this.loadingText;
+      }
+
+      if (this.isSuccess) {
+        return this.successText;
+      }
+
+      if (this.loadingFailed) {
+        return this.errorText;
+      }
+
+      return '';
+    },
+    hasPopover() {
+      return Object.keys(this.popoverOptions).length > 0;
+    },
+  },
+  methods: {
+    toggleCollapsed() {
+      this.isCollapsed = !this.isCollapsed;
+    },
+  },
+};
+</script>
+<template>
+  <section class="media-section">
+    <div
+      class="media"
+    >
+      <status-icon
+        :status="statusIconName"
+      />
+      <div
+        class="media-body space-children d-flex"
+      >
+        <span
+          class="js-code-text code-text"
+        >
+          {{ headerText }}
+
+          <popover
+            v-if="hasPopover"
+            :options="popoverOptions"
+            class="prepend-left-5"
+          />
+        </span>
+
+        <button
+          v-if="isCollapsible"
+          type="button"
+          class="js-collapse-btn btn bt-default float-right btn-sm"
+          @click="toggleCollapsed"
+        >
+          {{ collapseText }}
+        </button>
+      </div>
+    </div>
+
+    <div
+      v-if="hasIssues"
+      v-show="isExpanded"
+      class="js-report-section-container"
+    >
+      <slot name="body">
+        <issues-list
+          :unresolved-issues="unresolvedIssues"
+          :resolved-issues="resolvedIssues"
+          :all-issues="allIssues"
+          :type="type"
+        />
+      </slot>
+    </div>
+  </section>
+</template>
diff --git a/app/assets/javascripts/vue_shared/components/reports/summary_row.vue b/app/assets/javascripts/vue_shared/components/reports/summary_row.vue
new file mode 100644
index 00000000000..997bad960e2
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/reports/summary_row.vue
@@ -0,0 +1,66 @@
+<script>
+import CiIcon from '~/vue_shared/components/ci_icon.vue';
+import LoadingIcon from '~/vue_shared/components/loading_icon.vue';
+import Popover from './help_popover.vue';
+
+/**
+ * Renders the summary row for each report
+ *
+ * Used both in MR widget and Pipeline's view for:
+ * - Unit tests reports
+ * - Security reports
+ */
+
+export default {
+  name: 'ReportSummaryRow',
+  components: {
+    CiIcon,
+    LoadingIcon,
+    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 report-block-list-issue-parent">
+    <div class="report-block-list-icon append-right-10 prepend-left-5">
+      <loading-icon
+        v-if="statusIcon === 'loading'"
+        css-class="report-block-list-loading-icon"
+      />
+      <ci-icon
+        v-else
+        :status="iconStatus"
+      />
+    </div>
+
+    <div class="report-block-list-issue-description">
+      <div class="report-block-list-issue-description-text">
+        {{ summary }}
+      </div>
+
+      <popover :options="popoverOptions" />
+    </div>
+  </div>
+</template>