ref(settings): Refactor settings/$project/replay to not rely on deprecatedRouteProps (#96701)

Author: ryan953

static/app/routes.tsx

@@ -680,7 +680,7 @@ function buildRoutes(): RouteObject[] {
       path: 'replays/',
       name: t('Replays'),
       component: make(() => import('sentry/views/settings/project/projectReplays')),
-      deprecatedRouteProps: true,
+      deprecatedRouteProps: true, // Should be false except for ProjectContext passed via `outletContext`
     },
     {
       path: 'toolbar/',

static/app/views/settings/project/projectReplays.spec.tsx

@@ -6,30 +6,37 @@ import {render, screen, userEvent} from 'sentry-test/reactTestingLibrary';
 import ProjectReplays from 'sentry/views/settings/project/projectReplays';
 
 describe('ProjectReplays', function () {
-  const {routerProps, organization, project} = initializeOrg();
-  const url = `/projects/${organization.slug}/${project.slug}/`;
+  const {organization, project} = initializeOrg();
+  const initialRouterConfig = {
+    location: {
+      pathname: `/settings/projects/${project.slug}/replays/`,
+    },
+    route: '/settings/projects/:projectId/replays/',
+  };
+  const getProjectEndpoint = `/projects/${organization.slug}/${project.slug}/`;
 
   beforeEach(function () {
     MockApiClient.clearMockResponses();
     MockApiClient.addMockResponse({
-      url,
+      url: getProjectEndpoint,
       method: 'GET',
       body: ProjectFixture(),
     });
     MockApiClient.addMockResponse({
-      url: `${url}keys/`,
+      url: `${getProjectEndpoint}keys/`,
       method: 'GET',
       body: [],
     });
   });
 
   it('can toggle rage click issue creation', async function () {
-    render(
-      <ProjectReplays {...routerProps} organization={organization} project={project} />
-    );
+    render(<ProjectReplays project={project} />, {
+      initialRouterConfig,
+      organization,
+    });
 
     const mock = MockApiClient.addMockResponse({
-      url,
+      url: getProjectEndpoint,
       method: 'PUT',
     });
 
@@ -38,7 +45,7 @@ describe('ProjectReplays', function () {
     );
 
     expect(mock).toHaveBeenCalledWith(
-      url,
+      getProjectEndpoint,
       expect.objectContaining({
         method: 'PUT',
         data: {

static/app/views/settings/project/projectReplays.tsx

@@ -12,11 +12,10 @@ import ReplayBulkDeleteAuditLog from 'sentry/components/replays/bulkDelete/repla
 import SentryDocumentTitle from 'sentry/components/sentryDocumentTitle';
 import {t, tct} from 'sentry/locale';
 import ProjectsStore from 'sentry/stores/projectsStore';
-import {space} from 'sentry/styles/space';
-import type {RouteComponentProps} from 'sentry/types/legacyReactRouter';
-import type {Organization} from 'sentry/types/organization';
 import type {Project} from 'sentry/types/project';
 import useUrlParams from 'sentry/utils/url/useUrlParams';
+import useOrganization from 'sentry/utils/useOrganization';
+import {useParams} from 'sentry/utils/useParams';
 import SettingsPageHeader from 'sentry/views/settings/components/settingsPageHeader';
 import {ProjectPermissionAlert} from 'sentry/views/settings/project/projectPermissionAlert';
 
@@ -25,19 +24,14 @@ const ReplaySettingsAlert = HookOrDefault({
   defaultComponent: null,
 });
 
-type RouteParams = {
-  projectId: string;
-};
-type Props = RouteComponentProps<RouteParams> & {
-  organization: Organization;
-  project: Project;
-};
+interface Props {
+  project: Project; // Passed in by the parent route
+}
+
+export default function ProjectReplaySettings({project}: Props) {
+  const organization = useOrganization();
+  const {projectId} = useParams();
 
-export default function ProjectReplaySettings({
-  organization,
-  project,
-  params: {projectId},
-}: Props) {
   const hasWriteAccess = hasEveryAccess(['project:write'], {organization, project});
   const hasAdminAccess = hasEveryAccess(['project:admin'], {organization, project});
   const hasAccess = hasWriteAccess || hasAdminAccess;
@@ -141,5 +135,5 @@ export default function ProjectReplaySettings({
 }
 
 const TabsWithGap = styled(Tabs)`
-  gap: ${space(2)};
+  gap: ${p => p.theme.space.xl};
 `;