upcoming: [DI-23784] - Restrict actions in alerts action menu

packages/api-v4/src/cloudpulse/types.ts

@@ -9,7 +9,7 @@ export type DimensionFilterOperatorType =
   | 'startswith'
   | 'endswith';
 export type AlertDefinitionType = 'system' | 'user';
-export type AlertStatusType = 'enabled' | 'disabled';
+export type AlertStatusType = 'enabled' | 'disabled' | 'in progress' | 'failed';
 export type CriteriaConditionType = 'ALL';
 export type MetricUnitType =
   | 'number'

packages/manager/.changeset/pr-11860-upcoming-features-1742209993496.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+Restrict enable/disable actions in alerts action menu based on alert status at `AlertsActionMenu.ts` ([#11860](https://github.com/linode/manager/pull/11860))

packages/manager/cypress/support/constants/alert.ts

@@ -41,4 +41,6 @@ export const aggregationTypeMap: Record<MetricAggregationType, string> = {
 export const statusMap: Record<AlertStatusType, string> = {
   disabled: 'Disabled',
   enabled: 'Enabled',
+  failed: 'Failed',
+  'in progress': 'In Progress',
 };

packages/manager/src/features/CloudPulse/Alerts/AlertsListing/AlertTableRow.test.tsx

@@ -143,4 +143,48 @@ describe('Alert Row', () => {
     await userEvent.click(ActionMenu);
     expect(getByText('Disable')).toBeInTheDocument();
   });
+
+  it("should disable 'Disable' action item in menu if alert has no enabled/disabled status", async () => {
+    const alert = alertFactory.build({ status: 'in progress', type: 'user' });
+    const { getByLabelText, getByText } = renderWithTheme(
+      <AlertTableRow
+        handlers={{
+          handleDetails: vi.fn(),
+          handleEdit: vi.fn(),
+          handleEnableDisable: vi.fn(),
+        }}
+        alert={alert}
+        services={mockServices}
+      />
+    );
+    const ActionMenu = getByLabelText(`Action menu for Alert ${alert.label}`);
+    await userEvent.click(ActionMenu);
+    expect(getByText('In Progress')).toBeInTheDocument();
+    expect(getByText('Disable').closest('li')).toHaveAttribute(
+      'aria-disabled',
+      'true'
+    );
+  });
+
+  it("should disable 'Edit' action item in menu if alert has no enabled/disabled status", async () => {
+    const alert = alertFactory.build({ status: 'in progress', type: 'user' });
+    const { getByLabelText, getByText } = renderWithTheme(
+      <AlertTableRow
+        handlers={{
+          handleDetails: vi.fn(),
+          handleEdit: vi.fn(),
+          handleEnableDisable: vi.fn(),
+        }}
+        alert={alert}
+        services={mockServices}
+      />
+    );
+    const ActionMenu = getByLabelText(`Action menu for Alert ${alert.label}`);
+    await userEvent.click(ActionMenu);
+    expect(getByText('In Progress')).toBeInTheDocument();
+    expect(getByText('Edit').closest('li')).toHaveAttribute(
+      'aria-disabled',
+      'true'
+    );
+  });
 });

packages/manager/src/features/CloudPulse/Alerts/AlertsListing/AlertTableRow.tsx

@@ -1,5 +1,4 @@
 import { Box } from '@linode/ui';
-import { capitalize } from '@linode/utilities';
 import * as React from 'react';
 import { useLocation } from 'react-router-dom';
 
@@ -9,11 +8,12 @@ import { TableCell } from 'src/components/TableCell';
 import { TableRow } from 'src/components/TableRow';
 import { formatDate } from 'src/utilities/formatDate';
 
+import { alertStatusToIconStatusMap, alertStatuses } from '../constants';
 import { AlertActionMenu } from './AlertActionMenu';
 
 import type { Item } from '../constants';
 import type { ActionHandlers } from './AlertActionMenu';
-import type { Alert, AlertServiceType, AlertStatusType } from '@linode/api-v4';
+import type { Alert, AlertServiceType } from '@linode/api-v4';
 
 interface Props {
   /**
@@ -30,15 +30,6 @@ interface Props {
   services: Item<string, AlertServiceType>[];
 }
 
-const getStatus = (status: AlertStatusType) => {
-  if (status === 'enabled') {
-    return 'active';
-  } else if (status === 'disabled') {
-    return 'inactive';
-  }
-  return 'other';
-};
-
 export const AlertTableRow = (props: Props) => {
   const { alert, handlers, services } = props;
   const location = useLocation();
@@ -53,8 +44,11 @@ export const AlertTableRow = (props: Props) => {
       </TableCell>
       <TableCell>
         <Box alignItems="center" display="flex">
-          <StatusIcon data-testid="status-icon" status={getStatus(status)} />
-          {capitalize(status)}
+          <StatusIcon
+            data-testid="status-icon"
+            status={alertStatusToIconStatusMap[status]}
+          />
+          {alertStatuses[status]}
         </Box>
       </TableCell>
       <TableCell>

packages/manager/src/features/CloudPulse/Alerts/AlertsListing/constants.ts

@@ -30,6 +30,8 @@ export const statusToActionMap: Record<
 > = {
   disabled: 'Enable',
   enabled: 'Disable',
+  failed: 'Disable',
+  'in progress': 'Disable',
 };
 
 export const AlertContextualViewTableHeaderMap: TableColumnHeader[] = [

packages/manager/src/features/CloudPulse/Alerts/Utils/AlertsActionMenu.ts

@@ -29,10 +29,12 @@ export const getAlertTypeToActionsList = (
       title: 'Show Details',
     },
     {
+      disabled: alertStatus === 'in progress' || alertStatus === 'failed',
       onClick: handleEdit,
       title: 'Edit',
     },
     {
+      disabled: alertStatus === 'in progress' || alertStatus === 'failed',
       onClick: handleEnableDisable,
       title: getTitleForEnableDisable(alertStatus),
     },

packages/manager/src/features/CloudPulse/Alerts/constants.ts

@@ -128,6 +128,8 @@ export const severityMap: Record<AlertSeverityType, string> = {
 export const alertStatusToIconStatusMap: Record<AlertStatusType, Status> = {
   disabled: 'inactive',
   enabled: 'active',
+  failed: 'error',
+  'in progress': 'other',
 };
 
 export const channelTypeOptions: Item<string, ChannelType>[] = [
@@ -163,6 +165,8 @@ export const dimensionOperatorTypeMap: Record<
 export const alertStatuses: Record<AlertStatusType, string> = {
   disabled: 'Disabled',
   enabled: 'Enabled',
+  failed: 'Failed',
+  'in progress': 'In Progress',
 };
 
 export const alertStatusOptions: Item<

packages/manager/src/mocks/serverHandlers.ts

@@ -2524,6 +2524,20 @@ export const handlers = [
       ...defaultAlertsWithServiceType,
       ...alertFactory.buildList(3),
       ...customAlertsWithServiceType,
+      ...alertFactory.buildList(2, {
+        created_by: 'user1',
+        service_type: 'linode',
+        status: 'in progress',
+        type: 'user',
+        updated_by: 'user1',
+      }),
+      ...alertFactory.buildList(2, {
+        created_by: 'user1',
+        service_type: 'linode',
+        status: 'failed',
+        type: 'user',
+        updated_by: 'user1',
+      }),
     ];
     return HttpResponse.json(makeResourcePage(alerts));
   }),