ref(rr6): Replace many useRouter's with useNavigate's (#78804)

static/app/components/modals/sudoModal.tsx

@@ -18,7 +18,7 @@ import {space} from 'sentry/styles/space';
 import type {Authenticator} from 'sentry/types/auth';
 import useApi from 'sentry/utils/useApi';
 import {useLocation} from 'sentry/utils/useLocation';
-import useRouter from 'sentry/utils/useRouter';
+import {useNavigate} from 'sentry/utils/useNavigate';
 import {useUser} from 'sentry/utils/useUser';
 import {OrganizationLoaderContext} from 'sentry/views/organizationContext';
 import TextBlock from 'sentry/views/settings/components/text/textBlock';
@@ -63,7 +63,7 @@ function SudoModal({
   closeButton,
 }: Props) {
   const user = useUser();
-  const router = useRouter();
+  const navigate = useNavigate();
   const api = useApi();
   const [state, setState] = useState<State>({
     authenticators: [] as Authenticator[],
@@ -157,7 +157,10 @@ function SudoModal({
 
   const handleSuccess = () => {
     if (isSuperuser) {
-      router.replace({pathname: location.pathname, state: {forceUpdate: new Date()}});
+      navigate(
+        {pathname: location.pathname, state: {forceUpdate: new Date()}},
+        {replace: true}
+      );
       if (needsReload) {
         window.location.reload();
       }

static/app/components/modals/widgetViewerModal.tsx

@@ -52,8 +52,8 @@ import {MEPSettingProvider} from 'sentry/utils/performance/contexts/metricsEnhan
 import {decodeInteger, decodeList, decodeScalar} from 'sentry/utils/queryString';
 import useApi from 'sentry/utils/useApi';
 import {useLocation} from 'sentry/utils/useLocation';
+import {useNavigate} from 'sentry/utils/useNavigate';
 import useProjects from 'sentry/utils/useProjects';
-import useRouter from 'sentry/utils/useRouter';
 import withPageFilters from 'sentry/utils/withPageFilters';
 import type {DashboardFilters, Widget} from 'sentry/views/dashboards/types';
 import {DisplayType, WidgetType} from 'sentry/views/dashboards/types';
@@ -190,7 +190,7 @@ function WidgetViewerModal(props: Props) {
   } = props;
   const location = useLocation();
   const {projects} = useProjects();
-  const router = useRouter();
+  const navigate = useNavigate();
   const shouldShowSlider = organization.features.includes('widget-viewer-modal-minimap');
   // TODO(Tele-Team): Re-enable this when we have a better way to determine if the data is transaction only
   // let widgetContentLoadingStatus: boolean | undefined = undefined;
@@ -447,13 +447,16 @@ function WidgetViewerModal(props: Props) {
     );
     widths.forEach((width, index) => (newWidths[index] = parseInt(width, 10)));
     newWidths[columnIndex] = newWidth;
-    router.replace({
-      pathname: location.pathname,
-      query: {
-        ...location.query,
-        [WidgetViewerQueryField.WIDTH]: newWidths,
+    navigate(
+      {
+        pathname: location.pathname,
+        query: {
+          ...location.query,
+          [WidgetViewerQueryField.WIDTH]: newWidths,
+        },
       },
-    });
+      {replace: true}
+    );
   };
 
   // Get discover result totals
@@ -471,15 +474,18 @@ function WidgetViewerModal(props: Props) {
 
   function onLegendSelectChanged({selected}: {selected: Record<string, boolean>}) {
     setDisabledLegends(selected);
-    router.replace({
-      pathname: location.pathname,
-      query: {
-        ...location.query,
-        [WidgetViewerQueryField.LEGEND]: Object.keys(selected).filter(
-          key => !selected[key]
-        ),
+    navigate(
+      {
+        pathname: location.pathname,
+        query: {
+          ...location.query,
+          [WidgetViewerQueryField.LEGEND]: Object.keys(selected).filter(
+            key => !selected[key]
+          ),
+        },
       },
-    });
+      {replace: true}
+    );
     trackAnalytics('dashboards_views.widget_viewer.toggle_legend', {
       organization,
       widget_type: widget.widgetType ?? WidgetType.DISCOVER,
@@ -533,13 +539,16 @@ function WidgetViewerModal(props: Props) {
           <Pagination
             pageLinks={pageLinks}
             onCursor={newCursor => {
-              router.replace({
-                pathname: location.pathname,
-                query: {
-                  ...location.query,
-                  [WidgetViewerQueryField.CURSOR]: newCursor,
+              navigate(
+                {
+                  pathname: location.pathname,
+                  query: {
+                    ...location.query,
+                    [WidgetViewerQueryField.CURSOR]: newCursor,
+                  },
                 },
-              });
+                {replace: true}
+              );
 
               if (widget.displayType === DisplayType.TABLE) {
                 setChartUnmodified(false);
@@ -606,14 +615,17 @@ function WidgetViewerModal(props: Props) {
                 newCursor = undefined;
                 nextPage = 0;
               }
-              router.replace({
-                pathname: location.pathname,
-                query: {
-                  ...location.query,
-                  [WidgetViewerQueryField.CURSOR]: newCursor,
-                  [WidgetViewerQueryField.PAGE]: nextPage,
+              navigate(
+                {
+                  pathname: location.pathname,
+                  query: {
+                    ...location.query,
+                    [WidgetViewerQueryField.CURSOR]: newCursor,
+                    [WidgetViewerQueryField.PAGE]: nextPage,
+                  },
                 },
-              });
+                {replace: true}
+              );
 
               if (widget.displayType === DisplayType.TABLE) {
                 setChartUnmodified(false);
@@ -674,13 +686,16 @@ function WidgetViewerModal(props: Props) {
             <Pagination
               pageLinks={pageLinks}
               onCursor={newCursor => {
-                router.replace({
-                  pathname: location.pathname,
-                  query: {
-                    ...location.query,
-                    [WidgetViewerQueryField.CURSOR]: newCursor,
+                navigate(
+                  {
+                    pathname: location.pathname,
+                    query: {
+                      ...location.query,
+                      [WidgetViewerQueryField.CURSOR]: newCursor,
+                    },
                   },
-                });
+                  {replace: true}
+                );
                 trackAnalytics('dashboards_views.widget_viewer.paginate', {
                   organization,
                   widget_type: WidgetType.RELEASE,
@@ -725,7 +740,7 @@ function WidgetViewerModal(props: Props) {
         period: null,
       },
     });
-    router.push({
+    navigate({
       pathname: location.pathname,
       query: {
         ...location.query,
@@ -909,15 +924,18 @@ function WidgetViewerModal(props: Props) {
               value={selectedQueryIndex}
               options={queryOptions}
               onChange={(option: SelectValue<number>) => {
-                router.replace({
-                  pathname: location.pathname,
-                  query: {
-                    ...location.query,
-                    [WidgetViewerQueryField.QUERY]: option.value,
-                    [WidgetViewerQueryField.PAGE]: undefined,
-                    [WidgetViewerQueryField.CURSOR]: undefined,
+                navigate(
+                  {
+                    pathname: location.pathname,
+                    query: {
+                      ...location.query,
+                      [WidgetViewerQueryField.QUERY]: option.value,
+                      [WidgetViewerQueryField.PAGE]: undefined,
+                      [WidgetViewerQueryField.CURSOR]: undefined,
+                    },
                   },
-                });
+                  {replace: true}
+                );
 
                 trackAnalytics('dashboards_views.widget_viewer.select_query', {
                   organization,

static/app/components/sidebar/sidebarAccordion.tsx

@@ -17,8 +17,8 @@ import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
 import {useLocalStorageState} from 'sentry/utils/useLocalStorageState';
 import useMedia from 'sentry/utils/useMedia';
+import {useNavigate} from 'sentry/utils/useNavigate';
 import useOnClickOutside from 'sentry/utils/useOnClickOutside';
-import useRouter from 'sentry/utils/useRouter';
 
 import type {SidebarItemProps} from './sidebarItem';
 import SidebarItem, {isItemActive} from './sidebarItem';
@@ -42,7 +42,7 @@ function SidebarAccordion({
     useContext(ExpandedContext);
   const theme = useTheme();
   const horizontal = useMedia(`(max-width: ${theme.breakpoints.medium})`);
-  const router = useRouter();
+  const navigate = useNavigate();
   const [expanded, setExpanded] = useLocalStorageState(
     `sidebar-accordion-${id}:expanded`,
     initiallyExpanded ?? true
@@ -107,7 +107,7 @@ function SidebarAccordion({
     e: React.MouseEvent<HTMLAnchorElement>
   ) => void = () => {
     if (itemProps.to) {
-      router.push(itemProps.to);
+      navigate(itemProps.to);
       setExpandedItemId(null);
     }
   };

static/app/views/insights/mobile/common/components/spanSamplesPanelContainer.tsx

@@ -16,9 +16,9 @@ import {decodeScalar} from 'sentry/utils/queryString';
 import {MutableSearch} from 'sentry/utils/tokenizeSearch';
 import normalizeUrl from 'sentry/utils/url/normalizeUrl';
 import {useLocation} from 'sentry/utils/useLocation';
+import {useNavigate} from 'sentry/utils/useNavigate';
 import useOrganization from 'sentry/utils/useOrganization';
 import usePageFilters from 'sentry/utils/usePageFilters';
-import useRouter from 'sentry/utils/useRouter';
 import {MetricReadout} from 'sentry/views/insights/common/components/metricReadout';
 import {ReadoutRibbon} from 'sentry/views/insights/common/components/ribbon';
 import {useSpanMetrics} from 'sentry/views/insights/common/queries/useDiscover';
@@ -62,7 +62,7 @@ export function SpanSamplesContainer({
   additionalFilters,
 }: Props) {
   const location = useLocation();
-  const router = useRouter();
+  const navigate = useNavigate();
   const [highlightedSpanId, setHighlightedSpanId] = useState<string | undefined>(
     undefined
   );
@@ -125,13 +125,16 @@ export function SpanSamplesContainer({
   const spanMetrics = data[0] ?? {};
 
   const handleSearch = (newSearchQuery: string) => {
-    router.replace({
-      pathname: location.pathname,
-      query: {
-        ...location.query,
-        ...(searchQueryKey && {[searchQueryKey]: newSearchQuery}),
+    navigate(
+      {
+        pathname: location.pathname,
+        query: {
+          ...location.query,
+          ...(searchQueryKey && {[searchQueryKey]: newSearchQuery}),
+        },
       },
-    });
+      {replace: true}
+    );
   };
 
   return (
@@ -178,7 +181,7 @@ export function SpanSamplesContainer({
         transactionName={transactionName}
         transactionMethod={transactionMethod}
         onClickSample={span => {
-          router.push(
+          navigate(
             generateLinkToEventInTraceView({
               eventId: span['transaction.id'],
               projectSlug: span.project,

static/app/views/metrics/createAlertModal.tsx

@@ -37,10 +37,10 @@ import {
 import type {MetricsQuery} from 'sentry/utils/metrics/types';
 import {useMetricsQuery} from 'sentry/utils/metrics/useMetricsQuery';
 import {useVirtualMetricsContext} from 'sentry/utils/metrics/virtualMetricsContext';
+import {useNavigate} from 'sentry/utils/useNavigate';
 import useOrganization from 'sentry/utils/useOrganization';
 import usePageFilters from 'sentry/utils/usePageFilters';
 import useProjects from 'sentry/utils/useProjects';
-import useRouter from 'sentry/utils/useRouter';
 import {AVAILABLE_TIME_PERIODS} from 'sentry/views/alerts/rules/metric/triggers/chart';
 import {
   Dataset,
@@ -122,7 +122,7 @@ export function CreateAlertModal({
   Footer,
   metricsQuery,
 }: Props & ModalRenderProps) {
-  const router = useRouter();
+  const navigate = useNavigate();
   const organization = useOrganization();
   const {resolveVirtualMRI, getExtractionRule} = useVirtualMetricsContext();
   const {projects} = useProjects();
@@ -259,7 +259,7 @@ export function CreateAlertModal({
   );
 
   const handleSubmit = useCallback(() => {
-    router.push(
+    navigate(
       `/organizations/${organization.slug}/alerts/new/metric/?${qs.stringify({
         aggregate,
         query: `${metricsQuery.query} event.type:transaction`.trim(),
@@ -275,7 +275,7 @@ export function CreateAlertModal({
       })}`
     );
   }, [
-    router,
+    navigate,
     aggregate,
     metricsQuery.query,
     organization.slug,

static/app/views/metrics/dashboardImportModal.tsx

@@ -19,9 +19,9 @@ import {parseDashboard} from 'sentry/utils/metrics/dashboardImport';
 import {useMetricsMeta} from 'sentry/utils/metrics/useMetricsMeta';
 import normalizeUrl from 'sentry/utils/url/normalizeUrl';
 import useApi from 'sentry/utils/useApi';
+import {useNavigate} from 'sentry/utils/useNavigate';
 import useOrganization from 'sentry/utils/useOrganization';
 import usePageFilters from 'sentry/utils/usePageFilters';
-import useRouter from 'sentry/utils/useRouter';
 import {
   assignDefaultLayout,
   getInitialColumnDepths,
@@ -48,7 +48,7 @@ type FormState = {
 
 function DashboardImportModal({Header, Body, Footer}: ModalRenderProps) {
   const api = useApi();
-  const router = useRouter();
+  const navigate = useNavigate();
 
   const {selection} = usePageFilters();
   // we want to get all custom metrics for organization
@@ -97,12 +97,12 @@ function DashboardImportModal({Header, Body, Footer}: ModalRenderProps) {
 
     const dashboard = await createDashboard(api, organization.slug, newDashboard);
 
-    router.push(
+    navigate(
       normalizeUrl({
         pathname: `/organizations/${organization.slug}/dashboards/${dashboard.id}/`,
       })
     );
-  }, [formState.importResult, selection, organization, api, router]);
+  }, [formState.importResult, selection, organization, api, navigate]);
 
   return (
     <Fragment>

static/app/views/metrics/scratchpad.tsx

@@ -16,9 +16,9 @@ import {
 import type {MetricsQueryApiQueryParams} from 'sentry/utils/metrics/useMetricsQuery';
 import type {MetricsSamplesResults} from 'sentry/utils/metrics/useMetricsSamples';
 import {useLocation} from 'sentry/utils/useLocation';
+import {useNavigate} from 'sentry/utils/useNavigate';
 import useOrganization from 'sentry/utils/useOrganization';
 import usePageFilters from 'sentry/utils/usePageFilters';
-import useRouter from 'sentry/utils/useRouter';
 import {METRIC_CHART_GROUP, MIN_WIDGET_WIDTH} from 'sentry/views/metrics/constants';
 import {useMetricsContext} from 'sentry/views/metrics/context';
 import {useGetCachedChartPalette} from 'sentry/views/metrics/utils/metricsChartPalette';
@@ -43,7 +43,7 @@ export function MetricScratchpad() {
   } = useMetricsContext();
   const {selection} = usePageFilters();
   const location = useLocation();
-  const router = useRouter();
+  const navigate = useNavigate();
   const organization = useOrganization();
   const getChartPalette = useGetCachedChartPalette();
   const metricsNewInputs = hasMetricsNewInputs(organization);
@@ -86,7 +86,7 @@ export function MetricScratchpad() {
         }
       }
 
-      router.push(
+      navigate(
         generateLinkToEventInTraceView({
           traceSlug: dataRow.trace,
           projectSlug: dataRow.project,
@@ -103,7 +103,7 @@ export function MetricScratchpad() {
         })
       );
     },
-    [router, organization, location]
+    [navigate, location, organization]
   );
 
   const firstWidget = widgets[0];

static/app/views/monitors/components/overviewTimeline/index.tsx

@@ -12,8 +12,8 @@ import {space} from 'sentry/styles/space';
 import {setApiQueryData, useQueryClient} from 'sentry/utils/queryClient';
 import useApi from 'sentry/utils/useApi';
 import {useDimensions} from 'sentry/utils/useDimensions';
+import {useLocation} from 'sentry/utils/useLocation';
 import useOrganization from 'sentry/utils/useOrganization';
-import useRouter from 'sentry/utils/useRouter';
 import type {Monitor} from 'sentry/views/monitors/types';
 import {makeMonitorListQueryKey} from 'sentry/views/monitors/utils';
 
@@ -33,8 +33,7 @@ export function OverviewTimeline({monitorList}: Props) {
   const organization = useOrganization();
   const api = useApi();
   const queryClient = useQueryClient();
-  const router = useRouter();
-  const location = router.location;
+  const location = useLocation();
 
   const elementRef = useRef<HTMLDivElement>(null);
   const {width: timelineWidth} = useDimensions<HTMLDivElement>({elementRef});

static/app/views/performance/traceDetails/newTraceDetailsContent.tsx

@@ -36,7 +36,7 @@ import {WEB_VITAL_DETAILS} from 'sentry/utils/performance/vitals/constants';
 import {VisuallyCompleteWithData} from 'sentry/utils/performanceForSentry';
 import {useApiQuery} from 'sentry/utils/queryClient';
 import normalizeUrl from 'sentry/utils/url/normalizeUrl';
-import useRouter from 'sentry/utils/useRouter';
+import {useNavigate} from 'sentry/utils/useNavigate';
 import Tags from 'sentry/views/discover/tags';
 import Breadcrumb from 'sentry/views/performance/breadcrumb';
 import type {TraceTree} from 'sentry/views/performance/newTraceDetails/traceModels/traceTree';
@@ -70,7 +70,7 @@ export type EventDetail = {
 };
 
 function NewTraceDetailsContent(props: Props) {
-  const router = useRouter();
+  const navigate = useNavigate();
   const [detail, setDetail] = useState<EventDetail | SpanDetailProps | undefined>(
     undefined
   );
@@ -402,13 +402,16 @@ function NewTraceDetailsContent(props: Props) {
         <TraceViewDetailPanel
           detail={detail}
           onClose={() => {
-            router.replace({
-              ...location,
-              hash: undefined,
-              query: {
-                ...omit(location.query, 'openPanel'),
+            navigate(
+              {
+                ...location,
+                hash: undefined,
+                query: {
+                  ...omit(location.query, 'openPanel'),
+                },
               },
-            });
+              {replace: true}
+            );
             setDetail(undefined);
           }}
         />

static/app/views/performance/traceDetails/newTraceDetailsTransactionBar.tsx

@@ -65,7 +65,6 @@ import {space} from 'sentry/styles/space';
 import type {EventTransaction} from 'sentry/types/event';
 import type {Organization} from 'sentry/types/organization';
 import {defined} from 'sentry/utils';
-import {browserHistory} from 'sentry/utils/browserHistory';
 import {hasMetricsExperimentalFeature} from 'sentry/utils/metrics/features';
 import toPercent from 'sentry/utils/number/toPercent';
 import QuickTraceQuery from 'sentry/utils/performance/quickTrace/quickTraceQuery';
@@ -81,7 +80,7 @@ import {
 import Projects from 'sentry/utils/projects';
 import {useApiQuery} from 'sentry/utils/queryClient';
 import {decodeScalar} from 'sentry/utils/queryString';
-import useRouter from 'sentry/utils/useRouter';
+import {useNavigate} from 'sentry/utils/useNavigate';
 import {ProfileGroupProvider} from 'sentry/views/profiling/profileGroupProvider';
 import {ProfileContext, ProfilesProvider} from 'sentry/views/profiling/profilesProvider';
 
@@ -138,7 +137,7 @@ function NewTraceDetailsTransactionBar(props: Props) {
   const transactionRowDOMRef = createRef<HTMLDivElement>();
   const transactionTitleRef = createRef<HTMLDivElement>();
   let spanContentRef: HTMLDivElement | null = null;
-  const router = useRouter();
+  const navigate = useNavigate();
 
   const handleWheel = useCallback(
     (event: WheelEvent) => {
@@ -293,19 +292,22 @@ function NewTraceDetailsTransactionBar(props: Props) {
     const {transaction, organization, location} = props;
 
     if (isTraceError(transaction)) {
-      browserHistory.push(generateIssueEventTarget(transaction, organization));
+      navigate(generateIssueEventTarget(transaction, organization));
       return;
     }
 
     if (isTraceTransaction<TraceFullDetailed>(transaction)) {
-      router.replace({
-        ...location,
-        hash: transactionTargetHash(transaction.event_id),
-        query: {
-          ...location.query,
-          openPanel: 'open',
+      navigate(
+        {
+          ...location,
+          hash: transactionTargetHash(transaction.event_id),
+          query: {
+            ...location.query,
+            openPanel: 'open',
+          },
         },
-      });
+        {replace: true}
+      );
     }
   };