feat(ui): add copy link icon to finding detail page (#8685)

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

ui/CHANGELOG.md

@@ -7,6 +7,7 @@ All notable changes to the **Prowler UI** are documented in this file.
 ### 🚀 Added
 
 - `Prowler Hub` menu item with tooltip [(#8692)] (https://github.com/prowler-cloud/prowler/pull/8692)
+- Copy link button to finding detail page [(#8685)] (https://github.com/prowler-cloud/prowler/pull/8685)
 
 ## [1.12.0] (Prowler v5.12.0)
 

ui/components/findings/table/finding-detail.tsx

@@ -5,7 +5,11 @@ import { Snippet } from "@nextui-org/react";
 import { CodeSnippet } from "@/components/ui/code-snippet/code-snippet";
 import { CustomSection } from "@/components/ui/custom";
 import { CustomLink } from "@/components/ui/custom/custom-link";
-import { EntityInfoShort, InfoField } from "@/components/ui/entities";
+import {
+  CopyLinkButton,
+  EntityInfoShort,
+  InfoField,
+} from "@/components/ui/entities";
 import { DateWithTime } from "@/components/ui/entities/date-with-time";
 import { SeverityBadge } from "@/components/ui/table/severity-badge";
 import { FindingProps, ProviderType } from "@/types";
@@ -42,6 +46,10 @@ export const FindingDetail = ({
   const resource = finding.relationships.resource.attributes;
   const scan = finding.relationships.scan.attributes;
   const providerDetails = finding.relationships.provider.attributes;
+  const currentUrl = new URL(window.location.href);
+  const params = new URLSearchParams(currentUrl.search);
+  params.set("id", findingDetails.id);
+  const url = `${window.location.origin}${currentUrl.pathname}?${params.toString()}`;
 
   return (
     <div className="flex flex-col gap-6 rounded-lg">
@@ -50,6 +58,7 @@ export const FindingDetail = ({
         <div>
           <h2 className="line-clamp-2 text-lg font-medium leading-tight text-gray-800 dark:text-prowler-theme-pale/90">
             {renderValue(attributes.check_metadata.checktitle)}
+            <CopyLinkButton url={url} />
           </h2>
         </div>
         <div className="flex items-center gap-x-4">

ui/components/ui/entities/copy-link-button.tsx

@@ -0,0 +1,41 @@
+"use client";
+
+import { Tooltip } from "@nextui-org/react";
+import { CheckCheck, ExternalLink } from "lucide-react";
+import { useState } from "react";
+
+type CopyLinkButtonProps = {
+  url: string;
+};
+
+export const CopyLinkButton = ({ url }: CopyLinkButtonProps) => {
+  const [copied, setCopied] = useState(false);
+
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(url);
+      setCopied(true);
+
+      setTimeout(() => setCopied(false), 500);
+    } catch (err) {
+      console.error("Failed to copy URL to clipboard:", err);
+    }
+  };
+
+  return (
+    <Tooltip content="Copy URL to clipboard" size="sm">
+      <button
+        type="button"
+        onClick={handleCopy}
+        className="ml-2 cursor-pointer p-0"
+        aria-label="Copy URL to clipboard"
+      >
+        {copied ? (
+          <CheckCheck size={16} className="inline" />
+        ) : (
+          <ExternalLink size={16} className="inline" />
+        )}
+      </button>
+    </Tooltip>
+  );
+};

ui/components/ui/entities/index.ts

@@ -1,3 +1,4 @@
+export * from "./copy-link-button";
 export * from "./date-with-time";
 export * from "./entity-info-short";
 export * from "./get-provider-logo";