ref(metrics): Add deprecated tag and other updates (#74843)

static/app/views/alerts/rules/metric/spanMetricsField.tsx

@@ -197,7 +197,7 @@ function SpanMetricField({field, project, onChange}: Props) {
       <SelectControl
         searchable
         isDisabled={isLoading || !selectedRule}
-        placeholder={t('Select a query')}
+        placeholder={t('Select a filter')}
         options={conditionOptions}
         value={selectedCondition?.id}
         onChange={handleConditionChange}

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

@@ -4,6 +4,7 @@ import styled from '@emotion/styled';
 
 import Feature from 'sentry/components/acl/feature';
 import FeatureDisabled from 'sentry/components/acl/featureDisabled';
+import Tag from 'sentry/components/badge/tag';
 import CreateAlertButton from 'sentry/components/createAlertButton';
 import {Hovercard} from 'sentry/components/hovercard';
 import * as Layout from 'sentry/components/layouts/thirds';
@@ -18,6 +19,7 @@ import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
 import type {Organization} from 'sentry/types/organization';
 import {trackAnalytics} from 'sentry/utils/analytics';
+import {hasCustomMetricsExtractionRules} from 'sentry/utils/metrics/features';
 import BuilderBreadCrumbs from 'sentry/views/alerts/builder/builderBreadCrumbs';
 import {Dataset} from 'sentry/views/alerts/rules/metric/types';
 import {AlertRuleType} from 'sentry/views/alerts/types';
@@ -156,11 +158,18 @@ function AlertWizard({organization, params, location, projectId}: AlertWizardPro
                 ({categoryHeading, options}) => (
                   <div key={categoryHeading}>
                     <CategoryTitle>{categoryHeading} </CategoryTitle>
-                    <RadioPanelGroup
+                    <WizardGroupedOptions
                       choices={options.map(alertType => {
-                        return [alertType, AlertWizardAlertNames[alertType]];
+                        return [
+                          alertType,
+                          AlertWizardAlertNames[alertType],
+                          alertType === 'custom_metrics' &&
+                          hasCustomMetricsExtractionRules(organization) ? (
+                            <Tag type="warning">{t('deprecated')}</Tag>
+                          ) : null,
+                        ];
                       })}
-                      onChange={handleChangeAlertOption}
+                      onChange={option => handleChangeAlertOption(option as AlertType)}
                       value={alertOption}
                       label="alert-option"
                     />
@@ -288,4 +297,10 @@ const WizardButtonContainer = styled('div')`
   }
 `;
 
+const WizardGroupedOptions = styled(RadioPanelGroup)`
+  label {
+    grid-template-columns: repeat(3, max-content);
+  }
+`;
+
 export default AlertWizard;

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

@@ -9,6 +9,7 @@ import diagramFailureRate from 'sentry-images/spot/alerts-wizard-failure-rate.sv
 import diagramFID from 'sentry-images/spot/alerts-wizard-fid.svg';
 import diagramIssues from 'sentry-images/spot/alerts-wizard-issues.svg';
 import diagramLCP from 'sentry-images/spot/alerts-wizard-lcp.svg';
+import diagramSpanMetrics from 'sentry-images/spot/alerts-wizard-span-metrics.svg';
 import diagramThroughput from 'sentry-images/spot/alerts-wizard-throughput.svg';
 import diagramTransactionDuration from 'sentry-images/spot/alerts-wizard-transaction-duration.svg';
 import diagramUsers from 'sentry-images/spot/alerts-wizard-users-experiencing-errors.svg';
@@ -143,14 +144,16 @@ export const AlertWizardPanelContent: Record<AlertType, PanelContent> = {
     illustration: diagramCustomMetrics,
   },
   span_metrics: {
-    description: t('Alert on span based metrics that you have configured.'),
+    description: t(
+      'Alert on custom span metrics that you have configured, such as number of sign-ups or duration of your login.'
+    ),
     examples: [
       t('When the number of sign-ups dropped by 10% compared to the previous week.'),
       t(
         'When the 75th percentile of your login flow is taking longer than 500 milliseconds.'
       ),
     ],
-    illustration: diagramCustomMetrics,
+    illustration: diagramSpanMetrics,
   },
   llm_tokens: {
     description: t(

static/app/views/dashboards/addWidget.tsx

@@ -4,6 +4,7 @@ import styled from '@emotion/styled';
 
 import Feature from 'sentry/components/acl/feature';
 import FeatureBadge from 'sentry/components/badge/featureBadge';
+import Tag from 'sentry/components/badge/tag';
 import type {ButtonProps} from 'sentry/components/button';
 import {Button} from 'sentry/components/button';
 import DropdownButton from 'sentry/components/dropdownButton';
@@ -14,7 +15,10 @@ import {IconAdd} from 'sentry/icons';
 import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
 import {trackAnalytics} from 'sentry/utils/analytics';
-import {hasCustomMetrics} from 'sentry/utils/metrics/features';
+import {
+  hasCustomMetrics,
+  hasCustomMetricsExtractionRules,
+} from 'sentry/utils/metrics/features';
 import useOrganization from 'sentry/utils/useOrganization';
 import {DataSet} from 'sentry/views/dashboards/widgetBuilder/utils';
 
@@ -142,7 +146,11 @@ export function AddWidgetButton({onAddWidget, ...buttonProps}: Props & ButtonPro
         key: DataSet.METRICS,
         label: t('Custom Metrics'),
         onAction: () => handleAction(DataSet.METRICS),
-        trailingItems: <FeatureBadge type="beta" />,
+        trailingItems: hasCustomMetricsExtractionRules(organization) ? (
+          <Tag type="warning">{t('deprecated')}</Tag>
+        ) : (
+          <FeatureBadge type="beta" />
+        ),
       });
     }