ref(replay): Refactor Replay List&Details so it doesn't depend on deprecatedRouteProps (#96784)

Author: ryan953

static/app/routes.tsx

@@ -1728,15 +1728,13 @@ function buildRoutes(): RouteObject[] {
     {
       path: ':replaySlug/',
       component: make(() => import('sentry/views/replays/details')),
-      deprecatedRouteProps: true,
     },
   ];
   const replayRoutes: SentryRouteObject = {
     path: '/replays/',
     component: make(() => import('sentry/views/replays/index')),
     withOrgPath: true,
     children: replayChildren,
-    deprecatedRouteProps: true,
   };
 
   const releaseChildren: SentryRouteObject[] = [

static/app/utils/replays/hooks/useInitialTimeOffsetMs.tsx

@@ -10,7 +10,7 @@ import {MutableSearch} from 'sentry/utils/tokenizeSearch';
 import useApi from 'sentry/utils/useApi';
 import {useLocation} from 'sentry/utils/useLocation';
 
-export type TimeOffsetLocationQueryParams = {
+type TimeOffsetLocationQueryParams = {
   /**
    * The time when the event happened.
    * Anything that can be parsed by `new Date()`; for example a timestamp in ms

static/app/utils/useParams.tsx

@@ -35,6 +35,7 @@ type ParamKeys =
   | 'regionName'
   | 'release'
   | 'relocationUuid'
+  | 'replaySlug'
   | 'scrubbingId'
   | 'searchId'
   | 'sentryAppSlug'

static/app/views/replays/details.tsx

@@ -1,21 +1,21 @@
 import {Fragment} from 'react';
 import styled from '@emotion/styled';
+import invariant from 'invariant';
 
 import AnalyticsArea from 'sentry/components/analyticsArea';
 import FullViewport from 'sentry/components/layouts/fullViewport';
 import * as Layout from 'sentry/components/layouts/thirds';
 import SentryDocumentTitle from 'sentry/components/sentryDocumentTitle';
 import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
-import type {RouteComponentProps} from 'sentry/types/legacyReactRouter';
 import {decodeScalar} from 'sentry/utils/queryString';
-import type {TimeOffsetLocationQueryParams} from 'sentry/utils/replays/hooks/useInitialTimeOffsetMs';
 import useLoadReplayReader from 'sentry/utils/replays/hooks/useLoadReplayReader';
 import useReplayPageview from 'sentry/utils/replays/hooks/useReplayPageview';
 import useRouteAnalyticsEventNames from 'sentry/utils/routeAnalytics/useRouteAnalyticsEventNames';
 import useRouteAnalyticsParams from 'sentry/utils/routeAnalytics/useRouteAnalyticsParams';
 import {useLocation} from 'sentry/utils/useLocation';
 import useOrganization from 'sentry/utils/useOrganization';
+import {useParams} from 'sentry/utils/useParams';
 import {useUser} from 'sentry/utils/useUser';
 import ReplayDetailsProviders from 'sentry/views/replays/detail/body/replayDetailsProviders';
 import ReplayDetailsHeaderActions from 'sentry/views/replays/detail/header/replayDetailsHeaderActions';
@@ -24,16 +24,12 @@ import ReplayDetailsPageBreadcrumbs from 'sentry/views/replays/detail/header/rep
 import ReplayDetailsUserBadge from 'sentry/views/replays/detail/header/replayDetailsUserBadge';
 import ReplayDetailsPage from 'sentry/views/replays/detail/page';
 
-type Props = RouteComponentProps<
-  {replaySlug: string},
-  any,
-  TimeOffsetLocationQueryParams
->;
-
-export default function ReplayDetails({params: {replaySlug}}: Props) {
+export default function ReplayDetails() {
   const user = useUser();
   const location = useLocation();
   const organization = useOrganization();
+  const {replaySlug} = useParams();
+  invariant(replaySlug, '`replaySlug` is required as part of the route params');
 
   const {slug: orgSlug} = organization;
 

static/app/views/replays/index.tsx

@@ -1,15 +1,12 @@
+import {Outlet} from 'react-router-dom';
+
 import AnalyticsArea from 'sentry/components/analyticsArea';
 import NoProjectMessage from 'sentry/components/noProjectMessage';
 import Redirect from 'sentry/components/redirect';
-import type {RouteComponentProps} from 'sentry/types/legacyReactRouter';
 import useOrganization from 'sentry/utils/useOrganization';
 import {useRedirectNavV2Routes} from 'sentry/views/nav/useRedirectNavV2Routes';
 
-type Props = RouteComponentProps & {
-  children: React.ReactNode;
-};
-
-export default function ReplaysContainer({children}: Props) {
+export default function ReplaysContainer() {
   const organization = useOrganization();
 
   const redirectPath = useRedirectNavV2Routes({
@@ -23,7 +20,9 @@ export default function ReplaysContainer({children}: Props) {
 
   return (
     <AnalyticsArea name="replays">
-      <NoProjectMessage organization={organization}>{children}</NoProjectMessage>
+      <NoProjectMessage organization={organization}>
+        <Outlet />
+      </NoProjectMessage>
     </AnalyticsArea>
   );
 }