feat(starfish): Use a routing context to generate Starfish links (#54723)

As I move Starfish features into Performance, I'll need to fix the routing.
Right now all the links go to URLs like `/starfish/spans` and I'll need
them to go to `/performance/database/spans`. My initial tack was to use
relative links, but React Router 3 doesn't support them. That left me
with the other option, which is to declare the routing context for the
page.

static/app/views/starfish/components/tableCells/spanDescriptionCell.tsx

@@ -15,6 +15,7 @@ import {OverflowEllipsisTextContainer} from 'sentry/views/starfish/components/te
 import {useFullSpanFromTrace} from 'sentry/views/starfish/queries/useFullSpanFromTrace';
 import {ModuleName, StarfishFunctions} from 'sentry/views/starfish/types';
 import {extractRoute} from 'sentry/views/starfish/utils/extractRoute';
+import {useRoutingContext} from 'sentry/views/starfish/utils/routingContext';
 import {SQLishFormatter} from 'sentry/views/starfish/utils/sqlish/SQLishFormatter';
 import {QueryParameterNames} from 'sentry/views/starfish/views/queryParameters';
 
@@ -38,6 +39,7 @@ export function SpanDescriptionCell({
   projectId,
 }: Props) {
   const location = useLocation();
+  const routingContext = useRoutingContext();
 
   const hoverOverlayProps = useHoverOverlay('overlay', OVERLAY_OPTIONS);
 
@@ -79,7 +81,7 @@ export function SpanDescriptionCell({
         <OverflowEllipsisTextContainer>
           {group ? (
             <Link
-              to={`/starfish/${
+              to={`${routingContext.baseURL}/${
                 extractRoute(location) ?? 'spans'
               }/span/${group}?${qs.stringify(queryString)}`}
             >

static/app/views/starfish/utils/routingContext.tsx

@@ -0,0 +1,26 @@
+import {createContext, useContext} from 'react';
+
+interface RoutingContextValue {
+  baseURL: string;
+}
+
+const DEFAULT_VALUE = {
+  baseURL: '/starfish',
+};
+
+const RoutingContext = createContext<RoutingContextValue>(DEFAULT_VALUE);
+
+interface Props {
+  children: React.ReactNode;
+  value?: RoutingContextValue;
+}
+
+export const useRoutingContext = () => useContext(RoutingContext);
+
+export function RoutingContextProvider({value, children}: Props) {
+  return (
+    <RoutingContext.Provider value={value ?? DEFAULT_VALUE}>
+      {children}
+    </RoutingContext.Provider>
+  );
+}

static/app/views/starfish/views/spanSummaryPage/spanTransactionsTable.tsx

@@ -35,6 +35,7 @@ import {
   SpanMetricsFieldTypes,
 } from 'sentry/views/starfish/types';
 import {extractRoute} from 'sentry/views/starfish/utils/extractRoute';
+import {useRoutingContext} from 'sentry/views/starfish/utils/routingContext';
 import {DataTitles, getThroughputTitle} from 'sentry/views/starfish/views/spans/types';
 
 type Row = {
@@ -72,6 +73,7 @@ export function SpanTransactionsTable({
   sort,
 }: Props) {
   const location = useLocation();
+  const routingContext = useRoutingContext();
   const organization = useOrganization();
   const pageFilters = usePageFilters();
   const router = useRouter();
@@ -122,7 +124,7 @@ export function SpanTransactionsTable({
     });
 
     if (column.key === 'avg(span.self_time)') {
-      const pathname = `/starfish/${
+      const pathname = `${routingContext.baseURL}/${
         extractRoute(location) ?? 'spans'
       }/span/${encodeURIComponent(span[SpanMetricsFields.SPAN_GROUP])}`;
       const query = {

static/app/views/starfish/views/spans/index.tsx

@@ -14,6 +14,7 @@ import {StarfishPageFiltersContainer} from 'sentry/views/starfish/components/sta
 import {StarfishProjectSelector} from 'sentry/views/starfish/components/starfishProjectSelector';
 import {ModuleName, SpanMetricsFields} from 'sentry/views/starfish/types';
 import {ROUTE_NAMES} from 'sentry/views/starfish/utils/routeNames';
+import {RoutingContextProvider} from 'sentry/views/starfish/utils/routingContext';
 
 import SpansView from './spansView';
 
@@ -36,29 +37,31 @@ export default function Spans() {
   const spanCategory = location.query['span.category'];
 
   return (
-    <Layout.Page>
-      <PageErrorProvider>
-        <Layout.Header>
-          <Layout.HeaderContent>
-            <Layout.Title>{getTitle(moduleName, spanCategory)}</Layout.Title>
-          </Layout.HeaderContent>
-        </Layout.Header>
+    <RoutingContextProvider>
+      <Layout.Page>
+        <PageErrorProvider>
+          <Layout.Header>
+            <Layout.HeaderContent>
+              <Layout.Title>{getTitle(moduleName, spanCategory)}</Layout.Title>
+            </Layout.HeaderContent>
+          </Layout.Header>
 
-        <Layout.Body>
-          <Layout.Main fullWidth>
-            <PageErrorAlert />
-            <StarfishPageFiltersContainer>
-              <StyledPageFilterBar condensed>
-                <StarfishProjectSelector />
-                <StarfishDatePicker />
-              </StyledPageFilterBar>
+          <Layout.Body>
+            <Layout.Main fullWidth>
+              <PageErrorAlert />
+              <StarfishPageFiltersContainer>
+                <StyledPageFilterBar condensed>
+                  <StarfishProjectSelector />
+                  <StarfishDatePicker />
+                </StyledPageFilterBar>
 
-              <SpansView moduleName={moduleName} spanCategory={spanCategory} />
-            </StarfishPageFiltersContainer>
-          </Layout.Main>
-        </Layout.Body>
-      </PageErrorProvider>
-    </Layout.Page>
+                <SpansView moduleName={moduleName} spanCategory={spanCategory} />
+              </StarfishPageFiltersContainer>
+            </Layout.Main>
+          </Layout.Body>
+        </PageErrorProvider>
+      </Layout.Page>
+    </RoutingContextProvider>
   );
 }
 

static/app/views/starfish/views/webServiceView/endpointOverview/index.tsx

@@ -39,6 +39,7 @@ import {StarfishPageFiltersContainer} from 'sentry/views/starfish/components/sta
 import {ModuleName} from 'sentry/views/starfish/types';
 import {STARFISH_CHART_INTERVAL_FIDELITY} from 'sentry/views/starfish/utils/constants';
 import {getDateConditions} from 'sentry/views/starfish/utils/getDateConditions';
+import {useRoutingContext} from 'sentry/views/starfish/utils/routingContext';
 import SpansTable from 'sentry/views/starfish/views/spans/spansTable';
 import {DataTitles} from 'sentry/views/starfish/views/spans/types';
 import IssuesTable from 'sentry/views/starfish/views/webServiceView/endpointOverview/issuesTable';
@@ -57,6 +58,7 @@ type State = {
 
 export default function EndpointOverview() {
   const location = useLocation();
+  const routingContext = useRoutingContext();
   const organization = useOrganization();
 
   const {endpoint, 'http.method': httpMethod} = location.query;
@@ -289,7 +291,9 @@ export default function EndpointOverview() {
               crumbs={[
                 {
                   label: t('Web Service'),
-                  to: normalizeUrl(`/organizations/${organization.slug}/starfish/`),
+                  to: normalizeUrl(
+                    `/organizations/${organization.slug}/${routingContext.baseURL}/`
+                  ),
                 },
                 {
                   label: t('Endpoint Overview'),

static/app/views/starfish/views/webServiceView/spanGroupBreakdown.tsx

@@ -14,6 +14,7 @@ import {VisuallyCompleteWithData} from 'sentry/utils/performanceForSentry';
 import useOrganization from 'sentry/utils/useOrganization';
 import Chart from 'sentry/views/starfish/components/chart';
 import {SpanMetricsFields} from 'sentry/views/starfish/types';
+import {useRoutingContext} from 'sentry/views/starfish/utils/routingContext';
 import {
   DataDisplayType,
   DataRow,
@@ -46,6 +47,7 @@ export function SpanGroupBreakdown({
   onDisplayTypeChange,
 }: Props) {
   const organization = useOrganization();
+  const routingContext = useRoutingContext();
   const hasDropdownFeatureFlag = organization.features.includes(
     'starfish-wsv-chart-dropdown'
   );
@@ -90,7 +92,7 @@ export function SpanGroupBreakdown({
     let spansLink;
     const spansLinkQueryParams: Record<string, string | string[]> = {};
     if (event.seriesName === 'db') {
-      spansLink = `/starfish/database/`;
+      spansLink = `/${routingContext.baseURL}/database/`;
     } else if (event.seriesName === 'Other') {
       spansLinkQueryParams[SPAN_MODULE] = 'other';
       spansLinkQueryParams['!span.category'] = data
@@ -102,7 +104,9 @@ export function SpanGroupBreakdown({
     }
 
     if (!spansLink) {
-      spansLink = `/starfish/spans/?${qs.stringify(spansLinkQueryParams)}`;
+      spansLink = `/${routingContext.baseURL}/spans/?${qs.stringify(
+        spansLinkQueryParams
+      )}`;
     }
     browserHistory.push(spansLink);
   };