linkbutton: make either href or to required (#91649)

Refactor types to be a bit stronger for LinkButton by requiring either
to or href

Author: JonasBa

static/app/components/core/button/linkButton.tsx

@@ -29,14 +29,15 @@ interface BaseLinkButtonProps extends DO_NOT_USE_CommonButtonProps, LinkElementP
 }
 
 interface LinkButtonPropsWithHref extends BaseLinkButtonProps {
+  href: string;
   /**
    * Determines if the link is external and should open in a new tab.
    */
   external?: boolean;
-  href?: string;
 }
 
 interface LinkButtonPropsWithTo extends BaseLinkButtonProps {
+  to: string | LocationDescriptor;
   /**
    * If true, the link will not reset the scroll position of the page when clicked.
    */
@@ -45,7 +46,6 @@ interface LinkButtonPropsWithTo extends BaseLinkButtonProps {
    * Determines if the link should replace the current history entry.
    */
   replace?: boolean;
-  to?: string | LocationDescriptor;
 }
 
 export type LinkButtonProps = LinkButtonPropsWithHref | LinkButtonPropsWithTo;
@@ -68,7 +68,9 @@ export function LinkButton({
         aria-disabled={disabled}
         size={size}
         {...props}
+        // @ts-expect-error set href as undefined to force "disabled" state.
         href={disabled ? undefined : 'href' in props ? props.href : undefined}
+        // @ts-expect-error set to as undefined to force "disabled" state
         to={disabled ? undefined : 'to' in props ? props.to : undefined}
         onClick={handleClick}
       >

static/app/components/createAlertButton.tsx

@@ -1,3 +1,5 @@
+import type {LocationDescriptor} from 'history';
+
 import {
   addErrorMessage,
   addLoadingMessage,
@@ -26,7 +28,7 @@ import {
   DEFAULT_WIZARD_TEMPLATE,
 } from 'sentry/views/alerts/wizard/options';
 
-type CreateAlertFromViewButtonProps = Omit<LinkButtonProps, 'aria-label'> & {
+type CreateAlertFromViewButtonProps = Omit<LinkButtonProps, 'aria-label' | 'to'> & {
   /**
    * Discover query used to create the alert
    */
@@ -40,19 +42,19 @@ type CreateAlertFromViewButtonProps = Omit<LinkButtonProps, 'aria-label'> & {
    * We currently do a few checks on metrics data on performance pages and this passes the decision onward to alerts.
    */
   disableMetricDataset?: boolean;
+
   /**
    * Called when the user is redirected to the alert builder
    */
   onClick?: () => void;
-
   referrer?: string;
 };
 
 /**
  * Provide a button that can create an alert from an event view.
  * Emits incompatible query issues on click
  */
-function CreateAlertFromViewButton({
+export function CreateAlertFromViewButton({
   projects,
   eventView,
   organization,
@@ -121,7 +123,8 @@ type CreateAlertButtonProps = {
   projectSlug?: string;
   referrer?: string;
   showPermissionGuide?: boolean;
-} & LinkButtonProps;
+  to?: string | LocationDescriptor;
+} & Omit<LinkButtonProps, 'to'>;
 
 export default function CreateAlertButton({
   organization,
@@ -132,6 +135,7 @@ export default function CreateAlertButton({
   showPermissionGuide,
   alertOption,
   onEnter,
+  to,
   ...buttonProps
 }: CreateAlertButtonProps) {
   const router = useRouter();
@@ -189,7 +193,7 @@ export default function CreateAlertButton({
       disabled={!hasAccess}
       title={hasAccess ? undefined : permissionTooltipText}
       icon={!hideIcon && <IconSiren {...iconProps} />}
-      to={projectSlug ? createAlertUrl(projectSlug) : undefined}
+      to={to ?? (projectSlug ? createAlertUrl(projectSlug) : '')}
       tooltipProps={{
         isHoverable: true,
         position: 'top',
@@ -222,5 +226,3 @@ export default function CreateAlertButton({
     renderButton(canCreateAlert)
   );
 }
-
-export {CreateAlertFromViewButton};

static/gsApp/components/profiling/alerts.tsx

@@ -3,7 +3,6 @@ import styled from '@emotion/styled';
 
 import {Alert} from 'sentry/components/core/alert';
 import {Button} from 'sentry/components/core/button';
-import {LinkButton} from 'sentry/components/core/button/linkButton';
 import {IconClose, IconInfo, IconWarning} from 'sentry/icons';
 import {t, tct} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
@@ -87,7 +86,6 @@ interface GraceAlertProps {
   action: {
     label: string;
     onClick?: () => void;
-    to?: string | Record<PropertyKey, unknown>;
   };
   children: React.ReactNode;
   dismiss: undefined | (() => void);
@@ -98,14 +96,9 @@ interface GraceAlertProps {
 function GraceAlert({children, action, dismiss, type, disableAction}: GraceAlertProps) {
   const trailingItems = (
     <Fragment>
-      <LinkButton
-        size="xs"
-        onClick={action.onClick}
-        to={action.to}
-        disabled={disableAction}
-      >
+      <Button size="xs" onClick={action.onClick} disabled={disableAction}>
         {action.label}
-      </LinkButton>
+      </Button>
       {dismiss ? (
         <StyledButton priority="link" size="sm" onClick={dismiss}>
           <IconClose color="gray500" size="sm" />

static/gsApp/components/startTrialButton.tsx

@@ -1,5 +1,5 @@
-import type {LinkButtonProps} from 'sentry/components/core/button/linkButton';
-import {LinkButton} from 'sentry/components/core/button/linkButton';
+import {Button, type ButtonProps} from 'sentry/components/core/button';
+import {LinkButton, type LinkButtonProps} from 'sentry/components/core/button/linkButton';
 import {t} from 'sentry/locale';
 import IndicatorStore from 'sentry/stores/indicatorStore';
 import type {Organization} from 'sentry/types/organization';
@@ -15,7 +15,7 @@ type Props = React.PropsWithChildren<
     onTrialFailed?: () => void;
     onTrialStarted?: () => void;
     requestData?: Record<string, unknown>;
-  } & LinkButtonProps
+  } & (ButtonProps | LinkButtonProps)
 >;
 
 function StartTrialButton({
@@ -40,19 +40,40 @@ function StartTrialButton({
       onTrialStarted={onTrialStarted}
       requestData={requestData}
     >
-      {({startTrial, trialStarting, trialStarted}) => (
-        <LinkButton
-          disabled={trialStarting || trialStarted}
-          data-test-id="start-trial-button"
-          onClick={() => {
-            handleClick?.();
-            startTrial();
-          }}
-          {...buttonProps}
-        >
-          {children || t('Start trial')}
-        </LinkButton>
-      )}
+      {({startTrial, trialStarting, trialStarted}) => {
+        if (
+          ('to' in buttonProps && buttonProps.to !== undefined) ||
+          ('href' in buttonProps && buttonProps.href !== undefined)
+        ) {
+          return (
+            <LinkButton
+              disabled={trialStarting || trialStarted}
+              data-test-id="start-trial-button"
+              onClick={() => {
+                handleClick?.();
+                startTrial();
+              }}
+              {...buttonProps}
+            >
+              {children || t('Start trial')}
+            </LinkButton>
+          );
+        }
+
+        return (
+          <Button
+            disabled={trialStarting || trialStarted}
+            data-test-id="start-trial-button"
+            onClick={() => {
+              handleClick?.();
+              startTrial();
+            }}
+            {...buttonProps}
+          >
+            {children || t('Start trial')}
+          </Button>
+        );
+      }}
     </TrialStarter>
   );
 }

static/gsApp/components/upgradeOrTrialButton.tsx

@@ -22,8 +22,7 @@ type ChildRenderProps = {
 
 type ChildRenderFunction = (options: ChildRenderProps) => React.ReactNode;
 
-interface Props
-  extends Omit<ButtonProps & LinkButtonProps, 'to' | 'onClick' | 'busy' | 'children'> {
+interface BaseButtonProps {
   api: Client;
   organization: Organization;
   source: string;
@@ -61,7 +60,8 @@ function UpgradeOrTrialButton({
   upgradePriority = 'primary',
   trialPriority = 'primary',
   ...props
-}: Props) {
+}: BaseButtonProps &
+  (Omit<LinkButtonProps, 'children'> | Omit<ButtonProps, 'children'>)) {
   const {slug} = organization;
   const hasAccess = organization.access.includes('org:billing');
 
@@ -131,15 +131,20 @@ function UpgradeOrTrialButton({
           onTrialStarted={handleSuccess}
           requestData={requestData}
           priority={buttonPriority}
-          {...props}
+          {...(props as LinkButtonProps)}
         >
           {childComponent || t('Start %s-Day Trial', getTrialLength(organization))}
         </StartTrialButton>
       );
     }
     // non-admin who wants to trial
     return (
-      <Button onClick={handleRequest} busy={busy} priority={buttonPriority} {...props}>
+      <Button
+        onClick={handleRequest}
+        busy={busy}
+        priority={buttonPriority}
+        {...(props as ButtonProps)}
+      >
         {childComponent || t('Request Trial')}
       </Button>
     );
@@ -156,14 +161,19 @@ function UpgradeOrTrialButton({
         onClick={handleSuccess}
         to={`${baseUrl}?referrer=upgrade-${source}`}
         priority={buttonPriority}
-        {...props}
+        {...(props as LinkButtonProps)}
       >
         {childComponent || t('Upgrade now')}
       </LinkButton>
     );
   }
   return (
-    <Button onClick={handleRequest} busy={busy} priority={buttonPriority} {...props}>
+    <Button
+      onClick={handleRequest}
+      busy={busy}
+      priority={buttonPriority}
+      {...(props as ButtonProps)}
+    >
       {childComponent || t('Request Upgrade')}
     </Button>
   );