From d33703b4370fe6a8c2921845125b3de06e93f1d1 Mon Sep 17 00:00:00 2001
From: Pablo Lara <larabjj@gmail.com>
Date: Tue, 6 May 2025 11:57:18 +0200
Subject: [PATCH] feat: add new component download icon button

---
 .../scans/table/scans/column-get-scans.tsx    | 22 +++---------
 .../download-icon-button.tsx                  | 34 +++++++++++++++++++
 ui/components/ui/index.ts                     |  1 +
 3 files changed, 40 insertions(+), 17 deletions(-)
 create mode 100644 ui/components/ui/download-icon-button/download-icon-button.tsx

diff --git a/ui/components/scans/table/scans/column-get-scans.tsx b/ui/components/scans/table/scans/column-get-scans.tsx
index c931cde668..6316c6080e 100644
--- a/ui/components/scans/table/scans/column-get-scans.tsx
+++ b/ui/components/scans/table/scans/column-get-scans.tsx
@@ -2,16 +2,13 @@
 
 import { Tooltip } from "@nextui-org/react";
 import { ColumnDef } from "@tanstack/react-table";
-import { DownloadIcon } from "lucide-react";
 import { useSearchParams } from "next/navigation";
 
 import { InfoIcon } from "@/components/icons";
-import { toast } from "@/components/ui";
-import { CustomButton } from "@/components/ui/custom";
+import { DownloadIconButton, toast } from "@/components/ui";
 import { DateWithTime, EntityInfoShort } from "@/components/ui/entities";
 import { TriggerSheet } from "@/components/ui/sheet";
 import { DataTableColumnHeader, StatusBadge } from "@/components/ui/table";
-import { downloadScanZip } from "@/lib/helper";
 import { ScanProps } from "@/types";
 
 import { LinkToFindingsFromScan } from "../../link-to-findings-from-scan";
@@ -136,19 +133,10 @@ export const ColumnGetScans: ColumnDef<ScanProps>[] = [
       const scanState = row.original.attributes?.state;
 
       return (
-        <div className="flex w-14 items-center justify-center">
-          <CustomButton
-            variant="ghost"
-            isDisabled={scanState !== "completed"}
-            onPress={() => downloadScanZip(scanId, toast)}
-            className="p-0 text-default-500 hover:text-primary disabled:opacity-30"
-            isIconOnly
-            ariaLabel="Download .zip"
-            size="sm"
-          >
-            <DownloadIcon size={16} />
-          </CustomButton>
-        </div>
+        <DownloadIconButton
+          paramId={scanId}
+          isDisabled={scanState !== "completed"}
+        />
       );
     },
   },
diff --git a/ui/components/ui/download-icon-button/download-icon-button.tsx b/ui/components/ui/download-icon-button/download-icon-button.tsx
new file mode 100644
index 0000000000..ed78884543
--- /dev/null
+++ b/ui/components/ui/download-icon-button/download-icon-button.tsx
@@ -0,0 +1,34 @@
+"use client";
+
+import { downloadScanZip } from "@/lib/helper";
+import { CustomButton } from "../custom/custom-button";
+import { toast } from "@/components/ui";
+import { DownloadIcon } from "lucide-react";
+
+interface DownloadIconButtonProps {
+  paramId: string;
+  ariaLabel?: string;
+  isDisabled?: boolean;
+}
+
+export const DownloadIconButton = ({
+  paramId,
+  ariaLabel = "Download report",
+  isDisabled = false,
+}: DownloadIconButtonProps) => {
+  return (
+    <div className="flex w-14 items-center justify-center">
+      <CustomButton
+        variant="ghost"
+        isDisabled={isDisabled}
+        onPress={() => downloadScanZip(paramId, toast)}
+        className="p-0 text-default-500 hover:text-primary disabled:opacity-30"
+        isIconOnly
+        ariaLabel={ariaLabel}
+        size="sm"
+      >
+        <DownloadIcon size={16} />
+      </CustomButton>
+    </div>
+  );
+};
diff --git a/ui/components/ui/index.ts b/ui/components/ui/index.ts
index e9675ed837..ec399fbce3 100644
--- a/ui/components/ui/index.ts
+++ b/ui/components/ui/index.ts
@@ -11,3 +11,4 @@ export * from "./main-layout/main-layout";
 export * from "./select/Select";
 export * from "./sidebar";
 export * from "./toast";
+export * from "./download-icon-button/download-icon-button";