feat(alerts): Add wizard v3 with transaction duration for transaction summary create alert (#34034)

static/app/components/createAlertButton.tsx

@@ -29,6 +29,11 @@ import {
   transactionFieldConfig,
 } from 'sentry/views/alerts/incidentRules/constants';
 import {getQueryDatasource} from 'sentry/views/alerts/utils';
+import {
+  AlertType,
+  AlertWizardRuleTemplates,
+  DEFAULT_WIZARD_TEMPLATE,
+} from 'sentry/views/alerts/wizard/options';
 
 /**
  * Discover query supports more features than alert rules
@@ -207,8 +212,10 @@ type CreateAlertFromViewButtonProps = ButtonProps & {
   onSuccess: () => void;
   organization: Organization;
   projects: Project[];
+  alertType?: AlertType;
   className?: string;
   referrer?: string;
+  useAlertWizardV3?: boolean;
 };
 
 function incompatibleYAxis(eventView: EventView): boolean {
@@ -263,6 +270,8 @@ function CreateAlertFromViewButton({
   referrer,
   onIncompatibleQuery,
   onSuccess,
+  useAlertWizardV3,
+  alertType,
   ...buttonProps
 }: CreateAlertFromViewButtonProps) {
   // Must have exactly one project selected and not -1 (all projects)
@@ -287,16 +296,25 @@ function CreateAlertFromViewButton({
       ''
     );
   }
-
   const hasErrors = Object.values(errors).some(x => x);
   const to = hasErrors
     ? undefined
     : {
-        pathname: `/organizations/${organization.slug}/alerts/${project?.slug}/new/`,
+        pathname: useAlertWizardV3
+          ? `/organizations/${organization.slug}/alerts/new/metric/`
+          : `/organizations/${organization.slug}/alerts/${project?.slug}/new/`,
         query: {
           ...queryParams,
           createFromDiscover: true,
           referrer,
+          ...(useAlertWizardV3
+            ? {
+                project: project?.slug,
+                ...(alertType
+                  ? AlertWizardRuleTemplates[alertType]
+                  : DEFAULT_WIZARD_TEMPLATE),
+              }
+            : {}),
         },
       };
 

static/app/views/alerts/create.tsx

@@ -44,20 +44,14 @@ class Create extends Component<Props, State> {
 
   getInitialState(): State {
     const {organization, location, project, params, router} = this.props;
-    const {
-      createFromDiscover,
-      createFromWizard,
-      aggregate,
-      dataset,
-      eventTypes,
-      createFromV3,
-    } = location?.query ?? {};
+    const {createFromDiscover, createFromWizard, aggregate, dataset, eventTypes} =
+      location?.query ?? {};
     let alertType = AlertRuleType.ISSUE;
 
     const hasAlertWizardV3 = organization.features.includes('alert-wizard-v3');
 
     // Alerts can only be created via create from discover or alert wizard, until alert-wizard-v3 is fully implemented
-    if (hasAlertWizardV3 && createFromV3) {
+    if (hasAlertWizardV3) {
       alertType = params.alertType || AlertRuleType.METRIC;
 
       if (alertType === AlertRuleType.METRIC && !(aggregate && dataset && eventTypes)) {

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

@@ -96,7 +96,6 @@ class AlertWizard extends Component<Props, State> {
           query: {
             ...(metricRuleTemplate ? metricRuleTemplate : {}),
             project: projectId,
-            createFromV3: true,
             referrer: location?.query?.referrer,
           },
         }

static/app/views/performance/transactionSummary/header.tsx

@@ -123,6 +123,8 @@ class TransactionHeader extends React.Component<Props> {
         onIncompatibleQuery={this.handleIncompatibleQuery}
         onSuccess={this.handleCreateAlertSuccess}
         referrer="performance"
+        useAlertWizardV3={organization.features.includes('alert-wizard-v3')}
+        alertType="trans_duration"
         aria-label={t('Create Alert')}
       />
     );