fix(aci): prevent deletion of system-created monitors in UI (#103838)

system-created monitors should not be deleted by anyone, regardless of
permissions

closes
https://linear.app/getsentry/issue/NEW-647/disable-bulk-delete-in-ui-when-selection-includes-error-monitors

Author: ameliahsu

static/app/views/detectors/components/detectorListTable/actions.tsx

@@ -19,6 +19,7 @@ interface DetectorsTableActionsProps {
   allResultsVisible: boolean;
   canEdit: boolean;
   detectorLimitReached: boolean;
+  hasSystemCreatedDetectors: boolean;
   pageSelected: boolean;
   queryCount: string;
   selected: Set<string>;
@@ -36,11 +37,14 @@ export function DetectorsTableActions({
   showEnable,
   showDisable,
   canEdit,
+  hasSystemCreatedDetectors,
   detectorLimitReached,
 }: DetectorsTableActionsProps) {
   const [allInQuerySelected, setAllInQuerySelected] = useState(false);
   const anySelected = selected.size > 0;
 
+  const canDelete = canEdit && !hasSystemCreatedDetectors;
+
   const {selection} = usePageFilters();
   const {query} = useLocationQuery({
     fields: {
@@ -199,14 +203,18 @@ export function DetectorsTableActions({
             </Tooltip>
           )}
           <Tooltip
-            title={t('You do not have permission to delete the selected monitors.')}
-            disabled={canEdit}
+            title={
+              hasSystemCreatedDetectors
+                ? t('Monitors managed by Sentry cannot be deleted.')
+                : t('You do not have permission to delete the selected monitors.')
+            }
+            disabled={canDelete}
           >
             <Button
               size="xs"
               priority="danger"
               onClick={handleDelete}
-              disabled={isDeleting || !canEdit}
+              disabled={isDeleting || !canDelete}
             >
               {t('Delete')}
             </Button>

static/app/views/detectors/components/detectorListTable/index.tsx

@@ -36,6 +36,7 @@ import {
   useMonitorViewContext,
   type MonitorListAdditionalColumn,
 } from 'sentry/views/detectors/monitorViewContext';
+import {detectorTypeIsUserCreateable} from 'sentry/views/detectors/utils/detectorTypeConfig';
 import {useCanEditDetectors} from 'sentry/views/detectors/utils/useCanEditDetector';
 import {CronServiceIncidents} from 'sentry/views/insights/crons/components/serviceIncidents';
 
@@ -139,6 +140,9 @@ function DetectorListTable({
 
   const selectedDetectors = detectors.filter(d => selected.has(d.id));
   const canEditDetectors = useCanEditDetectors({detectors: selectedDetectors});
+  const hasSystemCreatedDetectors = selectedDetectors.some(
+    d => !detectorTypeIsUserCreateable(d.type)
+  );
 
   const elementRef = useRef<HTMLDivElement>(null);
   const {width: containerWidth} = useDimensions<HTMLDivElement>({elementRef});
@@ -212,6 +216,7 @@ function DetectorListTable({
             showDisable={canDisable}
             showEnable={canEnable}
             canEdit={canEditDetectors}
+            hasSystemCreatedDetectors={hasSystemCreatedDetectors}
             // TODO: Check if metric detector limit is reached
             detectorLimitReached={false}
           />

static/app/views/detectors/list/allMonitors.spec.tsx

@@ -461,6 +461,26 @@ describe('DetectorsList', () => {
       });
     });
 
+    it('can not delete system-created detectors', async () => {
+      MockApiClient.addMockResponse({
+        url: '/organizations/org-slug/detectors/',
+        body: [
+          ErrorDetectorFixture({
+            name: 'System Created Detector',
+          }),
+        ],
+      });
+      render(<AllMonitors />, {organization});
+      await screen.findByText('System Created Detector');
+
+      const rows = screen.getAllByTestId('detector-list-row');
+      const firstRowCheckbox = within(rows[0]!).getByRole('checkbox');
+      await userEvent.click(firstRowCheckbox);
+
+      // Verify that delete button is disabled
+      expect(screen.getByRole('button', {name: 'Delete'})).toBeDisabled();
+    });
+
     it('shows option to select all query results when page is selected', async () => {
       const deleteRequest = MockApiClient.addMockResponse({
         url: '/organizations/org-slug/detectors/',