Part 1 of Pipeline and Merge request artifact downloads

* Create 2 parent components
* Add component unit tests
* Refactor util functions
* Update util unit tests

Fix compilation error

* Update imports

Fix linter error

* Rename mock data variable

app/assets/javascripts/vue_shared/security_reports/queries/security_report_mr_download_paths.query.graphql

+query securityReportDownloadPaths(
+  $projectPath: ID!
+  $iid: String!
+  $reportTypes: [SecurityReportTypeEnum!]
+) {
+  project(fullPath: $projectPath) {
+    mergeRequest(iid: $iid) {
+      headPipeline {
+        id
+        jobs(securityReportTypes: $reportTypes) {
+          nodes {
+            name
+            artifacts {
+              nodes {
+                downloadPath
+                fileType
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}

app/assets/javascripts/vue_shared/security_reports/queries/security_report_pipeline_download_paths.query.graphql

+query getCorpuses($projectPath: ID!, $iid: ID, $reportTypes: [SecurityReportTypeEnum!]) {
+  project(fullPath: $projectPath) {
+    pipeline(iid: $iid) {
+      id
+      jobs(securityReportTypes: $reportTypes) {
+        nodes {
+          name
+          artifacts {
+            nodes {
+              downloadPath
+              fileType
+            }
+          }
+        }
+      }
+    }
+  }
+}

app/assets/javascripts/vue_shared/security_reports/security_reports_app.vue

@@ -16,7 +16,7 @@ import {
 import securityReportDownloadPathsQuery from './queries/security_report_download_paths.query.graphql';
 import store from './store';
 import { MODULE_SAST, MODULE_SECRET_DETECTION } from './store/constants';
-import { extractSecurityReportArtifacts } from './utils';
+import { extractSecurityReportArtifactsFromMr } from './utils';
 
 export default {
   store,
@@ -97,7 +97,7 @@ export default {
         };
       },
       update(data) {
-        return extractSecurityReportArtifacts(this.$options.reportTypes, data);
+        return extractSecurityReportArtifactsFromMr(this.$options.reportTypes, data);
       },
       error(error) {
         this.showError(error);

app/assets/javascripts/vue_shared/security_reports/utils.js

@@ -14,9 +14,7 @@ const addReportTypeIfExists = (acc, reportTypes, reportType, getName, downloadPa
   }
 };
 
-export const extractSecurityReportArtifacts = (reportTypes, data) => {
-  const jobs = data.project?.mergeRequest?.headPipeline?.jobs?.nodes ?? [];
-
+const extractSecurityReportArtifacts = (reportTypes, jobs) => {
   return jobs.reduce((acc, job) => {
     const artifacts = job.artifacts?.nodes ?? [];
 
@@ -41,3 +39,13 @@ export const extractSecurityReportArtifacts = (reportTypes, data) => {
     return acc;
   }, []);
 };
+
+export const extractSecurityReportArtifactsFromPipeline = (reportTypes, data) => {
+  const jobs = data.project?.pipeline?.jobs?.nodes ?? [];
+  return extractSecurityReportArtifacts(reportTypes, jobs);
+};
+
+export const extractSecurityReportArtifactsFromMr = (reportTypes, data) => {
+  const jobs = data.project?.mergeRequest?.headPipeline?.jobs?.nodes ?? [];
+  return extractSecurityReportArtifacts(reportTypes, jobs);
+};

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

@@ -4,7 +4,7 @@ import createFlash from '~/flash';
 import { s__ } from '~/locale';
 import SecurityReportDownloadDropdown from '~/vue_shared/security_reports/components/security_report_download_dropdown.vue';
 import securityReportDownloadPathsQuery from '~/vue_shared/security_reports/queries/security_report_download_paths.query.graphql';
-import { extractSecurityReportArtifacts } from '~/vue_shared/security_reports/utils';
+import { extractSecurityReportArtifactsFromMr } from '~/vue_shared/security_reports/utils';
 
 export default {
   components: {
@@ -45,7 +45,7 @@ export default {
         };
       },
       update(data) {
-        return extractSecurityReportArtifacts(this.reportTypes, data);
+        return extractSecurityReportArtifactsFromMr(this.reportTypes, data);
       },
       error(error) {
         this.showError(error);

ee/app/assets/javascripts/vue_shared/security_reports/components/artifact_downloads/mr_artifact_download.vue

+<script>
+import { reportTypeToSecurityReportTypeEnum } from 'ee/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 securityReportDownloadPathsQuery from '~/vue_shared/security_reports/queries/security_report_mr_download_paths.query.graphql';
+import { extractSecurityReportArtifactsFromMr } 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: securityReportDownloadPathsQuery,
+      variables() {
+        return {
+          projectPath: this.targetProjectFullPath,
+          iid: String(this.mrIid),
+          reportTypes: this.reportTypes.map(
+            (reportType) => reportTypeToSecurityReportTypeEnum[reportType],
+          ),
+        };
+      },
+      update(data) {
+        return extractSecurityReportArtifactsFromMr(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>

ee/app/assets/javascripts/vue_shared/security_reports/components/artifact_downloads/pipeline_artifact_download.vue

+<script>
+import { reportTypeToSecurityReportTypeEnum } from 'ee/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 securityReportDownloadPathsQuery from '~/vue_shared/security_reports/queries/security_report_pipeline_download_paths.query.graphql';
+import { extractSecurityReportArtifactsFromPipeline } 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,
+    },
+    pipelineIid: {
+      type: Number,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      reportArtifacts: [],
+    };
+  },
+  apollo: {
+    reportArtifacts: {
+      query: securityReportDownloadPathsQuery,
+      variables() {
+        return {
+          projectPath: this.targetProjectFullPath,
+          iid: String(this.mrIid),
+          reportTypes: this.reportTypes.map(
+            (reportType) => reportTypeToSecurityReportTypeEnum[reportType],
+          ),
+        };
+      },
+      update(data) {
+        return extractSecurityReportArtifactsFromPipeline(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>

ee/app/assets/javascripts/vue_shared/security_reports/constants.js

@@ -3,6 +3,7 @@ import { invert } from 'lodash';
 import {
   reportTypeToSecurityReportTypeEnum as reportTypeToSecurityReportTypeEnumCE,
   REPORT_TYPE_API_FUZZING,
+  REPORT_TYPE_COVERAGE_FUZZING,
 } from '~/vue_shared/security_reports/constants';
 
 export * from '~/vue_shared/security_reports/constants';
@@ -13,6 +14,7 @@ export * from '~/vue_shared/security_reports/constants';
  * These should correspond to the lowercase security scan report types.
  */
 export const SECURITY_REPORT_TYPE_ENUM_API_FUZZING = 'API_FUZZING';
+export const SECURITY_REPORT_TYPE_ENUM_COVERAGE_FUZZING = 'COVERAGE_FUZZING';
 
 /* Override CE Definitions */
 
@@ -22,6 +24,7 @@ export const SECURITY_REPORT_TYPE_ENUM_API_FUZZING = 'API_FUZZING';
 export const reportTypeToSecurityReportTypeEnum = {
   ...reportTypeToSecurityReportTypeEnumCE,
   [REPORT_TYPE_API_FUZZING]: SECURITY_REPORT_TYPE_ENUM_API_FUZZING,
+  [REPORT_TYPE_COVERAGE_FUZZING]: SECURITY_REPORT_TYPE_ENUM_COVERAGE_FUZZING,
 };
 
 /**

ee/spec/frontend/vue_shared/security_reports/components/artifact_downloads/mr_artifact_download_spec.js

+import { shallowMount } from '@vue/test-utils';
+import Vue from 'vue';
+import VueApollo from 'vue-apollo';
+import Component from 'ee/vue_shared/security_reports/components/artifact_downloads/mr_artifact_download.vue';
+import {
+  REPORT_TYPE_SAST,
+  REPORT_TYPE_SECRET_DETECTION,
+} from 'ee/vue_shared/security_reports/constants';
+import createMockApollo from 'helpers/mock_apollo_helper';
+import {
+  expectedDownloadDropdownProps,
+  securityReportMrDownloadPathsQueryResponse,
+} from 'jest/vue_shared/security_reports/mock_data';
+import createFlash from '~/flash';
+import SecurityReportDownloadDropdown from '~/vue_shared/security_reports/components/security_report_download_dropdown.vue';
+import securityReportMrDownloadPathsQuery from '~/vue_shared/security_reports/queries/security_report_mr_download_paths.query.graphql';
+
+jest.mock('~/flash');
+
+describe('Mr Artifact Download', () => {
+  let wrapper;
+
+  const defaultProps = {
+    reportTypes: [REPORT_TYPE_SAST, REPORT_TYPE_SECRET_DETECTION],
+    targetProjectFullPath: '/path',
+    mrIid: 123,
+  };
+
+  const createWrapper = ({ propsData, options }) => {
+    wrapper = shallowMount(Component, {
+      stubs: {
+        SecurityReportDownloadDropdown,
+      },
+      propsData: {
+        ...defaultProps,
+        ...propsData,
+      },
+      ...options,
+    });
+  };
+
+  const pendingHandler = () => new Promise(() => {});
+  const successHandler = () =>
+    Promise.resolve({ data: securityReportMrDownloadPathsQueryResponse });
+  const failureHandler = () => Promise.resolve({ errors: [{ message: 'some error' }] });
+  const createMockApolloProvider = (handler) => {
+    Vue.use(VueApollo);
+    const requestHandlers = [[securityReportMrDownloadPathsQuery, handler]];
+
+    return createMockApollo(requestHandlers);
+  };
+
+  const findDownloadDropdown = () => wrapper.find(SecurityReportDownloadDropdown);
+
+  afterEach(() => {
+    wrapper.destroy();
+    wrapper = null;
+  });
+
+  describe('given the query is loading', () => {
+    beforeEach(() => {
+      createWrapper({
+        options: {
+          apolloProvider: createMockApolloProvider(pendingHandler),
+        },
+      });
+    });
+
+    it('loading is true', () => {
+      expect(findDownloadDropdown().props('loading')).toBe(true);
+    });
+  });
+
+  describe('given the query loads successfully', () => {
+    beforeEach(() => {
+      createWrapper({
+        options: {
+          apolloProvider: createMockApolloProvider(successHandler),
+        },
+      });
+    });
+
+    it('renders the download dropdown', () => {
+      expect(findDownloadDropdown().props()).toEqual(expectedDownloadDropdownProps);
+    });
+  });
+
+  describe('given the query fails', () => {
+    beforeEach(() => {
+      createWrapper({
+        options: {
+          apolloProvider: createMockApolloProvider(failureHandler),
+        },
+      });
+    });
+
+    it('calls createFlash correctly', () => {
+      expect(createFlash).toHaveBeenCalledWith({
+        message: Component.i18n.apiError,
+        captureError: true,
+        error: expect.any(Error),
+      });
+    });
+
+    it('renders nothing', () => {
+      expect(findDownloadDropdown().props('artifacts')).toEqual([]);
+    });
+  });
+});

ee/spec/frontend/vue_shared/security_reports/components/artifact_downloads/pipeline_artifact_download_spec.js

+import { shallowMount } from '@vue/test-utils';
+import Vue from 'vue';
+import VueApollo from 'vue-apollo';
+import Component from 'ee/vue_shared/security_reports/components/artifact_downloads/pipeline_artifact_download.vue';
+import {
+  REPORT_TYPE_SAST,
+  REPORT_TYPE_SECRET_DETECTION,
+} from 'ee/vue_shared/security_reports/constants';
+import createMockApollo from 'helpers/mock_apollo_helper';
+import {
+  expectedDownloadDropdownProps,
+  securityReportPipelineDownloadPathsQueryResponse,
+} from 'jest/vue_shared/security_reports/mock_data';
+import createFlash from '~/flash';
+import SecurityReportDownloadDropdown from '~/vue_shared/security_reports/components/security_report_download_dropdown.vue';
+import securityReportPipelineDownloadPathsQuery from '~/vue_shared/security_reports/queries/security_report_pipeline_download_paths.query.graphql';
+
+jest.mock('~/flash');
+
+describe('Mr Artifact Download', () => {
+  let wrapper;
+
+  const defaultProps = {
+    reportTypes: [REPORT_TYPE_SAST, REPORT_TYPE_SECRET_DETECTION],
+    targetProjectFullPath: '/path',
+    pipelineIid: 123,
+  };
+
+  const createWrapper = ({ propsData, options }) => {
+    wrapper = shallowMount(Component, {
+      stubs: {
+        SecurityReportDownloadDropdown,
+      },
+      propsData: {
+        ...defaultProps,
+        ...propsData,
+      },
+      ...options,
+    });
+  };
+
+  const pendingHandler = () => new Promise(() => {});
+  const successHandler = () =>
+    Promise.resolve({ data: securityReportPipelineDownloadPathsQueryResponse });
+  const failureHandler = () => Promise.resolve({ errors: [{ message: 'some error' }] });
+  const createMockApolloProvider = (handler) => {
+    Vue.use(VueApollo);
+    const requestHandlers = [[securityReportPipelineDownloadPathsQuery, handler]];
+
+    return createMockApollo(requestHandlers);
+  };
+
+  const findDownloadDropdown = () => wrapper.find(SecurityReportDownloadDropdown);
+
+  afterEach(() => {
+    wrapper.destroy();
+    wrapper = null;
+  });
+
+  describe('given the query is loading', () => {
+    beforeEach(() => {
+      createWrapper({
+        options: {
+          apolloProvider: createMockApolloProvider(pendingHandler),
+        },
+      });
+    });
+
+    it('loading is true', () => {
+      expect(findDownloadDropdown().props('loading')).toBe(true);
+    });
+  });
+
+  describe('given the query loads successfully', () => {
+    beforeEach(() => {
+      createWrapper({
+        options: {
+          apolloProvider: createMockApolloProvider(successHandler),
+        },
+      });
+    });
+
+    it('renders the download dropdown', () => {
+      expect(findDownloadDropdown().props()).toEqual(expectedDownloadDropdownProps);
+    });
+  });
+
+  describe('given the query fails', () => {
+    beforeEach(() => {
+      createWrapper({
+        options: {
+          apolloProvider: createMockApolloProvider(failureHandler),
+        },
+      });
+    });
+
+    it('calls createFlash correctly', () => {
+      expect(createFlash).toHaveBeenCalledWith({
+        message: Component.i18n.apiError,
+        captureError: true,
+        error: expect.any(Error),
+      });
+    });
+
+    it('renders nothing', () => {
+      expect(findDownloadDropdown().props('artifacts')).toEqual([]);
+    });
+  });
+});

spec/frontend/vue_shared/security_reports/mock_data.js

@@ -339,7 +339,7 @@ export const securityReportDownloadPathsQueryNoArtifactsResponse = {
   },
 };
 
-export const securityReportDownloadPathsQueryResponse = {
+export const securityReportMrDownloadPathsQueryResponse = {
   project: {
     mergeRequest: {
       headPipeline: {
@@ -447,6 +447,114 @@ export const securityReportDownloadPathsQueryResponse = {
   },
 };
 
+export const securityReportDownloadPathsQueryResponse = securityReportMrDownloadPathsQueryResponse;
+
+export const securityReportPipelineDownloadPathsQueryResponse = {
+  project: {
+    pipeline: {
+      id: 'gid://gitlab/Ci::Pipeline/176',
+      jobs: {
+        nodes: [
+          {
+            name: 'secret_detection',
+            artifacts: {
+              nodes: [
+                {
+                  downloadPath:
+                    '/gitlab-org/secrets-detection-test/-/jobs/1399/artifacts/download?file_type=trace',
+                  fileType: 'TRACE',
+                  __typename: 'CiJobArtifact',
+                },
+                {
+                  downloadPath:
+                    '/gitlab-org/secrets-detection-test/-/jobs/1399/artifacts/download?file_type=secret_detection',
+                  fileType: 'SECRET_DETECTION',
+                  __typename: 'CiJobArtifact',
+                },
+              ],
+              __typename: 'CiJobArtifactConnection',
+            },
+            __typename: 'CiJob',
+          },
+          {
+            name: 'bandit-sast',
+            artifacts: {
+              nodes: [
+                {
+                  downloadPath:
+                    '/gitlab-org/secrets-detection-test/-/jobs/1400/artifacts/download?file_type=trace',
+                  fileType: 'TRACE',
+                  __typename: 'CiJobArtifact',
+                },
+                {
+                  downloadPath:
+                    '/gitlab-org/secrets-detection-test/-/jobs/1400/artifacts/download?file_type=sast',
+                  fileType: 'SAST',
+                  __typename: 'CiJobArtifact',
+                },
+              ],
+              __typename: 'CiJobArtifactConnection',
+            },
+            __typename: 'CiJob',
+          },
+          {
+            name: 'eslint-sast',
+            artifacts: {
+              nodes: [
+                {
+                  downloadPath:
+                    '/gitlab-org/secrets-detection-test/-/jobs/1401/artifacts/download?file_type=trace',
+                  fileType: 'TRACE',
+                  __typename: 'CiJobArtifact',
+                },
+                {
+                  downloadPath:
+                    '/gitlab-org/secrets-detection-test/-/jobs/1401/artifacts/download?file_type=sast',
+                  fileType: 'SAST',
+                  __typename: 'CiJobArtifact',
+                },
+              ],
+              __typename: 'CiJobArtifactConnection',
+            },
+            __typename: 'CiJob',
+          },
+          {
+            name: 'all_artifacts',
+            artifacts: {
+              nodes: [
+                {
+                  downloadPath:
+                    '/gitlab-org/secrets-detection-test/-/jobs/1402/artifacts/download?file_type=archive',
+                  fileType: 'ARCHIVE',
+                  __typename: 'CiJobArtifact',
+                },
+                {
+                  downloadPath:
+                    '/gitlab-org/secrets-detection-test/-/jobs/1402/artifacts/download?file_type=trace',
+                  fileType: 'TRACE',
+                  __typename: 'CiJobArtifact',
+                },
+                {
+                  downloadPath:
+                    '/gitlab-org/secrets-detection-test/-/jobs/1402/artifacts/download?file_type=metadata',
+                  fileType: 'METADATA',
+                  __typename: 'CiJobArtifact',
+                },
+              ],
+              __typename: 'CiJobArtifactConnection',
+            },
+            __typename: 'CiJob',
+          },
+        ],
+        __typename: 'CiJobConnection',
+      },
+      __typename: 'Pipeline',
+    },
+    __typename: 'MergeRequest',
+  },
+  __typename: 'Project',
+};
+
 /**
  * These correspond to SAST jobs in the securityReportDownloadPathsQueryResponse above.
  */

spec/frontend/vue_shared/security_reports/utils_spec.js

@@ -3,9 +3,13 @@ import {
   REPORT_TYPE_SECRET_DETECTION,
   REPORT_FILE_TYPES,
 } from '~/vue_shared/security_reports/constants';
-import { extractSecurityReportArtifacts } from '~/vue_shared/security_reports/utils';
 import {
-  securityReportDownloadPathsQueryResponse,
+  extractSecurityReportArtifactsFromMr,
+  extractSecurityReportArtifactsFromPipeline,
+} from '~/vue_shared/security_reports/utils';
+import {
+  securityReportMrDownloadPathsQueryResponse,
+  securityReportPipelineDownloadPathsQueryResponse,
   sastArtifacts,
   secretDetectionArtifacts,
   archiveArtifacts,
@@ -13,7 +17,31 @@ import {
   metadataArtifacts,
 } from './mock_data';
 
-describe('extractSecurityReportArtifacts', () => {
+describe('extractSecurityReportArtifactsFromMr', () => {
+  it.each`
+    reportTypes                                         | expectedArtifacts
+    ${[]}                                               | ${[]}
+    ${['foo']}                                          | ${[]}
+    ${[REPORT_TYPE_SAST]}                               | ${sastArtifacts}
+    ${[REPORT_TYPE_SECRET_DETECTION]}                   | ${secretDetectionArtifacts}
+    ${[REPORT_TYPE_SAST, REPORT_TYPE_SECRET_DETECTION]} | ${[...secretDetectionArtifacts, ...sastArtifacts]}
+    ${[REPORT_FILE_TYPES.ARCHIVE]}                      | ${archiveArtifacts}
+    ${[REPORT_FILE_TYPES.TRACE]}                        | ${traceArtifacts}
+    ${[REPORT_FILE_TYPES.METADATA]}                     | ${metadataArtifacts}
+  `(
+    'returns the expected artifacts given report types $reportTypes',
+    ({ reportTypes, expectedArtifacts }) => {
+      expect(
+        extractSecurityReportArtifactsFromMr(
+          reportTypes,
+          securityReportMrDownloadPathsQueryResponse,
+        ),
+      ).toEqual(expectedArtifacts);
+    },
+  );
+});
+
+describe('extractSecurityReportArtifactsFromPipeline', () => {
   it.each`
     reportTypes                                         | expectedArtifacts
     ${[]}                                               | ${[]}
@@ -28,7 +56,10 @@ describe('extractSecurityReportArtifacts', () => {
     'returns the expected artifacts given report types $reportTypes',
     ({ reportTypes, expectedArtifacts }) => {
       expect(
-        extractSecurityReportArtifacts(reportTypes, securityReportDownloadPathsQueryResponse),
+        extractSecurityReportArtifactsFromPipeline(
+          reportTypes,
+          securityReportPipelineDownloadPathsQueryResponse,
+        ),
       ).toEqual(expectedArtifacts);
     },
   );