refactor: [DI-27807] - Change status of edit & delete button in alert list table based on status (linode#13052)

* refactor: [DI-27807] - Change status of edit & delete button in alert list table based on status

* Added comment

* Added changeset

* refactor: [DI-27807] - Updated test cases

Author: nikhagra-akamai

packages/manager/.changeset/pr-13052-changed-1762261389682.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Changed
+---
+
+ACLP Alert: control `edit & delete button` based on status using flag ([#13052](https://github.com/linode/manager/pull/13052))

packages/manager/src/featureFlags.ts

@@ -1,6 +1,7 @@
 import type { OCA } from './features/OneClickApps/types';
 import type { Region } from '@linode/api-v4';
 import type {
+  AlertStatusType,
   CloudPulseServiceType,
   TPAProvider,
 } from '@linode/api-v4/lib/profile';
@@ -141,6 +142,7 @@ interface AclpAlerting {
   accountAlertLimit: number;
   accountMetricLimit: number;
   alertDefinitions: boolean;
+  editDisabledStatuses?: AlertStatusType[];
   notificationChannels: boolean;
   recentActivity: boolean;
 }

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

@@ -1,6 +1,7 @@
 import * as React from 'react';
 
 import { ActionMenu } from 'src/components/ActionMenu/ActionMenu';
+import { useFlags } from 'src/hooks/useFlags';
 
 import { getAlertTypeToActionsList } from '../Utils/AlertsActionMenu';
 
@@ -48,9 +49,19 @@ export interface AlertActionMenuProps {
 
 export const AlertActionMenu = (props: AlertActionMenuProps) => {
   const { alertLabel, alertStatus, alertType, handlers } = props;
+
+  // Get the statuses to be disabled in alert action menu based on the flag etc..
+  const { aclpAlerting } = useFlags();
+
   return (
     <ActionMenu
-      actionsList={getAlertTypeToActionsList(handlers, alertStatus)[alertType]}
+      actionsList={
+        getAlertTypeToActionsList(
+          handlers,
+          alertStatus,
+          aclpAlerting?.editDisabledStatuses
+        )[alertType]
+      }
       ariaLabel={`Action menu for Alert ${alertLabel}`}
     />
   );

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

@@ -172,6 +172,7 @@ describe('Alert Row', () => {
 
   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
         alert={alert}
@@ -182,7 +183,19 @@ describe('Alert Row', () => {
           handleStatusChange: vi.fn(),
         }}
         services={mockServices}
-      />
+      />,
+      {
+        flags: {
+          aclpAlerting: {
+            editDisabledStatuses: ['failed', 'in progress'],
+            accountAlertLimit: 10,
+            accountMetricLimit: 100,
+            alertDefinitions: true,
+            notificationChannels: false,
+            recentActivity: false,
+          },
+        },
+      }
     );
     const ActionMenu = getByLabelText(`Action menu for Alert ${alert.label}`);
     await userEvent.click(ActionMenu);

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

@@ -15,7 +15,8 @@ export const getAlertTypeToActionsList = (
     handleEdit,
     handleStatusChange,
   }: ActionHandlers,
-  alertStatus: AlertStatusType
+  alertStatus: AlertStatusType,
+  editDisableStatuses: AlertStatusType[] = []
 ): Record<AlertDefinitionType, Action[]> => ({
   // for now there is system and user alert types, in future more alert types can be added and action items will differ according to alert types
   system: [
@@ -34,7 +35,7 @@ export const getAlertTypeToActionsList = (
       title: 'Show Details',
     },
     {
-      disabled: alertStatus === 'in progress' || alertStatus === 'failed',
+      disabled: editDisableStatuses.includes(alertStatus),
       onClick: handleEdit,
       title: 'Edit',
     },
@@ -44,7 +45,7 @@ export const getAlertTypeToActionsList = (
       title: getTitleForStatusChange(alertStatus),
     },
     {
-      disabled: alertStatus === 'in progress' || alertStatus === 'failed',
+      disabled: editDisableStatuses.includes(alertStatus),
       onClick: handleDelete,
       title: 'Delete',
     },