feat(detectors): Add permission checking to DisabledAlert enable button (#103175)

The DisabledAlert component now uses useCanEditDetector to verify that
users have alerts:write permission before allowing them to enable
detectors. Users without permission see a disabled button with a tooltip
explaining they don't have permission to enable the monitor.

Author: evanpurkhiser

static/app/views/detectors/components/details/common/disabledAlert.spec.tsx

@@ -1,41 +1,67 @@
 import {UptimeDetectorFixture} from 'sentry-fixture/detectors';
+import {OrganizationFixture} from 'sentry-fixture/organization';
+import {ProjectFixture} from 'sentry-fixture/project';
 
-import {render, screen, userEvent, waitFor} from 'sentry-test/reactTestingLibrary';
+import {act, render, screen, userEvent, waitFor} from 'sentry-test/reactTestingLibrary';
+
+import ProjectsStore from 'sentry/stores/projectsStore';
 
 import {DisabledAlert} from './disabledAlert';
 
 describe('DisabledAlert', () => {
+  const organization = OrganizationFixture({
+    access: ['org:write', 'alerts:write'],
+    alertsMemberWrite: true,
+  });
+  const project = ProjectFixture({access: ['alerts:write']});
+
+  beforeEach(() => {
+    MockApiClient.clearMockResponses();
+    act(() => ProjectsStore.loadInitialData([project]));
+  });
+
   it('does not render when detector is enabled', () => {
-    const detector = UptimeDetectorFixture({enabled: true});
+    const detector = UptimeDetectorFixture({enabled: true, projectId: project.id});
 
     const {container} = render(
-      <DisabledAlert detector={detector} message="Test disabled message" />
+      <DisabledAlert detector={detector} message="Test disabled message" />,
+      {organization}
     );
 
     expect(container).toBeEmptyDOMElement();
   });
 
   it('renders alert with message and enable button when detector is disabled', () => {
-    const detector = UptimeDetectorFixture({enabled: false});
+    const detector = UptimeDetectorFixture({enabled: false, projectId: project.id});
 
-    render(<DisabledAlert detector={detector} message="Test disabled message" />);
+    render(<DisabledAlert detector={detector} message="Test disabled message" />, {
+      organization,
+    });
 
     expect(screen.getByText('Test disabled message')).toBeInTheDocument();
     expect(screen.getByRole('button', {name: 'Enable'})).toBeInTheDocument();
   });
 
   it('enables detector when enable button is clicked', async () => {
-    const detector = UptimeDetectorFixture({id: '123', enabled: false});
+    const detector = UptimeDetectorFixture({
+      id: '123',
+      enabled: false,
+      projectId: project.id,
+    });
 
     const updateRequest = MockApiClient.addMockResponse({
       url: '/organizations/org-slug/detectors/123/',
       method: 'PUT',
       body: {...detector, enabled: true},
     });
 
-    render(<DisabledAlert detector={detector} message="Test message" />);
+    render(<DisabledAlert detector={detector} message="Test message" />, {
+      organization,
+    });
+
+    const enableButton = await screen.findByRole('button', {name: 'Enable'});
+    expect(enableButton).toBeEnabled();
 
-    const enableButton = screen.getByRole('button', {name: 'Enable'});
     await userEvent.click(enableButton);
 
     await waitFor(() => {
@@ -48,13 +74,4 @@ describe('DisabledAlert', () => {
       );
     });
   });
-
-  it('button is clickable when detector is disabled', () => {
-    const detector = UptimeDetectorFixture({id: '123', enabled: false});
-
-    render(<DisabledAlert detector={detector} message="Test message" />);
-
-    const enableButton = screen.getByRole('button', {name: 'Enable'});
-    expect(enableButton).toBeEnabled();
-  });
 });

static/app/views/detectors/components/details/common/disabledAlert.tsx

@@ -4,6 +4,7 @@ import {IconPlay} from 'sentry/icons';
 import {t} from 'sentry/locale';
 import type {Detector} from 'sentry/types/workflowEngine/detectors';
 import {useUpdateDetector} from 'sentry/views/detectors/hooks';
+import {useCanEditDetector} from 'sentry/views/detectors/utils/useCanEditDetector';
 
 type DisabledAlertProps = {
   detector: Detector;
@@ -17,6 +18,10 @@ type DisabledAlertProps = {
  */
 export function DisabledAlert({detector, message}: DisabledAlertProps) {
   const {mutate: updateDetector, isPending: isEnabling} = useUpdateDetector();
+  const canEdit = useCanEditDetector({
+    detectorType: detector.type,
+    projectId: detector.projectId,
+  });
 
   if (detector.enabled) {
     return null;
@@ -35,8 +40,11 @@ export function DisabledAlert({detector, message}: DisabledAlertProps) {
             size="xs"
             icon={<IconPlay />}
             onClick={handleEnable}
-            disabled={isEnabling}
+            disabled={isEnabling || !canEdit}
             aria-label={t('Enable')}
+            title={
+              canEdit ? undefined : t('You do not have permission to enable this monitor')
+            }
           >
             {t('Enable')}
           </Button>