From 3312884a555a3d56283f6c3c03ccc4c9fa8b85a2 Mon Sep 17 00:00:00 2001
From: Jeremy Asuncion <jeremyasuncion808@gmail.com>
Date: Fri, 18 Oct 2024 12:41:02 -0700
Subject: [PATCH] fix: view tomogram open in  new tab (#1251)

Fixes issue with view tomogram button not opening external links in new
tab. This works by passing the `Link` component to reuse the auto
opening in new tab functionality for the `Button` component
---
 .../data-portal/app/components/Link/Link.tsx        | 13 ++++++++++---
 .../app/components/ViewTomogramButton.tsx           |  2 ++
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/frontend/packages/data-portal/app/components/Link/Link.tsx b/frontend/packages/data-portal/app/components/Link/Link.tsx
index 39149cb7c..2a972f820 100644
--- a/frontend/packages/data-portal/app/components/Link/Link.tsx
+++ b/frontend/packages/data-portal/app/components/Link/Link.tsx
@@ -13,12 +13,19 @@ export type VariantLinkProps = LinkProps & {
 }
 
 function BaseLink(
-  { to, variant, className, ...props }: VariantLinkProps,
+  {
+    href,
+    to,
+    variant,
+    className,
+    ...props
+  }: VariantLinkProps & { href?: string },
   ref: ForwardedRef<HTMLAnchorElement>,
 ) {
   let newTabProps: Partial<LinkProps> = {}
+  const url = href ?? to
 
-  if (typeof to === 'string' && isExternalUrl(to)) {
+  if (typeof url === 'string' && isExternalUrl(url)) {
     // For new tabs, add rel=noreferrer for security:
     // https://web.dev/external-anchors-use-rel-noopener/#how-to-improve-your-site's-performance-and-prevent-security-vulnerabilities
     newTabProps = {
@@ -30,7 +37,7 @@ function BaseLink(
   return (
     <RemixLink
       ref={ref}
-      to={to}
+      to={url}
       className={cnsNoMerge(
         variant === 'dashed-bordered' && DASHED_BORDERED_CLASSES,
         variant === 'dashed-underlined' && DASHED_UNDERLINED_CLASSES,
diff --git a/frontend/packages/data-portal/app/components/ViewTomogramButton.tsx b/frontend/packages/data-portal/app/components/ViewTomogramButton.tsx
index 2aa0cfdcb..daf53326f 100644
--- a/frontend/packages/data-portal/app/components/ViewTomogramButton.tsx
+++ b/frontend/packages/data-portal/app/components/ViewTomogramButton.tsx
@@ -6,6 +6,7 @@ import { EventPayloads, Events, usePlausible } from 'app/hooks/usePlausible'
 import { useFeatureFlag } from 'app/utils/featureFlags'
 import { getNeuroglancerUrl } from 'app/utils/url'
 
+import { Link } from './Link'
 import { Tooltip } from './Tooltip'
 
 export interface ViewTomogramButtonProps {
@@ -70,6 +71,7 @@ export function ViewTomogramButton({
         <Button
           href={enabled ? getNeuroglancerUrl(neuroglancerConfig) : undefined}
           disabled={!enabled}
+          LinkComponent={Link}
           {...buttonProps}
         >
           <span>{t('viewTomogram')}</span>