From d1ee293535c1132cadf3a0736406c5e9e839abb5 Mon Sep 17 00:00:00 2001 From: Michelle Zhang <56095982+michellewzhang@users.noreply.github.com> Date: Fri, 20 Dec 2024 13:20:24 -0500 Subject: [PATCH 1/3] ref(tsc): convert histogram index to FC --- .../app/utils/performance/histogram/index.tsx | 49 ++++++++----------- 1 file changed, 21 insertions(+), 28 deletions(-) diff --git a/static/app/utils/performance/histogram/index.tsx b/static/app/utils/performance/histogram/index.tsx index 1f60a53f93d953..478d424bde68fe 100644 --- a/static/app/utils/performance/histogram/index.tsx +++ b/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 { - 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 { }); }; - 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[]) { From c9e8e78f015ca6759c74d5b96219de2b0d6c0057 Mon Sep 17 00:00:00 2001 From: Michelle Zhang <56095982+michellewzhang@users.noreply.github.com> Date: Fri, 20 Dec 2024 13:34:37 -0500 Subject: [PATCH 2/3] :white_check_mark: fix test --- .../transactionVitals/index.spec.tsx | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/static/app/views/performance/transactionSummary/transactionVitals/index.spec.tsx b/static/app/views/performance/transactionSummary/transactionVitals/index.spec.tsx index 1503cdce733888..5bf9b14f66f1b9 100644 --- a/static/app/views/performance/transactionSummary/transactionVitals/index.spec.tsx +++ b/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,11 @@ import { jest.mock('sentry/utils/useLocation'); const mockUseLocation = jest.mocked(useLocation); +jest.mock('sentry/utils/useNavigate', () => ({ + useNavigate: jest.fn(), +})); + +const mockUseNavigate = jest.mocked(useNavigate); interface HistogramData { count: number; @@ -296,6 +301,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', @@ -310,7 +317,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(); From 85107c3321ef8a5aeecbfb891f07664c4acc1e9b Mon Sep 17 00:00:00 2001 From: Michelle Zhang <56095982+michellewzhang@users.noreply.github.com> Date: Mon, 23 Dec 2024 11:10:12 -0500 Subject: [PATCH 3/3] Update static/app/views/performance/transactionSummary/transactionVitals/index.spec.tsx --- .../transactionSummary/transactionVitals/index.spec.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/static/app/views/performance/transactionSummary/transactionVitals/index.spec.tsx b/static/app/views/performance/transactionSummary/transactionVitals/index.spec.tsx index 5bf9b14f66f1b9..5d09f3ea22e67a 100644 --- a/static/app/views/performance/transactionSummary/transactionVitals/index.spec.tsx +++ b/static/app/views/performance/transactionSummary/transactionVitals/index.spec.tsx @@ -25,9 +25,7 @@ import { jest.mock('sentry/utils/useLocation'); const mockUseLocation = jest.mocked(useLocation); -jest.mock('sentry/utils/useNavigate', () => ({ - useNavigate: jest.fn(), -})); +jest.mock('sentry/utils/useNavigate'); const mockUseNavigate = jest.mocked(useNavigate);