fix(replays): Fix switching between orgs when starting on a replay page (#38029)

Turns out that `:orgId` in routes.tsx is a special name and must be used. There's a wrapper around all the `/organization/:orgId/*` routes
- Wrapper: https://github.com/getsentry/sentry/blob/master/static/app/routes.tsx#L1722
- Component: https://github.com/getsentry/sentry/blob/master/static/app/views/organizationDetails/index.tsx#L14-L24

`OrganizationDetails` tracks when the organization changes and makes sure the page-wide context/stores are reset or updated with the fresh values.

When we renamed from `:orgId` to `:ordSlug` that `<OrganizationDetails>` wasn't able to do its job anymore. Don't rename that param.

Fixes #37928

static/app/routes.tsx

@@ -1048,7 +1048,7 @@ function buildRoutes() {
 
   const replayRoutes = (
     <Route
-      path="/organizations/:orgSlug/replays/"
+      path="/organizations/:orgId/replays/"
       component={make(() => import('sentry/views/replays'))}
     >
       <IndexRoute component={make(() => import('sentry/views/replays/replays'))} />

static/app/views/replays/detail/trace.tsx

@@ -17,9 +17,9 @@ import {
   makeEventView,
 } from 'sentry/utils/performance/quickTrace/utils';
 import useApi from 'sentry/utils/useApi';
-import {useRouteContext} from 'sentry/utils/useRouteContext';
+import {useLocation} from 'sentry/utils/useLocation';
 import TraceView from 'sentry/views/performance/traceDetails/traceView';
-import type {ReplayRecord} from 'sentry/views/replays/types';
+import type {ReplayListLocationQuery, ReplayRecord} from 'sentry/views/replays/types';
 
 type State = {
   /**
@@ -61,12 +61,10 @@ const INITIAL_STATE = Object.freeze({
 export default function Trace({replayRecord, organization}: Props) {
   const [state, setState] = useState<State>(INITIAL_STATE);
   const api = useApi();
+  const location = useLocation<ReplayListLocationQuery>();
 
-  const {
-    location,
-    params: {replaySlug, orgSlug},
-  } = useRouteContext();
-  const [, eventId] = replaySlug.split(':');
+  const replayId = replayRecord.id;
+  const orgSlug = organization.slug;
 
   const start = getUtcDateString(replayRecord.startedAt.getTime());
   const end = getUtcDateString(replayRecord.finishedAt.getTime());
@@ -75,10 +73,10 @@ export default function Trace({replayRecord, organization}: Props) {
     async function loadTraces() {
       const eventView = EventView.fromSavedQuery({
         id: undefined,
-        name: `Traces in replay ${eventId}`,
+        name: `Traces in replay ${replayId}`,
         fields: ['trace', 'count(trace)', 'min(timestamp)'],
         orderby: 'min_timestamp',
-        query: `replayId:${eventId} !title:"sentry-replay-event*"`,
+        query: `replayId:${replayId} !title:"sentry-replay-event*"`,
         projects: [ALL_ACCESS_PROJECTS],
         version: 2,
 
@@ -143,7 +141,7 @@ export default function Trace({replayRecord, organization}: Props) {
     loadTraces();
 
     return () => {};
-  }, [api, eventId, orgSlug, location, start, end]);
+  }, [api, replayId, orgSlug, location, start, end]);
 
   if (state.isLoading) {
     return <LoadingIndicator />;

static/app/views/replays/details.tsx

@@ -15,7 +15,7 @@ import Layout from 'sentry/views/replays/detail/layout';
 import Page from 'sentry/views/replays/detail/page';
 
 type Props = RouteComponentProps<
-  {orgSlug: string; replaySlug: string},
+  {orgId: string; replaySlug: string},
   {},
   any,
   {t: number}
@@ -27,7 +27,7 @@ function ReplayDetails({
       t: initialTimeOffset, // Time, in seconds, where the video should start
     },
   },
-  params: {orgSlug, replaySlug},
+  params: {orgId: orgSlug, replaySlug},
 }: Props) {
   const {fetching, onRetry, replay} = useReplayData({
     replaySlug,