change: [DI-26188] - Updated Alert Reusable component based on the latest mockup

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

@@ -63,6 +63,7 @@ export const AlertConfirmationDialog = React.memo(
           disabled: isLoading,
           label: 'Cancel',
           onClick: handleCancel,
+          buttonType: 'outlined',
         }}
       />
     );

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

@@ -69,7 +69,9 @@ describe('Alert Listing Reusable Table for contextual view', () => {
   });
 
   it('Should show confirm dialog on save button click when changes are made', async () => {
-    renderWithTheme(<AlertInformationActionTable {...props} />);
+    renderWithTheme(
+      <AlertInformationActionTable {...props} showConfirmationDialog />
+    );
 
     // First toggle an alert to make changes
     const alert = alerts[0];
@@ -86,6 +88,24 @@ describe('Alert Listing Reusable Table for contextual view', () => {
     expect(screen.getByTestId('confirmation-dialog')).toBeVisible();
   });
 
+  it('Should hide confirm dialog on save button click when changes are made', async () => {
+    renderWithTheme(<AlertInformationActionTable {...props} />);
+
+    // First toggle an alert to make changes
+    const alert = alerts[0];
+    const row = await screen.findByTestId(alert.id);
+    const toggle = await within(row).findByRole('checkbox');
+    await userEvent.click(toggle);
+
+    // Now the save button should be enabled
+    const saveButton = screen.getByTestId('save-alerts');
+    expect(saveButton).not.toBeDisabled();
+
+    // Click save and verify dialog appears
+    await userEvent.click(saveButton);
+    expect(screen.queryByTestId('confirmation-dialog')).not.toBeInTheDocument();
+  });
+
   it('Should have save button in disabled form when no changes are made', () => {
     renderWithTheme(<AlertInformationActionTable {...props} />);
 

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

@@ -68,6 +68,11 @@
    * Service type of the selected entity
    */
   serviceType: string;
+
+  /**
+   * Flag to determine if confirmation dialog should be displayed
+   */
+  showConfirmationDialog?: boolean;
 }
 
 export interface TableColumnHeader {
@@ -108,11 +113,11 @@
     alerts,
     columns,
     entityId,
-    entityName,
     error,
     orderByColumn,
     serviceType,
     onToggleAlert,
+    showConfirmationDialog,
   } = props;
 
   const alertsTableRef = React.useRef<HTMLTableElement>(null);
@@ -125,7 +130,7 @@
   const [isLoading, setIsLoading] = React.useState<boolean>(false);
 
   const isEditMode = !!entityId;
-  const isCreateMode = !!onToggleAlert;
+  const isCreateMode = !isEditMode;
 
   const { enabledAlerts, setEnabledAlerts, hasUnsavedChanges } =
     useContextualAlertsState(alerts, entityId);
@@ -135,6 +140,13 @@
     entityId ?? ''
   );
 
+  // To send initial state of alerts through toggle handler function
+  React.useEffect(() => {
+    if (onToggleAlert) {
+      onToggleAlert(enabledAlerts);
+    }
+  }, []);
+
   const handleCancel = () => {
     setIsDialogOpen(false);
   };
@@ -274,11 +286,6 @@
                             return null;
                           }
 
-                          // TODO: Remove this once we have a way to toggle ACCOUNT and REGION level alerts
-                          if (!isEditMode && alert.scope !== 'entity') {
-                            return null;
-                          }
-
                           const status = enabledAlerts[alert.type]?.includes(
                             alert.id
                           );
@@ -312,13 +319,14 @@
                       buttonType="primary"
                       data-qa-buttons="true"
                       data-testid="save-alerts"
-                      disabled={!hasUnsavedChanges}
+                      disabled={!hasUnsavedChanges || isLoading}
+                      loading={isLoading}
                       onClick={() => {
-                        window.scrollTo({
-                          behavior: 'instant',
-                          top: 0,
-                        });
-                        setIsDialogOpen(true);
+                        if (showConfirmationDialog) {
+                          setIsDialogOpen(true);
+                        } else {
+                          handleConfirm(enabledAlerts);
+                        }
                       }}
                     >
                       Save
@@ -337,13 +345,12 @@
         isOpen={isDialogOpen}
         message={
           <>
-            Are you sure you want to save these settings for {entityName}? All
-            legacy alert settings will be disabled and replaced by the new{' '}
-            <b>Alerts(Beta)</b> settings.
+            Are you sure you want to save (Beta) Alerts? <b>Legacy</b> settings
+            will be disabled and replaced by (Beta) Alerts settings.
           </>
         }
-        primaryButtonLabel="Save"
-        title="Save Alerts?"
+        primaryButtonLabel="Confirm"
+        title="Are you sure you want to save (Beta) Alerts? "
       />
     </>
   );

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

@@ -1,4 +1,4 @@
-import { waitFor } from '@testing-library/react';
+import { screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import React from 'react';
 
@@ -24,15 +24,26 @@ vi.mock('src/queries/cloudpulse/alerts', async () => {
 const serviceType = 'linode';
 const entityId = '123';
 const entityName = 'test-instance';
+const region = 'us-ord';
+const onToggleAlert = vi.fn();
 const alerts = [
-  ...alertFactory.buildList(3, { service_type: serviceType }),
+  ...alertFactory.buildList(3, {
+    service_type: serviceType,
+    regions: ['us-ord'],
+  }),
+  alertFactory.build({
+    label: 'test-alert',
+    service_type: serviceType,
+    regions: ['us-ord'],
+  }),
   ...alertFactory.buildList(7, {
     entity_ids: [entityId],
     service_type: serviceType,
   }),
   ...alertFactory.buildList(1, {
     entity_ids: [entityId],
     service_type: serviceType,
+    regions: ['us-ord'],
     status: 'enabled',
     type: 'system',
   }),
@@ -48,6 +59,8 @@ const component = (
   <AlertReusableComponent
     entityId={entityId}
     entityName={entityName}
+    onToggleAlert={onToggleAlert}
+    regionId={region}
     serviceType={serviceType}
   />
 );
@@ -98,4 +111,24 @@ describe('Alert Resuable Component for contextual view', () => {
     const alert = alerts[alerts.length - 1];
     expect(getByText(alert.label)).toBeInTheDocument();
   });
+
+  it('Should hide manage alerts button for undefined entityId', () => {
+    renderWithTheme(<AlertReusableComponent serviceType={serviceType} />);
+
+    const manageAlerts = screen.queryByTestId('manage-alerts');
+    expect(manageAlerts).not.toBeInTheDocument();
+    expect(screen.queryByText('Alerts')).not.toBeInTheDocument();
+  });
+
+  it('Should filter alerts based on region', async () => {
+    renderWithTheme(component);
+    await userEvent.click(screen.getByRole('button', { name: 'Open' }));
+    expect(screen.getByText('test-alert')).toBeVisible();
+  });
+
+  it('Should show header for edit mode', async () => {
+    renderWithTheme(component);
+    await userEvent.click(screen.getByText('Manage Alerts'));
+    expect(screen.getByText('Alerts')).toBeVisible();
+  });
 });

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

@@ -13,13 +13,11 @@ import React from 'react';
 import { useHistory } from 'react-router-dom';
 
 import { DebouncedSearchTextField } from 'src/components/DebouncedSearchTextField';
+import { useFlags } from 'src/hooks/useFlags';
 import { useAlertDefinitionByServiceTypeQuery } from 'src/queries/cloudpulse/alerts';
 
 import { AlertContextualViewTableHeaderMap } from '../AlertsListing/constants';
-import {
-  convertAlertsToTypeSet,
-  filterAlertsByStatusAndType,
-} from '../Utils/utils';
+import { convertAlertsToTypeSet, filterAlerts } from '../Utils/utils';
 import { AlertInformationActionTable } from './AlertInformationActionTable';
 
 import type {
@@ -38,21 +36,37 @@ interface AlertReusableComponentProps {
    */
   entityName?: string;
 
+  /**
+   * Whether the legacy alert is available for the entity
+   */
+  isLegacyAlertAvailable?: boolean;
+
   /**
    * Called when an alert is toggled on or off.
-   * Only use in create flow.
    * @param payload enabled alerts ids
    */
   onToggleAlert?: (payload: CloudPulseAlertsPayload) => void;
 
+  /**
+   * Region ID for the selected entity
+   */
+  regionId?: string;
+
   /**
    * Service type of selected entity
    */
   serviceType: string;
 }
 
 export const AlertReusableComponent = (props: AlertReusableComponentProps) => {
-  const { entityId, entityName, onToggleAlert, serviceType } = props;
+  const {
+    entityId,
+    entityName,
+    onToggleAlert,
+    serviceType,
+    regionId,
+    isLegacyAlertAvailable,
+  } = props;
   const {
     data: alerts,
     error,
@@ -64,12 +78,14 @@ export const AlertReusableComponent = (props: AlertReusableComponentProps) => {
     AlertDefinitionType | undefined
   >();
 
-  // Filter alerts based on status, search text & selected type
+  // Filter alerts based on status, search text, selected type, and region
   const filteredAlerts = React.useMemo(
-    () => filterAlertsByStatusAndType(alerts, searchText, selectedType),
-    [alerts, searchText, selectedType]
+    () => filterAlerts({ alerts, searchText, selectedType, regionId }),
+    [alerts, regionId, searchText, selectedType]
   );
 
+  const { aclpBetaServices } = useFlags();
+
   const history = useHistory();
 
   // Filter unique alert types from alerts list
@@ -80,21 +96,24 @@ export const AlertReusableComponent = (props: AlertReusableComponentProps) => {
   }
 
   return (
-    <Paper>
+    <Paper sx={{ p: entityId ? undefined : 0 }}>
       <Stack gap={3}>
-        <Box display="flex" justifyContent="space-between">
-          <Box alignItems="center" display="flex" gap={0.5}>
-            <Typography variant="h2">Alerts</Typography>
-            <BetaChip />
+        {entityId && (
+          <Box display="flex" justifyContent="space-between">
+            <Box alignItems="center" display="flex" gap={0.5}>
+              <Typography variant="h2">Alerts</Typography>
+              {aclpBetaServices?.[serviceType]?.alerts && <BetaChip />}
+            </Box>
+            <Button
+              buttonType="outlined"
+              data-qa-buttons="true"
+              data-testid="manage-alerts"
+              onClick={() => history.push('/alerts/definitions')}
+            >
+              Manage Alerts
+            </Button>
           </Box>
-          <Button
-            buttonType="outlined"
-            data-testid="manage-alerts"
-            onClick={() => history.push('/alerts/definitions')}
-          >
-            Manage Alerts
-          </Button>
-        </Box>
+        )}
         <Stack gap={2}>
           <Box display="flex" gap={2}>
             <DebouncedSearchTextField
@@ -133,6 +152,7 @@ export const AlertReusableComponent = (props: AlertReusableComponentProps) => {
             onToggleAlert={onToggleAlert}
             orderByColumn="Alert Name"
             serviceType={serviceType}
+            showConfirmationDialog={isLegacyAlertAvailable}
           />
         </Stack>
       </Stack>

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

@@ -9,7 +9,7 @@ import {
   convertAlertsToTypeSet,
   convertSecondsToMinutes,
   convertSecondsToOptions,
-  filterAlertsByStatusAndType,
+  filterAlerts,
   getSchemaWithEntityIdValidation,
   getServiceTypeLabel,
   handleMultipleError,
@@ -50,13 +50,32 @@ it('test convertSecondsToOptions method', () => {
   expect(convertSecondsToOptions(900)).toEqual('15 min');
 });
 
-it('test filterAlertsByStatusAndType method', () => {
-  const alerts = alertFactory.buildList(12, { created_by: 'system' });
-  expect(filterAlertsByStatusAndType(alerts, '', 'system')).toHaveLength(12);
-  expect(filterAlertsByStatusAndType(alerts, '', 'user')).toHaveLength(0);
-  expect(filterAlertsByStatusAndType(alerts, 'Alert-1', 'system')).toHaveLength(
-    4
-  );
+it('test filterAlerts method', () => {
+  const alerts = [
+    ...alertFactory.buildList(12, { created_by: 'system' }),
+    alertFactory.build({
+      label: 'Alert-14',
+      scope: 'region',
+      regions: ['us-east'],
+    }),
+  ];
+  expect(
+    filterAlerts({ alerts, searchText: '', selectedType: 'system' })
+  ).toHaveLength(12);
+  expect(
+    filterAlerts({ alerts, searchText: '', selectedType: 'user' })
+  ).toHaveLength(0);
+  expect(
+    filterAlerts({ alerts, searchText: 'Alert-1', selectedType: 'system' })
+  ).toHaveLength(4);
+  expect(
+    filterAlerts({
+      alerts,
+      searchText: '',
+      selectedType: 'system',
+      regionId: 'us-east',
+    })
+  ).toHaveLength(13);
 });
 
 it('test convertAlertsToTypeSet method', () => {