fix(uptime): Make the actions menu delete button work (#76204)

Author: evanpurkhiser

static/app/views/alerts/list/rules/alertRulesList.spec.tsx

@@ -595,4 +595,45 @@ describe('AlertRulesList', () => {
     expect(await screen.findByText('Auto Detected')).toBeInTheDocument();
     expect(await screen.findByText('Up')).toBeInTheDocument();
   });
+
+  it('deletes an uptime rule', async () => {
+    const deletedRuleName = 'Uptime Rule';
+    const uptimeRule = UptimeRuleFixture({owner: undefined});
+
+    MockApiClient.addMockResponse({
+      url: '/organizations/org-slug/combined-rules/',
+      headers: {Link: pageLinks},
+      body: [{...uptimeRule, type: CombinedAlertType.UPTIME}],
+    });
+
+    const {router, project, organization} = initializeOrg({organization: defaultOrg});
+    render(<AlertRulesList />, {router, organization});
+    renderGlobalModal();
+
+    const deleteMock = MockApiClient.addMockResponse({
+      url: `/projects/${organization.slug}/${project.slug}/uptime/${uptimeRule.id}/`,
+      method: 'DELETE',
+      body: {},
+    });
+
+    const actions = (await screen.findAllByRole('button', {name: 'Actions'}))[0];
+
+    // Add a new response to the mock with no rules
+    const emptyListMock = MockApiClient.addMockResponse({
+      url: '/organizations/org-slug/combined-rules/',
+      headers: {Link: pageLinks},
+      body: [],
+    });
+
+    expect(
+      screen.queryByRole('link', {name: 'Uptime Rule Auto Detected'})
+    ).toBeInTheDocument();
+    await userEvent.click(actions);
+    await userEvent.click(screen.getByRole('menuitemradio', {name: 'Delete'}));
+    await userEvent.click(screen.getByRole('button', {name: 'Delete Rule'}));
+
+    expect(deleteMock).toHaveBeenCalledTimes(1);
+    expect(emptyListMock).toHaveBeenCalledTimes(1);
+    expect(screen.queryByText(deletedRuleName)).not.toBeInTheDocument();
+  });
 });

static/app/views/alerts/list/rules/alertRulesList.tsx

@@ -33,7 +33,7 @@ import useOrganization from 'sentry/utils/useOrganization';
 import useRouter from 'sentry/utils/useRouter';
 
 import FilterBar from '../../filterBar';
-import type {CombinedAlerts, CombinedMetricIssueAlerts} from '../../types';
+import type {CombinedAlerts} from '../../types';
 import {AlertRuleType, CombinedAlertType} from '../../types';
 import {getTeamParams, isIssueAlert} from '../../utils';
 import AlertHeader from '../header';
@@ -139,21 +139,15 @@ function AlertRulesList() {
   };
 
   const handleDeleteRule = async (projectId: string, rule: CombinedAlerts) => {
-    // TODO(davidenwang): Once we have edit apis for uptime alerts, fill this in
-    if (rule.type === CombinedAlertType.UPTIME) {
-      return;
-    }
+    const deleteEndpoints = {
+      [CombinedAlertType.ISSUE]: `/projects/${organization.slug}/${projectId}/rules/${rule.id}/`,
+      [CombinedAlertType.METRIC]: `/projects/${organization.slug}/${projectId}/rules/${rule.id}/`,
+      [CombinedAlertType.UPTIME]: `/projects/${organization.slug}/${projectId}/uptime/${rule.id}/`,
+    };
 
     try {
-      await api.requestPromise(
-        isIssueAlert(rule)
-          ? `/projects/${organization.slug}/${projectId}/rules/${rule.id}/`
-          : `/organizations/${organization.slug}/alert-rules/${rule.id}/`,
-        {
-          method: 'DELETE',
-        }
-      );
-      setApiQueryData<Array<CombinedMetricIssueAlerts | null>>(
+      await api.requestPromise(deleteEndpoints[rule.type], {method: 'DELETE'});
+      setApiQueryData<Array<CombinedAlerts | null>>(
         queryClient,
         getAlertListQueryKey(organization.slug, location.query),
         data => data?.filter(r => r?.id !== rule.id && r?.type !== rule.type)