Added: [DI-29070] - New feature marker in navigation menu and primary breadcrumbs of CloudPulse metrics (#13230)

* Added: [DI-29070] - new feature marker in navigation menu and primary breadcrumbs

* Added: [DI-29070] - Changeset

* Added: [DI-29069] - new feature chip refined control

* Added: [DI-29069] - fix test

Author: venkymano-akamai

packages/manager/.changeset/pr-13230-added-1767073910229.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Added
+---
+
+New feature marker in navigation menu and primary breadcrumbs of `CloudPulse metrics` ([#13230](https://github.com/linode/manager/pull/13230))

packages/manager/cypress/e2e/core/cloudpulse/cloudpulse-navigation.spec.ts

@@ -22,14 +22,17 @@ describe('Moniter navigation', () => {
   it('can navigate to metrics landing page', () => {
     mockAppendFeatureFlags({
       aclp: {
-        beta: true,
+        beta: false,
         enabled: true,
+        new: true,
       },
     }).as('getFeatureFlags');
 
     cy.visitWithLogin('/linodes');
     cy.wait('@getFeatureFlags');
-
+    cy.get('[data-testid="menu-item-Metrics"]').within(() => {
+      cy.get('[data-testid="newFeatureChip"]').should('be.visible'); // check for new feature chip
+    });
     cy.get('[data-testid="menu-item-Metrics"]').should('be.visible').click();
     cy.url().should('endWith', '/metrics');
   });

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

@@ -228,6 +228,7 @@ describe('PrimaryNav', () => {
       aclp: {
         beta: true,
         enabled: true,
+        new: true,
       },
       aclpAlerting: {
         accountAlertLimit: 10,
@@ -239,7 +240,7 @@ describe('PrimaryNav', () => {
       },
     };
 
-    const { findAllByTestId, findByText } = renderWithTheme(
+    const { findAllByTestId, findByText, queryByTestId } = renderWithTheme(
       <PrimaryNav {...props} />,
       {
         flags,
@@ -249,12 +250,57 @@ describe('PrimaryNav', () => {
     const monitorMetricsDisplayItem = await findByText('Metrics');
     const monitorAlertsDisplayItem = await findByText('Alerts');
     const betaChip = await findAllByTestId('betaChip');
+    const newFeatureChip = queryByTestId('newFeatureChip');
+    expect(newFeatureChip).toBeNull(); // when beta is true, only beta chip is shown not new chip
 
     expect(monitorMetricsDisplayItem).toBeVisible();
     expect(monitorAlertsDisplayItem).toBeVisible();
     expect(betaChip).toHaveLength(2);
   });
 
+  it('shoud show beta chip next to Metrics menu item if the user has the account capability and aclp feature flag has new 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,
+        new: true,
+      },
+      aclpAlerting: {
+        accountAlertLimit: 10,
+        accountMetricLimit: 10,
+        alertDefinitions: true,
+        beta: true,
+        notificationChannels: false,
+        recentActivity: false,
+      },
+    };
+
+    const { findByText, findByTestId } = renderWithTheme(
+      <PrimaryNav {...props} />,
+      {
+        flags,
+      }
+    );
+
+    const monitorMetricsDisplayItem = await findByText('Metrics');
+    const monitorAlertsDisplayItem = await findByText('Alerts');
+    const newFeatureChip = await findByTestId('newFeatureChip');
+
+    expect(monitorMetricsDisplayItem).toBeVisible();
+    expect(monitorAlertsDisplayItem).toBeVisible();
+    expect(newFeatureChip).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'],

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

@@ -243,6 +243,7 @@ export const PrimaryNav = (props: PrimaryNavProps) => {
                 hide: !isACLPEnabled,
                 to: '/metrics',
                 isBeta: flags.aclp?.beta,
+                isNew: !flags.aclp?.beta && flags.aclp?.new,
               },
               {
                 display: 'Alerts',

packages/manager/src/featureFlags.ts

@@ -104,6 +104,11 @@ interface AclpFlag {
    */
   humanizableUnits?: string[];
 
+  /**
+   * This property indicates whether the feature is new or not
+   */
+  new?: boolean;
+
   /**
    * This property indicates whether to show widget dimension filters or not
    */

packages/manager/src/features/CloudPulse/Dashboard/CloudPulseDashboardLanding.test.tsx

@@ -50,7 +50,15 @@ vi.spyOn(utils, 'getAllDashboards').mockReturnValue({
 });
 describe('CloudPulseDashboardFilterBuilder component tests', () => {
   it('should render error placeholder if dashboard not selected', () => {
-    renderWithTheme(<CloudPulseDashboardLanding />);
+    renderWithTheme(<CloudPulseDashboardLanding />, {
+      flags: {
+        aclp: {
+          new: true,
+          beta: false,
+          enabled: true,
+        },
+      },
+    });
     const text = screen.getByText('metrics');
     expect(text).toBeInTheDocument();
 
@@ -61,6 +69,9 @@ describe('CloudPulseDashboardFilterBuilder component tests', () => {
 
     const messageComponent = screen.getByText(message);
     expect(messageComponent).toBeDefined();
+
+    const newFeatureChip = screen.getByTestId('newFeatureChip');
+    expect(newFeatureChip).toBeVisible();
   });
 
   it('should render error placeholder if some dashboard is selected and filter config is not present', async () => {

packages/manager/src/features/CloudPulse/Dashboard/CloudPulseDashboardLanding.tsx

@@ -1,12 +1,13 @@
 import { useProfile } from '@linode/queries';
-import { Box, Paper } from '@linode/ui';
+import { Box, NewFeatureChip, Paper } from '@linode/ui';
 import { GridLegacy } from '@mui/material';
 import { DateTime } from 'luxon';
 import * as React from 'react';
 
 import { DocumentTitleSegment } from 'src/components/DocumentTitle';
 import { LandingHeader } from 'src/components/LandingHeader';
 import { SuspenseLoader } from 'src/components/SuspenseLoader';
+import { useFlags } from 'src/hooks/useFlags';
 
 import { GlobalFilters } from '../Overview/GlobalFilters';
 import { CloudPulseAppliedFilterRenderer } from '../shared/CloudPulseAppliedFilterRenderer';
@@ -33,6 +34,7 @@ export interface DashboardProp {
 
 export const CloudPulseDashboardLanding = () => {
   const { data: profile } = useProfile();
+  const flags = useFlags();
   const [filterData, setFilterData] = React.useState<FilterData>({
     id: {},
     label: {},
@@ -101,7 +103,12 @@ export const CloudPulseDashboardLanding = () => {
     <React.Suspense fallback={<SuspenseLoader />}>
       <DocumentTitleSegment segment="Dashboards" />
       <LandingHeader
-        breadcrumbProps={{ pathname: '/metrics' }}
+        breadcrumbProps={{
+          pathname: '/metrics',
+          labelOptions: {
+            suffixComponent: flags.aclp?.new ? <NewFeatureChip /> : undefined,
+          },
+        }}
         docsLabel="Docs"
         docsLink="https://techdocs.akamai.com/cloud-computing/docs/akamai-cloud-pulse"
       />