feat(aci): set up monitor Disable action

Author: ameliahsu

static/app/types/workflowEngine/detectors.tsx

@@ -112,7 +112,7 @@ type BaseDetector = Readonly<{
   createdBy: string | null;
   dateCreated: string;
   dateUpdated: string;
-  disabled: boolean;
+  enabled: boolean;
   id: string;
   lastTriggered: string;
   name: string;
@@ -172,6 +172,7 @@ interface UpdateUptimeDataSourcePayload {
 }
 
 export interface BaseDetectorUpdatePayload {
+  enabled: boolean;
   name: string;
   owner: Detector['owner'];
   projectId: Detector['projectId'];

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

@@ -1,14 +1,41 @@
+import {useCallback} from 'react';
+
+import {addSuccessMessage} from 'sentry/actionCreators/indicator';
+import {openConfirmModal} from 'sentry/components/confirm';
 import {Button} from 'sentry/components/core/button';
 import {LinkButton} from 'sentry/components/core/button/linkButton';
 import {Link} from 'sentry/components/core/link';
 import {IconEdit} from 'sentry/icons';
 import {t, tct} from 'sentry/locale';
 import type {Detector} from 'sentry/types/workflowEngine/detectors';
+import {useNavigate} from 'sentry/utils/useNavigate';
 import useOrganization from 'sentry/utils/useOrganization';
-import {makeMonitorDetailsPathname} from 'sentry/views/detectors/pathnames';
+import {useUpdateDetector} from 'sentry/views/detectors/hooks';
+import {useDeleteDetectorMutation} from 'sentry/views/detectors/hooks/useDeleteDetectorMutation';
+import {
+  makeMonitorBasePathname,
+  makeMonitorDetailsPathname,
+} from 'sentry/views/detectors/pathnames';
 import {useCanEditDetector} from 'sentry/views/detectors/utils/useCanEditDetector';
 
 export function DisableDetectorAction({detector}: {detector: Detector}) {
+  const {mutate: updateDetector, isPending: isUpdating} = useUpdateDetector();
+
+  const toggleDisabled = useCallback(() => {
+    const newEnabled = !detector.enabled;
+    updateDetector(
+      {
+        detectorId: detector.id,
+        enabled: newEnabled,
+      },
+      {
+        onSuccess: () => {
+          addSuccessMessage(newEnabled ? t('Monitor enabled') : t('Monitor disabled'));
+        },
+      }
+    );
+  }, [updateDetector, detector.enabled, detector.id]);
+
   const canEdit = useCanEditDetector({
     detectorType: detector.type,
     projectId: detector.projectId,
@@ -18,12 +45,9 @@ export function DisableDetectorAction({detector}: {detector: Detector}) {
     return null;
   }
 
-  /**
-   * TODO: Implement disable detector
-   */
   return (
-    <Button size="sm" onClick={() => {}}>
-      {detector.disabled ? t('Enable') : t('Disable')}
+    <Button size="sm" onClick={toggleDisabled} busy={isUpdating}>
+      {detector.enabled ? t('Disable') : t('Enable')}
     </Button>
   );
 }
@@ -54,3 +78,45 @@ export function EditDetectorAction({detector}: {detector: Detector}) {
     </LinkButton>
   );
 }
+
+export function DeleteDetectorAction({detector}: {detector: Detector}) {
+  const organization = useOrganization();
+  const navigate = useNavigate();
+  const {mutate: deleteDetector, isPending: isDeleting} = useDeleteDetectorMutation();
+
+  const handleDelete = useCallback(() => {
+    openConfirmModal({
+      message: t('Are you sure you want to delete this monitor?'),
+      confirmText: t('Delete'),
+      priority: 'danger',
+      onConfirm: () => {
+        deleteDetector(detector.id, {
+          onSuccess: () => {
+            navigate(makeMonitorBasePathname(organization.slug));
+          },
+        });
+      },
+    });
+  }, [deleteDetector, detector.id, navigate, organization.slug]);
+
+  const canEdit = useCanEditDetector({
+    detectorType: detector.type,
+    projectId: detector.projectId,
+  });
+
+  if (!canEdit) {
+    return null;
+  }
+
+  return (
+    <Button
+      priority="danger"
+      onClick={handleDelete}
+      disabled={isDeleting}
+      busy={isDeleting}
+      size="sm"
+    >
+      {t('Delete')}
+    </Button>
+  );
+}

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

@@ -19,7 +19,7 @@ export function DetectorListRow({detector}: DetectorListRowProps) {
 
   return (
     <DetectorSimpleTableRow
-      variant={detector.disabled ? 'faded' : 'default'}
+      variant={detector.enabled ? 'default' : 'faded'}
       data-test-id="detector-list-row"
     >
       <SimpleTable.RowCell>

static/app/views/detectors/components/forms/editDetectorActions.spec.tsx

@@ -1,14 +1,19 @@
 import {useMemo} from 'react';
 
+import {Button} from 'sentry/components/core/button';
 import type {Data} from 'sentry/components/forms/types';
 import EditLayout from 'sentry/components/workflowEngine/layout/edit';
+import {t} from 'sentry/locale';
 import type {
   BaseDetectorUpdatePayload,
   Detector,
 } from 'sentry/types/workflowEngine/detectors';
+import {
+  DeleteDetectorAction,
+  DisableDetectorAction,
+} from 'sentry/views/detectors/components/details/common/actions';
 import {EditDetectorBreadcrumbs} from 'sentry/views/detectors/components/forms/common/breadcrumbs';
 import {DetectorBaseFields} from 'sentry/views/detectors/components/forms/detectorBaseFields';
-import {EditDetectorActions} from 'sentry/views/detectors/components/forms/editDetectorActions';
 import {useEditDetectorFormSubmit} from 'sentry/views/detectors/hooks/useEditDetectorFormSubmit';
 
 type EditDetectorLayoutProps<TDetector, TFormData, TUpdatePayload> = {
@@ -52,7 +57,11 @@ export function EditDetectorLayout<
         </EditLayout.HeaderContent>
 
         <EditLayout.Actions>
-          <EditDetectorActions detectorId={detector.id} />
+          <DisableDetectorAction detector={detector} />
+          <DeleteDetectorAction detector={detector} />
+          <Button type="submit" priority="primary" size="sm">
+            {t('Save')}
+          </Button>
         </EditLayout.Actions>
 
         <EditLayout.HeaderFields>

static/app/views/detectors/components/forms/editDetectorActions.tsx

@@ -117,6 +117,7 @@ export function EditExistingErrorDetectorForm({detector}: {detector: ErrorDetect
       type: 'error',
       name: detector.name,
       owner: detector.owner,
+      enabled: detector.enabled,
       projectId: detector.projectId,
       workflowIds: data.workflowIds,
       dataSource: {},

static/app/views/detectors/components/forms/editDetectorLayout.tsx

@@ -6,6 +6,7 @@ import {ProjectFixture} from 'sentry-fixture/project';
 
 import {
   render,
+  renderGlobalModal,
   screen,
   userEvent,
   waitFor,
@@ -87,6 +88,88 @@ describe('DetectorEdit', () => {
     });
   });
 
+  describe('EditDetectorActions', () => {
+    const mockDetector = MetricDetectorFixture();
+
+    it('calls delete mutation when deletion is confirmed', async () => {
+      MockApiClient.addMockResponse({
+        url: `/organizations/${organization.slug}/detectors/${mockDetector.id}/`,
+        body: mockDetector,
+      });
+
+      const mockDeleteDetector = MockApiClient.addMockResponse({
+        url: `/organizations/${organization.slug}/detectors/${mockDetector.id}/`,
+        method: 'DELETE',
+      });
+
+      const {router} = render(<DetectorEdit />, {organization, initialRouterConfig});
+      renderGlobalModal();
+
+      expect(
+        await screen.findByRole('link', {name: mockDetector.name})
+      ).toBeInTheDocument();
+
+      await userEvent.click(screen.getByRole('button', {name: 'Delete'}));
+
+      // Confirm the deletion
+      const dialog = await screen.findByRole('dialog');
+      await userEvent.click(within(dialog).getByRole('button', {name: 'Delete'}));
+
+      expect(mockDeleteDetector).toHaveBeenCalledWith(
+        `/organizations/${organization.slug}/detectors/${mockDetector.id}/`,
+        expect.anything()
+      );
+
+      // Redirect to the monitors list
+      expect(router.location.pathname).toBe(
+        `/organizations/${organization.slug}/issues/monitors/`
+      );
+    });
+
+    it('calls update mutation when enabling/disabling automation', async () => {
+      MockApiClient.addMockResponse({
+        url: `/organizations/${organization.slug}/detectors/${mockDetector.id}/`,
+        body: mockDetector,
+      });
+
+      const mockUpdateDetector = MockApiClient.addMockResponse({
+        url: `/organizations/${organization.slug}/detectors/${mockDetector.id}/`,
+        method: 'PUT',
+        body: {detectorId: mockDetector.id, enabled: !mockDetector.enabled},
+      });
+
+      render(<DetectorEdit />, {organization, initialRouterConfig});
+
+      expect(
+        await screen.findByRole('link', {name: mockDetector.name})
+      ).toBeInTheDocument();
+
+      // Wait for the component to load and display automation actions
+      expect(await screen.findByRole('button', {name: 'Disable'})).toBeInTheDocument();
+
+      MockApiClient.addMockResponse({
+        url: `/organizations/${organization.slug}/detectors/${mockDetector.id}/`,
+        body: {...mockDetector, enabled: !mockDetector.enabled},
+      });
+
+      // Click the toggle button to enable/disable the automation
+      await userEvent.click(screen.getByRole('button', {name: 'Disable'}));
+
+      // Verify the mutation was called with correct data
+      await waitFor(() => {
+        expect(mockUpdateDetector).toHaveBeenCalledWith(
+          `/organizations/${organization.slug}/detectors/${mockDetector.id}/`,
+          expect.objectContaining({
+            data: {detectorId: mockDetector.id, enabled: !mockDetector.enabled},
+          })
+        );
+      });
+
+      // Verify the button text has changed to "Enable"
+      expect(await screen.findByRole('button', {name: 'Enable'})).toBeInTheDocument();
+    });
+  });
+
   describe('Error', () => {
     const name = 'Test Error Detector';
     const mockDetector = ErrorDetectorFixture({id: '1', name, projectId: project.id});

static/app/views/detectors/components/forms/error/index.tsx

@@ -95,7 +95,11 @@ export function useUpdateDetector() {
   const api = useApi({persistInFlight: true});
   const queryClient = useQueryClient();
 
-  return useMutation<Detector, void, {detectorId: string} & BaseDetectorUpdatePayload>({
+  return useMutation<
+    Detector,
+    void,
+    {detectorId: string} & Partial<BaseDetectorUpdatePayload>
+  >({
     mutationFn: data =>
       api.requestPromise(`/organizations/${org.slug}/detectors/${data.detectorId}/`, {
         method: 'PUT',