chore(nav): Convert more links to new route structure (#87235)

- Some links to /projects/new
- Link on metric alert details page
- Some stats links

Author: malwilley

static/app/components/modals/suggestProjectModal.tsx

@@ -23,6 +23,7 @@ import {space} from 'sentry/styles/space';
 import type {Organization} from 'sentry/types/organization';
 import {trackAnalytics} from 'sentry/utils/analytics';
 import withApi from 'sentry/utils/withApi';
+import {makeProjectsPathname} from 'sentry/views/projects/pathname';
 
 type Props = ModalRenderProps & {
   api: Client;
@@ -108,7 +109,11 @@ function SuggestProjectModal(props: Props) {
       category: 'mobile',
     });
 
-    const newProjectLink = `/organizations/${organization.slug}/projects/new/?${paramString}`;
+    const newProjectLink =
+      makeProjectsPathname({
+        path: '/new/',
+        orgSlug: organization.slug,
+      }) + `?${paramString}`;
 
     return (
       <Fragment>

static/app/views/alerts/utils/index.tsx

@@ -9,6 +9,7 @@ import {getUtcDateString} from 'sentry/utils/dates';
 import {axisLabelFormatter, tooltipFormatter} from 'sentry/utils/discover/charts';
 import {aggregateOutputType} from 'sentry/utils/discover/fields';
 import {formatMetricUsingUnit} from 'sentry/utils/number/formatMetricUsingUnit';
+import {makeAlertsPathname} from 'sentry/views/alerts/pathnames';
 import {
   Dataset,
   Datasource,
@@ -166,12 +167,15 @@ export function shouldScaleAlertChart(aggregate: string) {
 }
 
 export function alertDetailsLink(organization: Organization, incident: Incident) {
-  return `/organizations/${organization.slug}/alerts/rules/details/${
-    incident.alertRule.status === AlertRuleStatus.SNAPSHOT &&
-    incident.alertRule.originalAlertRuleId
-      ? incident.alertRule.originalAlertRuleId
-      : incident.alertRule.id
-  }/`;
+  return makeAlertsPathname({
+    path: `/rules/details/${
+      incident.alertRule.status === AlertRuleStatus.SNAPSHOT &&
+      incident.alertRule.originalAlertRuleId
+        ? incident.alertRule.originalAlertRuleId
+        : incident.alertRule.id
+    }/`,
+    organization,
+  });
 }
 
 /**

static/app/views/organizationStats/header.tsx

@@ -4,7 +4,7 @@ import {PageHeadingQuestionTooltip} from 'sentry/components/pageHeadingQuestionT
 import {TabList} from 'sentry/components/tabs';
 import {t} from 'sentry/locale';
 import type {Organization} from 'sentry/types/organization';
-import normalizeUrl from 'sentry/utils/url/normalizeUrl';
+import {makeStatsPathname} from 'sentry/views/organizationStats/pathname';
 
 type Props = {
   activeTab: 'stats' | 'issues' | 'health';
@@ -34,19 +34,28 @@ function StatsHeader({organization, activeTab}: Props) {
         <TabList hideBorder>
           <TabList.Item
             key="stats"
-            to={normalizeUrl(`/organizations/${organization.slug}/stats/`)}
+            to={makeStatsPathname({
+              path: '/',
+              organization,
+            })}
           >
             {t('Usage')}
           </TabList.Item>
           <TabList.Item
             key="issues"
-            to={normalizeUrl(`/organizations/${organization.slug}/stats/issues/`)}
+            to={makeStatsPathname({
+              path: '/issues/',
+              organization,
+            })}
           >
             {t('Issues')}
           </TabList.Item>
           <TabList.Item
             key="health"
-            to={normalizeUrl(`/organizations/${organization.slug}/stats/health/`)}
+            to={makeStatsPathname({
+              path: '/health/',
+              organization,
+            })}
           >
             {t('Health')}
           </TabList.Item>

static/app/views/organizationStats/index.tsx

@@ -36,6 +36,7 @@ import withOrganization from 'sentry/utils/withOrganization';
 import withPageFilters from 'sentry/utils/withPageFilters';
 import HeaderTabs from 'sentry/views/organizationStats/header';
 import {getPerformanceBaseUrl} from 'sentry/views/performance/utils';
+import {makeProjectsPathname} from 'sentry/views/projects/pathname';
 
 import type {ChartDataTransform} from './usageChart';
 import {CHART_OPTIONS_DATACATEGORY} from './usageChart';
@@ -193,7 +194,10 @@ export class OrganizationStats extends Component<OrganizationStatsProps> {
       },
       projectDetail: {
         ...nextLocation,
-        pathname: `/organizations/${organization.slug}/projects/${project.slug}/`,
+        pathname: makeProjectsPathname({
+          path: `/${project.slug}/`,
+          orgSlug: organization.slug,
+        }),
       },
       issueList: {
         ...nextLocation,

static/app/views/organizationStats/pathname.tsx

@@ -0,0 +1,20 @@
+import {prefersStackedNav} from 'sentry/components/nav/prefersStackedNav';
+import type {Organization} from 'sentry/types/organization';
+import normalizeUrl from 'sentry/utils/url/normalizeUrl';
+
+const LEGACY_STATS_BASE_PATHNAME = 'stats';
+const STATS_BASE_PATHNAME = 'settings/stats';
+
+export function makeStatsPathname({
+  path,
+  organization,
+}: {
+  organization: Organization;
+  path: '/' | `/${string}/`;
+}) {
+  return normalizeUrl(
+    prefersStackedNav()
+      ? `/organizations/${organization.slug}/${STATS_BASE_PATHNAME}${path}`
+      : `/organizations/${organization.slug}/${LEGACY_STATS_BASE_PATHNAME}${path}`
+  );
+}

static/app/views/projectsDashboard/index.tsx

@@ -37,6 +37,7 @@ import {useTeamsById} from 'sentry/utils/useTeamsById';
 import {useUser} from 'sentry/utils/useUser';
 import {useUserTeams} from 'sentry/utils/useUserTeams';
 import TeamFilter from 'sentry/views/alerts/list/rules/teamFilter';
+import {makeProjectsPathname} from 'sentry/views/projects/pathname';
 
 import ProjectCard from './projectCard';
 import Resources from './resources';
@@ -205,7 +206,10 @@ function Dashboard() {
                   ? undefined
                   : t('You do not have permission to create projects')
               }
-              to={`/organizations/${organization.slug}/projects/new/`}
+              to={makeProjectsPathname({
+                path: '/new/',
+                orgSlug: organization.slug,
+              })}
               icon={<IconAdd isCircled />}
               data-test-id="create-project"
             >

static/app/views/settings/organizationProjects/createProjectButton.tsx

@@ -3,6 +3,7 @@ import {IconAdd} from 'sentry/icons';
 import {t} from 'sentry/locale';
 import {useCanCreateProject} from 'sentry/utils/useCanCreateProject';
 import useOrganization from 'sentry/utils/useOrganization';
+import {makeProjectsPathname} from 'sentry/views/projects/pathname';
 
 export default function CreateProjectButton() {
   const organization = useOrganization();
@@ -18,7 +19,10 @@ export default function CreateProjectButton() {
           ? undefined
           : t('You do not have permission to create projects')
       }
-      to={`/organizations/${organization.slug}/projects/new/`}
+      to={makeProjectsPathname({
+        path: '/new/',
+        orgSlug: organization.slug,
+      })}
       icon={<IconAdd isCircled />}
     >
       {t('Create Project')}