ref(projects): Replace useRouter calls for PickProjectToContinue usages (#112317)

getsentry/frontend-tsc#78

Replaces `useRouter` calls in `PickProjectToContinue` component usages.

Author: shashjar

static/app/components/pickProjectToContinue.tsx

@@ -1,9 +1,10 @@
+import {useEffect} from 'react';
 import styled from '@emotion/styled';
 import type {LocationDescriptor, LocationDescriptorObject} from 'history';
 
 import {openModal} from 'sentry/actionCreators/modal';
 import {ContextPickerModalContainer as ContextPickerModal} from 'sentry/components/contextPickerModal';
-import type {InjectedRouter} from 'sentry/types/legacyReactRouter';
+import {useNavigate} from 'sentry/utils/useNavigate';
 
 type Project = {
   id: string;
@@ -22,17 +23,16 @@ type Props = {
    */
   noProjectRedirectPath: LocationDescriptor;
   projects: Project[];
-  router: InjectedRouter;
   allowAllProjectsSelection?: boolean;
 };
 
 export function PickProjectToContinue({
   noProjectRedirectPath,
   nextPath,
-  router,
   projects,
   allowAllProjectsSelection = false,
 }: Props) {
+  const navigate = useNavigate();
   const nextPathQuery = nextPath.query;
   let navigating = false;
   let path = `${nextPath.pathname}?project=`;
@@ -48,8 +48,14 @@ export function PickProjectToContinue({
   }
 
   // if the project in URL is missing, but this release belongs to only one project, redirect there
-  if (projects.length === 1) {
-    router.replace(path + projects[0]!.id);
+  const shouldRedirect = projects.length === 1;
+  useEffect(() => {
+    if (shouldRedirect) {
+      navigate(path + projects[0]!.id, {replace: true});
+    }
+  }, [shouldRedirect, navigate, path, projects]);
+
+  if (shouldRedirect) {
     return null;
   }
 
@@ -62,7 +68,7 @@ export function PickProjectToContinue({
         nextPath={`${path}:project`}
         onFinish={to => {
           navigating = true;
-          router.replace(to);
+          navigate(to, {replace: true});
           modalProps.closeModal();
         }}
         projectSlugs={projects.map(p => p.slug)}
@@ -74,7 +80,7 @@ export function PickProjectToContinue({
         // we want this to be executed only if the user didn't select any project
         // (closed modal either via button, Esc, clicking outside, ...)
         if (!navigating) {
-          router.push(noProjectRedirectPath);
+          navigate(noProjectRedirectPath);
         }
       },
     }

static/app/views/performance/transactionSummary/pageLayout.tsx

@@ -34,7 +34,6 @@ import {PerformanceEventViewProvider} from 'sentry/utils/performance/contexts/pe
 import {normalizeUrl} from 'sentry/utils/url/normalizeUrl';
 import {useDatePageFilterProps} from 'sentry/utils/useDatePageFilterProps';
 import {useMaxPickableDays} from 'sentry/utils/useMaxPickableDays';
-import {useRouter} from 'sentry/utils/useRouter';
 import {useTransactionSummaryEAP} from 'sentry/views/performance/eap/useTransactionSummaryEAP';
 import {TransactionSummaryContext} from 'sentry/views/performance/transactionSummary/transactionSummaryContext';
 import {
@@ -98,7 +97,6 @@ export function PageLayout(props: Props) {
   }
 
   const theme = useTheme();
-  const router = useRouter();
   const transactionName = getTransactionName(location);
   const [error, setError] = useState<string | undefined>();
   const metricsCardinality = useMetricsCardinalityContext();
@@ -241,7 +239,6 @@ export function PageLayout(props: Props) {
               <PickProjectToContinue
                 data-test-id="transaction-sumamry-project-picker-modal"
                 projects={selectableProjects}
-                router={router}
                 nextPath={{
                   pathname: generateTransactionSummaryRoute({organization}),
                   query: {

static/app/views/releases/detail/index.tsx

@@ -34,7 +34,6 @@ import {useLocation} from 'sentry/utils/useLocation';
 import {useNavigate} from 'sentry/utils/useNavigate';
 import {useOrganization} from 'sentry/utils/useOrganization';
 import {useParams} from 'sentry/utils/useParams';
-import {useRouter} from 'sentry/utils/useRouter';
 import {formatVersion} from 'sentry/utils/versions/formatVersion';
 import type {ReleaseBounds} from 'sentry/views/releases/utils';
 import {getReleaseBounds, searchReleaseVersion} from 'sentry/views/releases/utils';
@@ -242,7 +241,6 @@ function ReleasesDetailContainer() {
   const params = useParams<{release: string}>();
   const location = useLocation();
   const navigate = useNavigate();
-  const router = useRouter();
   const organization = useOrganization();
   const {release} = params;
 
@@ -299,7 +297,6 @@ function ReleasesDetailContainer() {
           id: String(id),
           slug,
         }))}
-        router={router}
         nextPath={{
           pathname: makeReleasesPathname({
             path: `/${encodeURIComponent(release)}/`,