ref(js): Remove browserHistory from discover utils (#82594)

Author: evanpurkhiser

static/app/utils/useNavigate.tsx

@@ -12,7 +12,7 @@ type NavigateOptions = {
   state?: any;
 };
 
-interface ReactRouter3Navigate {
+export interface ReactRouter3Navigate {
   (to: LocationDescriptor, options?: NavigateOptions): void;
   (delta: number): void;
 }

static/app/views/discover/table/tableView.tsx

@@ -49,6 +49,7 @@ import {generateProfileFlamechartRoute} from 'sentry/utils/profiling/routes';
 import {decodeList} from 'sentry/utils/queryString';
 import {MutableSearch} from 'sentry/utils/tokenizeSearch';
 import normalizeUrl from 'sentry/utils/url/normalizeUrl';
+import {useNavigate} from 'sentry/utils/useNavigate';
 import useProjects from 'sentry/utils/useProjects';
 import {useRoutes} from 'sentry/utils/useRoutes';
 import {appendQueryDatasetParam, hasDatasetSelector} from 'sentry/views/dashboards/utils';
@@ -109,6 +110,7 @@ export type TableViewProps = {
 function TableView(props: TableViewProps) {
   const {projects} = useProjects();
   const routes = useRoutes();
+  const navigate = useNavigate();
   const replayLinkGenerator = generateReplayLink(routes);
 
   /**
@@ -124,6 +126,7 @@ function TableView(props: TableViewProps) {
     const nextEventView = eventView.withResizedColumn(columnIndex, newWidth);
 
     pushEventViewToLocation({
+      navigate,
       location,
       nextEventView,
       extraQuery: {

static/app/views/discover/utils.spec.tsx

@@ -4,7 +4,6 @@ import {LocationFixture} from 'sentry-fixture/locationFixture';
 import {initializeOrg} from 'sentry-test/initializeOrg';
 
 import {COL_WIDTH_UNDEFINED} from 'sentry/components/gridEditable';
-import {browserHistory} from 'sentry/utils/browserHistory';
 import type {EventViewOptions} from 'sentry/utils/discover/eventView';
 import EventView from 'sentry/utils/discover/eventView';
 import {DisplayType} from 'sentry/views/dashboards/types';
@@ -252,14 +251,16 @@ describe('pushEventViewToLocation', function () {
   });
 
   it('correct query string object pushed to history', function () {
+    const navigate = jest.fn();
     const eventView = new EventView({...baseView, ...state});
 
     pushEventViewToLocation({
+      navigate,
       location,
       nextEventView: eventView,
     });
 
-    expect(browserHistory.push).toHaveBeenCalledWith(
+    expect(navigate).toHaveBeenCalledWith(
       expect.objectContaining({
         query: expect.objectContaining({
           id: '1234',
@@ -280,17 +281,19 @@ describe('pushEventViewToLocation', function () {
   });
 
   it('extra query params', function () {
+    const navigate = jest.fn();
     const eventView = new EventView({...baseView, ...state});
 
     pushEventViewToLocation({
+      navigate,
       location,
       nextEventView: eventView,
       extraQuery: {
         cursor: 'some cursor',
       },
     });
 
-    expect(browserHistory.push).toHaveBeenCalledWith(
+    expect(navigate).toHaveBeenCalledWith(
       expect.objectContaining({
         query: expect.objectContaining({
           id: '1234',

static/app/views/discover/utils.tsx

@@ -15,7 +15,6 @@ import type {
   OrganizationSummary,
 } from 'sentry/types/organization';
 import type {Project} from 'sentry/types/project';
-import {browserHistory} from 'sentry/utils/browserHistory';
 import {getUtcDateString} from 'sentry/utils/dates';
 import type {TableDataRow} from 'sentry/utils/discover/discoverQuery';
 import type {EventData} from 'sentry/utils/discover/eventView';
@@ -48,6 +47,7 @@ import {getTitle} from 'sentry/utils/events';
 import {DISCOVER_FIELDS, FieldValueType, getFieldDefinition} from 'sentry/utils/fields';
 import localStorage from 'sentry/utils/localStorage';
 import {MutableSearch} from 'sentry/utils/tokenizeSearch';
+import type {ReactRouter3Navigate} from 'sentry/utils/useNavigate';
 
 import {
   DashboardWidgetSource,
@@ -124,14 +124,15 @@ export function decodeColumnOrder(fields: Readonly<Field[]>): TableColumn<string
 
 export function pushEventViewToLocation(props: {
   location: Location;
+  navigate: ReactRouter3Navigate;
   nextEventView: EventView;
   extraQuery?: Query;
 }) {
-  const {location, nextEventView} = props;
+  const {navigate, location, nextEventView} = props;
   const extraQuery = props.extraQuery || {};
   const queryStringObject = nextEventView.generateQueryStringObject();
 
-  browserHistory.push({
+  navigate({
     ...location,
     query: {
       ...extraQuery,