upcoming: [M3-9989, M3-9919] - Add beta ACLP contextual alerts to Alerts tab on Linode details page

packages/manager/.changeset/pr-12236-upcoming-features-1747395107850.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+Add beta ACLP contextual alerts to the Alerts tab on the Linode details page ([#12236](https://github.com/linode/manager/pull/12236))

packages/manager/src/features/Linodes/LinodesDetail/LinodeAlerts/LinodeAlerts.tsx

@@ -1,8 +1,9 @@
-import { useGrants, usePreferences } from '@linode/queries';
-import { Box, Notice } from '@linode/ui';
+import { useGrants, useLinodeQuery, usePreferences } from '@linode/queries';
+import { Box } from '@linode/ui';
 import * as React from 'react';
 import { useParams } from 'react-router-dom';
 
+import { AlertReusableComponent } from 'src/features/CloudPulse/Alerts/ContextualView/AlertReusableComponent';
 import { useFlags } from 'src/hooks/useFlags';
 
 import { AclpPreferenceToggle } from '../AclpPreferenceToggle';
@@ -11,8 +12,10 @@ import { LinodeSettingsAlertsPanel } from '../LinodeSettings/LinodeSettingsAlert
 const LinodeAlerts = () => {
   const { linodeId } = useParams<{ linodeId: string }>();
   const id = Number(linodeId);
+
   const flags = useFlags();
   const { data: grants } = useGrants();
+  const { data: linode } = useLinodeQuery(id);
   const { data: isAclpAlertsPreferenceBeta } = usePreferences(
     (preferences) => preferences?.isAclpAlertsBeta
   );
@@ -27,7 +30,11 @@ const LinodeAlerts = () => {
       {flags.aclpIntegration ? <AclpPreferenceToggle type="alerts" /> : null}
       {flags.aclpIntegration && isAclpAlertsPreferenceBeta ? (
         // Beta ACLP Alerts View
-        <Notice variant="info">ACLP Alerts Coming soon...</Notice>
+        <AlertReusableComponent
+          entityId={linodeId}
+          entityName={linode?.label ?? ''}
+          serviceType="linode"
+        />
       ) : (
         // Legacy Alerts View
         <LinodeSettingsAlertsPanel isReadOnly={isReadOnly} linodeId={id} />

packages/manager/src/features/Linodes/LinodesDetail/LinodeSettings/LinodeSettingsAlertsPanel.tsx

@@ -5,6 +5,7 @@ import { useFormik } from 'formik';
 import { useSnackbar } from 'notistack';
 import * as React from 'react';
 
+import { useFlags } from 'src/hooks/useFlags';
 import { useTypeQuery } from 'src/queries/types';
 import { getAPIErrorFor } from 'src/utilities/getAPIErrorFor';
 
@@ -20,6 +21,7 @@ interface Props {
 export const LinodeSettingsAlertsPanel = (props: Props) => {
   const { isReadOnly, linodeId } = props;
   const { enqueueSnackbar } = useSnackbar();
+  const flags = useFlags();
 
   const { data: linode } = useLinodeQuery(linodeId);
 
@@ -219,14 +221,15 @@ export const LinodeSettingsAlertsPanel = (props: Props) => {
   ].filter((thisAlert) => !thisAlert.hidden);
 
   const generalError = hasErrorFor('none');
+  const alertsHeading = flags.aclpIntegration ? 'Default Alerts' : 'Alerts';
 
   return (
     <Paper sx={(theme) => ({ pb: theme.spacingFunction(16) })}>
       <Typography
         sx={(theme) => ({ mb: theme.spacingFunction(12) })}
         variant="h2"
       >
-        Alerts
+        {alertsHeading}
       </Typography>
       {generalError && <Notice variant="error">{generalError}</Notice>}
       {alertSections.map((p, idx) => (