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

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,

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>