upcoming: [DPS-41826] - add newFeature chip to render conditionally

Author: santoshp210-akamai

packages/manager/src/components/PrimaryNav/PrimaryNav.test.tsx

@@ -341,6 +341,48 @@ describe('PrimaryNav', () => {
     expect(queryByTestId('betaChip')).toBeNull();
   });
 
+  it('should show the new chip for Alerts if the user has the account capability, aclpAlerting feature flag has beta false and new as true', async () => {
+    const account = accountFactory.build({
+      capabilities: ['Akamai Cloud Pulse'],
+    });
+
+    queryMocks.useAccount.mockReturnValue({
+      data: account,
+      isLoading: false,
+      error: null,
+    });
+
+    const flags = {
+      aclp: {
+        beta: false,
+        enabled: true,
+      },
+      aclpAlerting: {
+        accountAlertLimit: 10,
+        accountMetricLimit: 10,
+        alertDefinitions: true,
+        beta: false,
+        new: true,
+        notificationChannels: true,
+        recentActivity: true,
+      },
+    };
+
+    const { findByTestId, queryByTestId, findByText } = renderWithTheme(
+      <PrimaryNav {...props} />,
+      {
+        flags,
+      }
+    );
+
+    const monitorAlertsDisplayItem = await findByText('Alerts');
+    const betaChip = queryByTestId('betaChip');
+    const newFeatureChip = await findByTestId('newFeatureChip');
+
+    expect(monitorAlertsDisplayItem).toBeVisible();
+    expect(betaChip).toBeNull();
+    expect(newFeatureChip).toBeVisible();
+  });
   it('should not show Alerts menu items if the user has the account capability, aclp feature flag is enabled, and aclpAlerting feature flag does not have any of the properties true', async () => {
     const account = accountFactory.build({
       capabilities: ['Akamai Cloud Pulse'],

packages/manager/src/components/PrimaryNav/PrimaryNav.tsx

@@ -277,6 +277,7 @@ export const PrimaryNav = (props: PrimaryNavProps) => {
                 hide: !isAlertsEnabled,
                 to: '/alerts',
                 isBeta: flags.aclpAlerting?.beta,
+                isNew: !flags.aclpAlerting?.beta && flags.aclpAlerting?.new,
               },
               {
                 display: 'Logs',

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

@@ -143,4 +143,66 @@ describe('Alert Resuable Component for contextual view', () => {
     ).not.toBeInTheDocument();
     expect(screen.getByTestId('manage-alerts')).toBeVisible();
   });
+  it('should show the beta chip when beta is enabled in aclpAlerting feature flag', async () => {
+    const flags = {
+      aclpAlerting: {
+        accountAlertLimit: 10,
+        accountMetricLimit: 10,
+        alertDefinitions: true,
+        beta: true,
+        new: true,
+        notificationChannels: true,
+        recentActivity: true,
+      },
+    };
+
+    const { findByTestId, queryByTestId } = renderWithTheme(
+      <AlertReusableComponent
+        entityId={entityId}
+        entityName={entityName}
+        onToggleAlert={onToggleAlert}
+        regionId={region}
+        serviceType="dbaas"
+      />,
+      {
+        flags,
+      }
+    );
+
+    const betaChip = await findByTestId('betaChip');
+    const newFeatureChip = queryByTestId('newFeatureChip');
+    expect(betaChip).toBeVisible();
+    expect(newFeatureChip).toBeNull();
+  });
+  it('should show the new chip when beta is disabled and new is enabled in aclpAlerting feature flag', async () => {
+    const flags = {
+      aclpAlerting: {
+        accountAlertLimit: 10,
+        accountMetricLimit: 10,
+        alertDefinitions: true,
+        beta: false,
+        new: true,
+        notificationChannels: true,
+        recentActivity: true,
+      },
+    };
+
+    const { findByTestId, queryByTestId } = renderWithTheme(
+      <AlertReusableComponent
+        entityId={entityId}
+        entityName={entityName}
+        onToggleAlert={onToggleAlert}
+        regionId={region}
+        serviceType="dbaas"
+      />,
+      {
+        flags,
+      }
+    );
+
+    const betaChip = queryByTestId('betaChip');
+    const newFeatureChip = await findByTestId('newFeatureChip');
+    expect(betaChip).toBeNull();
+    expect(newFeatureChip).toBeVisible();
+  });
 });

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

@@ -1,6 +1,6 @@
+import { getFeatureChip } from '@linode/shared';
 import {
   Autocomplete,
-  BetaChip,
   Box,
   Button,
   CircleProgress,
@@ -125,7 +125,7 @@ export const AlertReusableComponent = (props: AlertReusableComponentProps) => {
     [alerts, regionId, searchText, selectedType]
   );
 
-  const { aclpServices } = useFlags();
+  const { aclpAlerting } = useFlags();
 
   const navigate = useNavigate();
 
@@ -145,7 +145,7 @@ export const AlertReusableComponent = (props: AlertReusableComponentProps) => {
             <Box display="flex" justifyContent="space-between">
               <Box alignItems="center" display="flex" gap={0.5}>
                 <Typography variant="h2">Alerts</Typography>
-                {aclpServices?.[serviceType]?.alerts?.beta && <BetaChip />}
+                {aclpAlerting && getFeatureChip(aclpAlerting)}
               </Box>
               <Button
                 buttonType="outlined"