feat(ens): support PDF reporting (#9158)

Co-authored-by: alejandrobailo <alejandrobailo94@gmail.com>

ui/components/compliance/compliance-download-button.tsx

@@ -0,0 +1,52 @@
+"use client";
+
+import { DownloadIcon } from "lucide-react";
+import { useState } from "react";
+
+import { Button } from "@/components/shadcn/button/button";
+import { toast } from "@/components/ui";
+import {
+  COMPLIANCE_REPORT_BUTTON_LABELS,
+  type ComplianceReportType,
+} from "@/lib/compliance/compliance-report-types";
+import { downloadComplianceReportPdf } from "@/lib/helper";
+
+interface ComplianceDownloadButtonProps {
+  scanId: string;
+  reportType: ComplianceReportType;
+  label?: string;
+}
+
+export const ComplianceDownloadButton = ({
+  scanId,
+  reportType,
+  label,
+}: ComplianceDownloadButtonProps) => {
+  const [isDownloading, setIsDownloading] = useState<boolean>(false);
+
+  const handleDownload = async () => {
+    setIsDownloading(true);
+    try {
+      await downloadComplianceReportPdf(scanId, reportType, toast);
+    } finally {
+      setIsDownloading(false);
+    }
+  };
+
+  const defaultLabel = COMPLIANCE_REPORT_BUTTON_LABELS[reportType];
+
+  return (
+    <Button
+      variant="default"
+      size="sm"
+      onClick={handleDownload}
+      disabled={isDownloading}
+    >
+      <DownloadIcon
+        className={isDownloading ? "animate-download-icon" : ""}
+        size={16}
+      />
+      <span className="hidden md:block">{label || defaultLabel}</span>
+    </Button>
+  );
+};

ui/components/compliance/index.ts

@@ -11,6 +11,7 @@ export * from "./compliance-charts/top-failed-sections-card";
 export * from "./compliance-custom-details/cis-details";
 export * from "./compliance-custom-details/ens-details";
 export * from "./compliance-custom-details/iso-details";
+export * from "./compliance-download-button";
 export * from "./compliance-header/compliance-header";
 export * from "./compliance-header/compliance-scan-info";
 export * from "./compliance-header/data-compliance";

ui/components/compliance/threatscore-badge.tsx

@@ -9,7 +9,11 @@ import { useState } from "react";
 import { ThreatScoreLogo } from "@/components/compliance/threatscore-logo";
 import { Button } from "@/components/shadcn/button/button";
 import { toast } from "@/components/ui";
-import { downloadComplianceCsv, downloadThreatScorePdf } from "@/lib/helper";
+import { COMPLIANCE_REPORT_TYPES } from "@/lib/compliance/compliance-report-types";
+import {
+  downloadComplianceCsv,
+  downloadComplianceReportPdf,
+} from "@/lib/helper";
 import type { ScanEntity } from "@/types/scans";
 
 interface ThreatScoreBadgeProps {
@@ -77,7 +81,11 @@ export const ThreatScoreBadge = ({
   const handleDownloadPdf = async () => {
     setIsDownloadingPdf(true);
     try {
-      await downloadThreatScorePdf(scanId, toast);
+      await downloadComplianceReportPdf(
+        scanId,
+        COMPLIANCE_REPORT_TYPES.THREATSCORE,
+        toast,
+      );
     } finally {
       setIsDownloadingPdf(false);
     }

ui/components/ui/breadcrumbs/breadcrumb-navigation.tsx

@@ -7,6 +7,7 @@ import { usePathname, useSearchParams } from "next/navigation";
 import { ReactNode } from "react";
 
 import { LighthouseIcon } from "@/components/icons/Icons";
+import { cn } from "@/lib/utils";
 
 export interface CustomBreadcrumbItem {
   name: string;
@@ -142,7 +143,7 @@ export function BreadcrumbNavigation({
   }
 
   return (
-    <div className={className}>
+    <div className={cn(className, "w-fit md:w-full")}>
       <Breadcrumbs separator="/">
         {breadcrumbItems.map((breadcrumb, index) => (
           <BreadcrumbItem key={breadcrumb.path || index}>