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,8 @@ export interface EditAlertPayloadWithService
 }
 
 export type AlertStatusUpdateType = 'Enable' | 'Disable';
+
+export interface EntityAlertUpdatePayload {
+  entityId: string;
+  alert: Alert;
+}

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,68 @@
+import userEvent from '@testing-library/user-event';
+import React from 'react';
+
+import { alertFactory } from 'src/factories';
+import { renderWithTheme } from 'src/utilities/testHelpers';
+
+import { AlertConfirmationDialog } from './AlertConfirmationDialog';
+
+const entityName = 'entity-1';
+const alert = alertFactory.build({ service_type: 'dbaas' });
+const confirmFunction = vi.fn();
+
+describe('Alert confirmation dialog', () => {
+  it('should show confirmation dialog', () => {
+    const { getByTestId, getByText } = renderWithTheme(
+      <AlertConfirmationDialog
+        alert={alert}
+        entityName={entityName}
+        handleCancel={vi.fn()}
+        handleConfirm={confirmFunction}
+        isActive={true}
+        isOpen={true}
+      />
+    );
+
+    expect(getByTestId('confirmation-dialog')).toBeInTheDocument();
+    expect(getByText(`Disable ${alert.label} Alert?`)).toBeVisible();
+    expect(
+      getByText(`Are you sure you want to disable the alert for ${entityName}?`)
+    ).toBeInTheDocument();
+  });
+  it('should click confirm button', async () => {
+    const { getByText } = renderWithTheme(
+      <AlertConfirmationDialog
+        alert={alert}
+        entityName={entityName}
+        handleCancel={vi.fn()}
+        handleConfirm={confirmFunction}
+        isActive={true}
+        isOpen={true}
+      />
+    );
+
+    const button = getByText('Disable');
+
+    await userEvent.click(button);
+
+    expect(confirmFunction).toBeCalledWith(alert, true);
+  });
+  it('should show enable text', async () => {
+    const { getByTestId, getByText } = renderWithTheme(
+      <AlertConfirmationDialog
+        alert={alert}
+        entityName={entityName}
+        handleCancel={vi.fn()}
+        handleConfirm={confirmFunction}
+        isActive={false}
+        isOpen={true}
+      />
+    );
+
+    expect(getByTestId('confirmation-dialog')).toBeInTheDocument();
+    expect(getByText(`Enable ${alert.label} Alert?`)).toBeVisible();
+    expect(
+      getByText(`Are you sure you want to enable the alert for ${entityName}?`)
+    ).toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,89 @@
+import { ActionsPanel, Typography } from '@linode/ui';
+import React from 'react';
+
+import { ConfirmationDialog } from 'src/components/ConfirmationDialog/ConfirmationDialog';
+
+import type { Alert } from '@linode/api-v4';
+
+interface AlertConfirmationDialogProps {
+  /**
+   * alert object of the selected row
+   */
+  alert: Alert;
+
+  /**
+   * Name of the selected entity
+   */
+  entityName: string;
+
+  /**
+   * Handler function for cancel button
+   */
+  handleCancel: () => void;
+
+  /**
+   * Handler function for enable/disable button
+   * @param alert selected alert from the row
+   * @param currentStatus current state of the toggle button
+   */
+  handleConfirm: (alert: Alert, 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;
+}
+
+export const AlertConfirmationDialog = React.memo(
+  (props: AlertConfirmationDialogProps) => {
+    const {
+      alert,
+      entityName,
+      handleCancel,
+      handleConfirm,
+      isActive,
+      isLoading = false,
+      isOpen,
+    } = props;
+
+    const actionsPanel = (
+      <ActionsPanel
+        primaryButtonProps={{
+          label: isActive ? 'Disable' : 'Enable',
+          loading: isLoading,
+          onClick: () => handleConfirm(alert, isActive),
+        }}
+        secondaryButtonProps={{
+          disabled: isLoading,
+          label: 'Cancel',
+          onClick: handleCancel,
+        }}
+      />
+    );
+
+    return (
+      <ConfirmationDialog
+        actions={actionsPanel}
+        data-testid="confirmation-dialog"
+        onClose={handleCancel}
+        open={isOpen}
+        title={`${isActive ? 'Disable' : 'Enable'} ${alert.label} 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();
+  });
 });