feat(aci): Add detector deletion (#94567)

Author: scttcper

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

@@ -0,0 +1,43 @@
+import {DetectorFixture} from 'sentry-fixture/detectors';
+import {OrganizationFixture} from 'sentry-fixture/organization';
+
+import {
+  render,
+  renderGlobalModal,
+  screen,
+  userEvent,
+  within,
+} from 'sentry-test/reactTestingLibrary';
+
+import {EditDetectorActions} from './editDetectorActions';
+
+describe('EditDetectorActions', () => {
+  it('calls delete mutation when deletion is confirmed', async () => {
+    const detector = DetectorFixture();
+    const organization = OrganizationFixture();
+
+    const mockDeleteDetector = MockApiClient.addMockResponse({
+      url: `/organizations/${organization.slug}/detectors/${detector.id}/`,
+      method: 'DELETE',
+    });
+
+    const {router} = render(<EditDetectorActions detectorId={detector.id} />);
+    renderGlobalModal();
+
+    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/${detector.id}/`,
+      expect.anything()
+    );
+
+    // Redirect to the monitors list
+    expect(router.location.pathname).toBe(
+      `/organizations/${organization.slug}/issues/monitors/`
+    );
+  });
+});

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

@@ -0,0 +1,58 @@
+import {useCallback} from 'react';
+
+import {openConfirmModal} from 'sentry/components/confirm';
+import {Button} from 'sentry/components/core/button';
+import {ButtonBar} from 'sentry/components/core/button/buttonBar';
+import {t} from 'sentry/locale';
+import type {Detector} from 'sentry/types/workflowEngine/detectors';
+import {useNavigate} from 'sentry/utils/useNavigate';
+import useOrganization from 'sentry/utils/useOrganization';
+import {useDeleteDetectorMutation} from 'sentry/views/detectors/hooks/useDeleteDetectorMutation';
+import {makeMonitorBasePathname} from 'sentry/views/detectors/pathnames';
+
+interface EditDetectorActionsProps {
+  detectorId: Detector['id'];
+}
+
+export function EditDetectorActions({detectorId}: EditDetectorActionsProps) {
+  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(detectorId, {
+          onSuccess: () => {
+            navigate(makeMonitorBasePathname(organization.slug));
+          },
+        });
+      },
+    });
+  }, [deleteDetector, detectorId, navigate, organization.slug]);
+
+  return (
+    <div>
+      <ButtonBar gap={1}>
+        <Button type="button" priority="default" size="sm" onClick={() => {}}>
+          {t('Disable')}
+        </Button>
+        <Button
+          priority="danger"
+          onClick={handleDelete}
+          disabled={isDeleting}
+          busy={isDeleting}
+          size="sm"
+        >
+          {t('Delete')}
+        </Button>
+        <Button type="submit" priority="primary" size="sm">
+          {t('Save')}
+        </Button>
+      </ButtonBar>
+    </div>
+  );
+}

static/app/views/detectors/edit.tsx

@@ -20,6 +20,7 @@ import useOrganization from 'sentry/utils/useOrganization';
 import {useParams} from 'sentry/utils/useParams';
 import {DetectorForm} from 'sentry/views/detectors/components/forms';
 import {DetectorBaseFields} from 'sentry/views/detectors/components/forms/detectorBaseFields';
+import {EditDetectorActions} from 'sentry/views/detectors/components/forms/editDetectorActions';
 import type {MetricDetectorFormData} from 'sentry/views/detectors/components/forms/metricFormData';
 import {
   getMetricDetectorFormData,
@@ -114,6 +115,7 @@ export default function DetectorEdit() {
             <DetectorBreadcrumbs detectorId={params.detectorId} />
             <DetectorBaseFields />
           </Layout.HeaderContent>
+          <EditDetectorActions detectorId={detector.id} />
         </StyledLayoutHeader>
         <Layout.Body>
           <Layout.Main fullWidth>

static/app/views/detectors/hooks/useDeleteDetectorMutation.tsx

@@ -0,0 +1,31 @@
+import {addErrorMessage, addSuccessMessage} from 'sentry/actionCreators/indicator';
+import {t} from 'sentry/locale';
+import type {ApiQueryKey} from 'sentry/utils/queryClient';
+import {useMutation, useQueryClient} from 'sentry/utils/queryClient';
+import type RequestError from 'sentry/utils/requestError/requestError';
+import useApi from 'sentry/utils/useApi';
+import useOrganization from 'sentry/utils/useOrganization';
+
+export function useDeleteDetectorMutation() {
+  const org = useOrganization();
+  const api = useApi({persistInFlight: true});
+  const queryClient = useQueryClient();
+
+  return useMutation<void, RequestError, string>({
+    mutationFn: (detectorId: string) =>
+      api.requestPromise(`/organizations/${org.slug}/detectors/${detectorId}/`, {
+        method: 'DELETE',
+      }),
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        // Invalidate list of detectors
+        predicate: query =>
+          (query.queryKey as ApiQueryKey)[0] === `/organizations/${org.slug}/detectors/`,
+      });
+      addSuccessMessage(t('Monitor deleted.'));
+    },
+    onError: error => {
+      addErrorMessage(t('Unable to delete monitor: %s', error.message));
+    },
+  });
+}