Show Vuln reproduction assset download links

* Show in vuln details page
* Show in vuln modal

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

@@ -58,6 +58,9 @@ export default {
     namespace() {
       return this.vulnLocation?.operating_system;
     },
+    assets() {
+      return this.asNonEmptyListOrNull(this.vulnerability.assets);
+    },
     links() {
       return this.asNonEmptyListOrNull(this.vulnerability.links);
     },
@@ -258,5 +261,21 @@ export default {
         <span v-if="hasMoreValues(i, links)">,&nbsp;</span>
       </span>
     </vulnerability-detail>
+    <vulnerability-detail v-if="assets" :label="s__('Vulnerability|Reproduction Assets')">
+      <span v-for="(asset, i) in assets" :key="i">
+        <gl-link
+          v-if="asset.url"
+          ref="assetsLink"
+          class="gl-word-break-all"
+          :href="asset.url"
+          target="_blank"
+          rel="nofollow"
+        >
+          {{ s__('Vulnerability|Download') }} {{ asset.name }}
+        </gl-link>
+        <span v-else> {{ asset.name }} </span>
+        <span v-if="hasMoreValues(i, assets)">,&nbsp;</span>
+      </span>
+    </vulnerability-detail>
   </div>
 </template>

ee/app/assets/javascripts/vulnerabilities/components/details.vue

@@ -377,5 +377,24 @@ export default {
         </detail-item>
       </ul>
     </template>
+
+    <template v-if="vulnerability.assets && vulnerability.assets.length">
+      <h3>{{ s__('Vulnerability|Reproduction Assets') }}</h3>
+      <ul>
+        <li
+          v-for="(asset, index) in vulnerability.assets"
+          :key="`${index}:${asset.url}`"
+          class="gl-ml-0! gl-list-style-position-inside"
+        >
+          <component
+            :is="asset.url ? 'gl-link' : 'span'"
+            v-bind="asset.url && { href: asset.url, target: '_blank' }"
+            data-testid="asset"
+          >
+            {{ asset.name }}
+          </component>
+        </li>
+      </ul>
+    </template>
   </div>
 </template>

ee/changelogs/unreleased/292890-artifact-download-reproduction-assets.yml

+---
+title: Show Vulnerability reproduction asset downloads
+merge_request: 50748
+author:
+type: added

ee/spec/frontend/vue_shared/security_reports/components/__snapshots__/vulnerability_details_spec.js.snap

@@ -182,5 +182,7 @@ exports[`VulnerabilityDetails component pin test renders correctly 1`] = `
       <!---->
     </span>
   </vulnerability-detail-stub>
+   
+  <!---->
 </div>
 `;

ee/spec/frontend/vue_shared/security_reports/components/vulnerability_details_spec.js

@@ -112,6 +112,7 @@ describe('VulnerabilityDetails component', () => {
         },
         links: [{ url: badUrl }],
         identifiers: [{ name: 'BAD_URL', url: badUrl }],
+        assets: [{ name: 'BAD_URL', url: badUrl }],
       });
 
       componentFactory(vulnerability);
@@ -125,6 +126,10 @@ describe('VulnerabilityDetails component', () => {
       expectSafeLink({ link: findLink('identifiers'), href: 'about:blank', text: 'BAD_URL' });
     });
 
+    it('for the assets field', () => {
+      expectSafeLink({ link: findLink('assets'), href: 'about:blank', text: 'Download BAD_URL' });
+    });
+
     it('for the file field', () => {
       expectSafeLink({
         link: findLink('file'),

ee/spec/frontend/vulnerabilities/details_spec.js

@@ -124,6 +124,41 @@ describe('Vulnerability Details', () => {
     identifiersData.forEach(checkIdentifier);
   });
 
+  it('shows the vulnerability assets if they exist', () => {
+    const assetsData = [
+      { name: 'Postman Collection', url: 'http://example.com/postman' },
+      { name: 'HTTP Messages', url: 'http://example.com/http-messages' },
+      { name: 'Foo' },
+      { name: 'Bar' },
+    ];
+
+    createWrapper({
+      assets: assetsData,
+    });
+
+    const assets = getAllById('asset');
+
+    expect(assets).toHaveLength(assetsData.length);
+
+    const checkIdentifier = ({ name, url }, index) => {
+      const asset = assets.at(index);
+
+      expect(asset.text()).toBe(name);
+
+      if (url) {
+        expect(asset.is(GlLink)).toBe(true);
+        expect(asset.attributes()).toMatchObject({
+          target: '_blank',
+          href: url,
+        });
+      } else {
+        expect(asset.is(GlLink)).toBe(false);
+      }
+    };
+
+    assetsData.forEach(checkIdentifier);
+  });
+
   describe('file link', () => {
     const file = () => getById('file').find(GlLink);
 

locale/gitlab.pot

@@ -31192,6 +31192,9 @@ msgstr ""
 msgid "Vulnerability|Detected"
 msgstr ""
 
+msgid "Vulnerability|Download"
+msgstr ""
+
 msgid "Vulnerability|Evidence"
 msgstr ""
 
@@ -31219,6 +31222,9 @@ msgstr ""
 msgid "Vulnerability|Project"
 msgstr ""
 
+msgid "Vulnerability|Reproduction Assets"
+msgstr ""
+
 msgid "Vulnerability|Request"
 msgstr ""