upcoming: [DI-23778] - Added. confirmation dialog in alerts contextual view

packages/api-v4/.changeset/pr-11785-upcoming-features-1741159921041.md

@@ -0,0 +1,5 @@
+---
+"@linode/api-v4": Upcoming Features
+---
+
+add `EntityAlertUpdatePayload` cloudpulse types.ts ([#11785](https://github.com/linode/manager/pull/11785))

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

@@ -82,3 +82,34 @@ export const getAlertDefinitionByServiceType = (serviceType: string) =>
     ),
     setMethod('GET')
   );
+
+  export const addEntityToAlert = (
+    serviceType: string,
+    entityId: string,
+    data: { 'alert-definition-id': number }
+  ) =>
+    Request<{}>(
+      setURL(
+        `${API_ROOT}/monitor/service/${encodeURIComponent(
+          serviceType
+        )}/entity/${encodeURIComponent(entityId)}/alert-definition`
+      ),
+      setMethod('POST'),
+      setData(data)
+    );
+
+  export const deleteEntityFromAlert = (
+    serviceType: string,
+    entityId: string,
+    alertId: number
+  ) =>
+    Request<{}>(
+      setURL(
+        `${API_ROOT}/monitor/service/${encodeURIComponent(
+          serviceType
+        )}/entity/${encodeURIComponent(
+          entityId
+        )}/alert-definition/${encodeURIComponent(alertId)}`
+      ),
+      setMethod('DELETE')
+    );

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

@@ -328,3 +328,9 @@ export interface EditAlertPayloadWithService
 }
 
 export type AlertStatusUpdateType = 'Enable' | 'Disable';
+
+export interface EntityAlertUpdatePayload {
+  serviceType: string;
+  entityId: string;
+  alertId: number;
+}

packages/manager/.changeset/pr-11785-upcoming-features-1741159867178.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+Add `AlertsConfirmationDialog.tsx`, update `AlertInformationActionTable` to show `confirmation dialog` on toggle ([#11785](https://github.com/linode/manager/pull/11785))

packages/manager/src/features/CloudPulse/Alerts/AlertsLanding/AlertConfirmationDialog.test.tsx

@@ -0,0 +1,42 @@
+import userEvent from '@testing-library/user-event';
+import React from 'react';
+
+import { renderWithTheme } from 'src/utilities/testHelpers';
+
+import { AlertConfirmationDialog } from './AlertConfirmationDialog';
+
+const alertId = 1;
+const alertName = 'alert-1';
+const entityName = 'entity-1';
+const serviceType = 'linode';
+const confirmFunction = vi.fn();
+const component = (
+  <AlertConfirmationDialog
+    alertId={alertId}
+    alertName={alertName}
+    entityName={entityName}
+    handleCancel={vi.fn()}
+    handleConfirm={confirmFunction}
+    isActive={true}
+    isOpen={true}
+    serviceType={serviceType}
+  />
+);
+
+describe('Alert confirmation dialog', () => {
+  it('should show confirmation dialog', () => {
+    const { getByTestId, getByText } = renderWithTheme(component);
+
+    expect(getByTestId('confirmation-dialog')).toBeInTheDocument();
+    expect(getByText(`Disable ${alertName} Alert?`)).toBeVisible();
+  });
+  it('should click confirm button', async () => {
+    const { getByText } = renderWithTheme(component);
+
+    const cancelButton = getByText('Disable');
+
+    await userEvent.click(cancelButton);
+
+    expect(confirmFunction).toBeCalledWith(alertId, serviceType, true);
+  });
+});

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

@@ -0,0 +1,105 @@
+import { Typography } from '@linode/ui';
+import React from 'react';
+
+import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel';
+import { ConfirmationDialog } from 'src/components/ConfirmationDialog/ConfirmationDialog';
+
+interface AlertConfirmationDialogProps {
+  /**
+   * Id of the selected alert row
+   */
+  alertId: number;
+
+  /**
+   * Name of the selected alert row
+   */
+  alertName: string;
+
+  /**
+   * Name of the selected entity
+   */
+  entityName: string;
+
+  /**
+   * Handler function for cancel button
+   */
+  handleCancel: () => void;
+
+  /**
+   * Handler function for enable/disable button
+   * @param alertId id of the alert for the selected row
+   * @param serviceType service type of the selected entity
+   * @param currentStatus current state of the toggle button
+   */
+  handleConfirm: (
+    alertId: number,
+    serviceType: string,
+    currentStatus: boolean
+  ) => void;
+
+  /**
+   * Current state of the toggle button whether active or not
+   */
+  isActive: boolean;
+
+  /**
+   * Loading state of the confirmation dialog
+   */
+  isLoading?: boolean;
+
+  /**
+   * Current state of the confirmation dialoge whether open or not
+   */
+  isOpen: boolean;
+
+  /**
+   * Service type of the selected entity
+   */
+  serviceType: string;
+}
+
+export const AlertConfirmationDialog = React.memo(
+  (props: AlertConfirmationDialogProps) => {
+    const {
+      alertId,
+      alertName,
+      entityName,
+      handleCancel,
+      handleConfirm,
+      isActive,
+      isLoading = false,
+      isOpen,
+      serviceType,
+    } = props;
+
+    const actionsPanel = React.useCallback(() => {
+      return (
+        <ActionsPanel
+          primaryButtonProps={{
+            label: isActive ? 'Disable' : 'Enable',
+            loading: isLoading,
+            onClick: () => handleConfirm(alertId, serviceType, isActive),
+          }}
+          secondaryButtonProps={{
+            label: 'Cancel',
+            onClick: handleCancel,
+          }}
+        />
+      );
+    }, [alertId, handleCancel, handleConfirm, isActive, serviceType]);
+    return (
+      <ConfirmationDialog
+        actions={actionsPanel}
+        data-testid="confirmation-dialog"
+        onClose={handleCancel}
+        open={isOpen}
+        title={`${isActive ? 'Disable' : 'Enable'} ${alertName} Alert?`}
+      >
+        <Typography variant="subtitle1">
+          Are you sure you want to {isActive ? 'disable' : 'enable'} the alert
+          for {entityName}?
+        </Typography>
+      </ConfirmationDialog>
+    );
+  }
+);

packages/manager/src/features/CloudPulse/Alerts/ContextualView/AlertInformationActionTable.test.tsx

@@ -1,4 +1,5 @@
 import { within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import React from 'react';
 
 import { alertFactory } from 'src/factories/cloudpulse/alerts';
@@ -64,4 +65,19 @@ describe('Alert Listing Reusable Table for contextual view', () => {
 
     expect(checkbox).toHaveProperty('checked');
   });
+
+  it('Should show confirm dialog on checkbox click', async () => {
+    const { findByTestId, findByText } = renderWithTheme(
+      <AlertInformationActionTable {...props} />
+    );
+    const alert = alerts[0];
+    const row = await findByTestId(alert.id);
+
+    const checkbox = await within(row).findByRole('checkbox');
+
+    await userEvent.click(checkbox);
+
+    const text = await findByText(`Disable ${alert.label} Alert?`);
+    expect(text).toBeInTheDocument();
+  });
 });