ref(tsc): convert histogram index to FC (#82484)

static/app/utils/performance/histogram/index.tsx

@@ -1,9 +1,8 @@
-import {Component} from 'react';
 import type {Location} from 'history';
 
 import type {SelectValue} from 'sentry/types/core';
-import {browserHistory} from 'sentry/utils/browserHistory';
 import {decodeScalar} from 'sentry/utils/queryString';
+import {useNavigate} from 'sentry/utils/useNavigate';
 
 import {FILTER_OPTIONS} from './constants';
 import type {DataFilter} from './types';
@@ -22,34 +21,30 @@ type Props = {
   zoomKeys: string[];
 };
 
-class Histogram extends Component<Props> {
-  isZoomed() {
-    const {location, zoomKeys} = this.props;
-    return zoomKeys.map(key => location.query[key]).some(value => value !== undefined);
-  }
+function Histogram(props: Props) {
+  const {location, zoomKeys, children} = props;
+  const navigate = useNavigate();
 
-  handleResetView = () => {
-    const {location, zoomKeys} = this.props;
+  const isZoomed = () => {
+    return zoomKeys.map(key => location.query[key]).some(value => value !== undefined);
+  };
 
-    browserHistory.push({
+  const handleResetView = () => {
+    navigate({
       pathname: location.pathname,
       query: removeHistogramQueryStrings(location, zoomKeys),
     });
   };
 
-  getActiveFilter() {
-    const {location} = this.props;
-
+  const getActiveFilter = () => {
     const dataFilter = location.query.dataFilter
       ? decodeScalar(location.query.dataFilter)
       : FILTER_OPTIONS[0].value;
     return FILTER_OPTIONS.find(item => item.value === dataFilter) || FILTER_OPTIONS[0];
-  }
-
-  handleFilterChange = (value: string) => {
-    const {location, zoomKeys} = this.props;
+  };
 
-    browserHistory.push({
+  const handleFilterChange = (value: string) => {
+    navigate({
       pathname: location.pathname,
       query: {
         ...removeHistogramQueryStrings(location, zoomKeys),
@@ -58,16 +53,14 @@ class Histogram extends Component<Props> {
     });
   };
 
-  render() {
-    const childrenProps = {
-      isZoomed: this.isZoomed(),
-      handleResetView: this.handleResetView,
-      activeFilter: this.getActiveFilter(),
-      handleFilterChange: this.handleFilterChange,
-      filterOptions: FILTER_OPTIONS,
-    };
-    return this.props.children(childrenProps);
-  }
+  const childrenProps = {
+    isZoomed: isZoomed(),
+    handleResetView,
+    activeFilter: getActiveFilter(),
+    handleFilterChange,
+    filterOptions: FILTER_OPTIONS,
+  };
+  return children(childrenProps);
 }
 
 export function removeHistogramQueryStrings(location: Location, zoomKeys: string[]) {

static/app/views/performance/transactionSummary/transactionVitals/index.spec.tsx

@@ -14,8 +14,8 @@ import {
 
 import ProjectsStore from 'sentry/stores/projectsStore';
 import type {Project} from 'sentry/types/project';
-import {browserHistory} from 'sentry/utils/browserHistory';
 import {useLocation} from 'sentry/utils/useLocation';
+import {useNavigate} from 'sentry/utils/useNavigate';
 import TransactionVitals from 'sentry/views/performance/transactionSummary/transactionVitals';
 import {
   VITAL_GROUPS,
@@ -25,6 +25,9 @@ import {
 jest.mock('sentry/utils/useLocation');
 
 const mockUseLocation = jest.mocked(useLocation);
+jest.mock('sentry/utils/useNavigate');
+
+const mockUseNavigate = jest.mocked(useNavigate);
 
 interface HistogramData {
   count: number;
@@ -300,6 +303,8 @@ describe('Performance > Web Vitals', function () {
     });
 
     it('resets view properly', async function () {
+      const mockNavigate = jest.fn();
+      mockUseNavigate.mockReturnValue(mockNavigate);
       const {organization, router} = initialize({
         query: {
           fidStart: '20',
@@ -314,7 +319,7 @@ describe('Performance > Web Vitals', function () {
 
       await userEvent.click(screen.getByRole('button', {name: 'Reset View'}));
 
-      expect(browserHistory.push).toHaveBeenCalledWith({
+      expect(mockNavigate).toHaveBeenCalledWith({
         query: expect.not.objectContaining(
           ZOOM_KEYS.reduce((obj, key) => {
             obj[key] = expect.anything();