feat(detectors): Add disabled alert to uptime and cron detector details (#103165)

Adds a reusable DisabledAlert component that displays a muted alert when
a detector is disabled, with a one-click enable button. The alert
automatically hides when the detector becomes enabled.

Uptime detectors show: "This monitor is disabled and not recording
uptime checks."
Cron detectors show: "This monitor is disabled and not accepting
check-ins."

Fixes [NEW-565: Disabled monitors should show a indicator that disabling
means not accepting
check-ins](https://linear.app/getsentry/issue/NEW-565/disabled-monitors-should-show-a-indicator-that-disabling-means-not)
Fixes [NEW-616: Indicate that the monitor is
disabled](https://linear.app/getsentry/issue/NEW-616/indicate-that-the-monitor-is-disabled)

Author: evanpurkhiser

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

@@ -0,0 +1,60 @@
+import {UptimeDetectorFixture} from 'sentry-fixture/detectors';
+
+import {render, screen, userEvent, waitFor} from 'sentry-test/reactTestingLibrary';
+
+import {DisabledAlert} from './disabledAlert';
+
+describe('DisabledAlert', () => {
+  it('does not render when detector is enabled', () => {
+    const detector = UptimeDetectorFixture({enabled: true});
+
+    const {container} = render(
+      <DisabledAlert detector={detector} message="Test disabled message" />
+    );
+
+    expect(container).toBeEmptyDOMElement();
+  });
+
+  it('renders alert with message and enable button when detector is disabled', () => {
+    const detector = UptimeDetectorFixture({enabled: false});
+
+    render(<DisabledAlert detector={detector} message="Test disabled message" />);
+
+    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 updateRequest = MockApiClient.addMockResponse({
+      url: '/organizations/org-slug/detectors/123/',
+      method: 'PUT',
+      body: {...detector, enabled: true},
+    });
+
+    render(<DisabledAlert detector={detector} message="Test message" />);
+
+    const enableButton = screen.getByRole('button', {name: 'Enable'});
+    await userEvent.click(enableButton);
+
+    await waitFor(() => {
+      expect(updateRequest).toHaveBeenCalledWith(
+        expect.anything(),
+        expect.objectContaining({
+          method: 'PUT',
+          data: {detectorId: '123', enabled: true},
+        })
+      );
+    });
+  });
+
+  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

@@ -0,0 +1,49 @@
+import {Alert} from 'sentry/components/core/alert';
+import {Button} from 'sentry/components/core/button';
+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';
+
+type DisabledAlertProps = {
+  detector: Detector;
+  message: string;
+};
+
+/**
+ * Use this component on detector detail pages when you want users to quickly understand
+ * that a detector is disabled and not actively monitoring, and give them a one-click way
+ * to enable it. The alert automatically hides when the detector is enabled.
+ */
+export function DisabledAlert({detector, message}: DisabledAlertProps) {
+  const {mutate: updateDetector, isPending: isEnabling} = useUpdateDetector();
+
+  if (detector.enabled) {
+    return null;
+  }
+
+  const handleEnable = () => {
+    updateDetector({detectorId: detector.id, enabled: true});
+  };
+
+  return (
+    <Alert.Container>
+      <Alert
+        type="muted"
+        trailingItems={
+          <Button
+            size="xs"
+            icon={<IconPlay />}
+            onClick={handleEnable}
+            disabled={isEnabling}
+            aria-label={t('Enable')}
+          >
+            {t('Enable')}
+          </Button>
+        }
+      >
+        {message}
+      </Alert>
+    </Alert.Container>
+  );
+}

static/app/views/detectors/components/details/cron/index.spec.tsx

@@ -324,4 +324,22 @@ describe('CronDetectorDetails - check-ins', () => {
       expect(screen.queryByText(expectedText)).not.toBeInTheDocument();
     });
   });
+
+  describe('disabled alert', () => {
+    it('displays disabled alert with enable button when detector is disabled', async () => {
+      const disabledDetector = CronDetectorFixture({
+        id: '1',
+        projectId: project.id,
+        enabled: false,
+        dataSources: [cronDataSource],
+      });
+
+      render(<CronDetectorDetails detector={disabledDetector} project={project} />);
+
+      expect(
+        await screen.findByText('This monitor is disabled and not accepting check-ins.')
+      ).toBeInTheDocument();
+      expect(screen.getByRole('button', {name: 'Enable'})).toBeInTheDocument();
+    });
+  });
 });

static/app/views/detectors/components/details/cron/index.tsx

@@ -31,6 +31,7 @@ import {
 import {DetectorDetailsAssignee} from 'sentry/views/detectors/components/details/common/assignee';
 import {DetectorDetailsAutomations} from 'sentry/views/detectors/components/details/common/automations';
 import {DetectorDetailsDescription} from 'sentry/views/detectors/components/details/common/description';
+import {DisabledAlert} from 'sentry/views/detectors/components/details/common/disabledAlert';
 import {DetectorExtraDetails} from 'sentry/views/detectors/components/details/common/extraDetails';
 import {DetectorDetailsHeader} from 'sentry/views/detectors/components/details/common/header';
 import {DetectorDetailsOpenPeriodIssues} from 'sentry/views/detectors/components/details/common/openPeriodIssues';
@@ -156,6 +157,10 @@ export function CronDetectorDetails({detector, project}: CronDetectorDetailsProp
                 onTimezoneSelected={setTimezoneOverride}
               />
             </Flex>
+            <DisabledAlert
+              detector={detector}
+              message={t('This monitor is disabled and not accepting check-ins.')}
+            />
             {!!checkinErrors?.length && (
               <MonitorProcessingErrors
                 checkinErrors={checkinErrors}

static/app/views/detectors/components/details/uptime/index.spec.tsx

@@ -112,4 +112,17 @@ describe('UptimeDetectorDetails', () => {
 
     expect(await screen.findByText('95%')).toBeInTheDocument();
   });
+
+  it('displays disabled alert with enable button when detector is disabled', async () => {
+    const detector = UptimeDetectorFixture({id: '3', enabled: false});
+
+    render(<UptimeDetectorDetails detector={detector} project={project} />, {
+      organization,
+    });
+
+    expect(
+      await screen.findByText('This monitor is disabled and not recording uptime checks.')
+    ).toBeInTheDocument();
+    expect(screen.getByRole('button', {name: 'Enable'})).toBeInTheDocument();
+  });
 });

static/app/views/detectors/components/details/uptime/index.tsx

@@ -22,6 +22,7 @@ import {UptimeChecksTable} from 'sentry/views/alerts/rules/uptime/uptimeChecksTa
 import {DetectorDetailsAssignee} from 'sentry/views/detectors/components/details/common/assignee';
 import {DetectorDetailsAutomations} from 'sentry/views/detectors/components/details/common/automations';
 import {DetectorDetailsDescription} from 'sentry/views/detectors/components/details/common/description';
+import {DisabledAlert} from 'sentry/views/detectors/components/details/common/disabledAlert';
 import {DetectorExtraDetails} from 'sentry/views/detectors/components/details/common/extraDetails';
 import {DetectorDetailsHeader} from 'sentry/views/detectors/components/details/common/header';
 import {UptimeDuration} from 'sentry/views/insights/uptime/components/duration';
@@ -59,6 +60,10 @@ export function UptimeDetectorDetails({detector, project}: UptimeDetectorDetails
       <DetailLayout.Body>
         <DetailLayout.Main>
           <DatePageFilter />
+          <DisabledAlert
+            detector={detector}
+            message={t('This monitor is disabled and not recording uptime checks.')}
+          />
           <DetailsTimeline uptimeDetector={detector} onStatsLoaded={checkHasUnknown} />
           <Section title={t('Recent Check-Ins')}>
             <div>