diff --git a/static/app/utils/useUrlParams.spec.tsx b/static/app/utils/useUrlParams.spec.tsx index 773dfb51a2538a..6225680d707867 100644 --- a/static/app/utils/useUrlParams.spec.tsx +++ b/static/app/utils/useUrlParams.spec.tsx @@ -8,7 +8,7 @@ import useUrlParams from './useUrlParams'; jest.mock('react-router'); jest.mock('sentry/utils/useLocation'); -type Query = {limit: string; page: string}; +type Query = {array: string[]; limit: string; page: string}; describe('useUrlParams', () => { beforeEach(() => { @@ -16,6 +16,7 @@ describe('useUrlParams', () => { query: { page: '3', limit: '50', + array: ['first', 'second'], }, } as Location); }); @@ -25,6 +26,7 @@ describe('useUrlParams', () => { expect(result.current.getParamValue('page')).toBe('3'); expect(result.current.getParamValue('limit')).toBe('50'); + expect(result.current.getParamValue('array')).toBe('first'); expect(result.current.getParamValue('foo')).toBeUndefined(); }); @@ -54,6 +56,7 @@ describe('useUrlParams', () => { expect(browserHistory.push).toHaveBeenCalledWith({ query: { + array: ['first', 'second'], page: '4', limit: '50', }, @@ -69,6 +72,7 @@ describe('useUrlParams', () => { expect(browserHistory.push).toHaveBeenCalledWith({ query: { + array: ['first', 'second'], page: '4', limit: '50', }, diff --git a/static/app/utils/useUrlParams.tsx b/static/app/utils/useUrlParams.tsx index 19c05cd3a9214e..bc1a752b2e4635 100644 --- a/static/app/utils/useUrlParams.tsx +++ b/static/app/utils/useUrlParams.tsx @@ -20,7 +20,10 @@ function useUrlParams(defaultKey?: string, defaultValue?: string) { const getParamValue = useCallback( (key: string) => { const location = browserHistory.getCurrentLocation(); - return location.query[key] ?? defaultValue; + // location.query.key can return string[] but we expect a singular value from this function, so we return the first string (this is picked arbitrarily) if it's string[] + return Array.isArray(location.query[key]) + ? location.query[key]?.at(0) ?? defaultValue + : location.query[key] ?? defaultValue; }, [defaultValue] );