[DI-26731] - Alerts contextual view enhancement (linode#12730)

* [DI-26371] - Update handler, reset state, update query

* [DI-26371] - Update useffect

* [DI-26371] - update mutation hook

* [DI-26371] - Fix mutation query hook

* [DI-26371] - Fix mutation query hook

* [DI-26731] - Add comments

* [DI-26731] - Add changeset

* [DI-26731] - Fix saved state issue

Author: ankita-akamai

packages/manager/.changeset/pr-12730-upcoming-features-1755666320168.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+CloudPulse - Alerts: Update handler in `AlertReusableComponenr.tsx`, reset state in `AlertInformationActionTable.tsx`, update query in `alerts.ts` ([#12730](https://github.com/linode/manager/pull/12730))

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

@@ -16,6 +16,7 @@ import { ALERTS_BETA_PROMPT } from 'src/features/Linodes/constants';
 import { useServiceAlertsMutation } from 'src/queries/cloudpulse/alerts';
 import { getAPIErrorOrDefault } from 'src/utilities/errorUtils';
 
+import { compareArrays } from '../../Utils/FilterBuilder';
 import { useContextualAlertsState } from '../../Utils/utils';
 import { AlertConfirmationDialog } from '../AlertsLanding/AlertConfirmationDialog';
 import { ALERT_SCOPE_TOOLTIP_CONTEXTUAL } from '../constants';
@@ -57,10 +58,13 @@ export interface AlertInformationActionTableProps {
 
   /**
    * Called when an alert is toggled on or off.
-   * Only use in create flow.
    * @param payload enabled alerts ids
+   * @param hasUnsavedChanges boolean to check if there are unsaved changes
    */
-  onToggleAlert?: (payload: CloudPulseAlertsPayload) => void;
+  onToggleAlert?: (
+    payload: CloudPulseAlertsPayload,
+    hasUnsavedChanges?: boolean
+  ) => void;
 
   /**
    * Column name by which columns will be ordered by default
@@ -104,9 +108,13 @@ export interface AlertRowPropsOptions {
 
   /**
    * Callback function to handle alert toggle
-   * Only use in create flow.
+   * @param payload enabled alerts ids
+   * @param hasUnsavedChanges boolean to check if there are unsaved changes
    */
-  onToggleAlert?: (payload: CloudPulseAlertsPayload) => void;
+  onToggleAlert?: (
+    payload: CloudPulseAlertsPayload,
+    hasUnsavedChanges?: boolean
+  ) => void;
 }
 
 export const AlertInformationActionTable = (
@@ -135,8 +143,13 @@ export const AlertInformationActionTable = (
   const isEditMode = !!entityId;
   const isCreateMode = !isEditMode;
 
-  const { enabledAlerts, setEnabledAlerts, hasUnsavedChanges } =
-    useContextualAlertsState(alerts, entityId);
+  const {
+    enabledAlerts,
+    setEnabledAlerts,
+    hasUnsavedChanges,
+    initialState,
+    resetToInitialState,
+  } = useContextualAlertsState(alerts, entityId);
 
   const { mutateAsync: updateAlerts } = useServiceAlertsMutation(
     serviceType,
@@ -145,7 +158,7 @@ export const AlertInformationActionTable = (
 
   // To send initial state of alerts through toggle handler function
   React.useEffect(() => {
-    if (onToggleAlert) {
+    if (!isEditMode && onToggleAlert) {
       onToggleAlert(enabledAlerts);
     }
   }, []);
@@ -165,6 +178,8 @@ export const AlertInformationActionTable = (
           enqueueSnackbar('Your settings for alerts have been saved.', {
             variant: 'success',
           });
+          // Reset the state to sync with the updated alerts from API
+          resetToInitialState();
         })
         .catch(() => {
           enqueueSnackbar('Alerts changes were not saved, please try again.', {
@@ -176,7 +191,7 @@ export const AlertInformationActionTable = (
           setIsDialogOpen(false);
         });
     },
-    [updateAlerts, enqueueSnackbar]
+    [updateAlerts, enqueueSnackbar, resetToInitialState]
   );
 
   const handleToggleAlert = React.useCallback(
@@ -199,15 +214,19 @@ export const AlertInformationActionTable = (
           alertIds.push(alert.id);
         }
 
-        // Only call onToggleAlert in create flow
+        const hasNewUnsavedChanges =
+          !compareArrays(newPayload.system ?? [], initialState.system ?? []) ||
+          !compareArrays(newPayload.user ?? [], initialState.user ?? []);
+
+        // Call onToggleAlert in both create and edit flow
         if (onToggleAlert) {
-          onToggleAlert(newPayload);
+          onToggleAlert(newPayload, hasNewUnsavedChanges);
         }
 
         return newPayload;
       });
     },
-    [onToggleAlert, setEnabledAlerts]
+    [initialState, onToggleAlert, setEnabledAlerts]
   );
 
   const handleCustomPageChange = React.useCallback(

packages/manager/src/features/CloudPulse/Alerts/ContextualView/AlertReusableComponent.tsx

@@ -44,8 +44,12 @@ interface AlertReusableComponentProps {
   /**
    * Called when an alert is toggled on or off.
    * @param payload enabled alerts ids
+   * @param hasUnsavedChanges boolean to check if there are unsaved changes
    */
-  onToggleAlert?: (payload: CloudPulseAlertsPayload) => void;
+  onToggleAlert?: (
+    payload: CloudPulseAlertsPayload,
+    hasUnsavedChanges?: boolean
+  ) => void;
 
   /**
    * Region ID for the selected entity

packages/manager/src/features/CloudPulse/Utils/utils.ts

@@ -84,7 +84,7 @@ export const useIsACLPEnabled = (): {
 /**
  * @param alerts List of alerts to be displayed
  * @param entityId Id of the selected entity
- * @returns enabledAlerts, setEnabledAlerts, hasUnsavedChanges, initialState
+ * @returns enabledAlerts, setEnabledAlerts, hasUnsavedChanges, initialState, resetToInitialState
  */
 export const useContextualAlertsState = (
   alerts: Alert[],
@@ -123,6 +123,11 @@ export const useContextualAlertsState = (
 
   const [enabledAlerts, setEnabledAlerts] = React.useState(initialState);
 
+  // Reset function to sync with latest initial state
+  const resetToInitialState = React.useCallback(() => {
+    setEnabledAlerts(initialState);
+  }, [initialState]);
+
   // Check if the enabled alerts have changed from the initial state
   const hasUnsavedChanges = React.useMemo(() => {
     return (
@@ -136,6 +141,7 @@ export const useContextualAlertsState = (
     setEnabledAlerts,
     hasUnsavedChanges,
     initialState,
+    resetToInitialState,
   };
 };
 

packages/manager/src/queries/cloudpulse/alerts.ts

@@ -252,10 +252,44 @@ export const useServiceAlertsMutation = (
     mutationFn: (payload: CloudPulseAlertsPayload) => {
       return updateServiceAlerts(serviceType, entityId, payload);
     },
-    onSuccess() {
+    onSuccess(_, payload) {
+      const allAlerts = queryClient.getQueryData<Alert[]>(
+        queryFactory.alerts._ctx.all().queryKey
+      );
+
+      // Get alerts previously enabled for this entity
+      const oldEnabledAlertIds =
+        allAlerts
+          ?.filter((alert) => alert.entity_ids.includes(entityId))
+          .map((alert) => alert.id) || [];
+
+      // Combine enabled user and system alert IDs from payload
+      const newEnabledAlertIds = [
+        ...(payload.user ?? []),
+        ...(payload.system ?? []),
+      ];
+
+      // Get unique list of all enabled alert IDs for cache invalidation
+      const alertIdsToInvalidate = Array.from(
+        new Set([...oldEnabledAlertIds, ...newEnabledAlertIds])
+      );
+
       queryClient.invalidateQueries({
         queryKey: queryFactory.resources(serviceType).queryKey,
       });
+
+      queryClient.invalidateQueries({
+        queryKey: queryFactory.alerts._ctx.all().queryKey,
+      });
+
+      alertIdsToInvalidate.forEach((alertId) => {
+        queryClient.invalidateQueries({
+          queryKey: queryFactory.alerts._ctx.alertByServiceTypeAndId(
+            serviceType,
+            String(alertId)
+          ).queryKey,
+        });
+      });
     },
   });
 };