upcoming: [M3-10192] - Add Beta "Alerts Assigned +n" Count to Linode Create Flow Summary (#12396)

* Add beta alerts assigned count to linode create flow summary

* Added changeset: Add beta `Alerts Assigned +n` count to Linode Create flow Summary

Author: pmakode-akamai

packages/manager/.changeset/pr-12396-upcoming-features-1750171179709.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+Add beta `Alerts Assigned +n` count to Linode Create flow Summary ([#12396](https://github.com/linode/manager/pull/12396))

packages/manager/src/features/Linodes/LinodeCreate/Summary/Summary.tsx

@@ -1,11 +1,18 @@
-import { useImageQuery, useRegionsQuery, useTypeQuery } from '@linode/queries';
+import {
+  useImageQuery,
+  usePreferences,
+  useRegionsQuery,
+  useTypeQuery,
+} from '@linode/queries';
 import { Divider, Paper, Stack, Typography } from '@linode/ui';
-import { formatStorageUnits } from '@linode/utilities';
+import { formatStorageUnits, isAclpSupportedRegion } from '@linode/utilities';
 import { useTheme } from '@mui/material';
 import useMediaQuery from '@mui/material/useMediaQuery';
 import React from 'react';
 import { useFormContext, useWatch } from 'react-hook-form';
 
+import { TextTooltip } from 'src/components/TextTooltip';
+import { useFlags } from 'src/hooks/useFlags';
 import { useIsLinodeInterfacesEnabled } from 'src/utilities/linodes';
 import { getMonthlyBackupsPrice } from 'src/utilities/pricing/backups';
 import { renderMonthlyPriceToCorrectDecimalPlace } from 'src/utilities/pricing/dynamicPricing';
@@ -36,6 +43,7 @@ export const Summary = () => {
     clusterSize,
     linodeInterfaces,
     interfaceGeneration,
+    alerts,
   ] = useWatch({
     control,
     name: [
@@ -53,13 +61,26 @@ export const Summary = () => {
       'stackscript_data.cluster_size',
       'linodeInterfaces',
       'interface_generation',
+      'alerts',
     ],
   });
 
   const { data: regions } = useRegionsQuery();
   const { data: type } = useTypeQuery(typeId ?? '', Boolean(typeId));
   const { data: image } = useImageQuery(imageId ?? '', Boolean(imageId));
 
+  const flags = useFlags();
+  const { data: isAclpAlertsPreferenceBeta } = usePreferences(
+    (preferences) => preferences?.isAclpAlertsBeta
+  );
+
+  const isAclpAlertsSupportedRegionLinode = isAclpSupportedRegion({
+    capability: 'Linodes',
+    regionId,
+    regions,
+    type: 'alerts',
+  });
+
   const region = regions?.find((r) => r.id === regionId);
 
   const backupsPrice = renderMonthlyPriceToCorrectDecimalPlace(
@@ -81,6 +102,30 @@ export const Summary = () => {
       ? linodeInterfaces.some((i) => i.firewall_id)
       : firewallId;
 
+  const hasBetaAclpAlertsAssigned =
+    flags.aclpBetaServices?.alerts &&
+    isAclpAlertsSupportedRegionLinode &&
+    isAclpAlertsPreferenceBeta;
+
+  const totalBetaAclpAlertsAssignedCount =
+    (alerts?.system?.length ?? 0) + (alerts?.user?.length ?? 0);
+
+  const betaAclpAlertsAssignedList = [
+    ...(alerts?.system ?? []),
+    ...(alerts?.user ?? []),
+  ].join(', ');
+
+  const betaAclpAlertsAssignedDetails =
+    totalBetaAclpAlertsAssignedCount > 0 ? (
+      <TextTooltip
+        displayText={`+${totalBetaAclpAlertsAssignedCount}`}
+        minWidth={1}
+        tooltipText={betaAclpAlertsAssignedList}
+      />
+    ) : (
+      '0'
+    );
+
   const summaryItems = [
     {
       item: {
@@ -144,6 +189,13 @@ export const Summary = () => {
       },
       show: diskEncryption === 'enabled' || region?.site_type === 'distributed',
     },
+    {
+      item: {
+        title: 'Alerts Assigned',
+        details: betaAclpAlertsAssignedDetails,
+      },
+      show: hasBetaAclpAlertsAssigned,
+    },
   ];
 
   const summaryItemsToShow = summaryItems.filter((item) => item.show);