ref(stats): Remove deprecated router props from issue stats (#97605)

Removes the deprecated router props from the team issue stats page

Author: scttcper

static/app/routes.tsx

@@ -867,7 +867,6 @@ function buildRoutes(): RouteObject[] {
           component: make(
             () => import('sentry/views/organizationStats/teamInsights/issues')
           ),
-          deprecatedRouteProps: true,
         },
         {
           path: 'health/',

static/app/views/organizationStats/teamInsights/issues.spec.tsx

@@ -4,7 +4,6 @@ import {TeamFixture} from 'sentry-fixture/team';
 import {TeamIssuesBreakdownFixture} from 'sentry-fixture/teamIssuesBreakdown';
 import {TeamResolutionTimeFixture} from 'sentry-fixture/teamResolutionTime';
 
-import {initializeOrg} from 'sentry-test/initializeOrg';
 import {render, screen, userEvent} from 'sentry-test/reactTestingLibrary';
 
 import ProjectsStore from 'sentry/stores/projectsStore';
@@ -56,7 +55,6 @@ describe('TeamStatsIssues', () => {
     projects: [],
     isMember: false,
   });
-  const {routerProps, router} = initializeOrg();
 
   beforeEach(() => {
     TeamStore.reset();
@@ -146,7 +144,7 @@ describe('TeamStatsIssues', () => {
 
     TeamStore.loadInitialData(teams, false, null);
 
-    return render(<TeamStatsIssues {...routerProps} />, {organization});
+    return render(<TeamStatsIssues />, {organization});
   }
 
   it('defaults to first team', async () => {
@@ -157,50 +155,54 @@ describe('TeamStatsIssues', () => {
   });
 
   it('allows team switching as non-owner', async () => {
-    createWrapper({isOrgOwner: false});
+    MockApiClient.addMockResponse({
+      url: `/teams/org-slug/${team1.slug}/issues/old/`,
+      body: [],
+    });
+    MockApiClient.addMockResponse({
+      url: `/teams/org-slug/${team1.slug}/unresolved-issue-age/`,
+      body: [],
+    });
+    const {router} = createWrapper({isOrgOwner: false});
 
     expect(screen.getByText('#backend')).toBeInTheDocument();
     await userEvent.type(screen.getByText('#backend'), '{mouseDown}');
     expect(screen.getByText('#frontend')).toBeInTheDocument();
     // Teams user is not a member of are hidden
     expect(screen.queryByText('#internal')).not.toBeInTheDocument();
     await userEvent.click(screen.getByText('#frontend'));
-    expect(router.push).toHaveBeenCalledWith(
-      expect.objectContaining({query: {team: team1.id}})
-    );
+    expect(router.location).toEqual(expect.objectContaining({query: {team: team1.id}}));
     expect(localStorage.setItem).toHaveBeenCalledWith(
       'teamInsightsSelectedTeamId:org-slug',
       team1.id
     );
   });
 
   it('allows team switching as owner', async () => {
-    createWrapper();
+    const {router} = createWrapper();
 
     expect(screen.getByText('#backend')).toBeInTheDocument();
     await userEvent.type(screen.getByText('#backend'), '{mouseDown}');
     expect(screen.getByText('#frontend')).toBeInTheDocument();
     // Org owners can see all teams including ones they are not members of
     expect(screen.getByText('#internal')).toBeInTheDocument();
     await userEvent.click(screen.getByText('#internal'));
-    expect(router.push).toHaveBeenCalledWith(
-      expect.objectContaining({query: {team: team3.id}})
-    );
+    expect(router.location).toEqual(expect.objectContaining({query: {team: team3.id}}));
     expect(localStorage.setItem).toHaveBeenCalledWith(
       'teamInsightsSelectedTeamId:org-slug',
       team3.id
     );
   });
 
   it('can filter by environment', async () => {
-    createWrapper();
+    const {router} = createWrapper();
 
     // For some reason the "Environment:" is rendered via css :before
     expect(screen.getByText('All')).toBeInTheDocument();
     await userEvent.type(screen.getByText('All'), '{mouseDown}');
     expect(screen.getByText(env1)).toBeInTheDocument();
     await userEvent.click(screen.getByText(env1));
-    expect(router.push).toHaveBeenCalledWith(
+    expect(router.location).toEqual(
       expect.objectContaining({query: {environment: 'prod'}})
     );
   });

static/app/views/organizationStats/teamInsights/issues.tsx

@@ -7,11 +7,12 @@ import LoadingIndicator from 'sentry/components/loadingIndicator';
 import NoProjectMessage from 'sentry/components/noProjectMessage';
 import SentryDocumentTitle from 'sentry/components/sentryDocumentTitle';
 import {t} from 'sentry/locale';
-import type {RouteComponentProps} from 'sentry/types/legacyReactRouter';
 import type {TeamWithProjects} from 'sentry/types/project';
 import localStorage from 'sentry/utils/localStorage';
 import useRouteAnalyticsEventNames from 'sentry/utils/routeAnalytics/useRouteAnalyticsEventNames';
+import {useLocation} from 'sentry/utils/useLocation';
 import useOrganization from 'sentry/utils/useOrganization';
+import useRouter from 'sentry/utils/useRouter';
 import {useUserTeams} from 'sentry/utils/useUserTeams';
 import {usePrefersStackedNav} from 'sentry/views/nav/usePrefersStackedNav';
 import Header from 'sentry/views/organizationStats/header';
@@ -24,10 +25,10 @@ import TeamResolutionTime from './teamResolutionTime';
 import {TeamUnresolvedIssues} from './teamUnresolvedIssues';
 import {dataDatetime} from './utils';
 
-type Props = RouteComponentProps;
-
-function TeamStatsIssues({location, router}: Props) {
+function TeamStatsIssues() {
   const organization = useOrganization();
+  const location = useLocation();
+  const router = useRouter();
   const {teams, isLoading, isError} = useUserTeams();
   const prefersStackedNav = usePrefersStackedNav();
 
@@ -37,7 +38,7 @@ function TeamStatsIssues({location, router}: Props) {
   const localStorageKey = `teamInsightsSelectedTeamId:${organization.slug}`;
 
   let localTeamId: string | null | undefined =
-    query.team ?? localStorage.getItem(localStorageKey);
+    (query.team as string | undefined) ?? localStorage.getItem(localStorageKey);
   if (localTeamId && !teams.some(team => team.id === localTeamId)) {
     localTeamId = null;
   }
@@ -46,7 +47,7 @@ function TeamStatsIssues({location, router}: Props) {
     | TeamWithProjects
     | undefined;
   const projects = currentTeam?.projects ?? [];
-  const environment = query.environment;
+  const environment = query.environment as string | undefined;
 
   const {period, start, end, utc} = dataDatetime(query);