feat(aci): Lock editing of transaction metric monitors (#102107)

malwilley · shashjar · commit 0633202cad3f · 2025-11-04T10:53:11.000-08:00
Mirrors the changes in metric alerts. Existing transaction metric
queries cannot be edited and must be changed to span queries.
diff --git a/static/app/views/detectors/components/details/metric/transactionsDatasetWarning.tsx b/static/app/views/detectors/components/details/metric/transactionsDatasetWarning.tsx
@@ -3,6 +3,15 @@ import {ExternalLink} from 'sentry/components/core/link';
 import {tctCode} from 'sentry/locale';
 import useOrganization from 'sentry/utils/useOrganization';
 
+export const TRANSACTIONS_DATASET_DEPRECATION_MESSAGE = tctCode(
+  'The transaction dataset is being deprecated. Please use Span alerts instead. Spans are a superset of transactions, you can isolate transactions by using the [code:is_transaction:true] filter. Please read these [FAQLink:FAQs] for more information.',
+  {
+    FAQLink: (
+      <ExternalLink href="https://sentry.zendesk.com/hc/en-us/articles/40366087871515-FAQ-Transactions-Spans-Migration" />
+    ),
+  }
+);
+
 export function TransactionsDatasetWarning() {
   const organization = useOrganization();
   const hasWarning = organization.features.includes(
@@ -12,16 +21,5 @@ export function TransactionsDatasetWarning() {
     return null;
   }
 
-  return (
-    <Alert type="warning">
-      {tctCode(
-        'The transaction dataset is being deprecated. Please use Span alerts instead. Spans are a superset of transactions, you can isolate transactions by using the [code:is_transaction:true] filter. Please read these [FAQLink:FAQs] for more information.',
-        {
-          FAQLink: (
-            <ExternalLink href="https://sentry.zendesk.com/hc/en-us/articles/40366087871515-FAQ-Transactions-Spans-Migration" />
-          ),
-        }
-      )}
-    </Alert>
-  );
+  return <Alert type="warning">{TRANSACTIONS_DATASET_DEPRECATION_MESSAGE}</Alert>;
 }
diff --git a/static/app/views/detectors/components/forms/metric/metric.tsx b/static/app/views/detectors/components/forms/metric/metric.tsx
@@ -32,7 +32,10 @@ import {
   Dataset,
 } from 'sentry/views/alerts/rules/metric/types';
 import {hasLogAlerts} from 'sentry/views/alerts/wizard/utils';
-import {TransactionsDatasetWarning} from 'sentry/views/detectors/components/details/metric/transactionsDatasetWarning';
+import {
+  TRANSACTIONS_DATASET_DEPRECATION_MESSAGE,
+  TransactionsDatasetWarning,
+} from 'sentry/views/detectors/components/details/metric/transactionsDatasetWarning';
 import {AutomateSection} from 'sentry/views/detectors/components/forms/automateSection';
 import {AssignSection} from 'sentry/views/detectors/components/forms/common/assignSection';
 import {useDetectorFormContext} from 'sentry/views/detectors/components/forms/context';
@@ -212,6 +215,7 @@ function IntervalPicker() {
       }
       name={METRIC_DETECTOR_FORM_FIELDS.interval}
       choices={intervalChoices}
+      disabled={dataset === DetectorDataset.TRANSACTIONS}
     />
   );
 }
@@ -270,6 +274,8 @@ function DetectSection() {
   const aggregate = useMetricDetectorFormField(
     METRIC_DETECTOR_FORM_FIELDS.aggregateFunction
   );
+  const dataset = useMetricDetectorFormField(METRIC_DETECTOR_FORM_FIELDS.dataset);
+  const isTransactionsDataset = dataset === DetectorDataset.TRANSACTIONS;
 
   return (
     <Container>
@@ -310,9 +316,26 @@ function DetectSection() {
               }
             }}
           />
-          <IntervalPicker />
+          <Tooltip
+            title={TRANSACTIONS_DATASET_DEPRECATION_MESSAGE}
+            isHoverable
+            disabled={!isTransactionsDataset}
+          >
+            <DisabledSection disabled={isTransactionsDataset}>
+              <IntervalPicker />
+            </DisabledSection>
+          </Tooltip>
         </DatasetRow>
-        <Visualize />
+        <Tooltip
+          title={TRANSACTIONS_DATASET_DEPRECATION_MESSAGE}
+          isHoverable
+          disabled={!isTransactionsDataset}
+        >
+          <DisabledSection disabled={isTransactionsDataset}>
+            <Visualize />
+          </DisabledSection>
+        </Tooltip>
+
         <DetectionType />
         <Flex direction="column">
           {(!detectionType || detectionType === 'static') && (
@@ -539,3 +562,7 @@ const IntervalField = styled(SelectField)`
   margin-left: 0;
   border-bottom: none;
 `;
+
+const DisabledSection = styled('div')<{disabled: boolean}>`
+  ${p => (p.disabled ? `opacity: 0.6;` : '')}
+`;
diff --git a/static/app/views/detectors/components/forms/metric/queryFilterBuilder.tsx b/static/app/views/detectors/components/forms/metric/queryFilterBuilder.tsx
@@ -16,6 +16,7 @@ import {
   SectionLabelSecondary,
 } from 'sentry/views/detectors/components/forms/sectionLabel';
 import {getDatasetConfig} from 'sentry/views/detectors/datasetConfig/getDatasetConfig';
+import {DetectorDataset} from 'sentry/views/detectors/datasetConfig/types';
 
 export function DetectorQueryFilterBuilder() {
   const currentQuery = useMetricDetectorFormField(METRIC_DETECTOR_FORM_FIELDS.query);
@@ -45,6 +46,7 @@ export function DetectorQueryFilterBuilder() {
       flexibleControlStateSize
       label={t('Filter')}
       hideLabel
+      disabled={dataset === DetectorDataset.TRANSACTIONS}
     >
       {({ref: _ref, ...fieldProps}) => (
         <Flex direction="column" gap="xs" flex={1}>
diff --git a/static/app/views/detectors/components/forms/metric/visualize.tsx b/static/app/views/detectors/components/forms/metric/visualize.tsx
@@ -202,6 +202,8 @@ export function Visualize() {
   });
   const formContext = useContext(FormContext);
 
+  const isTransactionsDataset = dataset === DetectorDataset.TRANSACTIONS;
+
   // Parse the aggregateFunction into UI components on each render
   const {aggregate, parameters} = useMemo(() => {
     return parseAggregateFunction(aggregateFunction);
@@ -329,6 +331,7 @@ export function Visualize() {
             onChange={option => {
               handleAggregateChange(String(option.value));
             }}
+            disabled={isTransactionsDataset}
           />
         </FieldContainer>
         {aggregateMetadata?.parameters?.map((param, index) => {
@@ -353,7 +356,7 @@ export function Visualize() {
                   onChange={option => {
                     handleParameterChange(index, String(option.value));
                   }}
-                  disabled={lockSpanOptions}
+                  disabled={isTransactionsDataset || lockSpanOptions}
                 />
               ) : param.kind === 'dropdown' && param.options ? (
                 <StyledVisualizeSelect
@@ -370,6 +373,7 @@ export function Visualize() {
                   onChange={option => {
                     handleParameterChange(index, String(option.value));
                   }}
+                  disabled={isTransactionsDataset}
                 />
               ) : (
                 <StyledParameterInput
@@ -378,6 +382,7 @@ export function Visualize() {
                   onChange={e => {
                     handleParameterChange(index, e.target.value);
                   }}
+                  disabled={isTransactionsDataset}
                 />
               )}
             </FieldContainer>
diff --git a/static/app/views/detectors/datasetConfig/base.tsx b/static/app/views/detectors/datasetConfig/base.tsx
@@ -24,6 +24,7 @@ export interface DetectorSearchBarProps {
   onSearch: (query: string) => void;
   projectIds: number[];
   dataset?: DiscoverDatasets;
+  disabled?: boolean;
 }
 
 interface DetectorSeriesQueryOptions {
diff --git a/static/app/views/detectors/datasetConfig/components/traceSearchBar.tsx b/static/app/views/detectors/datasetConfig/components/traceSearchBar.tsx
@@ -17,6 +17,7 @@ export function TraceSearchBar({
   onClose,
   projectIds,
   dataset,
+  disabled,
 }: DetectorSearchBarProps) {
   const isLogs = dataset === DiscoverDatasets.OURLOGS;
   const traceDataset = isLogs ? TraceItemDataset.LOGS : TraceItemDataset.SPANS;
@@ -63,6 +64,7 @@ export function TraceSearchBar({
       onChange={(query, state) => {
         onClose?.(query, {validSearch: state.queryIsValid});
       }}
+      disabled={disabled}
     />
   );
 }
diff --git a/static/app/views/detectors/edit.spec.tsx b/static/app/views/detectors/edit.spec.tsx
@@ -809,5 +809,55 @@ describe('DetectorEdit', () => {
       expect(screen.getByRole('menuitemradio', {name: 'Spans'})).toBeInTheDocument();
       expect(screen.getByRole('menuitemradio', {name: 'Releases'})).toBeInTheDocument();
     });
+
+    it('disables interval, aggregate, and query when using the transactions dataset', async () => {
+      const transactionsDetector = MetricDetectorFixture({
+        id: '321',
+        name: 'Transaction Detector',
+        dataSources: [
+          SnubaQueryDataSourceFixture({
+            queryObj: {
+              id: '1',
+              status: 1,
+              subscription: '1',
+              snubaQuery: {
+                aggregate: 'p75()',
+                dataset: Dataset.GENERIC_METRICS,
+                id: '',
+                query: '',
+                timeWindow: 60,
+                eventTypes: [EventTypes.TRANSACTION],
+              },
+            },
+          }),
+        ],
+      });
+
+      MockApiClient.addMockResponse({
+        url: `/organizations/${organization.slug}/detectors/${transactionsDetector.id}/`,
+        body: transactionsDetector,
+      });
+
+      render(<DetectorEdit />, {
+        organization,
+        initialRouterConfig: {
+          route: '/organizations/:orgId/monitors/:detectorId/edit/',
+          location: {
+            pathname: `/organizations/${organization.slug}/monitors/${transactionsDetector.id}/edit/`,
+          },
+        },
+      });
+
+      expect(
+        await screen.findByRole('link', {name: transactionsDetector.name})
+      ).toBeInTheDocument();
+
+      // Interval select should be disabled
+      const intervalField = screen.getByLabelText('Interval');
+      expect(intervalField).toBeDisabled();
+
+      // Aggregate selector should be disabled
+      expect(screen.getByRole('button', {name: 'p75'})).toBeDisabled();
+    });
   });
 });
diff --git a/static/app/views/explore/components/traceItemSearchQueryBuilder.tsx b/static/app/views/explore/components/traceItemSearchQueryBuilder.tsx
@@ -24,6 +24,7 @@ export type TraceItemSearchQueryBuilderProps = {
   stringAttributes: TagCollection;
   stringSecondaryAliases: TagCollection;
   caseInsensitive?: CaseInsensitive;
+  disabled?: boolean;
   matchKeySuggestions?: Array<{key: string; valuePattern: RegExp}>;
   namespace?: string;
   onCaseInsensitiveClick?: SetCaseInsensitive;
@@ -145,6 +146,7 @@ export function TraceItemSearchQueryBuilder({
   portalTarget,
   projects,
   supportedAggregates = [],
+  disabled,
 }: TraceItemSearchQueryBuilderProps) {
   const searchQueryBuilderProps = useSearchQueryBuilderProps({
     itemType,
@@ -163,7 +165,13 @@ export function TraceItemSearchQueryBuilder({
     supportedAggregates,
   });
 
-  return <SearchQueryBuilder autoFocus={autoFocus} {...searchQueryBuilderProps} />;
+  return (
+    <SearchQueryBuilder
+      autoFocus={autoFocus}
+      disabled={disabled}
+      {...searchQueryBuilderProps}
+    />
+  );
 }
 
 function useFunctionTags(

Original file line number	Diff line number	Diff line change
`@@ -24,6 +24,7 @@ export interface DetectorSearchBarProps {`
`24`	`24`	`onSearch: (query: string) => void;`
`25`	`25`	`projectIds: number[];`
`26`	`26`	`dataset?: DiscoverDatasets;`
	`27`	`+ disabled?: boolean;`
`27`	`28`	`}`
`28`	`29`
`29`	`30`	`interface DetectorSeriesQueryOptions {`