From e056c8dfd39736d7b476410c22ab1ea7e700ad73 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Christopher=20J=C3=A4ger=20=28Mogler=29?=
 <39583780+moglerdev@users.noreply.github.com>
Date: Thu, 24 Aug 2023 21:52:35 +0200
Subject: [PATCH] Missing "onClick" prop in @verdaccio/ui-components Link
 component preventing handleDownload call in Package.tsx #3988 (#3989)

* fix: Add onClick handler in Link component
In the "Link" component, the onClick handler was not provided,
leading to the absence of a download action in the Package.tsx
renderDownloadLink component.

* Removed "external" attribute from "renderDownloadLink"
The "external" attribute is unnecessary in this context
since the download action is triggered by the "handleDownload" callback.

* added changeset for @verdaccio/ui-components
---
 .changeset/chilled-carrots-guess.md                 |  6 ++++++
 packages/ui-components/src/components/Link/Link.tsx | 13 ++++++++++---
 .../src/components/Package/Package.tsx              |  1 -
 3 files changed, 16 insertions(+), 4 deletions(-)
 create mode 100644 .changeset/chilled-carrots-guess.md

diff --git a/.changeset/chilled-carrots-guess.md b/.changeset/chilled-carrots-guess.md
new file mode 100644
index 000000000..cdac25117
--- /dev/null
+++ b/.changeset/chilled-carrots-guess.md
@@ -0,0 +1,6 @@
+---
+'@verdaccio/ui-components': patch
+---
+
+- added `onClick` prop to `Link` component in @verdaccio/ui-components. (@moglerdev in #3989)
+- resolved issue in the `Package` component where the download button was incorrectly opening a new tab to the homepage. (@moglerdev in #3989)
diff --git a/packages/ui-components/src/components/Link/Link.tsx b/packages/ui-components/src/components/Link/Link.tsx
index 60bea4e2a..eac322e5e 100644
--- a/packages/ui-components/src/components/Link/Link.tsx
+++ b/packages/ui-components/src/components/Link/Link.tsx
@@ -15,15 +15,22 @@ export const CustomRouterLink = styled(RouterLink)`
 
 // TODO: improve any with custom types for a and RouterLink
 const Link = React.forwardRef<LinkRef, any>(function LinkFunction(
-  { external, to, children, variant, className },
+  { external, to, children, variant, className, onClick },
   ref
 ) {
   return external ? (
-    <a className={className} href={to} ref={ref} rel="noopener noreferrer" target="_blank">
+    <a
+      className={className}
+      href={to}
+      onClick={onClick}
+      ref={ref}
+      rel="noopener noreferrer"
+      target="_blank"
+    >
       <Typography variant={variant ?? 'caption'}>{children}</Typography>
     </a>
   ) : (
-    <CustomRouterLink className={className} innerRef={ref} to={to}>
+    <CustomRouterLink className={className} innerRef={ref} onClick={onClick} to={to}>
       <Typography variant={variant}>{children}</Typography>
     </CustomRouterLink>
   );
diff --git a/packages/ui-components/src/components/Package/Package.tsx b/packages/ui-components/src/components/Package/Package.tsx
index ff4e07417..a22840af8 100644
--- a/packages/ui-components/src/components/Package/Package.tsx
+++ b/packages/ui-components/src/components/Package/Package.tsx
@@ -163,7 +163,6 @@ const Package: React.FC<PackageInterface> = ({
     dist?.tarball &&
     url.isURL(dist.tarball) && (
       <Link
-        external={true}
         onClick={() => {
           handleDownload(dist.tarball);
         }}