feat(org-tokens): Prepare settings UI for Developer Settings structure (#52426)

static/app/routes.tsx

@@ -861,7 +861,7 @@ function buildRoutes() {
         />
       </Route>
       <Redirect from="developer-settings/sentry-functions/" to="developer-settings/" />
-      <Route path="developer-settings/" name={t('Developer Settings')}>
+      <Route path="developer-settings/" name={t('Custom Integrations')}>
         <IndexRoute
           component={make(
             () => import('sentry/views/settings/organizationDeveloperSettings')

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

@@ -4,103 +4,6 @@ import {NavigationSection} from 'sentry/views/settings/types';
 const pathPrefix = '/settings/:orgId';
 
 const organizationNavigation: NavigationSection[] = [
-  {
-    name: t('Organization'),
-    items: [
-      {
-        path: `${pathPrefix}/`,
-        title: t('General Settings'),
-        index: true,
-        description: t('Configure general settings for an organization'),
-        id: 'general',
-      },
-      {
-        path: `${pathPrefix}/projects/`,
-        title: t('Projects'),
-        description: t("View and manage an organization's projects"),
-        id: 'projects',
-      },
-      {
-        path: `${pathPrefix}/teams/`,
-        title: t('Teams'),
-        description: t("Manage an organization's teams"),
-        id: 'teams',
-      },
-      {
-        path: `${pathPrefix}/members/`,
-        title: t('Members'),
-        show: ({access}) => access!.has('member:read'),
-        description: t('Manage user membership for an organization'),
-        id: 'members',
-      },
-      {
-        path: `${pathPrefix}/security-and-privacy/`,
-        title: t('Security & Privacy'),
-        description: t(
-          'Configuration related to dealing with sensitive data and other security settings. (Data Scrubbing, Data Privacy, Data Scrubbing)'
-        ),
-        id: 'security-and-privacy',
-      },
-      {
-        path: `${pathPrefix}/auth/`,
-        title: t('Auth'),
-        description: t('Configure single sign-on'),
-        id: 'sso',
-      },
-      {
-        path: `${pathPrefix}/api-keys/`,
-        title: t('API Keys'),
-        show: ({access, features}) =>
-          features!.has('api-keys') && access!.has('org:admin'),
-        id: 'api-keys',
-      },
-      {
-        path: `${pathPrefix}/audit-log/`,
-        title: t('Audit Log'),
-        show: ({access}) => access!.has('org:write'),
-        description: t('View the audit log for an organization'),
-        id: 'audit-log',
-      },
-      {
-        path: `${pathPrefix}/rate-limits/`,
-        title: t('Rate Limits'),
-        show: ({access, features}) =>
-          features!.has('legacy-rate-limits') && access!.has('org:write'),
-        description: t('Configure rate limits for all projects in the organization'),
-        id: 'rate-limits',
-      },
-      {
-        path: `${pathPrefix}/relay/`,
-        title: t('Relay'),
-        description: t('Manage relays connected to the organization'),
-        id: 'relay',
-      },
-      {
-        path: `${pathPrefix}/repos/`,
-        title: t('Repositories'),
-        description: t('Manage repositories connected to the organization'),
-        id: 'repos',
-      },
-      {
-        path: `${pathPrefix}/integrations/`,
-        title: t('Integrations'),
-        description: t(
-          'Manage organization-level integrations, including: Slack, Github, Bitbucket, Jira, and Azure DevOps'
-        ),
-        id: 'integrations',
-        recordAnalytics: true,
-      },
-      {
-        path: `${pathPrefix}/developer-settings/`,
-        title: t('Developer Settings'),
-        description: t('Manage developer applications'),
-        id: 'developer-settings',
-      },
-    ],
-  },
-];
-
-export const organizationNavigationWithAuthTokens: NavigationSection[] = [
   {
     name: t('Organization'),
     items: [
@@ -197,6 +100,7 @@ export const organizationNavigationWithAuthTokens: NavigationSection[] = [
         title: t('Auth Tokens'),
         description: t('Manage organization auth tokens'),
         id: 'auth-tokens',
+        show: ({features}) => features!.has('org-auth-tokens'),
       },
       {
         path: `${pathPrefix}/developer-settings/`,

static/app/views/settings/organization/organizationSettingsNavigation.tsx

@@ -5,9 +5,7 @@ import {Organization} from 'sentry/types';
 import {HookName, Hooks} from 'sentry/types/hooks';
 import withOrganization from 'sentry/utils/withOrganization';
 import SettingsNavigation from 'sentry/views/settings/components/settingsNavigation';
-import navigationConfiguration, {
-  organizationNavigationWithAuthTokens,
-} from 'sentry/views/settings/organization/navigationConfiguration';
+import navigationConfiguration from 'sentry/views/settings/organization/navigationConfiguration';
 import {NavigationSection} from 'sentry/views/settings/types';
 
 type Props = {
@@ -74,13 +72,9 @@ class OrganizationSettingsNavigation extends Component<Props, State> {
     const access = new Set(organization.access);
     const features = new Set(organization.features);
 
-    const navigationObjects = features.has('org-auth-tokens')
-      ? organizationNavigationWithAuthTokens
-      : navigationConfiguration;
-
     return (
       <SettingsNavigation
-        navigationObjects={navigationObjects}
+        navigationObjects={navigationConfiguration}
         access={access}
         features={features}
         organization={organization}

static/app/views/settings/organizationDeveloperSettings/index.tsx

@@ -60,7 +60,7 @@ class OrganizationDeveloperSettings extends AsyncView<Props, State> {
 
   getTitle() {
     const {organization} = this.props;
-    return routeTitleGen(t('Developer Settings'), organization.slug, false);
+    return routeTitleGen(t('Custom Integrations'), organization.slug, false);
   }
 
   getEndpoints(): ReturnType<AsyncView['getEndpoints']> {
@@ -213,12 +213,10 @@ class OrganizationDeveloperSettings extends AsyncView<Props, State> {
       tabs.push(['sentryfx', t('Sentry Function')]);
     }
 
-    const hasAuthTokens = organization.features.includes('org-auth-tokens');
-
     return (
       <div>
         <SettingsPageHeader
-          title={hasAuthTokens ? t('Custom Integrations') : t('Developer Settings')}
+          title={t('Custom Integrations')}
           body={
             <Fragment>
               {t(