diff --git a/ui/CHANGELOG.md b/ui/CHANGELOG.md index b81e8c1e1d..582cec2700 100644 --- a/ui/CHANGELOG.md +++ b/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) diff --git a/ui/components/findings/table/finding-detail.tsx b/ui/components/findings/table/finding-detail.tsx index 00c88e285f..845dd6a2a9 100644 --- a/ui/components/findings/table/finding-detail.tsx +++ b/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 (
@@ -50,6 +58,7 @@ export const FindingDetail = ({

{renderValue(attributes.check_metadata.checktitle)} +

diff --git a/ui/components/ui/entities/copy-link-button.tsx b/ui/components/ui/entities/copy-link-button.tsx new file mode 100644 index 0000000000..e41ed0bb78 --- /dev/null +++ b/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 ( + + + + ); +}; diff --git a/ui/components/ui/entities/index.ts b/ui/components/ui/entities/index.ts index fb13c99282..bcff63efd9 100644 --- a/ui/components/ui/entities/index.ts +++ b/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";