1 files changed, 107 insertions, 0 deletions
diff --git a/app/assets/javascripts/vue_shared/security_reports/security_reports_app.vue b/app/assets/javascripts/vue_shared/security_reports/security_reports_app.vue
new file mode 100644
index 00000000000..d5696e3c8cf
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/security_reports/security_reports_app.vue
@@ -0,0 +1,107 @@
+<script>
+import { GlIcon, GlLink, GlSprintf } from '@gitlab/ui';
+import ReportSection from '~/reports/components/report_section.vue';
+import { status } from '~/reports/constants';
+import { s__ } from '~/locale';
+import Flash from '~/flash';
+import Api from '~/api';
+
+export default {
+  components: {
+    GlIcon,
+    GlLink,
+    GlSprintf,
+    ReportSection,
+  },
+  props: {
+    pipelineId: {
+      type: Number,
+      required: true,
+    },
+    projectId: {
+      type: Number,
+      required: true,
+    },
+    securityReportsDocsPath: {
+      type: String,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      hasSecurityReports: false,
+
+      // Error state is shown even when successfully loaded, since success
+      // state suggests that the security scans detected no security problems,
+      // which is not necessarily the case. A future iteration will actually
+      // check whether problems were found and display the appropriate status.
+      status: status.ERROR,
+    };
+  },
+  created() {
+    this.checkHasSecurityReports(this.$options.reportTypes)
+      .then(hasSecurityReports => {
+        this.hasSecurityReports = hasSecurityReports;
+      })
+      .catch(error => {
+        Flash({
+          message: this.$options.i18n.apiError,
+          captureError: true,
+          error,
+        });
+      });
+  },
+  methods: {
+    checkHasSecurityReports(reportTypes) {
+      return Api.pipelineJobs(this.projectId, this.pipelineId).then(({ data: jobs }) =>
+        jobs.some(({ artifacts = [] }) =>
+          artifacts.some(({ file_type }) => reportTypes.includes(file_type)),
+        ),
+      );
+    },
+    activatePipelinesTab() {
+      if (window.mrTabs) {
+        window.mrTabs.tabShown('pipelines');
+      }
+    },
+  },
+  reportTypes: ['sast', 'secret_detection'],
+  i18n: {
+    apiError: s__(
+      'SecurityReports|Failed to get security report information. Please reload the page or try again later.',
+    ),
+    scansHaveRun: s__(
+      'SecurityReports|Security scans have run. Go to the %{linkStart}pipelines tab%{linkEnd} to download the security reports',
+    ),
+    securityReportsHelp: s__('SecurityReports|Security reports help page link'),
+  },
+};
+</script>
+<template>
+  <report-section
+    v-if="hasSecurityReports"
+    :status="status"
+    :has-issues="false"
+    class="mr-widget-border-top mr-report"
+    data-testid="security-mr-widget"
+  >
+    <template #error>
+      <gl-sprintf :message="$options.i18n.scansHaveRun">
+        <template #link="{ content }">
+          <gl-link data-testid="show-pipelines" @click="activatePipelinesTab">{{
+            content
+          }}</gl-link>
+        </template>
+      </gl-sprintf>
+
+      <gl-link
+        target="_blank"
+        data-testid="help"
+        :href="securityReportsDocsPath"
+        :aria-label="$options.i18n.securityReportsHelp"
+      >
+        <gl-icon name="question" />
+      </gl-link>
+    </template>
+  </report-section>
+</template>