ref(performance): Remove browserHistory usages from some performance views (#112554)

getsentry/frontend-tsc#78

Removes `browserHistory` usages from some performance views.

Author: shashjar

static/app/views/performance/table.tsx

@@ -19,7 +19,6 @@ import {t, tct} from 'sentry/locale';
 import type {Organization} from 'sentry/types/organization';
 import type {Project} from 'sentry/types/project';
 import {trackAnalytics} from 'sentry/utils/analytics';
-import {browserHistory} from 'sentry/utils/browserHistory';
 import type {TableData, TableDataRow} from 'sentry/utils/discover/discoverQuery';
 import {DiscoverQuery} from 'sentry/utils/discover/discoverQuery';
 import type {EventView, MetaType} from 'sentry/utils/discover/eventView';
@@ -30,6 +29,7 @@ import {MEPConsumer} from 'sentry/utils/performance/contexts/metricsEnhancedSett
 import {VisuallyCompleteWithData} from 'sentry/utils/performanceForSentry';
 import {MutableSearch} from 'sentry/utils/tokenizeSearch';
 import {useLocation} from 'sentry/utils/useLocation';
+import {useNavigate} from 'sentry/utils/useNavigate';
 import {useOrganization} from 'sentry/utils/useOrganization';
 import {Actions, CellAction, updateQuery} from 'sentry/views/discover/table/cellAction';
 import type {TableColumn} from 'sentry/views/discover/table/types';
@@ -132,6 +132,7 @@ export function Table({
   const [tableMetricSet, setTableMetricSet] = useState(false);
   const unparameterizedMetricProject = useRef<{project?: Project | undefined}>(undefined);
 
+  const navigate = useNavigate();
   const domainViewFilters = useDomainViewFilters();
 
   useEffect(() => {
@@ -237,7 +238,7 @@ export function Table({
 
       updateQuery(searchConditions, action, column, value);
 
-      browserHistory.push({
+      navigate({
         pathname: location.pathname,
         query: {
           ...location.query,

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

@@ -23,7 +23,6 @@ import type {Organization} from 'sentry/types/organization';
 import type {Project} from 'sentry/types/project';
 import {defined} from 'sentry/utils';
 import {trackAnalytics} from 'sentry/utils/analytics';
-import {browserHistory} from 'sentry/utils/browserHistory';
 import {DiscoverQuery} from 'sentry/utils/discover/discoverQuery';
 import type {EventView} from 'sentry/utils/discover/eventView';
 import {
@@ -34,6 +33,8 @@ 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 {useNavigate} from 'sentry/utils/useNavigate';
+import type {ReactRouter3Navigate} from 'sentry/utils/useNavigate';
 import {useTransactionSummaryEAP} from 'sentry/views/performance/eap/useTransactionSummaryEAP';
 import {TransactionSummaryContext} from 'sentry/views/performance/transactionSummary/transactionSummaryContext';
 import {
@@ -97,6 +98,7 @@ export function PageLayout(props: Props) {
   }
 
   const theme = useTheme();
+  const navigate = useNavigate();
   const transactionName = getTransactionName(location);
   const [error, setError] = useState<string | undefined>();
   const metricsCardinality = useMetricsCardinalityContext();
@@ -175,15 +177,15 @@ export function PageLayout(props: Props) {
         });
       }
 
-      browserHistory.push(normalizeUrl(getNewRoute(newTab)));
+      navigate(normalizeUrl(getNewRoute(newTab)));
     },
-    [getNewRoute, tab, organization, location, projects]
+    [getNewRoute, tab, organization, location, projects, navigate]
   );
 
   const shouldUseEAP = useTransactionSummaryEAP();
 
   if (!defined(transactionName)) {
-    redirectToPerformanceHomepage(organization, location);
+    redirectToPerformanceHomepage(organization, location, navigate);
     return null;
   }
 
@@ -222,7 +224,7 @@ export function PageLayout(props: Props) {
         {({isLoading, tableData, error: discoverQueryError}) => {
           if (discoverQueryError) {
             addErrorMessage(t('Unable to get projects associated with transaction'));
-            redirectToPerformanceHomepage(organization, location);
+            redirectToPerformanceHomepage(organization, location, navigate);
             return null;
           }
 
@@ -369,15 +371,17 @@ const StyledBody = styled(Layout.Body)<{fillSpace?: boolean; hasError?: boolean}
 
 export function redirectToPerformanceHomepage(
   organization: Organization,
-  location: Location
+  location: Location,
+  navigate: ReactRouter3Navigate
 ) {
   // If there is no transaction name, redirect to the Performance landing page
-  browserHistory.replace(
+  navigate(
     normalizeUrl({
       pathname: getPerformanceBaseUrl(organization.slug, 'backend'),
       query: {
         ...location.query,
       },
-    })
+    }),
+    {replace: true}
   );
 }

static/app/views/performance/transactionSummary/transactionEvents/operationSort.tsx

@@ -10,9 +10,9 @@ import {Radio} from '@sentry/scraps/radio';
 import type {GetActorPropsFn} from 'sentry/components/deprecatedDropdownMenu';
 import {MenuItem} from 'sentry/components/menuItem';
 import {t} from 'sentry/locale';
-import {browserHistory} from 'sentry/utils/browserHistory';
 import type {TableData} from 'sentry/utils/discover/discoverQuery';
 import type {EventView} from 'sentry/utils/discover/eventView';
+import {useNavigate} from 'sentry/utils/useNavigate';
 
 export type TitleProps = Partial<ReturnType<GetActorPropsFn>>;
 
@@ -24,6 +24,7 @@ type Props = {
 };
 
 export function OperationSort({eventView, location, tableMeta, title: Title}: Props) {
+  const navigate = useNavigate();
   const [isOpen, setIsOpen] = useState(false);
   const menuEl = useRef<Element | null>(null);
 
@@ -75,7 +76,7 @@ export function OperationSort({eventView, location, tableMeta, title: Title}: Pr
               onClick={() => {
                 const sortLink = generateSortLink({field: operation});
                 if (sortLink) {
-                  browserHistory.push(sortLink);
+                  navigate(sortLink);
                 }
               }}
             />

static/app/views/performance/transactionSummary/transactionProfiles/index.tsx

@@ -146,10 +146,11 @@ const StyledMain = styled(Layout.Main)`
 function ProfilesIndex() {
   const organization = useOrganization();
   const location = useLocation();
+  const navigate = useNavigate();
   const transaction = decodeScalar(location.query.transaction);
 
   if (!transaction) {
-    redirectToPerformanceHomepage(organization, location);
+    redirectToPerformanceHomepage(organization, location, navigate);
     return null;
   }