ref(js): Extract browserHistory (#70048)

react-router 6 does not export a browserHistory global. In v6 it is
preferable to useNavigate. We will however be able to replicate the
global object with a custom router.

This object is now marked as deprecated though and should be replaced
with useNavigate.

static/app/actionCreators/organizations.spec.tsx

@@ -1,8 +1,8 @@
-import {browserHistory} from 'react-router';
 import {OrganizationFixture} from 'sentry-fixture/organization';
 
 import {fetchOrganizations} from 'sentry/actionCreators/organizations';
 import ConfigStore from 'sentry/stores/configStore';
+import {browserHistory} from 'sentry/utils/browserHistory';
 
 describe('fetchOrganizations', function () {
   const api = new MockApiClient();

static/app/actionCreators/organizations.tsx

@@ -1,5 +1,3 @@
-import {browserHistory} from 'react-router';
-
 import {addErrorMessage, addSuccessMessage} from 'sentry/actionCreators/indicator';
 import {resetPageFilters} from 'sentry/actionCreators/pageFilters';
 import type {Client} from 'sentry/api';
@@ -12,6 +10,7 @@ import OrganizationStore from 'sentry/stores/organizationStore';
 import ProjectsStore from 'sentry/stores/projectsStore';
 import TeamStore from 'sentry/stores/teamStore';
 import type {Organization} from 'sentry/types/organization';
+import {browserHistory} from 'sentry/utils/browserHistory';
 import {normalizeUrl} from 'sentry/utils/withDomainRequired';
 
 type RedirectRemainingOrganizationParams = {

static/app/api.tsx

@@ -1,4 +1,3 @@
-import {browserHistory} from 'react-router';
 import * as Sentry from '@sentry/react';
 import Cookies from 'js-cookie';
 import * as qs from 'query-string';
@@ -13,6 +12,7 @@ import {
 } from 'sentry/constants/apiErrorCodes';
 import controlsilopatterns from 'sentry/data/controlsiloUrlPatterns';
 import {metric} from 'sentry/utils/analytics';
+import {browserHistory} from 'sentry/utils/browserHistory';
 import getCsrfToken from 'sentry/utils/getCsrfToken';
 import {uniqueId} from 'sentry/utils/guid';
 import RequestError from 'sentry/utils/requestError/requestError';

static/app/components/alerts/snoozeAlert.tsx

@@ -1,5 +1,4 @@
 import {useCallback, useEffect, useState} from 'react';
-import {browserHistory} from 'react-router';
 import styled from '@emotion/styled';
 
 import {addErrorMessage, addSuccessMessage} from 'sentry/actionCreators/indicator';
@@ -10,6 +9,7 @@ import {DropdownMenu} from 'sentry/components/dropdownMenu';
 import {IconChevron, IconMute, IconSound} from 'sentry/icons';
 import {t} from 'sentry/locale';
 import {RuleActionsCategories} from 'sentry/types/alerts';
+import {browserHistory} from 'sentry/utils/browserHistory';
 import useApi from 'sentry/utils/useApi';
 import {useLocation} from 'sentry/utils/useLocation';
 import useOrganization from 'sentry/utils/useOrganization';

static/app/components/charts/barChartZoom.tsx

@@ -1,10 +1,10 @@
 import {Component} from 'react';
-import {browserHistory} from 'react-router';
 import type {Location} from 'history';
 
 import DataZoomInside from 'sentry/components/charts/components/dataZoomInside';
 import ToolBox from 'sentry/components/charts/components/toolBox';
 import type {EChartChartReadyHandler, EChartDataZoomHandler} from 'sentry/types/echarts';
+import {browserHistory} from 'sentry/utils/browserHistory';
 
 type RenderProps = {
   dataZoom: ReturnType<typeof DataZoomInside>;

static/app/components/discover/transactionsList.tsx

@@ -1,5 +1,4 @@
 import {Component, Fragment, useContext, useEffect} from 'react';
-import {browserHistory} from 'react-router';
 import styled from '@emotion/styled';
 import type {Location, LocationDescriptor} from 'history';
 
@@ -13,6 +12,7 @@ import Pagination from 'sentry/components/pagination';
 import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
 import type {Organization} from 'sentry/types/organization';
+import {browserHistory} from 'sentry/utils/browserHistory';
 import {parseCursor} from 'sentry/utils/cursor';
 import type {TableDataRow} from 'sentry/utils/discover/discoverQuery';
 import DiscoverQuery from 'sentry/utils/discover/discoverQuery';

static/app/components/errorBoundary.tsx

@@ -1,11 +1,11 @@
 import {Component} from 'react';
-import {browserHistory} from 'react-router';
 import styled from '@emotion/styled';
 import * as Sentry from '@sentry/react';
 
 import {Alert} from 'sentry/components/alert';
 import DetailedError from 'sentry/components/errors/detailedError';
 import {t} from 'sentry/locale';
+import {browserHistory} from 'sentry/utils/browserHistory';
 import getDynamicText from 'sentry/utils/getDynamicText';
 
 type DefaultProps = {

static/app/components/events/eventCustomPerformanceMetrics.spec.tsx

@@ -1,4 +1,3 @@
-import {browserHistory} from 'react-router';
 import {EventFixture} from 'sentry-fixture/event';
 
 import {initializeOrg} from 'sentry-test/initializeOrg';
@@ -6,6 +5,7 @@ import {render, screen, userEvent} from 'sentry-test/reactTestingLibrary';
 
 import EventCustomPerformanceMetrics from 'sentry/components/events/eventCustomPerformanceMetrics';
 import type {Event} from 'sentry/types/event';
+import {browserHistory} from 'sentry/utils/browserHistory';
 
 describe('EventCustomPerformanceMetrics', function () {
   beforeEach(function () {

static/app/components/events/interfaces/spans/newTraceDetailsSpanBar.tsx

@@ -1,7 +1,6 @@
 import 'intersection-observer'; // this is a polyfill
 
 import {Component, createRef, Fragment} from 'react';
-import {browserHistory} from 'react-router';
 import styled from '@emotion/styled';
 import {withProfiler} from '@sentry/react';
 import type {Location} from 'history';
@@ -53,6 +52,7 @@ import type {EventTransaction} from 'sentry/types/event';
 import {EventOrGroupType} from 'sentry/types/event';
 import {defined} from 'sentry/utils';
 import {trackAnalytics} from 'sentry/utils/analytics';
+import {browserHistory} from 'sentry/utils/browserHistory';
 import {generateEventSlug} from 'sentry/utils/discover/urls';
 import {hasMetricsExperimentalFeature} from 'sentry/utils/metrics/features';
 import toPercent from 'sentry/utils/number/toPercent';

static/app/components/events/interfaces/spans/utils.tsx

@@ -1,4 +1,3 @@
-import {browserHistory} from 'react-router';
 import type {Theme} from '@emotion/react';
 import type {Location, LocationDescriptorObject} from 'history';
 import isNumber from 'lodash/isNumber';
@@ -19,6 +18,7 @@ import {EntryType} from 'sentry/types/event';
 import type {Organization} from 'sentry/types/organization';
 import {assert} from 'sentry/types/utils';
 import {trackAnalytics} from 'sentry/utils/analytics';
+import {browserHistory} from 'sentry/utils/browserHistory';
 import {MobileVital, WebVital} from 'sentry/utils/fields';
 import type {TraceMetaQueryChildrenProps} from 'sentry/utils/performance/quickTrace/traceMetaQuery';
 import type {