feat(insights): update sidebar and links for domain views (#79898)

Work for #77572 
We have decided to revamp the sidebar again. We will be keeping both the
original performance page and the domain views will fall under the
insights heading.
<img width="220" alt="image"
src="https://github.com/user-attachments/assets/4711ab5c-9139-4e6c-861f-a36e4f8f71e6">
Eventually, the original performance section will go away, but to avoid
confusion we will have both for about a month, and direct people to the
new insights section from the performance pages via a banner.

This PR makes the the following changes.
1. Updates the sidebar to reflect the above screen shot
2. Updates the routes to reflect the new sidebar
3. Adds some missing performance context providers for the domain view
overview pages, and transaction summary pages (this was previously
provided by being nested within the performance routes)
4. Some related changes like using shared variables to support these
changes.

static/app/components/nav/config.tsx

@@ -195,7 +195,7 @@ export function createNavConfig({organization}: {organization: Organization}): N
           {label: t('Crons'), to: `/${prefix}/crons/`},
         ],
       },
-      ...(hasPerfDomainViews ? [perfDomainViews] : [insights, perf]),
+      ...(hasPerfDomainViews ? [perfDomainViews, perf] : [insights, perf]),
       {
         label: t('Boards'),
         to: '/dashboards/',

static/app/components/sidebar/index.tsx

@@ -445,7 +445,7 @@ function Sidebar() {
     </Feature>
   );
 
-  const performance = hasOrganization && !hasPerfDomainViews && (
+  const performance = hasOrganization && (
     <Feature
       hookName="feature-disabled:performance-sidebar-item"
       features="performance-view"
@@ -619,7 +619,7 @@ function Sidebar() {
         {...sidebarItemProps}
         icon={<IconGraph />}
         label={DOMAIN_VIEW_BASE_TITLE}
-        id="performance-domains"
+        id="insights-domains"
         initiallyExpanded={false}
         exact={!shouldAccordionFloat}
       >

static/app/routes.tsx

@@ -18,6 +18,7 @@ import {AI_LANDING_SUB_PATH} from 'sentry/views/insights/pages/ai/settings';
 import {BACKEND_LANDING_SUB_PATH} from 'sentry/views/insights/pages/backend/settings';
 import {FRONTEND_LANDING_SUB_PATH} from 'sentry/views/insights/pages/frontend/settings';
 import {MOBILE_LANDING_SUB_PATH} from 'sentry/views/insights/pages/mobile/settings';
+import {DOMAIN_VIEW_BASE_URL} from 'sentry/views/insights/pages/settings';
 import {INSIGHTS_BASE_URL} from 'sentry/views/insights/settings';
 import {ModuleName} from 'sentry/views/insights/types';
 import {Tab, TabPaths} from 'sentry/views/issueDetails/types';
@@ -1687,17 +1688,8 @@ function buildRoutes() {
     </Route>
   );
 
-  const performanceRoutes = (
-    <Route
-      path="/performance/"
-      component={make(() => import('sentry/views/performance'))}
-      withOrgPath
-    >
-      <IndexRoute component={make(() => import('sentry/views/performance/content'))} />
-      <Route
-        path="trends/"
-        component={make(() => import('sentry/views/performance/trends'))}
-      />
+  const domainViewRoutes = (
+    <Route path={`/${DOMAIN_VIEW_BASE_URL}/`} withOrgPath>
       <Route path={`${FRONTEND_LANDING_SUB_PATH}/`}>
         <IndexRoute
           component={make(
@@ -1939,6 +1931,20 @@ function buildRoutes() {
           />
         </Route>
       </Route>
+    </Route>
+  );
+
+  const performanceRoutes = (
+    <Route
+      path="/performance/"
+      component={make(() => import('sentry/views/performance'))}
+      withOrgPath
+    >
+      <IndexRoute component={make(() => import('sentry/views/performance/content'))} />
+      <Route
+        path="trends/"
+        component={make(() => import('sentry/views/performance/trends'))}
+      />
       {transactionSummaryRoutes}
       <Route
         path="vitaldetail/"
@@ -2384,6 +2390,7 @@ function buildRoutes() {
       {statsRoutes}
       {discoverRoutes}
       {performanceRoutes}
+      {domainViewRoutes}
       {tracesRoutes}
       {insightsRoutes}
       {llmMonitoringRedirects}

static/app/views/insights/mobile/appStarts/views/screenSummaryPage.spec.tsx

@@ -85,7 +85,7 @@ describe('Screen Summary', function () {
         action: 'PUSH',
         hash: '',
         key: '',
-        pathname: '/organizations/org-slug/insights/mobile/screens/spans/',
+        pathname: '/organizations/org-slug/insights/screens/spans/',
         query: {
           project: project.id,
           transaction: 'MainActivity',

static/app/views/insights/mobile/screens/views/screensLandingPage.spec.tsx

@@ -25,7 +25,7 @@ describe('Screens Landing Page', function () {
     action: 'PUSH',
     hash: '',
     key: '',
-    pathname: '/organizations/org-slug/insights/mobile/mobile-screens',
+    pathname: '/organizations/org-slug/insights/mobile-screens',
     query: {
       project: project.id,
     },
@@ -83,7 +83,7 @@ describe('Screens Landing Page', function () {
         action: 'PUSH',
         hash: '',
         key: '',
-        pathname: '/organizations/org-slug/insights/mobile/mobile-screens',
+        pathname: '/organizations/org-slug/insights/mobile-screens',
         query: {
           project: project.id,
         },

static/app/views/insights/pages/ai/aiOverviewPage.tsx

@@ -15,6 +15,7 @@ import SentryDocumentTitle from 'sentry/components/sentryDocumentTitle';
 import {trackAnalytics} from 'sentry/utils/analytics';
 import {
   canUseMetricsData,
+  MEPSettingProvider,
   useMEPSettingContext,
 } from 'sentry/utils/performance/contexts/metricsEnhancedSetting';
 import {PageAlert, usePageAlert} from 'sentry/utils/performance/contexts/pageAlert';
@@ -199,11 +200,14 @@ function AiOverviewPage() {
 
 function AiOverviewPageWithProviders() {
   const organization = useOrganization();
+  const location = useLocation();
 
   return (
     <PageFiltersContainer>
       <SentryDocumentTitle title={OVERVIEW_PAGE_TITLE} orgSlug={organization.slug}>
-        <AiOverviewPage />
+        <MEPSettingProvider location={location}>
+          <AiOverviewPage />
+        </MEPSettingProvider>
       </SentryDocumentTitle>
     </PageFiltersContainer>
   );

static/app/views/insights/pages/backend/backendOverviewPage.tsx

@@ -15,6 +15,7 @@ import SentryDocumentTitle from 'sentry/components/sentryDocumentTitle';
 import {trackAnalytics} from 'sentry/utils/analytics';
 import {
   canUseMetricsData,
+  MEPSettingProvider,
   useMEPSettingContext,
 } from 'sentry/utils/performance/contexts/metricsEnhancedSetting';
 import {PageAlert, usePageAlert} from 'sentry/utils/performance/contexts/pageAlert';
@@ -230,11 +231,14 @@ function BackendOverviewPage() {
 
 function BackendOverviewPageWithProviders() {
   const organization = useOrganization();
+  const location = useLocation();
 
   return (
     <PageFiltersContainer>
       <SentryDocumentTitle title={OVERVIEW_PAGE_TITLE} orgSlug={organization.slug}>
-        <BackendOverviewPage />
+        <MEPSettingProvider location={location}>
+          <BackendOverviewPage />
+        </MEPSettingProvider>
       </SentryDocumentTitle>
     </PageFiltersContainer>
   );

static/app/views/insights/pages/frontend/frontendOverviewPage.tsx

@@ -15,6 +15,7 @@ import SentryDocumentTitle from 'sentry/components/sentryDocumentTitle';
 import {trackAnalytics} from 'sentry/utils/analytics';
 import {
   canUseMetricsData,
+  MEPSettingProvider,
   useMEPSettingContext,
 } from 'sentry/utils/performance/contexts/metricsEnhancedSetting';
 import {PageAlert, usePageAlert} from 'sentry/utils/performance/contexts/pageAlert';
@@ -230,11 +231,14 @@ function FrontendOverviewPage() {
 
 function FrontendOverviewPageWithProviders() {
   const organization = useOrganization();
+  const location = useLocation();
 
   return (
     <PageFiltersContainer>
       <SentryDocumentTitle title={OVERVIEW_PAGE_TITLE} orgSlug={organization.slug}>
-        <FrontendOverviewPage />
+        <MEPSettingProvider location={location}>
+          <FrontendOverviewPage />
+        </MEPSettingProvider>
       </SentryDocumentTitle>
     </PageFiltersContainer>
   );

static/app/views/insights/pages/mobile/mobileOverviewPage.tsx

@@ -14,6 +14,7 @@ import SentryDocumentTitle from 'sentry/components/sentryDocumentTitle';
 import {trackAnalytics} from 'sentry/utils/analytics';
 import {
   canUseMetricsData,
+  MEPSettingProvider,
   useMEPSettingContext,
 } from 'sentry/utils/performance/contexts/metricsEnhancedSetting';
 import {PageAlert, usePageAlert} from 'sentry/utils/performance/contexts/pageAlert';
@@ -256,11 +257,14 @@ function MobileOverviewPage() {
 
 function MobileOverviewPageWithProviders() {
   const organization = useOrganization();
+  const location = useLocation();
 
   return (
     <PageFiltersContainer>
       <SentryDocumentTitle title={OVERVIEW_PAGE_TITLE} orgSlug={organization.slug}>
-        <MobileOverviewPage />
+        <MEPSettingProvider location={location}>
+          <MobileOverviewPage />
+        </MEPSettingProvider>
       </SentryDocumentTitle>
     </PageFiltersContainer>
   );

static/app/views/insights/pages/settings.ts

@@ -7,8 +7,8 @@ import type {DomainView} from 'sentry/views/insights/pages/useFilters';
 import type {ModuleName} from 'sentry/views/insights/types';
 
 export const OVERVIEW_PAGE_TITLE = t('Overview');
-export const DOMAIN_VIEW_BASE_URL = 'performance';
-export const DOMAIN_VIEW_BASE_TITLE = t('Performance');
+export const DOMAIN_VIEW_BASE_URL = 'insights';
+export const DOMAIN_VIEW_BASE_TITLE = t('Insights');
 
 export const DOMAIN_VIEW_MODULES: Record<DomainView, ModuleName[]> = {
   frontend: FRONTEND_MODULES,