Fix:[DI-24064] - Fix navigation for metrics and alerts under Monitor

packages/manager/.changeset/pr-11869-fixed-1742283252552.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Fixed
+---
+
+Fix navigation for metrics and alerts under Monitor at `PrimaryNav.tsx` ([#11869](https://github.com/linode/manager/pull/11869))

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

@@ -1,14 +1,14 @@
+import { queryClientFactory } from '@linode/queries';
 import * as React from 'react';
 
 import { accountFactory } from 'src/factories';
 import { HttpResponse, http, server } from 'src/mocks/testServer';
-import { queryClientFactory } from '@linode/queries';
 import { renderWithTheme, wrapWithTheme } from 'src/utilities/testHelpers';
 
 import PrimaryNav from './PrimaryNav';
 
-import type { Flags } from 'src/featureFlags';
 import type { ManagerPreferences } from '@linode/utilities';
+import type { Flags } from 'src/featureFlags';
 
 const props = {
   closeMenu: vi.fn(),
@@ -206,7 +206,7 @@ describe('PrimaryNav', () => {
     expect(databaseNavItem).toBeVisible();
   });
 
-  it('should show Monitor menu item if the user has the account capability', async () => {
+  it('should show Metrics and Alerts menu items if the user has the account capability, aclp feature flag is enabled, and aclpAlerting feature flag has any of the properties true', async () => {
     const account = accountFactory.build({
       capabilities: ['Akamai Cloud Pulse'],
     });
@@ -219,21 +219,95 @@ describe('PrimaryNav', () => {
 
     const flags = {
       aclp: {
-        beta: false,
+        beta: true,
         enabled: true,
       },
+      aclpAlerting: {
+        alertDefinitions: true,
+        notificationChannels: false,
+        recentActivity: false,
+      },
     };
 
     const { findByText } = renderWithTheme(<PrimaryNav {...props} />, {
       flags,
     });
 
-    const monitorNavItem = await findByText('Monitor');
     const monitorMetricsDisplayItem = await findByText('Metrics');
     const monitorAlertsDisplayItem = await findByText('Alerts');
 
-    expect(monitorNavItem).toBeVisible();
     expect(monitorMetricsDisplayItem).toBeVisible();
     expect(monitorAlertsDisplayItem).toBeVisible();
   });
+
+  it('should not show Metrics and Alerts menu items if the user has the account capability but the aclp feature flag is not enabled', async () => {
+    const account = accountFactory.build({
+      capabilities: ['Akamai Cloud Pulse'],
+    });
+
+    server.use(
+      http.get('*/account', () => {
+        return HttpResponse.json(account);
+      })
+    );
+
+    const flags = {
+      aclp: {
+        beta: true,
+        enabled: false,
+      },
+      aclpAlerting: {
+        alertDefinitions: true,
+        notificationChannels: true,
+        recentActivity: true,
+      },
+    };
+
+    const { queryByText } = renderWithTheme(<PrimaryNav {...props} />, {
+      flags,
+    });
+
+    const monitorMetricsDisplayItem = queryByText('Metrics');
+    const monitorAlertsDisplayItem = queryByText('Alerts');
+
+    expect(monitorMetricsDisplayItem).toBeNull();
+    expect(monitorAlertsDisplayItem).toBeNull();
+  });
+
+  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'],
+    });
+
+    server.use(
+      http.get('*/account', () => {
+        return HttpResponse.json(account);
+      })
+    );
+
+    const flags = {
+      aclp: {
+        beta: true,
+        enabled: true,
+      },
+      aclpAlerting: {
+        alertDefinitions: false,
+        notificationChannels: false,
+        recentActivity: false,
+      },
+    };
+
+    const { findByText, queryByText } = renderWithTheme(
+      <PrimaryNav {...props} />,
+      {
+        flags,
+      }
+    );
+
+    const monitorMetricsDisplayItem = await findByText('Metrics'); // Metrics should be visible
+    const monitorAlertsDisplayItem = queryByText('Alerts');
+
+    expect(monitorMetricsDisplayItem).toBeVisible();
+    expect(monitorAlertsDisplayItem).toBeNull();
+  });
 });

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

@@ -227,7 +227,7 @@ export const PrimaryNav = (props: PrimaryNavProps) => {
           {
             display: 'Alerts',
             hide:
-              !isACLPEnabled &&
+              !isACLPEnabled ||
               !(
                 flags.aclpAlerting?.alertDefinitions ||
                 flags.aclpAlerting?.recentActivity ||