ref(ui): Replace `withPageFilters` with `usePageFilters` (#35092)

Replaces usages of the `withPageFilters` with `usePageFilters` on some components in: replays, profiling, and performance.

static/app/views/profiling/content.tsx

@@ -20,23 +20,22 @@ import {MAX_QUERY_LENGTH} from 'sentry/constants';
 import {t} from 'sentry/locale';
 import {PageContent} from 'sentry/styles/organization';
 import space from 'sentry/styles/space';
-import {PageFilters} from 'sentry/types';
 import {useProfileFilters} from 'sentry/utils/profiling/hooks/useProfileFilters';
 import {useProfiles} from 'sentry/utils/profiling/hooks/useProfiles';
 import {useProfileTransactions} from 'sentry/utils/profiling/hooks/useProfileTransactions';
 import {decodeScalar} from 'sentry/utils/queryString';
 import useOrganization from 'sentry/utils/useOrganization';
-import withPageFilters from 'sentry/utils/withPageFilters';
+import usePageFilters from 'sentry/utils/usePageFilters';
 
 import {ProfilingScatterChart} from './landing/profilingScatterChart';
 
 interface ProfilingContentProps {
   location: Location;
-  selection?: PageFilters;
 }
 
-function ProfilingContent({location, selection}: ProfilingContentProps) {
+function ProfilingContent({location}: ProfilingContentProps) {
   const organization = useOrganization();
+  const {selection} = usePageFilters();
   const cursor = decodeScalar(location.query.cursor);
   const query = decodeScalar(location.query.query, '');
   const profileFilters = useProfileFilters({query: '', selection});
@@ -140,4 +139,4 @@ const ActionBar = styled('div')`
   margin-bottom: ${space(2)};
 `;
 
-export default withPageFilters(ProfilingContent);
+export default ProfilingContent;

static/app/views/replays/detail/issueList.tsx

@@ -10,7 +10,7 @@ import {DEFAULT_STREAM_GROUP_STATS_PERIOD} from 'sentry/components/stream/group'
 import GroupChart from 'sentry/components/stream/groupChart';
 import {t} from 'sentry/locale';
 import space from 'sentry/styles/space';
-import {Group, NewQuery, PageFilters} from 'sentry/types';
+import {Group, NewQuery} from 'sentry/types';
 import DiscoverQuery from 'sentry/utils/discover/discoverQuery';
 import EventView from 'sentry/utils/discover/eventView';
 import theme from 'sentry/utils/theme';
@@ -18,12 +18,11 @@ import useApi from 'sentry/utils/useApi';
 import {useLocation} from 'sentry/utils/useLocation';
 import useMedia from 'sentry/utils/useMedia';
 import useOrganization from 'sentry/utils/useOrganization';
-import withPageFilters from 'sentry/utils/withPageFilters';
+import usePageFilters from 'sentry/utils/usePageFilters';
 
 type Props = {
   projectId: string;
   replayId: string;
-  selection: PageFilters;
 };
 const columns = [t('Issue'), t('Graph'), t('Events'), t('Users')];
 
@@ -31,13 +30,13 @@ function IssueList(props: Props) {
   const organization = useOrganization();
   const location = useLocation();
   const api = useApi();
+  const {selection} = usePageFilters();
   const isScreenLarge = useMedia(`(min-width: ${theme.breakpoints[2]})`);
 
   const [issuesById, setIssuesById] = useState<Record<string, Group>>({});
   const [issueStatsById, setIssuesStatsById] = useState<Record<string, Group>>({});
 
   const getEventView = () => {
-    const {selection} = props;
     const eventQueryParams: NewQuery = {
       id: '',
       name: '',
@@ -199,4 +198,4 @@ const StyledPanelTable = styled(PanelTable)`
   }
 `;
 
-export default withPageFilters(IssueList);
+export default IssueList;

static/app/views/replays/replayTable.tsx

@@ -9,7 +9,7 @@ import Placeholder from 'sentry/components/placeholder';
 import TimeSince from 'sentry/components/timeSince';
 import {IconCalendar} from 'sentry/icons';
 import space from 'sentry/styles/space';
-import {NewQuery, PageFilters} from 'sentry/types';
+import {NewQuery} from 'sentry/types';
 import DiscoverQuery from 'sentry/utils/discover/discoverQuery';
 import EventView from 'sentry/utils/discover/eventView';
 import {generateEventSlug} from 'sentry/utils/discover/urls';
@@ -18,14 +18,13 @@ import theme from 'sentry/utils/theme';
 import {useLocation} from 'sentry/utils/useLocation';
 import useMedia from 'sentry/utils/useMedia';
 import useOrganization from 'sentry/utils/useOrganization';
+import usePageFilters from 'sentry/utils/usePageFilters';
 import useProjects from 'sentry/utils/useProjects';
-import withPageFilters from 'sentry/utils/withPageFilters';
 
 import {Replay} from './types';
 
 type Props = {
   replayList: Replay[];
-  selection: PageFilters;
 };
 
 type ReplayDurationAndErrors = {
@@ -37,10 +36,11 @@ type ReplayDurationAndErrors = {
   replayId: string;
 };
 
-function ReplayTable({replayList, selection}: Props) {
+function ReplayTable({replayList}: Props) {
   const location = useLocation();
   const organization = useOrganization();
   const {projects} = useProjects();
+  const {selection} = usePageFilters();
   const isScreenLarge = useMedia(`(min-width: ${theme.breakpoints[0]})`);
 
   const getEventView = () => {
@@ -184,4 +184,4 @@ const StyledIconCalendarWrapper = styled(IconCalendar)`
   top: -1px;
 `;
 
-export default withPageFilters(ReplayTable);
+export default ReplayTable;

static/app/views/replays/replays.tsx

@@ -12,23 +12,19 @@ import {IconArrow} from 'sentry/icons';
 import {t} from 'sentry/locale';
 import {PageContent, PageHeader} from 'sentry/styles/organization';
 import space from 'sentry/styles/space';
-import {NewQuery, PageFilters} from 'sentry/types';
+import {NewQuery} from 'sentry/types';
 import DiscoverQuery from 'sentry/utils/discover/discoverQuery';
 import EventView from 'sentry/utils/discover/eventView';
 import theme from 'sentry/utils/theme';
 import {useLocation} from 'sentry/utils/useLocation';
 import useMedia from 'sentry/utils/useMedia';
 import useOrganization from 'sentry/utils/useOrganization';
-import withPageFilters from 'sentry/utils/withPageFilters';
+import usePageFilters from 'sentry/utils/usePageFilters';
 
 import ReplaysFilters from './filters';
 import ReplayTable from './replayTable';
 import {Replay} from './types';
 
-type Props = {
-  selection: PageFilters;
-};
-
 // certain query params can be either a string or an array of strings
 // so if we have an array we reduce it down to a string
 const getQueryParamAsString = query => {
@@ -40,9 +36,10 @@ const getQueryParamAsString = query => {
 
 const columns = [t('Session'), t('Project')];
 
-function Replays(props: Props) {
+function Replays() {
   const location = useLocation();
   const organization = useOrganization();
+  const {selection} = usePageFilters();
   const isScreenLarge = useMedia(`(min-width: ${theme.breakpoints[0]})`);
 
   const [searchQuery, setSearchQuery] = useState<string>(
@@ -54,7 +51,6 @@ function Replays(props: Props) {
   }, [location.query.query]);
 
   const getEventView = () => {
-    const {selection} = props;
     const {query} = location;
     const eventQueryParams: NewQuery = {
       id: '',
@@ -219,4 +215,4 @@ const SortLink = styled(Link)`
   }
 `;
 
-export default withPageFilters(Replays);
+export default Replays;