ref(ui): Replace usage of `useLegacyStore(PageFiltersStore)` (#35091)

Replaced with `usePageFilters()` introduced in https://github.com/getsentry/sentry/pull/35014

static/app/components/datePageFilter.tsx

@@ -8,8 +8,6 @@ import TimeRangeSelector, {
   ChangeData,
 } from 'sentry/components/organizations/timeRangeSelector';
 import {IconCalendar} from 'sentry/icons';
-import PageFiltersStore from 'sentry/stores/pageFiltersStore';
-import {useLegacyStore} from 'sentry/stores/useLegacyStore';
 import space from 'sentry/styles/space';
 import {
   DEFAULT_DAY_END_TIME,
@@ -17,6 +15,7 @@ import {
   getFormattedDate,
 } from 'sentry/utils/dates';
 import useOrganization from 'sentry/utils/useOrganization';
+import usePageFilters from 'sentry/utils/usePageFilters';
 
 type Props = Omit<
   React.ComponentProps<typeof TimeRangeSelector>,
@@ -30,7 +29,7 @@ type Props = Omit<
   };
 
 function DatePageFilter({router, resetParamsOnChange, ...props}: Props) {
-  const {selection, desyncedFilters} = useLegacyStore(PageFiltersStore);
+  const {selection, desyncedFilters} = usePageFilters();
   const organization = useOrganization();
   const {start, end, period, utc} = selection.datetime;
 

static/app/components/environmentPageFilter.tsx

@@ -8,11 +8,10 @@ import PageFilterDropdownButton from 'sentry/components/organizations/pageFilter
 import PageFilterPinIndicator from 'sentry/components/organizations/pageFilters/pageFilterPinIndicator';
 import {IconWindow} from 'sentry/icons';
 import {t} from 'sentry/locale';
-import PageFiltersStore from 'sentry/stores/pageFiltersStore';
-import {useLegacyStore} from 'sentry/stores/useLegacyStore';
 import space from 'sentry/styles/space';
 import {trimSlug} from 'sentry/utils/trimSlug';
 import useOrganization from 'sentry/utils/useOrganization';
+import usePageFilters from 'sentry/utils/usePageFilters';
 import useProjects from 'sentry/utils/useProjects';
 
 type EnvironmentSelectorProps = React.ComponentProps<typeof EnvironmentSelector>;
@@ -39,7 +38,7 @@ function EnvironmentPageFilter({
 }: Props) {
   const {projects, initiallyLoaded: projectsLoaded} = useProjects();
   const organization = useOrganization();
-  const {selection, isReady, desyncedFilters} = useLegacyStore(PageFiltersStore);
+  const {selection, isReady, desyncedFilters} = usePageFilters();
 
   const handleUpdateEnvironments = (environments: string[]) => {
     updateEnvironments(environments, router, {

static/app/components/organizations/pageFilters/container.tsx

@@ -13,9 +13,8 @@ import {
 import DesyncedFilterAlert from 'sentry/components/organizations/pageFilters/desyncedFiltersAlert';
 import {DEFAULT_STATS_PERIOD} from 'sentry/constants';
 import ConfigStore from 'sentry/stores/configStore';
-import PageFiltersStore from 'sentry/stores/pageFiltersStore';
-import {useLegacyStore} from 'sentry/stores/useLegacyStore';
 import {PageContent} from 'sentry/styles/organization';
+import usePageFilters from 'sentry/utils/usePageFilters';
 import useProjects from 'sentry/utils/useProjects';
 import withOrganization from 'sentry/utils/withOrganization';
 
@@ -75,7 +74,7 @@ function Container({skipLoadLastUsed, children, ...props}: Props) {
     skipInitializeUrlParams,
   } = props;
 
-  const {isReady} = useLegacyStore(PageFiltersStore);
+  const {isReady} = usePageFilters();
 
   const {projects, initiallyLoaded: projectsLoaded} = useProjects();
 

static/app/components/organizations/pageFilters/desyncedFiltersAlert.tsx

@@ -7,17 +7,16 @@ import Alert from 'sentry/components/alert';
 import Button from 'sentry/components/button';
 import {IconClose} from 'sentry/icons';
 import {t} from 'sentry/locale';
-import PageFiltersStore from 'sentry/stores/pageFiltersStore';
-import {useLegacyStore} from 'sentry/stores/useLegacyStore';
 import space from 'sentry/styles/space';
 import useOrganization from 'sentry/utils/useOrganization';
+import usePageFilters from 'sentry/utils/usePageFilters';
 
 type Props = {
   router: InjectedRouter;
 };
 
 export default function DesyncedFilterAlert({router}: Props) {
-  const {desyncedFilters} = useLegacyStore(PageFiltersStore);
+  const {desyncedFilters} = usePageFilters();
   const organization = useOrganization();
   const [hideAlert, setHideAlert] = useState(false);
 

static/app/components/organizations/pageFilters/pageFilterPinButton.tsx

@@ -4,11 +4,10 @@ import {pinFilter} from 'sentry/actionCreators/pageFilters';
 import Button, {ButtonProps} from 'sentry/components/button';
 import {IconLock} from 'sentry/icons';
 import {t} from 'sentry/locale';
-import PageFiltersStore from 'sentry/stores/pageFiltersStore';
-import {useLegacyStore} from 'sentry/stores/useLegacyStore';
 import {PinnedPageFilter} from 'sentry/types';
 import trackAdvancedAnalyticsEvent from 'sentry/utils/analytics/trackAdvancedAnalyticsEvent';
 import useOrganization from 'sentry/utils/useOrganization';
+import usePageFilters from 'sentry/utils/usePageFilters';
 
 type Props = {
   filter: PinnedPageFilter;
@@ -18,7 +17,7 @@ type Props = {
 
 function PageFilterPinButton({filter, size, className}: Props) {
   const organization = useOrganization();
-  const {pinnedFilters} = useLegacyStore(PageFiltersStore);
+  const {pinnedFilters} = usePageFilters();
   const pinned = pinnedFilters.has(filter);
 
   const onPin = () => {

static/app/components/organizations/pageFilters/pageFilterPinIndicator.tsx

@@ -1,10 +1,9 @@
 import styled from '@emotion/styled';
 
 import {IconLock} from 'sentry/icons';
-import PageFiltersStore from 'sentry/stores/pageFiltersStore';
-import {useLegacyStore} from 'sentry/stores/useLegacyStore';
 import space from 'sentry/styles/space';
 import {PinnedPageFilter} from 'sentry/types';
+import usePageFilters from 'sentry/utils/usePageFilters';
 
 type Props = {
   children: React.ReactNode;
@@ -12,7 +11,7 @@ type Props = {
 };
 
 function PageFilterPinIndicator({children, filter}: Props) {
-  const {pinnedFilters} = useLegacyStore(PageFiltersStore);
+  const {pinnedFilters} = usePageFilters();
   const pinned = pinnedFilters.has(filter);
 
   return (

static/app/components/projectPageFilter.tsx

@@ -15,12 +15,11 @@ import {ALL_ACCESS_PROJECTS} from 'sentry/constants/pageFilters';
 import {IconProject} from 'sentry/icons';
 import {t} from 'sentry/locale';
 import ConfigStore from 'sentry/stores/configStore';
-import PageFiltersStore from 'sentry/stores/pageFiltersStore';
-import {useLegacyStore} from 'sentry/stores/useLegacyStore';
 import space from 'sentry/styles/space';
 import {MinimalProject} from 'sentry/types';
 import {trimSlug} from 'sentry/utils/trimSlug';
 import useOrganization from 'sentry/utils/useOrganization';
+import usePageFilters from 'sentry/utils/usePageFilters';
 import useProjects from 'sentry/utils/useProjects';
 
 type ProjectSelectorProps = React.ComponentProps<typeof ProjectSelector>;
@@ -90,7 +89,7 @@ function ProjectPageFilter({
   );
   const {projects, initiallyLoaded: projectsLoaded} = useProjects();
   const organization = useOrganization();
-  const {selection, isReady, desyncedFilters} = useLegacyStore(PageFiltersStore);
+  const {selection, isReady, desyncedFilters} = usePageFilters();
 
   useEffect(
     () => {