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';

static/app/types/group.tsx

@@ -42,7 +42,7 @@ describe('OrganizationApiKeys', function () {
     render(<OrganizationApiKeys />);
     renderGlobalModal();
 
-    await userEvent.click(await screen.findByRole('link', {name: 'Remove API Key?'}));
+    await userEvent.click(await screen.findByRole('button', {name: 'Remove API Key'}));
     expect(deleteMock).toHaveBeenCalledTimes(0);
 
     await userEvent.click(screen.getByTestId('confirm-button'));

static/app/views/admin/adminRelays.tsx

@@ -25,7 +25,7 @@ describe('OrganizationApiKeysList', function () {
     renderGlobalModal();
 
     // Click remove button
-    await userEvent.click(await screen.findByTitle('Remove API Key?'));
+    await userEvent.click(await screen.findByRole('button', {name: 'Remove API Key'}));
 
     expect(screen.getByRole('dialog')).toBeInTheDocument();
   });

static/app/views/nav/primary/components.tsx

@@ -1,12 +1,11 @@
 import {Fragment} from 'react';
-import {css} from '@emotion/react';
 import styled from '@emotion/styled';
 
+import Confirm from 'sentry/components/confirm';
 import {AlertLink} from 'sentry/components/core/alert/alertLink';
 import {Button} from 'sentry/components/core/button';
 import ExternalLink from 'sentry/components/links/externalLink';
 import Link from 'sentry/components/links/link';
-import LinkWithConfirmation from 'sentry/components/links/linkWithConfirmation';
 import {PanelTable} from 'sentry/components/panels/panelTable';
 import TextCopyInput from 'sentry/components/textCopyInput';
 import {IconAdd, IconDelete} from 'sentry/icons';
@@ -101,21 +100,14 @@ function OrganizationApiKeysList({
               </TextCopyInput>
 
               <Cell>
-                <LinkWithConfirmation
-                  aria-label={t('Remove API Key')}
-                  className="btn btn-default btn-sm"
+                <Confirm
                   onConfirm={() => onRemove(id)}
                   message={t('Are you sure you want to remove this API key?')}
-                  title={t('Remove API Key?')}
                 >
-                  <IconDelete
-                    size="xs"
-                    css={css`
-                      position: relative;
-                      top: 2px;
-                    `}
-                  />
-                </LinkWithConfirmation>
+                  <Button priority="danger" size="sm" icon={<IconDelete />}>
+                    {t('Remove API Key')}
+                  </Button>
+                </Confirm>
               </Cell>
             </Fragment>
           );