ref(ui): decouple scraps/link from sentry specific code (#102644)

This PR introduces a `LinkBehaviorContext` that allows us to decouple
sentry specific code from our design-system `scraps`.

In this first iteration, the only sentry specific things were:

- `locationDescriptorToTo`
- a call to `useLocation` to fall-back to anchor rendering if there is
no location. Honestly, I don’t know why / if we need that because when
would have no `useLocation` ?

I do plan to add more sentry specific link behavior, like [intent
prefetching](#102574), but this
de-coupling is pre-requisite for that.

Author: TkDodo

static/app/components/core/link/link.tsx

@@ -1,15 +1,10 @@
-import {
-  Link as RouterLink,
-  type LinkProps as ReactRouterLinkProps,
-} from 'react-router-dom';
+import {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 {useLinkBehavior} from './linkBehaviorContext';
 
 export interface LinkProps
   extends React.RefAttributes<HTMLAnchorElement>,
@@ -61,26 +56,19 @@ const getLinkStyles = ({
 `;
 
 const Anchor = styled('a', {
-  shouldForwardProp: prop =>
-    typeof prop === 'string' && isPropValid(prop) && prop !== 'disabled',
+  shouldForwardProp: prop => isPropValid(prop) && prop !== 'disabled',
 })<{disabled?: LinkProps['disabled']}>`
   ${getLinkStyles}
 `;
 
-/**
- * A context-aware version of Link (from react-router) that falls
- * back to <a> if there is no router present
- */
-export const Link = styled(({disabled, to, ...props}: LinkProps) => {
-  const location = useLocation();
+export const Link = styled((props: LinkProps) => {
+  const {Component, behavior} = useLinkBehavior(props);
 
-  if (disabled || !location) {
+  if (props.disabled || Component === 'a') {
     return <Anchor {...props} />;
   }
 
-  return (
-    <RouterLink to={locationDescriptorToTo(normalizeUrl(to, location))} {...props} />
-  );
+  return <Component {...behavior()} />;
 })`
   ${getLinkStyles}
 `;

static/app/components/core/link/linkBehaviorContext.tsx

@@ -0,0 +1,19 @@
+import {createContext, useContext, type FunctionComponent} from 'react';
+
+import type {LinkProps} from './link';
+
+const LinkBehaviorContext = createContext<{
+  behavior: (props: LinkProps) => LinkProps;
+  component: FunctionComponent<LinkProps> | 'a';
+}>({
+  component: 'a',
+  behavior: props => props,
+});
+
+export const LinkBehaviorContextProvider = LinkBehaviorContext.Provider;
+
+export const useLinkBehavior = (props: LinkProps) => {
+  const {component, behavior} = useContext(LinkBehaviorContext);
+
+  return {Component: component, behavior: () => behavior(props)};
+};

static/app/main.tsx

@@ -10,7 +10,6 @@ import {FrontendVersionProvider} from 'sentry/components/frontendVersionContext'
 import {ThemeAndStyleProvider} from 'sentry/components/themeAndStyleProvider';
 import {SENTRY_RELEASE_VERSION, USE_REACT_QUERY_DEVTOOL} from 'sentry/constants';
 import {routes} from 'sentry/routes';
-import {SentryTrackingProvider} from 'sentry/tracking';
 import {DANGEROUS_SET_REACT_ROUTER_6_HISTORY} from 'sentry/utils/browserHistory';
 
 function buildRouter() {
@@ -28,13 +27,11 @@ function Main() {
     <AppQueryClientProvider>
       <FrontendVersionProvider releaseVersion={SENTRY_RELEASE_VERSION ?? null}>
         <ThemeAndStyleProvider>
-          <SentryTrackingProvider>
-            <NuqsAdapter defaultOptions={{shallow: false}}>
-              <CommandPaletteProvider>
-                <RouterProvider router={router} />
-              </CommandPaletteProvider>
-            </NuqsAdapter>
-          </SentryTrackingProvider>
+          <NuqsAdapter defaultOptions={{shallow: false}}>
+            <CommandPaletteProvider>
+              <RouterProvider router={router} />
+            </CommandPaletteProvider>
+          </NuqsAdapter>
           {USE_REACT_QUERY_DEVTOOL && (
             <ReactQueryDevtools initialIsOpen={false} buttonPosition="bottom-left" />
           )}

static/app/routes.tsx

@@ -3,6 +3,7 @@ import memoize from 'lodash/memoize';
 
 import {EXPERIMENTAL_SPA} from 'sentry/constants';
 import {t} from 'sentry/locale';
+import {ScrapsProviders} from 'sentry/scrapsProviders';
 import HookStore from 'sentry/stores/hookStore';
 import type {HookName} from 'sentry/types/hooks';
 import errorHandler from 'sentry/utils/errorHandler';
@@ -3066,7 +3067,13 @@ function buildRoutes(): RouteObject[] {
   };
 
   const appRoutes: SentryRouteObject = {
-    component: ProvideAriaRouter,
+    component: ({children}: {children: React.ReactNode}) => {
+      return (
+        <ProvideAriaRouter>
+          <ScrapsProviders>{children}</ScrapsProviders>
+        </ProvideAriaRouter>
+      );
+    },
     deprecatedRouteProps: true,
     children: [
       experimentalSpaRoutes,

static/app/scrapsProviders/index.tsx

@@ -0,0 +1,10 @@
+import {SentryLinkBehaviorProvider} from './link';
+import {SentryTrackingProvider} from './tracking';
+
+export function ScrapsProviders({children}: {children: React.ReactNode}) {
+  return (
+    <SentryTrackingProvider>
+      <SentryLinkBehaviorProvider>{children}</SentryLinkBehaviorProvider>
+    </SentryTrackingProvider>
+  );
+}

static/app/scrapsProviders/link.tsx

@@ -0,0 +1,34 @@
+import {useMemo} from 'react';
+import {Link as RouterLink} from 'react-router-dom';
+
+import type {LinkProps} from '@sentry/scraps/link';
+import {LinkBehaviorContextProvider} from '@sentry/scraps/link/linkBehaviorContext';
+
+import {locationDescriptorToTo} from 'sentry/utils/reactRouter6Compat/location';
+import normalizeUrl from 'sentry/utils/url/normalizeUrl';
+import {useLocation} from 'sentry/utils/useLocation';
+
+export function SentryLinkBehaviorProvider({children}: {children: React.ReactNode}) {
+  const location = useLocation();
+
+  return (
+    <LinkBehaviorContextProvider
+      value={useMemo(
+        () => ({
+          component: RouterLink,
+          behavior: ({to, ...props}: LinkProps) => {
+            const normalizedTo = locationDescriptorToTo(normalizeUrl(to, location));
+
+            return {
+              to: normalizedTo,
+              ...props,
+            };
+          },
+        }),
+        [location]
+      )}
+    >
+      {children}
+    </LinkBehaviorContextProvider>
+  );
+}

static/app/tracking.tsx renamed to static/app/scrapsProviders/tracking.tsx

@@ -23,8 +23,6 @@ import * as qs from 'query-string';
 import {LocationFixture} from 'sentry-fixture/locationFixture';
 import {ThemeFixture} from 'sentry-fixture/theme';
 
-import {makeTestQueryClient} from 'sentry-test/queryClient';
-
 import {CommandPaletteProvider} from 'sentry/components/commandPalette/context';
 import {GlobalDrawer} from 'sentry/components/globalDrawer';
 import GlobalModal from 'sentry/components/globalModal';
@@ -43,6 +41,8 @@ import {instrumentUserEvent} from '../instrumentedEnv/userEventIntegration';
 
 import {initializeOrg} from './initializeOrg';
 import {SentryNuqsTestingAdapter} from './nuqsTestingAdapter';
+import {makeTestQueryClient} from './queryClient';
+import {ScrapsTestingProviders} from './scrapsTestingProviders';
 
 interface ProviderOptions {
   /**
@@ -218,9 +218,11 @@ function makeAllTheProviders(options: ProviderOptions) {
       <CacheProvider value={{...cache, compat: true}}>
         <QueryClientProvider client={makeTestQueryClient()}>
           <SentryNuqsTestingAdapter defaultOptions={{shallow: false}}>
-            <CommandPaletteProvider>
-              <ThemeProvider theme={ThemeFixture()}>{wrappedContent}</ThemeProvider>
-            </CommandPaletteProvider>
+            <ScrapsTestingProviders>
+              <CommandPaletteProvider>
+                <ThemeProvider theme={ThemeFixture()}>{wrappedContent}</ThemeProvider>
+              </CommandPaletteProvider>
+            </ScrapsTestingProviders>
           </SentryNuqsTestingAdapter>
         </QueryClientProvider>
       </CacheProvider>

tests/js/sentry-test/reactTestingLibrary.tsx

@@ -0,0 +1,5 @@
+import {SentryLinkBehaviorProvider} from 'sentry/scrapsProviders/link';
+
+export function ScrapsTestingProviders({children}: {children: React.ReactNode}) {
+  return <SentryLinkBehaviorProvider>{children}</SentryLinkBehaviorProvider>;
+}