feat(insights): save project selection by domain (#93145)

DominikB2014 · billyvg · commit c91e4002e01b · 2025-06-18T09:17:19.000-04:00
use `storageNamespace` to allow each domain (frontend, backend, mobile)
to store their own project selection.
This feature will only be available to eap users (which is in EA), to
allow us to test with a smaller group.
diff --git a/static/app/actionCreators/pageFilters.tsx b/static/app/actionCreators/pageFilters.tsx
@@ -365,7 +365,11 @@ export function initializeUrlState({
 
   PageFiltersStore.onInitializeUrlState(pageFilters, pinnedFilters, shouldPersist);
   if (shouldUpdateLocalStorage) {
-    setPageFiltersStorage(organization.slug, new Set(['projects', 'environments']));
+    setPageFiltersStorage(
+      organization.slug,
+      new Set(['projects', 'environments']),
+      storageNamespace
+    );
   }
 
   if (shouldCheckDesyncedURLState) {
diff --git a/static/app/components/organizations/pageFilters/container.tsx b/static/app/components/organizations/pageFilters/container.tsx
@@ -173,7 +173,10 @@ function PageFiltersContainer({
     // Do not pass router to these actionCreators, as we do not want to update
     // routes since these state changes are happening due to a change of routes
     if (!noProjectChange) {
-      updateProjects(newState.project || [], null, {environments: newEnvironments});
+      updateProjects(newState.project || [], null, {
+        environments: newEnvironments,
+        storageNamespace,
+      });
     }
 
     // When the project stays the same, it's still possible that the
diff --git a/static/app/components/organizations/projectPageFilter/index.tsx b/static/app/components/organizations/projectPageFilter/index.tsx
@@ -35,7 +35,7 @@ import {makeProjectsPathname} from 'sentry/views/projects/pathname';
 import {ProjectPageFilterMenuFooter} from './menuFooter';
 import {ProjectPageFilterTrigger} from './trigger';
 
-interface ProjectPageFilterProps
+export interface ProjectPageFilterProps
   extends Partial<
     Omit<
       HybridFilterProps<number>,
@@ -73,6 +73,11 @@ interface ProjectPageFilterProps
    * Reset these URL params when we fire actions (custom routing only)
    */
   resetParamsOnChange?: string[];
+  /**
+   * Optional prefix for the storage key, for areas of the app that need separate pagefilters (i.e Insights)
+   * TODO: ideally this can be determined by what's set in the PageFiltersContainer
+   */
+  storageNamespace?: string;
 }
 
 /**
@@ -94,6 +99,7 @@ export function ProjectPageFilter({
   projectOverride,
   resetParamsOnChange,
   footerMessage,
+  storageNamespace,
   ...selectProps
 }: ProjectPageFilterProps) {
   const user = useUser();
@@ -214,6 +220,7 @@ export function ProjectPageFilter({
         save: true,
         resetParams: resetParamsOnChange,
         environments: [], // Clear environments when switching projects
+        storageNamespace,
       });
     },
     [
@@ -225,6 +232,7 @@ export function ProjectPageFilter({
       routes,
       onChange,
       mapNormalValueToURLValue,
+      storageNamespace,
     ]
   );
 
diff --git a/static/app/views/insights/common/components/modulePageFilterBar.tsx b/static/app/views/insights/common/components/modulePageFilterBar.tsx
@@ -1,4 +1,4 @@
-import {type ComponentProps, Fragment, useEffect, useState} from 'react';
+import {Fragment, useEffect, useState} from 'react';
 import styled from '@emotion/styled';
 
 import {Tooltip} from 'sentry/components/core/tooltip';
@@ -9,12 +9,12 @@ import {
 } from 'sentry/components/organizations/datePageFilter';
 import {EnvironmentPageFilter} from 'sentry/components/organizations/environmentPageFilter';
 import PageFilterBar from 'sentry/components/organizations/pageFilterBar';
-import {ProjectPageFilter} from 'sentry/components/organizations/projectPageFilter';
 import {IconBusiness} from 'sentry/icons';
 import {t} from 'sentry/locale';
 import {SECOND} from 'sentry/utils/formatters';
 import useOrganization from 'sentry/utils/useOrganization';
 import useProjects from 'sentry/utils/useProjects';
+import {InsightsProjectSelector} from 'sentry/views/insights/common/components/projectSelector';
 import {useHasFirstSpan} from 'sentry/views/insights/common/queries/useHasFirstSpan';
 import {QUERY_DATE_RANGE_LIMIT} from 'sentry/views/insights/settings';
 import type {ModuleName} from 'sentry/views/insights/types';
@@ -23,15 +23,13 @@ type Props = {
   moduleName: ModuleName;
   disableProjectFilter?: boolean; // This is used primarily for module summary pages when a project can't be selected
   extraFilters?: React.ReactNode;
-  onProjectChange?: ComponentProps<typeof ProjectPageFilter>['onChange'];
 };
 
 const CHANGE_PROJECT_TEXT = t('Make sure you have the correct project selected.');
 const DISABLED_OPTIONS = ['14d', '30d', '90d'];
 
 export function ModulePageFilterBar({
   moduleName,
-  onProjectChange,
   extraFilters,
   disableProjectFilter,
 }: Props) {
@@ -116,7 +114,7 @@ export function ModulePageFilterBar({
       of the readout ribbon which results in buttons being very large. */}
       <div>
         <PageFilterBar condensed>
-          {!disableProjectFilter && <ProjectPageFilter onChange={onProjectChange} />}
+          {!disableProjectFilter && <InsightsProjectSelector />}
           <EnvironmentPageFilter />
           <DatePageFilter {...dateFilterProps} />
         </PageFilterBar>
diff --git a/static/app/views/insights/common/components/modulePageProviders.tsx b/static/app/views/insights/common/components/modulePageProviders.tsx
@@ -5,8 +5,10 @@ import SentryDocumentTitle from 'sentry/components/sentryDocumentTitle';
 import type {InsightEventKey} from 'sentry/utils/analytics/insightAnalyticEvents';
 import useOrganization from 'sentry/utils/useOrganization';
 import {WidgetSyncContextProvider} from 'sentry/views/dashboards/contexts/widgetSyncContext';
+import {useInsightsEap} from 'sentry/views/insights/common/utils/useEap';
 import {useHasDataTrackAnalytics} from 'sentry/views/insights/common/utils/useHasDataTrackAnalytics';
 import {useModuleTitles} from 'sentry/views/insights/common/utils/useModuleTitle';
+import {useDomainViewFilters} from 'sentry/views/insights/pages/useFilters';
 import {INSIGHTS_TITLE, QUERY_DATE_RANGE_LIMIT} from 'sentry/views/insights/settings';
 import type {ModuleName} from 'sentry/views/insights/types';
 
@@ -28,6 +30,8 @@ export function ModulePageProviders({
 }: Props) {
   const organization = useOrganization();
   const moduleTitles = useModuleTitles();
+  const useEap = useInsightsEap();
+  const {view} = useDomainViewFilters();
 
   const hasDateRangeQueryLimit = organization.features.includes(
     'insights-query-date-range-limit'
@@ -41,9 +45,12 @@ export function ModulePageProviders({
     .filter(Boolean)
     .join(' — ');
 
+  const storageNamespace = useEap ? view : undefined;
+
   return (
     <PageFiltersContainer
       maxPickableDays={hasDateRangeQueryLimit ? QUERY_DATE_RANGE_LIMIT : undefined}
+      storageNamespace={storageNamespace}
     >
       <SentryDocumentTitle title={fullPageTitle} orgSlug={organization.slug}>
         <Layout.Page>
diff --git a/static/app/views/insights/common/components/projectSelector.tsx b/static/app/views/insights/common/components/projectSelector.tsx
@@ -0,0 +1,15 @@
+import type {ProjectPageFilterProps} from 'sentry/components/organizations/projectPageFilter';
+import {ProjectPageFilter} from 'sentry/components/organizations/projectPageFilter';
+import {useInsightsEap} from 'sentry/views/insights/common/utils/useEap';
+import {useDomainViewFilters} from 'sentry/views/insights/pages/useFilters';
+
+type Props = Omit<ProjectPageFilterProps, 'storageNamespace'>;
+
+export function InsightsProjectSelector(props: Props) {
+  const useEap = useInsightsEap();
+  const {view} = useDomainViewFilters();
+
+  const storageNamespace = useEap ? view : undefined;
+
+  return <ProjectPageFilter {...props} storageNamespace={storageNamespace} />;
+}
diff --git a/static/app/views/insights/mobile/screens/views/screensLandingPage.tsx b/static/app/views/insights/mobile/screens/views/screensLandingPage.tsx
@@ -8,7 +8,6 @@ import {TabbedCodeSnippet} from 'sentry/components/onboarding/gettingStartedDoc/
 import {DatePageFilter} from 'sentry/components/organizations/datePageFilter';
 import {EnvironmentPageFilter} from 'sentry/components/organizations/environmentPageFilter';
 import PageFilterBar from 'sentry/components/organizations/pageFilterBar';
-import {ProjectPageFilter} from 'sentry/components/organizations/projectPageFilter';
 import {PageHeadingQuestionTooltip} from 'sentry/components/pageHeadingQuestionTooltip';
 import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
@@ -19,6 +18,7 @@ import {useLocation} from 'sentry/utils/useLocation';
 import {useNavigate} from 'sentry/utils/useNavigate';
 import {ModulePageProviders} from 'sentry/views/insights/common/components/modulePageProviders';
 import {ModuleBodyUpsellHook} from 'sentry/views/insights/common/components/moduleUpsellHookWrapper';
+import {InsightsProjectSelector} from 'sentry/views/insights/common/components/projectSelector';
 import {
   useMetrics,
   useSpanMetrics,
@@ -274,7 +274,7 @@ function ScreensLandingPage() {
               <Layout.Main fullWidth>
                 <Container>
                   <PageFilterBar condensed>
-                    <ProjectPageFilter onChange={handleProjectChange} />
+                    <InsightsProjectSelector onChange={handleProjectChange} />
                     <EnvironmentPageFilter />
                     <DatePageFilter />
                   </PageFilterBar>
diff --git a/static/app/views/insights/pages/backend/backendOverviewPage.tsx b/static/app/views/insights/pages/backend/backendOverviewPage.tsx
@@ -7,7 +7,6 @@ import {NoAccess} from 'sentry/components/noAccess';
 import {DatePageFilter} from 'sentry/components/organizations/datePageFilter';
 import {EnvironmentPageFilter} from 'sentry/components/organizations/environmentPageFilter';
 import PageFilterBar from 'sentry/components/organizations/pageFilterBar';
-import {ProjectPageFilter} from 'sentry/components/organizations/projectPageFilter';
 import {space} from 'sentry/styles/space';
 import {trackAnalytics} from 'sentry/utils/analytics';
 import {PageAlert} from 'sentry/utils/performance/contexts/pageAlert';
@@ -21,6 +20,7 @@ import useOrganization from 'sentry/utils/useOrganization';
 import usePageFilters from 'sentry/utils/usePageFilters';
 import useProjects from 'sentry/utils/useProjects';
 import * as ModuleLayout from 'sentry/views/insights/common/components/moduleLayout';
+import {InsightsProjectSelector} from 'sentry/views/insights/common/components/projectSelector';
 import {ToolRibbon} from 'sentry/views/insights/common/components/ribbon';
 import {STARRED_SEGMENT_TABLE_QUERY_KEY} from 'sentry/views/insights/common/components/tableCells/starredSegmentCell';
 import OverviewApiLatencyChartWidget from 'sentry/views/insights/common/components/widgets/overviewApiLatencyChartWidget';
@@ -204,7 +204,7 @@ function EAPBackendOverviewPage() {
             <ModuleLayout.Full>
               <ToolRibbon>
                 <PageFilterBar condensed>
-                  <ProjectPageFilter />
+                  <InsightsProjectSelector />
                   <EnvironmentPageFilter />
                   <DatePageFilter />
                 </PageFilterBar>
diff --git a/static/app/views/insights/pages/domainOverviewPageProviders.tsx b/static/app/views/insights/pages/domainOverviewPageProviders.tsx
@@ -5,14 +5,16 @@ import {MEPSettingProvider} from 'sentry/utils/performance/contexts/metricsEnhan
 import {useLocation} from 'sentry/utils/useLocation';
 import useOrganization from 'sentry/utils/useOrganization';
 import {OVERVIEW_PAGE_TITLE} from 'sentry/views/insights/pages/settings';
+import {useDomainViewFilters} from 'sentry/views/insights/pages/useFilters';
 
 export function DomainOverviewPageProviders({children}: {children: React.ReactNode}) {
   const organization = useOrganization();
   const location = useLocation();
+  const {view} = useDomainViewFilters();
 
   return (
     <NoProjectMessage organization={organization}>
-      <PageFiltersContainer>
+      <PageFiltersContainer storageNamespace={view}>
         <SentryDocumentTitle title={OVERVIEW_PAGE_TITLE} orgSlug={organization.slug}>
           <MEPSettingProvider location={location}>{children}</MEPSettingProvider>
         </SentryDocumentTitle>
diff --git a/static/app/views/insights/pages/frontend/frontendOverviewPage.tsx b/static/app/views/insights/pages/frontend/frontendOverviewPage.tsx
@@ -9,7 +9,6 @@ import {NoAccess} from 'sentry/components/noAccess';
 import {DatePageFilter} from 'sentry/components/organizations/datePageFilter';
 import {EnvironmentPageFilter} from 'sentry/components/organizations/environmentPageFilter';
 import PageFilterBar from 'sentry/components/organizations/pageFilterBar';
-import {ProjectPageFilter} from 'sentry/components/organizations/projectPageFilter';
 import {t} from 'sentry/locale';
 import {trackAnalytics} from 'sentry/utils/analytics';
 import {
@@ -28,6 +27,7 @@ import useOrganization from 'sentry/utils/useOrganization';
 import usePageFilters from 'sentry/utils/usePageFilters';
 import useProjects from 'sentry/utils/useProjects';
 import * as ModuleLayout from 'sentry/views/insights/common/components/moduleLayout';
+import {InsightsProjectSelector} from 'sentry/views/insights/common/components/projectSelector';
 import {ToolRibbon} from 'sentry/views/insights/common/components/ribbon';
 import {STARRED_SEGMENT_TABLE_QUERY_KEY} from 'sentry/views/insights/common/components/tableCells/starredSegmentCell';
 import {useEAPSpans} from 'sentry/views/insights/common/queries/useDiscover';
@@ -254,7 +254,7 @@ function EAPOverviewPage() {
             <ModuleLayout.Full>
               <ToolRibbon>
                 <PageFilterBar condensed>
-                  <ProjectPageFilter />
+                  <InsightsProjectSelector />
                   <EnvironmentPageFilter />
                   <DatePageFilter />
                 </PageFilterBar>
diff --git a/static/app/views/insights/pages/mobile/mobileOverviewPage.tsx b/static/app/views/insights/pages/mobile/mobileOverviewPage.tsx
@@ -6,7 +6,6 @@ import {NoAccess} from 'sentry/components/noAccess';
 import {DatePageFilter} from 'sentry/components/organizations/datePageFilter';
 import {EnvironmentPageFilter} from 'sentry/components/organizations/environmentPageFilter';
 import PageFilterBar from 'sentry/components/organizations/pageFilterBar';
-import {ProjectPageFilter} from 'sentry/components/organizations/projectPageFilter';
 import {trackAnalytics} from 'sentry/utils/analytics';
 import {
   canUseMetricsData,
@@ -24,6 +23,7 @@ import useOrganization from 'sentry/utils/useOrganization';
 import usePageFilters from 'sentry/utils/usePageFilters';
 import useProjects from 'sentry/utils/useProjects';
 import * as ModuleLayout from 'sentry/views/insights/common/components/moduleLayout';
+import {InsightsProjectSelector} from 'sentry/views/insights/common/components/projectSelector';
 import {ToolRibbon} from 'sentry/views/insights/common/components/ribbon';
 import {STARRED_SEGMENT_TABLE_QUERY_KEY} from 'sentry/views/insights/common/components/tableCells/starredSegmentCell';
 import {useEAPSpans} from 'sentry/views/insights/common/queries/useDiscover';
@@ -228,7 +228,7 @@ function EAPMobileOverviewPage() {
             <ModuleLayout.Full>
               <ToolRibbon>
                 <PageFilterBar condensed>
-                  <ProjectPageFilter />
+                  <InsightsProjectSelector />
                   <EnvironmentPageFilter />
                   <DatePageFilter />
                 </PageFilterBar>
diff --git a/static/app/views/insights/pages/platform/shared/layout.tsx b/static/app/views/insights/pages/platform/shared/layout.tsx
@@ -6,12 +6,12 @@ import {NoAccess} from 'sentry/components/noAccess';
 import {DatePageFilter} from 'sentry/components/organizations/datePageFilter';
 import {EnvironmentPageFilter} from 'sentry/components/organizations/environmentPageFilter';
 import PageFilterBar from 'sentry/components/organizations/pageFilterBar';
-import {ProjectPageFilter} from 'sentry/components/organizations/projectPageFilter';
 import TransactionNameSearchBar from 'sentry/components/performance/searchBar';
 import {MutableSearch} from 'sentry/utils/tokenizeSearch';
 import {useLocation} from 'sentry/utils/useLocation';
 import useOrganization from 'sentry/utils/useOrganization';
 import * as ModuleLayout from 'sentry/views/insights/common/components/moduleLayout';
+import {InsightsProjectSelector} from 'sentry/views/insights/common/components/projectSelector';
 import {ToolRibbon} from 'sentry/views/insights/common/components/ribbon';
 import {useOnboardingProject} from 'sentry/views/insights/common/queries/useOnboardingProject';
 import {BackendHeader} from 'sentry/views/insights/pages/backend/backendPageHeader';
@@ -69,7 +69,7 @@ export function PlatformLandingPageLayout({
             <ModuleLayout.Full>
               <ToolRibbon>
                 <PageFilterBar condensed>
-                  <ProjectPageFilter resetParamsOnChange={['starred']} />
+                  <InsightsProjectSelector resetParamsOnChange={['starred']} />
                   <EnvironmentPageFilter />
                   <DatePageFilter />
                 </PageFilterBar>
