feat(ts): Switch to LinkButton for `to` buttons (#76396)

static/app/components/discover/transactionsList.tsx

@@ -3,7 +3,7 @@ import styled from '@emotion/styled';
 import type {Location, LocationDescriptor} from 'history';
 
 import GuideAnchor from 'sentry/components/assistant/guideAnchor';
-import {Button} from 'sentry/components/button';
+import {LinkButton} from 'sentry/components/button';
 import {CompactSelect} from 'sentry/components/compactSelect';
 import DiscoverButton from 'sentry/components/discoverButton';
 import {InvestigationRuleCreation} from 'sentry/components/dynamicSampling/investigationRule';
@@ -311,7 +311,7 @@ class _TransactionsList extends Component<Props> {
         {!this.isTrend() &&
           (handleOpenAllEventsClick ? (
             <GuideAnchor target="release_transactions_open_in_transaction_events">
-              <Button
+              <LinkButton
                 onClick={handleOpenAllEventsClick}
                 to={this.generatePerformanceTransactionEventsView().getPerformanceTransactionEventsViewUrlTarget(
                   organization.slug,
@@ -324,7 +324,7 @@ class _TransactionsList extends Component<Props> {
                 data-test-id="transaction-events-open"
               >
                 {t('View Sampled Events')}
-              </Button>
+              </LinkButton>
             </GuideAnchor>
           ) : (
             <GuideAnchor target="release_transactions_open_in_discover">

static/app/components/discoverButton.tsx

@@ -1,25 +1,21 @@
-import type {ButtonProps} from 'sentry/components/button';
-import {Button} from 'sentry/components/button';
+import type {LinkButtonProps} from 'sentry/components/button';
+import {LinkButton} from 'sentry/components/button';
 import DiscoverFeature from 'sentry/components/discover/discoverFeature';
 import {t} from 'sentry/locale';
 
-type DiscoverButtonProps = Omit<ButtonProps, 'aria-label'>;
-
 /**
  * Provide a button that turns itself off if the current organization
  * doesn't have access to discover results.
  */
-function DiscoverButton({children, ...buttonProps}: DiscoverButtonProps) {
+function DiscoverButton(buttonProps: LinkButtonProps) {
   return (
     <DiscoverFeature>
       {({hasFeature}) => (
-        <Button
+        <LinkButton
           disabled={!hasFeature}
           aria-label={t('Open in Discover')}
           {...buttonProps}
-        >
-          {children}
-        </Button>
+        />
       )}
     </DiscoverFeature>
   );

static/app/components/events/aiSuggestedSolution/suggestion.tsx

@@ -2,7 +2,7 @@ import {useCallback, useState} from 'react';
 import styled from '@emotion/styled';
 
 import {addSuccessMessage} from 'sentry/actionCreators/indicator';
-import {Button} from 'sentry/components/button';
+import {Button, LinkButton} from 'sentry/components/button';
 import ButtonBar from 'sentry/components/buttonBar';
 import EmptyMessage from 'sentry/components/emptyMessage';
 import LoadingError from 'sentry/components/loadingError';
@@ -57,9 +57,9 @@ function ErrorDescription({
         action={
           <ButtonBar gap={2}>
             <Button onClick={onHideSuggestion}>{t('Dismiss')}</Button>
-            <Button priority="primary" to={`/settings/${organizationSlug}/legal/`}>
+            <LinkButton priority="primary" to={`/settings/${organizationSlug}/legal/`}>
               {t('Accept in Settings')}
-            </Button>
+            </LinkButton>
           </ButtonBar>
         }
       />

static/app/components/events/eventStatisticalDetector/eventRegressionSummary.tsx

@@ -1,6 +1,6 @@
 import {useMemo} from 'react';
 
-import {Button} from 'sentry/components/button';
+import {LinkButton} from 'sentry/components/button';
 import KeyValueList from 'sentry/components/events/interfaces/keyValueList';
 import {DataSection} from 'sentry/components/events/styles';
 import {t} from 'sentry/locale';
@@ -69,9 +69,9 @@ export function getKeyValueListData(
           subject: t('Endpoint Name'),
           value: evidenceData.transaction,
           actionButton: (
-            <Button size="xs" to={target}>
+            <LinkButton size="xs" to={target}>
               {t('View Transaction')}
-            </Button>
+            </LinkButton>
           ),
         },
         {

static/app/components/events/interfaces/performance/spanEvidenceKeyValueList.tsx

@@ -5,7 +5,7 @@ import type {Location} from 'history';
 import kebabCase from 'lodash/kebabCase';
 import mapValues from 'lodash/mapValues';
 
-import {Button} from 'sentry/components/button';
+import {LinkButton} from 'sentry/components/button';
 import ClippedBox from 'sentry/components/clippedBox';
 import {CodeSnippet} from 'sentry/components/codeSnippet';
 import {getKeyValueListData as getRegressionIssueKeyValueList} from 'sentry/components/events/eventStatisticalDetector/eventRegressionSummary';
@@ -481,9 +481,9 @@ const makeTransactionNameRow = (
   });
 
   const actionButton = projectSlug ? (
-    <Button size="xs" to={eventDetailsLocation}>
+    <LinkButton size="xs" to={eventDetailsLocation}>
       {t('View Full Event')}
-    </Button>
+    </LinkButton>
   ) : undefined;
 
   return makeRow(

static/app/components/events/interfaces/spans/gapSpanDetails.tsx

@@ -3,7 +3,7 @@ import styled from '@emotion/styled';
 
 import emptyStateImg from 'sentry-images/spot/profiling-empty-state.svg';
 
-import {Button, LinkButton} from 'sentry/components/button';
+import {LinkButton} from 'sentry/components/button';
 import {SectionHeading} from 'sentry/components/charts/styles';
 import ExternalLink from 'sentry/components/links/externalLink';
 import {FlamegraphPreview} from 'sentry/components/profiling/flamegraph/flamegraphPreview';
@@ -215,9 +215,9 @@ function ProfilePreviewHeader({canvasView, event, organization}: ProfilePreviewP
           )}
         />
       </HeaderContainer>
-      <Button size="xs" onClick={handleGoToProfile} to={target}>
+      <LinkButton size="xs" onClick={handleGoToProfile} to={target}>
         {t('View Profile')}
-      </Button>
+      </LinkButton>
     </HeaderContainer>
   );
 }

static/app/components/events/interfaces/spans/newTraceDetailsSpanDetails.tsx

@@ -4,7 +4,7 @@ import omit from 'lodash/omit';
 import * as qs from 'query-string';
 
 import {Alert} from 'sentry/components/alert';
-import {Button} from 'sentry/components/button';
+import {LinkButton} from 'sentry/components/button';
 import {CopyToClipboardButton} from 'sentry/components/copyToClipboardButton';
 import {DateTime} from 'sentry/components/dateTime';
 import DiscoverButton from 'sentry/components/discoverButton';
@@ -115,7 +115,7 @@ function NewTraceDetailsSpanDetail(props: SpanDetailProps) {
       // TODO: Amend size to use theme when we eventually refactor LoadingIndicator
       // 12px is consistent with theme.iconSizes['xs'] but theme returns a string.
       return (
-        <StyledDiscoverButton size="xs" disabled>
+        <StyledDiscoverButton href="#" size="xs" disabled>
           <StyledLoadingIndicator size={12} />
         </StyledDiscoverButton>
       );
@@ -211,12 +211,12 @@ function NewTraceDetailsSpanDetail(props: SpanDetailProps) {
 
           return (
             <ButtonGroup>
-              <StyledButton data-test-id="view-child-transaction" size="xs" to={to}>
+              <LinkButton data-test-id="view-child-transaction" size="xs" to={to}>
                 {t('View Transaction')}
-              </StyledButton>
-              <StyledButton size="xs" to={target}>
+              </LinkButton>
+              <LinkButton size="xs" to={target}>
                 {t('View Summary')}
-              </StyledButton>
+              </LinkButton>
             </ButtonGroup>
           );
         }}
@@ -259,7 +259,7 @@ function NewTraceDetailsSpanDetail(props: SpanDetailProps) {
           organization={organization}
           span={props.node.value}
         />
-        <StyledButton
+        <LinkButton
           size="xs"
           to={spanDetailsRouteWithQuery({
             orgSlug: organization.slug,
@@ -270,7 +270,7 @@ function NewTraceDetailsSpanDetail(props: SpanDetailProps) {
           })}
         >
           {hasNewSpansUIFlag ? t('View Span Summary') : t('View Similar Spans')}
-        </StyledButton>
+        </LinkButton>
       </ButtonGroup>
     );
   }
@@ -637,8 +637,6 @@ const StyledDiscoverButton = styled(DiscoverButton)`
   right: ${space(0.5)};
 `;
 
-const StyledButton = styled(Button)``;
-
 export const SpanDetailContainer = styled('div')`
   border-bottom: 1px solid ${p => p.theme.border};
   cursor: auto;

static/app/components/events/interfaces/spans/spanDetail.tsx

@@ -3,7 +3,7 @@ import styled from '@emotion/styled';
 import omit from 'lodash/omit';
 
 import {Alert} from 'sentry/components/alert';
-import {Button} from 'sentry/components/button';
+import {Button, LinkButton} from 'sentry/components/button';
 import {CopyToClipboardButton} from 'sentry/components/copyToClipboardButton';
 import {DateTime} from 'sentry/components/dateTime';
 import DiscoverButton from 'sentry/components/discoverButton';
@@ -132,7 +132,7 @@ function SpanDetail(props: Props) {
       // TODO: Amend size to use theme when we eventually refactor LoadingIndicator
       // 12px is consistent with theme.iconSizes['xs'] but theme returns a string.
       return (
-        <StyledDiscoverButton size="xs" disabled>
+        <StyledDiscoverButton href="#" size="xs" disabled>
           <StyledLoadingIndicator size={12} />
         </StyledDiscoverButton>
       );
@@ -230,12 +230,12 @@ function SpanDetail(props: Props) {
 
           return (
             <ButtonGroup>
-              <StyledButton data-test-id="view-child-transaction" size="xs" to={to}>
+              <LinkButton data-test-id="view-child-transaction" size="xs" to={to}>
                 {t('View Transaction')}
-              </StyledButton>
-              <StyledButton size="xs" to={target}>
+              </LinkButton>
+              <LinkButton size="xs" to={target}>
                 {t('View Summary')}
-              </StyledButton>
+              </LinkButton>
             </ButtonGroup>
           );
         }}
@@ -257,9 +257,9 @@ function SpanDetail(props: Props) {
     }
 
     return (
-      <StyledButton size="xs" to={generateTraceTarget(event, organization, location)}>
+      <LinkButton size="xs" to={generateTraceTarget(event, organization, location)}>
         {t('View Trace')}
-      </StyledButton>
+      </LinkButton>
     );
   }
 
@@ -275,7 +275,7 @@ function SpanDetail(props: Props) {
     return (
       <ButtonGroup>
         <SpanSummaryButton event={event} organization={organization} span={span} />
-        <StyledButton
+        <LinkButton
           size="xs"
           to={spanDetailsRouteWithQuery({
             orgSlug: organization.slug,
@@ -286,7 +286,7 @@ function SpanDetail(props: Props) {
           })}
         >
           {t('View Similar Spans')}
-        </StyledButton>
+        </LinkButton>
       </ButtonGroup>
     );
   }
@@ -630,8 +630,6 @@ const StyledDiscoverButton = styled(DiscoverButton)`
   right: ${space(0.5)};
 `;
 
-const StyledButton = styled(Button)``;
-
 export const SpanDetailContainer = styled('div')`
   border-bottom: 1px solid ${p => p.theme.border};
   cursor: auto;

static/app/components/events/interfaces/spans/spanProfileDetails.tsx

@@ -1,7 +1,7 @@
 import {useMemo, useState} from 'react';
 import styled from '@emotion/styled';
 
-import {Button} from 'sentry/components/button';
+import {Button, LinkButton} from 'sentry/components/button';
 import ButtonBar from 'sentry/components/buttonBar';
 import {SectionHeading} from 'sentry/components/charts/styles';
 import {StackTraceContent} from 'sentry/components/events/interfaces/crashContent/stackTrace';
@@ -217,9 +217,9 @@ export function SpanProfileDetails({
           </ButtonBar>
         </SpanDetailsItem>
         <SpanDetailsItem>
-          <Button icon={<IconProfiling />} to={spanTarget} size="xs">
+          <LinkButton icon={<IconProfiling />} to={spanTarget} size="xs">
             {t('Profile')}
-          </Button>
+          </LinkButton>
         </SpanDetailsItem>
       </SpanDetails>
       <StackTraceContent

static/app/components/events/profileEventEvidence.tsx

@@ -1,4 +1,4 @@
-import {Button} from 'sentry/components/button';
+import {LinkButton} from 'sentry/components/button';
 import {EventDataSection} from 'sentry/components/events/eventDataSection';
 import KeyValueList from 'sentry/components/events/interfaces/keyValueList';
 import {IconProfiling} from 'sentry/icons';
@@ -26,7 +26,7 @@ export function ProfileEventEvidence({event, projectSlug}: ProfileEvidenceProps)
             key: 'Transaction Name',
             value: evidenceData.transactionName,
             actionButton: traceSlug ? (
-              <Button
+              <LinkButton
                 size="xs"
                 to={generateLinkToEventInTraceView({
                   traceSlug,
@@ -38,7 +38,7 @@ export function ProfileEventEvidence({event, projectSlug}: ProfileEvidenceProps)
                 })}
               >
                 {t('View Transaction')}
-              </Button>
+              </LinkButton>
             ) : null,
           },
         ]
@@ -50,7 +50,7 @@ export function ProfileEventEvidence({event, projectSlug}: ProfileEvidenceProps)
             key: 'Profile ID',
             value: evidenceData.profileId,
             actionButton: (
-              <Button
+              <LinkButton
                 size="xs"
                 to={generateProfileFlamechartRouteWithHighlightFrame({
                   profileId: evidenceData.profileId,
@@ -65,7 +65,7 @@ export function ProfileEventEvidence({event, projectSlug}: ProfileEvidenceProps)
                 icon={<IconProfiling />}
               >
                 {t('View Profile')}
-              </Button>
+              </LinkButton>
             ),
           },
         ]