upcoming: [DI-16642] - Enable ACLP to be shown based on account capab…

…ilities (linode#10768)

* upcoming: [DI-16642] - Enable ACLP to be shown based on account capabilities

* upcoming: [DI-16642] - Added changeset & test cases

* upcoming: [DI-16642] - Updated test cases

* upcoming: [DI-16642] - Removed unused imports

packages/api-v4/.changeset/pr-10768-upcoming-features-1723463731514.md

@@ -0,0 +1,5 @@
+---
+"@linode/api-v4": Upcoming Features
+---
+
+Add 'Akamai Cloud Pulse' in AccountCapability type interface ([#10768](https://github.com/linode/manager/pull/10768))

packages/api-v4/src/account/types.ts

@@ -61,6 +61,7 @@ export type BillingSource = 'linode' | 'akamai';
 
 export type AccountCapability =
   | 'Akamai Cloud Load Balancer'
+  | 'Akamai Cloud Pulse'
   | 'Block Storage'
   | 'Block Storage Encryption'
   | 'Cloud Firewall'

packages/manager/.changeset/pr-10768-upcoming-features-1723464477834.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+Use useIsACLPEnabled function to check aclp enable  ([#10768](https://github.com/linode/manager/pull/10768))

packages/manager/src/MainContent.tsx

@@ -8,8 +8,8 @@ import { Box } from 'src/components/Box';
 import { MainContentBanner } from 'src/components/MainContentBanner';
 import { MaintenanceScreen } from 'src/components/MaintenanceScreen';
 import { NotFound } from 'src/components/NotFound';
-import { SIDEBAR_WIDTH } from 'src/components/PrimaryNav/SideMenu';
 import { SideMenu } from 'src/components/PrimaryNav/SideMenu';
+import { SIDEBAR_WIDTH } from 'src/components/PrimaryNav/SideMenu';
 import { SuspenseLoader } from 'src/components/SuspenseLoader';
 import { useDialogContext } from 'src/context/useDialogContext';
 import { Footer } from 'src/features/Footer';
@@ -29,6 +29,7 @@ import { ENABLE_MAINTENANCE_MODE } from './constants';
 import { complianceUpdateContext } from './context/complianceUpdateContext';
 import { sessionExpirationContext } from './context/sessionExpirationContext';
 import { switchAccountSessionContext } from './context/switchAccountSessionContext';
+import { useIsACLPEnabled } from './features/CloudPulse/Utils/utils';
 import { useIsDatabasesEnabled } from './features/Databases/utilities';
 import { useIsPlacementGroupsEnabled } from './features/PlacementGroups/utils';
 import { useGlobalErrors } from './hooks/useGlobalErrors';
@@ -226,9 +227,7 @@ export const MainContent = () => {
   const { data: accountSettings } = useAccountSettings();
   const defaultRoot = accountSettings?.managed ? '/managed' : '/linodes';
 
-  const showCloudPulse = Boolean(flags.aclp?.enabled);
-  // the followed comment is for later use, the showCloudPulse will be removed and isACLPEnabled will be used
-  // const { isACLPEnabled } = useIsACLPEnabled();
+  const { isACLPEnabled } = useIsACLPEnabled();
 
   /**
    * this is the case where the user has successfully completed signup
@@ -357,7 +356,7 @@ export const MainContent = () => {
                             <Route component={BetaRoutes} path="/betas" />
                           )}
                           <Route component={VPC} path="/vpcs" />
-                          {showCloudPulse && (
+                          {isACLPEnabled && (
                             <Route
                               component={CloudPulse}
                               path="/monitor/cloudpulse"

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

@@ -71,4 +71,31 @@ describe('PrimaryNav', () => {
 
     expect(databaseNavItem).toBeVisible();
   });
+
+  it('should show Monitor menu item if the user has the account capability', async () => {
+    const account = accountFactory.build({
+      capabilities: ['Akamai Cloud Pulse'],
+    });
+
+    server.use(
+      http.get('*/account', () => {
+        return HttpResponse.json(account);
+      })
+    );
+
+    const flags = {
+      aclp: {
+        beta: false,
+        enabled: true,
+      },
+    };
+
+    const { findByText } = renderWithTheme(<PrimaryNav {...props} />, {
+      flags,
+    });
+
+    const monitorNavItem = await findByText('Monitor');
+
+    expect(monitorNavItem).toBeVisible();
+  });
 });

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

@@ -25,6 +25,7 @@ import AkamaiLogo from 'src/assets/logo/akamai-logo.svg';
 import { BetaChip } from 'src/components/BetaChip/BetaChip';
 import { Box } from 'src/components/Box';
 import { Divider } from 'src/components/Divider';
+import { useIsACLPEnabled } from 'src/features/CloudPulse/Utils/utils';
 import { useIsDatabasesEnabled } from 'src/features/Databases/utilities';
 import { useIsPlacementGroupsEnabled } from 'src/features/PlacementGroups/utils';
 import { useFlags } from 'src/hooks/useFlags';
@@ -104,9 +105,7 @@ export const PrimaryNav = (props: PrimaryNavProps) => {
   const allowMarketplacePrefetch =
     !oneClickApps && !oneClickAppsLoading && !oneClickAppsError;
 
-  const showCloudPulse = Boolean(flags.aclp?.enabled);
-  // the followed comment is for later use, the showCloudPulse will be removed and isACLPEnabled will be used
-  // const { isACLPEnabled } = useIsACLPEnabled();
+  const { isACLPEnabled } = useIsACLPEnabled();
 
   const { isPlacementGroupsEnabled } = useIsPlacementGroupsEnabled();
   const { isDatabasesEnabled } = useIsDatabasesEnabled();
@@ -212,7 +211,7 @@ export const PrimaryNav = (props: PrimaryNavProps) => {
         },
         {
           display: 'Monitor',
-          hide: !showCloudPulse,
+          hide: !isACLPEnabled,
           href: '/monitor/cloudpulse',
           icon: <CloudPulse />,
           isBeta: flags.aclp?.beta,
@@ -253,7 +252,7 @@ export const PrimaryNav = (props: PrimaryNavProps) => {
       flags.databaseBeta,
       isPlacementGroupsEnabled,
       flags.placementGroups,
-      showCloudPulse,
+      isACLPEnabled,
     ]
   );
 
@@ -307,7 +306,6 @@ export const PrimaryNav = (props: PrimaryNavProps) => {
         return (
           <div key={idx}>
             <Divider
-              spacingTop={isManaged ? (idx === 0 ? 0 : 11) : idx === 1 ? 0 : 11}
               sx={(theme) => ({
                 borderColor:
                   theme.name === 'light'
@@ -316,6 +314,7 @@ export const PrimaryNav = (props: PrimaryNavProps) => {
               })}
               className={classes.divider}
               spacingBottom={11}
+              spacingTop={isManaged ? (idx === 0 ? 0 : 11) : idx === 1 ? 0 : 11}
             />
             {filteredLinks.map((thisLink) => {
               const props = {

packages/manager/src/factories/account.ts

@@ -37,6 +37,7 @@ export const accountFactory = Factory.Sync.makeFactory<Account>({
   balance_uninvoiced: 0.0,
   billing_source: 'linode',
   capabilities: [
+    'Akamai Cloud Pulse',
     'Block Storage',
     'Cloud Firewall',
     'Disk Encryption',

packages/manager/src/features/CloudPulse/Utils/utils.ts

@@ -1,6 +1,7 @@
 import { convertData } from 'src/features/Longview/shared/formatters';
 import { useFlags } from 'src/hooks/useFlags';
 import { useAccount } from 'src/queries/account/account';
+import { isFeatureEnabledV2 } from 'src/utilities/accountCapabilities';
 
 import type { TimeDuration } from '@linode/api-v4';
 import type {
@@ -22,10 +23,11 @@ export const useIsACLPEnabled = (): {
     return { isACLPEnabled: false };
   }
 
-  const hasAccountCapability = account?.capabilities?.includes('CloudPulse');
-  const isFeatureFlagEnabled = flags.aclp?.enabled;
-
-  const isACLPEnabled = Boolean(hasAccountCapability && isFeatureFlagEnabled);
+  const isACLPEnabled = isFeatureEnabledV2(
+    'Akamai Cloud Pulse',
+    Boolean(flags.aclp?.enabled),
+    account?.capabilities ?? []
+  );
 
   return { isACLPEnabled };
 };