chore(seer): Setup new, blank, page for Seer settings to live

src/sentry/features/temporary.py

@@ -380,6 +380,8 @@ def register_temporary_features(manager: FeatureManager) -> None:
     manager.add("organizations:seer-coding-agent-integrations", OrganizationFeature, FeatureHandlerStrategy.FLAGPOLE, api_expose=True)
     # Enable Seer Explorer panel for AI-powered data exploration
     manager.add("organizations:seer-explorer", OrganizationFeature, FeatureHandlerStrategy.FLAGPOLE, api_expose=True)
+    # Enable Seer GTM Settings page designs
+    manager.add("organizations:seer-settings-gtm", OrganizationFeature, FeatureHandlerStrategy.FLAGPOLE, api_expose=True)
     # Enable search query builder boolean operator select feature
     manager.add("organizations:search-query-builder-add-boolean-operator-select", OrganizationFeature, FeatureHandlerStrategy.FLAGPOLE, api_expose=True)
     # Enable search query builder case insensitivity features

static/app/router/routes.tsx

@@ -1214,10 +1214,21 @@ function buildRoutes(): RouteObject[] {
     {
       path: 'seer/',
       name: t('Seer Automation'),
+      component: make(() => import('getsentry/views/seerAutomation/index')),
       children: [
         {
           index: true,
-          component: make(() => import('getsentry/views/seerAutomation')),
+          component: make(() => import('getsentry/views/seerAutomation/seerAutomation')),
+        },
+        {
+          path: 'projects/',
+          name: t('Seer'),
+          component: make(() => import('getsentry/views/seerAutomation/projects')),
+        },
+        {
+          path: 'repositories/',
+          name: t('Seer'),
+          component: make(() => import('getsentry/views/seerAutomation/repositories')),
         },
         {
           path: 'onboarding/',

static/gsApp/views/seerAutomation/index.spec.tsx

@@ -5,7 +5,7 @@ import {act, render, screen, userEvent, waitFor} from 'sentry-test/reactTestingL
 
 import ProjectsStore from 'sentry/stores/projectsStore';
 
-import SeerAutomationRoot from './index';
+import SeerAutomation from 'getsentry/views/seerAutomation/seerAutomation';
 
 describe('SeerAutomation', () => {
   beforeEach(() => {
@@ -61,7 +61,7 @@ describe('SeerAutomation', () => {
       },
     });
 
-    render(<SeerAutomationRoot />, {organization});
+    render(<SeerAutomation />, {organization});
 
     // Project details populate the project list
     const projectItem = await screen.findByText(project.slug);
@@ -124,7 +124,7 @@ describe('SeerAutomation', () => {
       },
     });
 
-    render(<SeerAutomationRoot />, {organization});
+    render(<SeerAutomation />, {organization});
 
     // Find the toggle for Default for Issue Scans
     const toggle = await screen.findByRole('checkbox', {

static/gsApp/views/seerAutomation/index.tsx

@@ -1,24 +1,18 @@
 import {Fragment} from 'react';
+import {Outlet} from 'react-router-dom';
+
+import {Stack} from '@sentry/scraps/layout/stack';
 
-import {LinkButton} from 'sentry/components/core/button/linkButton';
 import {useOrganizationSeerSetup} from 'sentry/components/events/autofix/useOrganizationSeerSetup';
-import ExternalLink from 'sentry/components/links/externalLink';
 import {NoAccess} from 'sentry/components/noAccess';
-import NoProjectMessage from 'sentry/components/noProjectMessage';
 import Placeholder from 'sentry/components/placeholder';
 import SentryDocumentTitle from 'sentry/components/sentryDocumentTitle';
-import {t, tct} from 'sentry/locale';
-import {DataCategoryExact} from 'sentry/types/core';
+import {t} from 'sentry/locale';
 import useOrganization from 'sentry/utils/useOrganization';
-import {getPricingDocsLinkForEventType} from 'sentry/views/settings/account/notifications/utils';
-import SettingsPageHeader from 'sentry/views/settings/components/settingsPageHeader';
 
 import AiSetupDataConsent from 'getsentry/components/ai/AiSetupDataConsent';
 
-import {SeerAutomationDefault} from './seerAutomationDefault';
-import {SeerAutomationProjectList} from './seerAutomationProjectList';
-
-function SeerAutomationRoot() {
+export default function SeerAutomationRoot() {
   const organization = useOrganization();
   const {isLoading, billing, setupAcknowledgement} = useOrganizationSeerSetup();
 
@@ -29,14 +23,12 @@ function SeerAutomationRoot() {
   // Show loading placeholders while checking setup
   if (isLoading) {
     return (
-      <Fragment>
+      <Stack gap="lg">
         <SentryDocumentTitle title={t('Seer Automation')} orgSlug={organization.slug} />
         <Placeholder height="60px" />
-        <br />
         <Placeholder height="200px" />
-        <br />
         <Placeholder height="200px" />
-      </Fragment>
+      </Stack>
     );
   }
 
@@ -57,40 +49,5 @@ function SeerAutomationRoot() {
     );
   }
 
-  // Show the regular settings page
-  return (
-    <Fragment>
-      <SentryDocumentTitle title={t('Seer Automation')} orgSlug={organization.slug} />
-      <SettingsPageHeader
-        title={t('Seer Automation')}
-        subtitle={tct(
-          "Choose how Seer automatically triages and diagnoses incoming issues, before you even notice them. This analysis is billed at the [link:standard rates] for Seer's Issue Scan and Issue Fix. See [spendlink:docs] on how to manage your Seer spend.",
-          {
-            link: <ExternalLink href="https://docs.sentry.io/pricing/#seer-pricing" />,
-            spendlink: (
-              <ExternalLink
-                href={getPricingDocsLinkForEventType(DataCategoryExact.SEER_AUTOFIX)}
-              />
-            ),
-          }
-        )}
-        action={
-          <LinkButton
-            href="https://docs.sentry.io/product/ai-in-sentry/seer/#seer-capabilities"
-            external
-          >
-            {t('Read the docs')}
-          </LinkButton>
-        }
-      />
-
-      <NoProjectMessage organization={organization}>
-        <SeerAutomationProjectList />
-        <br />
-        <SeerAutomationDefault />
-      </NoProjectMessage>
-    </Fragment>
-  );
+  return <Outlet />;
 }
-
-export default SeerAutomationRoot;

static/gsApp/views/seerAutomation/projects.tsx

@@ -0,0 +1,17 @@
+import Feature from 'sentry/components/acl/feature';
+import {NoAccess} from 'sentry/components/noAccess';
+import useOrganization from 'sentry/utils/useOrganization';
+
+export default function SeerAutomationProjects() {
+  const organization = useOrganization();
+
+  return (
+    <Feature
+      features={['seer-settings-gtm']}
+      organization={organization}
+      renderDisabled={NoAccess}
+    >
+      <div>SeerAutomationProjects</div>
+    </Feature>
+  );
+}

static/gsApp/views/seerAutomation/repositories.tsx

@@ -0,0 +1,17 @@
+import Feature from 'sentry/components/acl/feature';
+import {NoAccess} from 'sentry/components/noAccess';
+import useOrganization from 'sentry/utils/useOrganization';
+
+export default function SeerAutomationRepositories() {
+  const organization = useOrganization();
+
+  return (
+    <Feature
+      features={['seer-settings-gtm']}
+      organization={organization}
+      renderDisabled={NoAccess}
+    >
+      <div>SeerAutomationRepositories</div>
+    </Feature>
+  );
+}

static/gsApp/views/seerAutomation/seerAutomation.tsx

@@ -0,0 +1,58 @@
+import {Fragment} from 'react';
+
+import {LinkButton} from 'sentry/components/core/button/linkButton';
+import ExternalLink from 'sentry/components/links/externalLink';
+import NoProjectMessage from 'sentry/components/noProjectMessage';
+import SentryDocumentTitle from 'sentry/components/sentryDocumentTitle';
+import {t, tct} from 'sentry/locale';
+import {DataCategoryExact} from 'sentry/types/core';
+import useOrganization from 'sentry/utils/useOrganization';
+import {getPricingDocsLinkForEventType} from 'sentry/views/settings/account/notifications/utils';
+import SettingsPageHeader from 'sentry/views/settings/components/settingsPageHeader';
+
+import {SeerAutomationDefault} from 'getsentry/views/seerAutomation/components/seerAutomationDefault';
+import {SeerAutomationProjectList} from 'getsentry/views/seerAutomation/components/seerAutomationProjectList';
+import Settings from 'getsentry/views/seerAutomation/settings';
+
+export default function SeerAutomation() {
+  const organization = useOrganization();
+
+  if (organization.features.includes('seer-settings-gtm')) {
+    return <Settings />;
+  }
+
+  // Show the regular settings page
+  return (
+    <Fragment>
+      <SentryDocumentTitle title={t('Seer Automation')} orgSlug={organization.slug} />
+      <SettingsPageHeader
+        title={t('Seer Automation')}
+        subtitle={tct(
+          "Choose how Seer automatically triages and diagnoses incoming issues, before you even notice them. This analysis is billed at the [link:standard rates] for Seer's Issue Scan and Issue Fix. See [spendlink:docs] on how to manage your Seer spend.",
+          {
+            link: <ExternalLink href="https://docs.sentry.io/pricing/#seer-pricing" />,
+            spendlink: (
+              <ExternalLink
+                href={getPricingDocsLinkForEventType(DataCategoryExact.SEER_AUTOFIX)}
+              />
+            ),
+          }
+        )}
+        action={
+          <LinkButton
+            href="https://docs.sentry.io/product/ai-in-sentry/seer/#seer-capabilities"
+            external
+          >
+            {t('Read the docs')}
+          </LinkButton>
+        }
+      />
+
+      <NoProjectMessage organization={organization}>
+        <SeerAutomationProjectList />
+        <br />
+        <SeerAutomationDefault />
+      </NoProjectMessage>
+    </Fragment>
+  );
+}

static/gsApp/views/seerAutomation/settings.tsx

@@ -0,0 +1,17 @@
+import Feature from 'sentry/components/acl/feature';
+import {NoAccess} from 'sentry/components/noAccess';
+import useOrganization from 'sentry/utils/useOrganization';
+
+export default function SeerAutomationSettings() {
+  const organization = useOrganization();
+
+  return (
+    <Feature
+      features={['seer-settings-gtm']}
+      organization={organization}
+      renderDisabled={NoAccess}
+    >
+      <div>SeerAutomationSettings</div>
+    </Feature>
+  );
+}