feat(artifacts): handle attestation bundle downloads

feat(artifacts): handle attestation bundle downloads

Author: kahboom

client/package.json

@@ -30,7 +30,6 @@
     "@tanstack/react-query-devtools": "^5.85.0",
     "axios": "^1.7.2",
     "dayjs": "^1.11.7",
-    "file-saver": "^2.0.5",
     "js-yaml": "^4.1.0",
     "oidc-client-ts": "^2.4.0",
     "pvtsutils": "^1.3.6",

client/src/app/pages/Artifacts/components/ArtifactAttestation.tsx

@@ -20,7 +20,7 @@ import {
 } from "@patternfly/react-core";
 import { useState } from "react";
 import { RekorEntryPanel } from "./RekorEntryPanel";
-import { relativeDateString } from "@app/utils/utils";
+import { handleDownloadBundle, relativeDateString } from "@app/utils/utils";
 import { EllipsisVIcon } from "@patternfly/react-icons";
 import { CertificateChain } from "./CertificateChain";
 import { LeafCertificate } from "./LeafCertificate";
@@ -35,7 +35,6 @@ export const ArtifactAttestation = ({ attestation }: { attestation: AttestationV
   const handleToggleActions = () => setActionsOpened(!isActionsOpened);
 
   const handleActionSelect = () => {
-    // TODO: probably some logic there
     setActionsOpened(false);
   };
 
@@ -111,7 +110,11 @@ export const ArtifactAttestation = ({ attestation }: { attestation: AttestationV
             onOpenChange={setActionsOpened}
           >
             <DropdownList>
-              <DropdownItem key="download bundle" isDisabled>
+              <DropdownItem
+                key="download bundle"
+                onClick={() => handleDownloadBundle(attestation)}
+                isDisabled={!attestation.rawBundleJson}
+              >
                 Download Bundle
               </DropdownItem>
             </DropdownList>

client/src/app/utils/utils.ts

@@ -7,6 +7,7 @@ import type {
   ParsedCertificate,
   SignatureIdentity,
   SignatureView,
+  AttestationView,
 } from "@app/queries/artifacts.view-model";
 
 // minimal shape required for eslint, uses only we actually need
@@ -180,24 +181,21 @@ export const getRekorSetBytes = (signedEntryTimestamp?: string): Uint8Array | un
   }
 };
 
-export const handleDownloadBundle = (signature: SignatureView) => {
-  if (!signature.rawBundleJson) {
+export const handleDownloadBundle = (source: SignatureView | AttestationView): void => {
+  if (!source.rawBundleJson) {
     return;
   }
 
   const bundleString =
-    typeof signature.rawBundleJson === "string"
-      ? signature.rawBundleJson
-      : JSON.stringify(signature.rawBundleJson, null, 2);
-
-  const blob = new Blob([bundleString], {
-    type: "application/json",
-  });
+    typeof source.rawBundleJson === "string" ? source.rawBundleJson : JSON.stringify(source.rawBundleJson, null, 2);
 
+  const blob = new Blob([bundleString], { type: "application/json" });
   const url = URL.createObjectURL(blob);
 
   const link = document.createElement("a");
-  const hashPrefix = signature.hash.value.slice(0, 12);
+  const hashValue = "hash" in source ? source.hash.value : source.digest.value;
+  const hashPrefix = hashValue.slice(0, 12);
+
   link.download = `sigstore-bundle-${hashPrefix}.json`;
   link.href = url;
   document.body.appendChild(link);