1 files changed, 82 insertions, 0 deletions
diff --git a/app/assets/javascripts/vue_shared/security_reports/components/artifact_downloads/merge_request_artifact_download.vue b/app/assets/javascripts/vue_shared/security_reports/components/artifact_downloads/merge_request_artifact_download.vue
new file mode 100644
index 00000000000..8fdc5ca78db
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/security_reports/components/artifact_downloads/merge_request_artifact_download.vue
@@ -0,0 +1,82 @@
+<script>
+import { reportTypeToSecurityReportTypeEnum } from 'ee_else_ce/vue_shared/security_reports/constants';
+import createFlash from '~/flash';
+import { s__ } from '~/locale';
+import SecurityReportDownloadDropdown from '~/vue_shared/security_reports/components/security_report_download_dropdown.vue';
+import securityReportMergeRequestDownloadPathsQuery from '~/vue_shared/security_reports/queries/security_report_merge_request_download_paths.query.graphql';
+import { extractSecurityReportArtifactsFromMergeRequest } from '~/vue_shared/security_reports/utils';
+
+export default {
+  components: {
+    SecurityReportDownloadDropdown,
+  },
+  props: {
+    reportTypes: {
+      type: Array,
+      required: true,
+      validator: (reportType) => {
+        return reportType.every((report) => reportTypeToSecurityReportTypeEnum[report]);
+      },
+    },
+    targetProjectFullPath: {
+      type: String,
+      required: true,
+    },
+    mrIid: {
+      type: Number,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      reportArtifacts: [],
+    };
+  },
+  apollo: {
+    reportArtifacts: {
+      query: securityReportMergeRequestDownloadPathsQuery,
+      variables() {
+        return {
+          projectPath: this.targetProjectFullPath,
+          iid: String(this.mrIid),
+          reportTypes: this.reportTypes.map(
+            (reportType) => reportTypeToSecurityReportTypeEnum[reportType],
+          ),
+        };
+      },
+      update(data) {
+        return extractSecurityReportArtifactsFromMergeRequest(this.reportTypes, data);
+      },
+      error(error) {
+        this.showError(error);
+      },
+    },
+  },
+  computed: {
+    isLoadingReportArtifacts() {
+      return this.$apollo.queries.reportArtifacts.loading;
+    },
+  },
+  methods: {
+    showError(error) {
+      createFlash({
+        message: this.$options.i18n.apiError,
+        captureError: true,
+        error,
+      });
+    },
+  },
+  i18n: {
+    apiError: s__(
+      'SecurityReports|Failed to get security report information. Please reload the page or try again later.',
+    ),
+  },
+};
+</script>
+
+<template>
+  <security-report-download-dropdown
+    :artifacts="reportArtifacts"
+    :loading="isLoadingReportArtifacts"
+  />
+</template>