ref(preprod): Move Snapshots tab to standalone settings subpage

static/app/router/routes.tsx

@@ -672,6 +672,11 @@ function buildRoutes(): RouteObject[] {
       name: t('Mobile Builds'),
       component: make(() => import('sentry/views/settings/project/preprod')),
     },
+    {
+      path: 'snapshots/',
+      name: t('Snapshots'),
+      component: make(() => import('sentry/views/settings/project/preprod/snapshots')),
+    },
     {
       path: 'keys/',
       name: t('Client Keys'),

static/app/views/settings/project/navigationConfiguration.tsx

@@ -134,6 +134,13 @@ export function getNavigationConfiguration({
           badge: () => 'new',
           description: t('Size analysis and build distribution configuration.'),
         },
+        {
+          path: `${pathPrefix}/snapshots/`,
+          title: t('Snapshots'),
+          badge: () => 'alpha',
+          show: () => !!organization?.features?.includes('preprod-snapshots'),
+          description: t('Configure snapshot status checks and PR comments.'),
+        },
       ],
     },
     {

static/app/views/settings/project/preprod/index.tsx

@@ -11,19 +11,16 @@ import {t} from 'sentry/locale';
 import {decodeScalar} from 'sentry/utils/queryString';
 import {useLocation} from 'sentry/utils/useLocation';
 import {useNavigate} from 'sentry/utils/useNavigate';
-import {useOrganization} from 'sentry/utils/useOrganization';
 import {TopBar} from 'sentry/views/navigation/topBar';
 import {useHasPageFrameFeature} from 'sentry/views/navigation/useHasPageFrameFeature';
 import {PreprodQuotaAlert} from 'sentry/views/preprod/components/preprodQuotaAlert';
 import {SettingsPageHeader} from 'sentry/views/settings/components/settingsPageHeader';
 
 import {FeatureFilter} from './featureFilter';
 import {PrCommentsToggle} from './prCommentsToggle';
-import {SnapshotPrCommentsToggle} from './snapshotPrCommentsToggle';
-import {SnapshotStatusChecks} from './snapshotStatusChecks';
 import {StatusCheckRules} from './statusCheckRules';
 
-type PreprodTab = 'size' | 'distribution' | 'snapshots';
+type PreprodTab = 'size' | 'distribution';
 
 const SIZE_ENABLED_READ_KEY = 'sentry:preprod_size_enabled_by_customer';
 const SIZE_ENABLED_WRITE_KEY = 'preprodSizeEnabledByCustomer';
@@ -35,21 +32,15 @@ const DISTRIBUTION_ENABLED_WRITE_KEY = 'preprodDistributionEnabledByCustomer';
 const DISTRIBUTION_ENABLED_QUERY_READ_KEY = 'sentry:preprod_distribution_enabled_query';
 const DISTRIBUTION_ENABLED_QUERY_WRITE_KEY = 'preprodDistributionEnabledQuery';
 
-const VALID_TABS: PreprodTab[] = ['size', 'distribution', 'snapshots'];
+const VALID_TABS: PreprodTab[] = ['size', 'distribution'];
 
 export default function PreprodSettings() {
   const location = useLocation();
   const navigate = useNavigate();
-  const organization = useOrganization();
   const hasPageFrameFeature = useHasPageFrameFeature();
 
-  const hasSnapshots = organization.features.includes('preprod-snapshots');
-
-  const availableTabs = hasSnapshots
-    ? VALID_TABS
-    : VALID_TABS.filter(tab => tab !== 'snapshots');
   const queryTab = decodeScalar(location?.query?.tab);
-  const tab = availableTabs.includes(queryTab as PreprodTab)
+  const tab = VALID_TABS.includes(queryTab as PreprodTab)
     ? (queryTab as PreprodTab)
     : 'size';
 
@@ -84,9 +75,6 @@ export default function PreprodSettings() {
             <TabList>
               <TabList.Item key="size">{t('Size Analysis')}</TabList.Item>
               <TabList.Item key="distribution">{t('Build Distribution')}</TabList.Item>
-              <TabList.Item key="snapshots" hidden={!hasSnapshots}>
-                {t('Snapshots')}
-              </TabList.Item>
             </TabList>
           </Tabs>
         </Container>
@@ -121,14 +109,6 @@ export default function PreprodSettings() {
             </Feature>
           </Fragment>
         )}
-        {tab === 'snapshots' && (
-          <Fragment>
-            <SnapshotStatusChecks />
-            <Feature features="organizations:preprod-snapshot-pr-comments">
-              <SnapshotPrCommentsToggle />
-            </Feature>
-          </Fragment>
-        )}
       </Stack>
     </Fragment>
   );

static/app/views/settings/project/preprod/snapshots.tsx

@@ -0,0 +1,52 @@
+import {Fragment} from 'react';
+
+import {Grid, Stack} from '@sentry/scraps/layout';
+
+import Feature from 'sentry/components/acl/feature';
+import {NotFound} from 'sentry/components/errors/notFound';
+import {FeedbackButton} from 'sentry/components/feedbackButton/feedbackButton';
+import {SentryDocumentTitle} from 'sentry/components/sentryDocumentTitle';
+import {t} from 'sentry/locale';
+import {useOrganization} from 'sentry/utils/useOrganization';
+import {TopBar} from 'sentry/views/navigation/topBar';
+import {useHasPageFrameFeature} from 'sentry/views/navigation/useHasPageFrameFeature';
+import {SettingsPageHeader} from 'sentry/views/settings/components/settingsPageHeader';
+
+import {SnapshotPrCommentsToggle} from './snapshotPrCommentsToggle';
+import {SnapshotStatusChecks} from './snapshotStatusChecks';
+
+export default function SnapshotSettings() {
+  const organization = useOrganization();
+  const hasPageFrameFeature = useHasPageFrameFeature();
+
+  if (!organization.features.includes('preprod-snapshots')) {
+    return <NotFound />;
+  }
+
+  return (
+    <Fragment>
+      <SentryDocumentTitle title={t('Snapshots')} />
+      <SettingsPageHeader
+        title={t('Snapshots')}
+        subtitle={t('Configure status checks and PR comments for snapshot testing.')}
+        action={
+          <Grid flow="column" align="center" gap="lg">
+            {hasPageFrameFeature ? (
+              <TopBar.Slot name="feedback">
+                <FeedbackButton>{null}</FeedbackButton>
+              </TopBar.Slot>
+            ) : (
+              <FeedbackButton />
+            )}
+          </Grid>
+        }
+      />
+      <Stack gap="lg">
+        <SnapshotStatusChecks />
+        <Feature features="organizations:preprod-snapshot-pr-comments">
+          <SnapshotPrCommentsToggle />
+        </Feature>
+      </Stack>
+    </Fragment>
+  );
+}