feat(aci): set up monitor Disable action

static/app/components/workflowEngine/layout/edit.tsx

@@ -81,7 +81,7 @@ function Title({title, project}: {title: string; project?: AvatarProject}) {
 function Actions({children}: RequiredChildren) {
   return (
     <HeaderActions>
-      <Flex>{children}</Flex>
+      <Flex gap="sm">{children}</Flex>
     </HeaderActions>
   );
 }

static/app/types/workflowEngine/detectors.tsx

@@ -131,7 +131,7 @@ type BaseDetector = Readonly<{
   createdBy: string | null;
   dateCreated: string;
   dateUpdated: string;
-  disabled: boolean;
+  enabled: boolean;
   id: string;
   lastTriggered: string;
   name: string;
@@ -197,6 +197,7 @@ export interface BaseDetectorUpdatePayload {
   projectId: Detector['projectId'];
   type: Detector['type'];
   workflowIds: string[];
+  enabled?: boolean;
 }
 
 export interface UptimeDetectorUpdatePayload extends BaseDetectorUpdatePayload {

static/app/views/automations/components/editAutomationActions.tsx

@@ -34,9 +34,9 @@ export function EditAutomationActions({automation}: EditAutomationActionsProps)
         enabled: newEnabled,
       },
       {
-        onSuccess: () => {
+        onSuccess: data => {
           addSuccessMessage(
-            newEnabled ? t('Automation enabled') : t('Automation disabled')
+            data.enabled ? t('Automation enabled') : t('Automation disabled')
           );
         },
       }
@@ -58,16 +58,15 @@ export function EditAutomationActions({automation}: EditAutomationActionsProps)
   return (
     <div>
       <ButtonBar>
-        <Button priority="default" size="sm" onClick={toggleDisabled} busy={isUpdating}>
-          {automation.enabled ? t('Disable') : t('Enable')}
-        </Button>
         <Button
-          priority="danger"
-          onClick={handleDelete}
-          disabled={isDeleting}
-          busy={isDeleting}
+          priority="default"
           size="sm"
+          onClick={toggleDisabled}
+          disabled={isUpdating}
         >
+          {automation.enabled ? t('Disable') : t('Enable')}
+        </Button>
+        <Button priority="danger" onClick={handleDelete} disabled={isDeleting} size="sm">
           {t('Delete')}
         </Button>
         <Button type="submit" priority="primary" size="sm">

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: data => {
+          addSuccessMessage(data.enabled ? 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} disabled={isUpdating}>
+      {detector.enabled ? t('Disable') : t('Enable')}
     </Button>
   );
 }
@@ -54,3 +78,37 @@ export function EditDetectorAction({detector}: {detector: Detector}) {
     </LinkButton>
   );
 }
+
+export function DeleteDetectorAction({detector}: {detector: Detector}) {
+  const organization = useOrganization();
+  const navigate = useNavigate();
+  const {mutateAsync: 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: async () => {
+        await deleteDetector(detector.id);
+        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} 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/editDetectorLayout.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>