DI-23201 : Add scaffolding for new edit resource component for system alerts in CloudPulse alerting

packages/api-v4/.changeset/pr-11583-upcoming-features-1738238193677.md

@@ -0,0 +1,5 @@
+---
+"@linode/api-v4": Upcoming Features
+---
+
+Add new `editAlertDefinition` endpoint to edit the resources associated with CloudPulse alerts ([#11583](https://github.com/linode/manager/pull/11583))

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

@@ -10,6 +10,7 @@ import {
   Alert,
   AlertServiceType,
   CreateAlertDefinitionPayload,
+  EditAlertDefinitionPayload,
   NotificationChannel,
 } from './types';
 import { BETA_API_ROOT as API_ROOT } from '../constants';
@@ -50,6 +51,20 @@ export const getAlertDefinitionByServiceTypeAndId = (
     setMethod('GET')
   );
 
+export const editAlertDefinition = (
+  data: EditAlertDefinitionPayload,
+  serviceType: string,
+  alertId: number
+) =>
+  Request<Alert>(
+    setURL(
+      `${API_ROOT}/monitor/services/${encodeURIComponent(
+        serviceType
+      )}/alert-definitions/${encodeURIComponent(alertId)}`
+    ),
+    setMethod('PUT'),
+    setData(data)
+  );
 export const getNotificationChannels = (params?: Params, filters?: Filter) =>
   Request<ResourcePage<NotificationChannel>>(
     setURL(`${API_ROOT}/monitor/alert-channels`),

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

@@ -294,3 +294,7 @@ export type NotificationChannel =
   | NotificationChannelSlack
   | NotificationChannelWebHook
   | NotificationChannelPagerDuty;
+
+export interface EditAlertDefinitionPayload {
+  entity_ids: string[];
+}

packages/manager/.changeset/pr-11583-upcoming-features-1738238243389.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+Add scaffolding for new edit resource component for system alerts in CloudPulse alerts section ([#11583](https://github.com/linode/manager/pull/11583))

packages/manager/src/features/CloudPulse/Alerts/AlertsDetail/AlertDetail.tsx

@@ -15,7 +15,7 @@ import { AlertDetailCriteria } from './AlertDetailCriteria';
 import { AlertDetailNotification } from './AlertDetailNotification';
 import { AlertDetailOverview } from './AlertDetailOverview';
 
-interface RouteParams {
+export interface AlertRouteParams {
   /**
    * The id of the alert for which the data needs to be shown
    */
@@ -27,7 +27,7 @@ interface RouteParams {
 }
 
 export const AlertDetail = () => {
-  const { alertId, serviceType } = useParams<RouteParams>();
+  const { alertId, serviceType } = useParams<AlertRouteParams>();
 
   const { data: alertDetails, isError, isFetching } = useAlertDefinitionQuery(
     Number(alertId),

packages/manager/src/features/CloudPulse/Alerts/AlertsLanding/AlertsDefinitionLanding.tsx

@@ -4,6 +4,7 @@ import { Route, Switch } from 'react-router-dom';
 import { AlertDetail } from '../AlertsDetail/AlertDetail';
 import { AlertListing } from '../AlertsListing/AlertListing';
 import { CreateAlertDefinition } from '../CreateAlert/CreateAlertDefinition';
+import { EditAlertResources } from '../EditAlert/EditAlertResources';
 
 export const AlertDefinitionLanding = () => {
   return (
@@ -19,6 +20,12 @@ export const AlertDefinitionLanding = () => {
       >
         <AlertDetail />
       </Route>
+      <Route
+        exact
+        path="/monitor/alerts/definitions/edit/:serviceType/:alertId"
+      >
+        <EditAlertResources />
+      </Route>
       <Route
         component={CreateAlertDefinition}
         path="/monitor/alerts/definitions/create"

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

@@ -11,6 +11,11 @@ export interface ActionHandlers {
    * Callback for show details action
    */
   handleDetails: () => void;
+
+  /**
+   * Callback for edit alerts action
+   */
+  handleEdit: () => void;
 }
 
 export interface AlertActionMenuProps {

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

@@ -33,6 +33,10 @@ export const AlertListing = () => {
     history.push(`${location.pathname}/detail/${serviceType}/${id}`);
   };
 
+  const handleEdit = ({ id, service_type: serviceType }: Alert) => {
+    history.push(`${location.pathname}/edit/${serviceType}/${id}`);
+  };
+
   if (alerts?.length === 0) {
     return (
       <Grid item xs={12}>
@@ -76,6 +80,7 @@ export const AlertListing = () => {
             <AlertTableRow
               handlers={{
                 handleDetails: () => handleDetails(alert),
+                handleEdit: () => handleEdit(alert),
               }}
               alert={alert}
               key={alert.id}

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

@@ -13,6 +13,7 @@ describe('Alert Row', () => {
       <AlertTableRow
         handlers={{
           handleDetails: vi.fn(),
+          handleEdit: vi.fn(),
         }}
         alert={alert}
       />
@@ -32,6 +33,7 @@ describe('Alert Row', () => {
       <AlertTableRow
         handlers={{
           handleDetails: vi.fn(),
+          handleEdit: vi.fn(),
         }}
         alert={alert}
       />

packages/manager/src/features/CloudPulse/Alerts/AlertsResources/AlertsResources.test.tsx

@@ -6,6 +6,7 @@ import { linodeFactory, regionFactory } from 'src/factories';
 import { renderWithTheme } from 'src/utilities/testHelpers';
 
 import { AlertResources } from './AlertsResources';
+import { CloudPulseResources } from '../../shared/CloudPulseResourcesSelect';
 
 vi.mock('src/queries/cloudpulse/resources', () => ({
   ...vi.importActual('src/queries/cloudpulse/resources'),
@@ -33,6 +34,14 @@ const linodes = linodeFactory.buildList(3).map((value, index) => {
 
 const searchPlaceholder = 'Search for a Region or Resource';
 const regionPlaceholder = 'Select Regions';
+const checkedAttribute = 'data-qa-checked';
+const cloudPulseResources: CloudPulseResources[] = linodes.map((linode) => {
+  return {
+    id: String(linode.id),
+    label: linode.label,
+    region: linode.region,
+  };
+});
 
 beforeAll(() => {
   window.scrollTo = vi.fn(); // mock for scrollTo and scroll
@@ -41,7 +50,7 @@ beforeAll(() => {
 
 beforeEach(() => {
   queryMocks.useResourcesQuery.mockReturnValue({
-    data: linodes,
+    data: cloudPulseResources,
     isError: false,
     isFetching: false,
   });
@@ -173,4 +182,51 @@ describe('AlertResources component tests', () => {
         .every((text, index) => text?.includes(linodes[index].region)) // validation
     ).toBe(true);
   });
+
+  it('should handle selection correctly and publish', async () => {
+    const handleResourcesSelection = vi.fn();
+
+    const { getByTestId } = renderWithTheme(
+      <AlertResources
+        alertResourceIds={['1', '2']}
+        handleResourcesSelection={handleResourcesSelection}
+        isSelectionsNeeded
+        serviceType="linode"
+      />
+    );
+    // validate, by default selections are there
+    expect(getByTestId('select_item_1')).toHaveAttribute(
+      checkedAttribute,
+      'true'
+    );
+    expect(getByTestId('select_item_3')).toHaveAttribute(
+      checkedAttribute,
+      'false'
+    );
+
+    // validate it selects 3
+    await userEvent.click(getByTestId('select_item_3'));
+    expect(getByTestId('select_item_3')).toHaveAttribute(
+      checkedAttribute,
+      'true'
+    );
+    expect(handleResourcesSelection).toHaveBeenCalledWith(['1', '2', '3']);
+
+    // unselect 3 and test
+    await userEvent.click(getByTestId('select_item_3'));
+    // validate it gets unselected
+    expect(getByTestId('select_item_3')).toHaveAttribute(
+      checkedAttribute,
+      'false'
+    );
+    expect(handleResourcesSelection).toHaveBeenLastCalledWith(['1', '2']);
+
+    // click select all
+    await userEvent.click(getByTestId('select_all_in_page_1'));
+    expect(handleResourcesSelection).toHaveBeenLastCalledWith(['1', '2', '3']);
+
+    // click select all again to unselect all
+    await userEvent.click(getByTestId('select_all_in_page_1'));
+    expect(handleResourcesSelection).toHaveBeenLastCalledWith([]);
+  });
 });