feat(alerts): Disable editing alert query for txn (#93440)

shruthilayaj · web-flow · commit c62601aff607 · 2025-06-12T16:48:57.000-04:00
Lock changes to the alert if transaction deprecation is disabled.
diff --git a/static/app/views/alerts/rules/metric/ruleConditionsForm.tsx b/static/app/views/alerts/rules/metric/ruleConditionsForm.tsx
@@ -12,6 +12,7 @@ import {
 } from 'sentry/components/alerts/onDemandMetricAlert';
 import {Alert} from 'sentry/components/core/alert';
 import {Select} from 'sentry/components/core/select';
+import {Tooltip} from 'sentry/components/core/tooltip';
 import {getHasTag} from 'sentry/components/events/searchBar';
 import {
   STATIC_FIELD_TAGS,
@@ -66,11 +67,17 @@ import {
   DATA_SOURCE_TO_SET_AND_EVENT_TYPES,
 } from 'sentry/views/alerts/utils';
 import type {AlertType} from 'sentry/views/alerts/wizard/options';
-import {getSupportedAndOmittedTags} from 'sentry/views/alerts/wizard/options';
+import {
+  DEPRECATED_TRANSACTION_ALERTS,
+  getSupportedAndOmittedTags,
+} from 'sentry/views/alerts/wizard/options';
 import {useSpanTags} from 'sentry/views/explore/contexts/spanTagsContext';
 import {TraceItemAttributeProvider} from 'sentry/views/explore/contexts/traceItemAttributeContext';
 import {TraceItemDataset} from 'sentry/views/explore/types';
-import {hasEAPAlerts} from 'sentry/views/insights/common/utils/hasEAPAlerts';
+import {
+  deprecateTransactionAlerts,
+  hasEAPAlerts,
+} from 'sentry/views/insights/common/utils/hasEAPAlerts';
 
 import {
   DEFAULT_AGGREGATE,
@@ -263,6 +270,24 @@ class RuleConditionsForm extends PureComponent<Props, State> {
     };
   }
 
+  get disableTransactionAlertType() {
+    const {organization, alertType, isEditing} = this.props;
+
+    return (
+      isEditing &&
+      alertType &&
+      deprecateTransactionAlerts(organization) &&
+      DEPRECATED_TRANSACTION_ALERTS.includes(alertType) &&
+      hasEAPAlerts(organization)
+    );
+  }
+
+  get transactionAlertDisabledMessage() {
+    return t(
+      'Transaction based alerts are no longer supported. Create span alerts instead.'
+    );
+  }
+
   renderEventTypeFilter() {
     const {organization, disabled, alertType, isErrorMigration} = this.props;
 
@@ -387,7 +412,9 @@ class RuleConditionsForm extends PureComponent<Props, State> {
 
           return (
             <Select
-              isDisabled={disabled || disableProjectSelector}
+              isDisabled={
+                disabled || disableProjectSelector || this.disableTransactionAlertType
+              }
               value={selectedProject.id}
               options={projectOptions}
               onChange={({value}: {value: Project['id']}) => {
@@ -436,6 +463,7 @@ class RuleConditionsForm extends PureComponent<Props, State> {
       dataset,
       comparisonType,
       onTimeWindowChange,
+      isEditing,
     } = this.props;
 
     return (
@@ -445,34 +473,46 @@ class RuleConditionsForm extends PureComponent<Props, State> {
             <div>{t('Define your metric')}</div>
           </StyledListTitle>
         </StyledListItem>
-        <FormRow>
-          <WizardField
-            name="aggregate"
-            help={null}
-            organization={organization}
-            disabled={disabled}
-            project={project}
-            style={{
-              ...this.formElemBaseStyle,
-              flex: 1,
-            }}
-            inline={false}
-            flexibleControlStateSize
-            columnWidth={200}
-            alertType={alertType}
-            required
-          />
-          <Select
-            name="timeWindow"
-            styles={this.selectControlStyles}
-            options={getTimeWindowOptions(dataset, comparisonType)}
-            isDisabled={disabled}
-            value={timeWindow}
-            onChange={({value}: any) => onTimeWindowChange(value)}
-            inline={false}
-            flexibleControlStateSize
-          />
-        </FormRow>
+        <Tooltip
+          title={this.transactionAlertDisabledMessage}
+          disabled={!this.disableTransactionAlertType}
+          isHoverable
+        >
+          <FormRow>
+            <WizardField
+              name="aggregate"
+              help={null}
+              organization={organization}
+              disabled={disabled}
+              project={project}
+              style={{
+                ...this.formElemBaseStyle,
+                flex: 1,
+              }}
+              inline={false}
+              flexibleControlStateSize
+              columnWidth={200}
+              alertType={alertType}
+              required
+              isEditing={isEditing}
+              disabledReason={
+                this.disableTransactionAlertType
+                  ? this.transactionAlertDisabledMessage
+                  : undefined
+              }
+            />
+            <Select
+              name="timeWindow"
+              styles={this.selectControlStyles}
+              options={getTimeWindowOptions(dataset, comparisonType)}
+              isDisabled={disabled || this.disableTransactionAlertType}
+              value={timeWindow}
+              onChange={({value}: any) => onTimeWindowChange(value)}
+              inline={false}
+              flexibleControlStateSize
+            />
+          </FormRow>
+        </Tooltip>
       </Fragment>
     );
   }
@@ -545,34 +585,43 @@ class RuleConditionsForm extends PureComponent<Props, State> {
               )}
               {!isErrorMigration && this.renderInterval()}
               <StyledListItem>{t('Filter events')}</StyledListItem>
-              <FormRow noMargin columns={1 + (allowChangeEventTypes ? 1 : 0) + 1}>
-                {this.renderProjectSelector()}
-                <SelectField
-                  name="environment"
-                  placeholder={t('All Environments')}
-                  style={{
-                    ...this.formElemBaseStyle,
-                    minWidth: 230,
-                    flex: 1,
-                  }}
-                  styles={{
-                    singleValue: (base: any) => ({
-                      ...base,
-                    }),
-                    option: (base: any) => ({
-                      ...base,
-                    }),
-                  }}
-                  options={environmentOptions}
-                  isDisabled={
-                    disabled || this.state.environments === null || isErrorMigration
-                  }
-                  isClearable
-                  inline={false}
-                  flexibleControlStateSize
-                />
-                {allowChangeEventTypes && this.renderEventTypeFilter()}
-              </FormRow>
+              <Tooltip
+                title={this.transactionAlertDisabledMessage}
+                disabled={!this.disableTransactionAlertType}
+                isHoverable
+              >
+                <FormRow noMargin columns={1 + (allowChangeEventTypes ? 1 : 0) + 1}>
+                  {this.renderProjectSelector()}
+                  <SelectField
+                    name="environment"
+                    placeholder={t('All Environments')}
+                    style={{
+                      ...this.formElemBaseStyle,
+                      minWidth: 230,
+                      flex: 1,
+                    }}
+                    styles={{
+                      singleValue: (base: any) => ({
+                        ...base,
+                      }),
+                      option: (base: any) => ({
+                        ...base,
+                      }),
+                    }}
+                    options={environmentOptions}
+                    isDisabled={
+                      disabled ||
+                      this.state.environments === null ||
+                      isErrorMigration ||
+                      this.disableTransactionAlertType
+                    }
+                    isClearable
+                    inline={false}
+                    flexibleControlStateSize
+                  />
+                  {allowChangeEventTypes && this.renderEventTypeFilter()}
+                </FormRow>
+              </Tooltip>
               <FormRow noMargin>
                 <FormField
                   name="query"
@@ -604,7 +653,11 @@ class RuleConditionsForm extends PureComponent<Props, State> {
                           placeholder={this.searchPlaceholder}
                           searchSource="alert_builder"
                           filterKeys={filterKeys}
-                          disabled={disabled || isErrorMigration}
+                          disabled={
+                            disabled ||
+                            isErrorMigration ||
+                            this.disableTransactionAlertType
+                          }
                           onChange={onChange}
                           invalidMessages={{
                             [InvalidReason.WILDCARD_NOT_ALLOWED]: t(
diff --git a/static/app/views/alerts/rules/metric/ruleForm.spec.tsx b/static/app/views/alerts/rules/metric/ruleForm.spec.tsx
@@ -540,6 +540,52 @@ describe('Incident Rules Form', () => {
       );
     }, 10000);
 
+    it('disables editing transaction alert type if deprecated flag is enabled', async () => {
+      organization.features = [
+        ...organization.features,
+        'performance-view',
+        'visibility-explore-view',
+        'performance-transaction-deprecation-alerts',
+      ];
+      const metricRule = MetricRuleFixture();
+      createWrapper({
+        rule: {
+          ...metricRule,
+          aggregate: 'count()',
+          eventTypes: ['transaction'],
+          dataset: 'transactions',
+        },
+        ruleId: rule.id,
+      });
+
+      await userEvent.hover(screen.getAllByText('Throughput')[1]!);
+      expect(
+        await screen.findByText(
+          'Transaction based alerts are no longer supported. Create span alerts instead.'
+        )
+      ).toBeInTheDocument();
+
+      await userEvent.hover(screen.getByText('project-slug'));
+      expect(
+        await screen.findByText(
+          'Transaction based alerts are no longer supported. Create span alerts instead.'
+        )
+      ).toBeInTheDocument();
+
+      const radio = screen.getByRole('radio', {
+        name: 'Percent Change: {x%} higher or lower compared to previous period',
+      });
+      expect(radio).not.toBeChecked();
+
+      await userEvent.click(
+        screen.getByText(
+          'Percent Change: {x%} higher or lower compared to previous period'
+        )
+      );
+
+      await waitFor(() => expect(radio).toBeChecked());
+    });
+
     it('switches from percent change to count', async () => {
       createWrapper({
         ruleId: rule.id,
diff --git a/static/app/views/alerts/rules/metric/wizardField.tsx b/static/app/views/alerts/rules/metric/wizardField.tsx
@@ -17,6 +17,7 @@ import type {AlertType} from 'sentry/views/alerts/wizard/options';
 import {
   AlertWizardAlertNames,
   AlertWizardRuleTemplates,
+  DEPRECATED_TRANSACTION_ALERTS,
 } from 'sentry/views/alerts/wizard/options';
 import {QueryField} from 'sentry/views/discover/table/queryField';
 import {FieldValueKind} from 'sentry/views/discover/table/types';
@@ -50,6 +51,12 @@ export default function WizardField({
   alertType,
   ...fieldProps
 }: Props) {
+  const isDeprecatedTransactionAlertType =
+    alertType &&
+    deprecateTransactionAlerts(organization) &&
+    DEPRECATED_TRANSACTION_ALERTS.includes(alertType) &&
+    hasEAPAlerts(organization);
+
   const deprecatedTransactionAggregationOptions: MenuOption[] = [
     {
       label: AlertWizardAlertNames.throughput,
@@ -158,6 +165,15 @@ export default function WizardField({
               },
             ]
           : []),
+
+        ...(fieldProps.isEditing && isDeprecatedTransactionAlertType
+          ? [
+              {
+                label: AlertWizardAlertNames[alertType],
+                value: alertType,
+              },
+            ]
+          : []),
       ],
     },
     {
@@ -173,7 +189,7 @@ export default function WizardField({
 
   return (
     <FormField {...fieldProps}>
-      {({onChange, model, disabled}: any) => {
+      {({onChange, model, disabled, isEditing, disabledReason}: any) => {
         const aggregate = model.getValue('aggregate');
         const dataset: Dataset = model.getValue('dataset');
         const selectedTemplate: AlertType = alertType || 'eap_metrics';
@@ -183,7 +199,10 @@ export default function WizardField({
             dataset,
             alertType,
           });
-        const fieldOptions = generateFieldOptions({organization, ...fieldOptionsConfig});
+        const fieldOptions = generateFieldOptions({
+          organization,
+          ...fieldOptionsConfig,
+        });
         const fieldValue = getFieldValue(aggregate ?? '', model);
 
         const fieldKey =
@@ -208,7 +227,8 @@ export default function WizardField({
             <Select
               value={selectedTemplate}
               options={menuOptions}
-              disabled={disabled}
+              disabled={disabled || (isEditing && isDeprecatedTransactionAlertType)}
+              disabledReason={disabledReason}
               onChange={(option: MenuOption) => {
                 // @ts-expect-error TS(7053): Element implicitly has an 'any' type because expre... Remove this comment to see the full error message
                 const template = AlertWizardRuleTemplates[option.value];
@@ -239,7 +259,7 @@ export default function WizardField({
                 gridColumns={gridColumns}
                 inFieldLabels={inFieldLabels}
                 shouldRenderTag={false}
-                disabled={disabled}
+                disabled={disabled || (isEditing && isDeprecatedTransactionAlertType)}
                 hideParameterSelector={hideParameterSelector}
                 hidePrimarySelector={hidePrimarySelector}
               />
diff --git a/static/app/views/alerts/wizard/options.tsx b/static/app/views/alerts/wizard/options.tsx
@@ -64,6 +64,16 @@ export type MetricAlertType = Exclude<
   'issues' | 'uptime_monitor' | 'crons_monitor'
 >;
 
+export const DEPRECATED_TRANSACTION_ALERTS: AlertType[] = [
+  'throughput',
+  'trans_duration',
+  'apdex',
+  'failure_rate',
+  'lcp',
+  'fid',
+  'cls',
+];
+
 export const DatasetMEPAlertQueryTypes: Record<
   Exclude<Dataset, Dataset.ISSUE_PLATFORM | Dataset.SESSIONS | Dataset.REPLAYS>, // IssuePlatform (search_issues) is not used in alerts, so we can exclude it here
   MEPAlertsQueryType
