link: cleanup link (#91687)

Cleanup Link component and some of the variants.
- LocationDescriptor type is already LocationDescriptor | string, so
there is no need for extra intersection
- Removed LinkWithConfirmation as it is a low value abstraction that is
trivial to implement
- move link styles from styles.tsx to link.tsx

Some open questions and other fixes to do here:
- Do we want ExternalLink to be it's own component, or should we make
this `<Link external href=''/>`, which would make this consistent with
the implementation of LinkButton
- If so, is Anchor component still needed or can we standardize on Link
- This component accepts `disabled` boolean prop, however, unlike
LinkButton, it does not set `href` or `to` prop to undefined if disabled
is set to true. Links cannot be disabled.

Author: JonasBa

static/app/components/events/eventDataSection.tsx

@@ -1,7 +1,7 @@
 import styled from '@emotion/styled';
 
 import {DataSection} from 'sentry/components/events/styles';
-import Anchor from 'sentry/components/links/anchor';
+import {Anchor} from 'sentry/components/links/link';
 import QuestionTooltip from 'sentry/components/questionTooltip';
 import {IconLink} from 'sentry/icons';
 import {space} from 'sentry/styles/space';

static/app/components/links/anchor.tsx

@@ -1,4 +1,4 @@
-import Anchor from './anchor';
+import {Anchor} from './link';
 
 interface ExternalLinkProps
   extends Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'target'> {

static/app/components/links/externalLink.tsx

@@ -2,14 +2,34 @@ import {
   Link as RouterLink,
   type LinkProps as ReactRouterLinkProps,
 } from 'react-router-dom';
+import isPropValid from '@emotion/is-prop-valid';
+import {css, type Theme} from '@emotion/react';
 import styled from '@emotion/styled';
 import type {LocationDescriptor} from 'history';
 
 import {locationDescriptorToTo} from 'sentry/utils/reactRouter6Compat/location';
 import normalizeUrl from 'sentry/utils/url/normalizeUrl';
 import {useLocation} from 'sentry/utils/useLocation';
 
-import {linkStyles} from './styles';
+export const linkStyles = ({disabled, theme}: {theme: Theme; disabled?: boolean}) => css`
+  /* @TODO(jonasbadalic) This was defined on theme and only used here */
+  border-radius: 2px;
+
+  &:focus-visible {
+    box-shadow: ${theme.linkFocus} 0 0 0 2px;
+    text-decoration: none;
+    outline: none;
+  }
+
+  ${disabled &&
+  css`
+    color: ${theme.disabled};
+    pointer-events: none;
+    :hover {
+      color: ${theme.disabled};
+    }
+  `}
+`;
 
 export interface LinkProps
   extends Omit<
@@ -35,7 +55,6 @@ export interface LinkProps
    */
   disabled?: boolean;
   preventScrollReset?: ReactRouterLinkProps['preventScrollReset'];
-  ref?: React.Ref<HTMLAnchorElement>;
   replace?: ReactRouterLinkProps['replace'];
   state?: ReactRouterLinkProps['state'];
 }
@@ -44,19 +63,23 @@ export interface LinkProps
  * A context-aware version of Link (from react-router) that falls
  * back to <a> if there is no router present
  */
-function BaseLink({disabled, to, ...props}: LinkProps): React.ReactElement {
+const Link = styled(({disabled, to, ...props}: LinkProps) => {
   const location = useLocation();
   to = normalizeUrl(to, location);
 
   if (!disabled && location) {
     return <RouterLink to={locationDescriptorToTo(to)} {...props} />;
   }
 
-  return <a href={typeof to === 'string' ? to : ''} {...props} />;
-}
+  return <Anchor href={typeof to === 'string' ? to : ''} {...props} />;
+})`
+  ${linkStyles}
+`;
 
-// Re-assign to Link to make auto-importing smarter
-const Link = styled(BaseLink)`
+export const Anchor = styled('a', {
+  shouldForwardProp: prop =>
+    typeof prop === 'string' && isPropValid(prop) && prop !== 'disabled',
+})<{disabled?: boolean}>`
   ${linkStyles}
 `;
 

static/app/components/links/link.tsx

@@ -100,7 +100,7 @@ type DropdownItemProps = {
   children: React.ReactNode;
   allowDefaultEvent?: boolean;
   onSelect?: (eventKey: any) => void;
-  to?: string | LocationDescriptor;
+  to?: LocationDescriptor;
   width?: 'small' | 'large';
 };
 

static/app/components/links/linkWithConfirmation.tsx

@@ -978,7 +978,7 @@ export type KeyValueListDataItem = {
   key: string;
   subject: string;
   action?: {
-    link?: string | LocationDescriptor;
+    link?: LocationDescriptor;
   };
   actionButton?: React.ReactNode;
   /**

static/app/components/links/styles.tsx

@@ -2,8 +2,10 @@ import {Component} from 'react';
 import moment from 'moment-timezone';
 
 import type {Client} from 'sentry/api';
-import LinkWithConfirmation from 'sentry/components/links/linkWithConfirmation';
+import Confirm from 'sentry/components/confirm';
+import {Button} from 'sentry/components/core/button';
 import ResultGrid from 'sentry/components/resultGrid';
+import {IconDelete} from 'sentry/icons';
 import {t} from 'sentry/locale';
 import type {RouteComponentProps} from 'sentry/types/legacyReactRouter';
 import withApi from 'sentry/utils/withApi';
@@ -52,14 +54,14 @@ class AdminRelays extends Component<Props, State> {
       </td>,
       <td key="tools" style={{textAlign: 'right'}}>
         <span className="editor-tools">
-          <LinkWithConfirmation
-            className="danger"
-            title="Remove"
+          <Confirm
             message={t('Are you sure you wish to delete this relay?')}
             onConfirm={() => this.onDelete(row.id)}
           >
-            {t('Remove')}
-          </LinkWithConfirmation>
+            <Button priority="danger" size="sm" icon={<IconDelete />}>
+              {t('Remove Relay')}
+            </Button>
+          </Confirm>
         </span>
       </td>,
     ];

static/app/components/quickTrace/styles.tsx

@@ -6,8 +6,7 @@ import {Button} from 'sentry/components/core/button';
 import {Tooltip} from 'sentry/components/core/tooltip';
 import {DropdownMenu, type MenuItemProps} from 'sentry/components/dropdownMenu';
 import InteractionStateLayer from 'sentry/components/interactionStateLayer';
-import Link from 'sentry/components/links/link';
-import {linkStyles} from 'sentry/components/links/styles';
+import Link, {linkStyles} from 'sentry/components/links/link';
 import {SIDEBAR_NAVIGATION_SOURCE} from 'sentry/components/sidebar/utils';
 import {IconDefaultsProvider} from 'sentry/icons/useIconDefaults';
 import {space} from 'sentry/styles/space';