feat(alert): Expand bread crumbs for wizard (#24942)

Expanding the options for the <BuilderBreadCrumbs> so that we can supply alert names when coming from the wizard.

src/sentry/static/sentry/app/views/alerts/builder/builderBreadCrumbs.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import styled from '@emotion/styled';
 
-import Breadcrumbs from 'app/components/breadcrumbs';
+import Breadcrumbs, {Crumb} from 'app/components/breadcrumbs';
 import {t} from 'app/locale';
 import space from 'app/styles/space';
 
@@ -9,26 +9,35 @@ type Props = {
   hasMetricAlerts: boolean;
   orgSlug: string;
   title: string;
+  projectSlug: string;
+  alertName?: string;
 };
 
 function BuilderBreadCrumbs(props: Props) {
-  const {hasMetricAlerts, orgSlug, title} = props;
-  return (
-    <StyledBreadcrumbs
-      crumbs={[
-        {
-          to: hasMetricAlerts
-            ? `/organizations/${orgSlug}/alerts/`
-            : `/organizations/${orgSlug}/alerts/rules/`,
-          label: t('Alerts'),
-          preserveGlobalSelection: true,
-        },
-        {
-          label: title,
-        },
-      ]}
-    />
-  );
+  const {hasMetricAlerts, orgSlug, title, alertName, projectSlug} = props;
+  const crumbs: Crumb[] = [
+    {
+      to: hasMetricAlerts
+        ? `/organizations/${orgSlug}/alerts/`
+        : `/organizations/${orgSlug}/alerts/rules/`,
+      label: t('Alerts'),
+      preserveGlobalSelection: true,
+    },
+    {
+      label: title,
+      ...(alertName
+        ? {
+            to: `/organizations/${orgSlug}/alerts/${projectSlug}/wizard`,
+            preserveGlobalSelection: true,
+          }
+        : {}),
+    },
+  ];
+  if (alertName) {
+    crumbs.push({label: alertName});
+  }
+
+  return <StyledBreadcrumbs crumbs={crumbs} />;
 }
 
 const StyledBreadcrumbs = styled(Breadcrumbs)`

src/sentry/static/sentry/app/views/alerts/wizard/index.tsx

@@ -94,6 +94,7 @@ class AlertWizard extends React.Component<Props, State> {
             <BuilderBreadCrumbs
               hasMetricAlerts={hasMetricAlerts}
               orgSlug={organization.slug}
+              projectSlug={projectId}
               title={t('Create Alert Rule')}
             />
             <StyledPageHeader>

src/sentry/static/sentry/app/views/settings/projectAlerts/create.tsx

@@ -12,7 +12,12 @@ import {trackAnalyticsEvent} from 'app/utils/analytics';
 import EventView from 'app/utils/discover/eventView';
 import {uniqueId} from 'app/utils/guid';
 import BuilderBreadCrumbs from 'app/views/alerts/builder/builderBreadCrumbs';
-import {WizardRuleTemplate} from 'app/views/alerts/wizard/options';
+import {
+  AlertType as WizardAlertType,
+  AlertWizardAlertNames,
+  WizardRuleTemplate,
+} from 'app/views/alerts/wizard/options';
+import {getAlertTypeFromAggregateDataset} from 'app/views/alerts/wizard/utils';
 import IncidentRulesCreate from 'app/views/settings/incidentRules/create';
 import IssueRuleEditor from 'app/views/settings/projectAlerts/issueRuleEditor';
 
@@ -97,11 +102,19 @@ class Create extends React.Component<Props, State> {
       organization,
       project,
       params: {projectId},
+      location,
     } = this.props;
     const {alertType, eventView, wizardTemplate} = this.state;
 
     const hasWizard = organization.features.includes('alert-wizard');
     const shouldShowAlertTypeChooser = hasMetricAlerts && !hasWizard;
+    let wizardAlertType: undefined | WizardAlertType;
+    if (location?.query?.createFromWizard) {
+      wizardAlertType = wizardTemplate
+        ? getAlertTypeFromAggregateDataset(wizardTemplate)
+        : 'issues';
+    }
+
     const title = t('New Alert Rule');
 
     return (
@@ -111,10 +124,14 @@ class Create extends React.Component<Props, State> {
           <BuilderBreadCrumbs
             hasMetricAlerts={hasMetricAlerts}
             orgSlug={organization.slug}
-            title={title}
+            alertName={wizardAlertType && AlertWizardAlertNames[wizardAlertType]}
+            title={wizardAlertType ? t('Create Alert Rule') : title}
+            projectSlug={projectId}
           />
           <StyledPageHeader>
-            <PageHeading>{title}</PageHeading>
+            <PageHeading>
+              {wizardAlertType ? t('Set Alert Conditions') : title}
+            </PageHeading>
           </StyledPageHeader>
           {shouldShowAlertTypeChooser && (
             <AlertTypeChooser

src/sentry/static/sentry/app/views/settings/projectAlerts/edit.tsx

@@ -68,6 +68,7 @@ class ProjectAlertsEditor extends React.Component<Props, State> {
             hasMetricAlerts={hasMetricAlerts}
             orgSlug={organization.slug}
             title={this.getTitle()}
+            projectSlug={project.slug}
           />
           <StyledPageHeader>
             <PageHeading>{this.getTitle()}</PageHeading>