upcoming: [UIE-10425] - Add the new feature "Reserved IPs" to side nav (#13486)

Author: grevanak-akamai

packages/manager/.changeset/pr-13486-upcoming-features-1773317968547.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+Reserve IP: Add the new feature Reserved IPs to side nav ([#13486](https://github.com/linode/manager/pull/13486))

packages/manager/src/GoTo.tsx

@@ -7,6 +7,7 @@ import { useIsDatabasesEnabled } from './features/Databases/utilities';
 import { useIsMarketplaceV2Enabled } from './features/Marketplace/shared';
 import { useIsNetworkLoadBalancerEnabled } from './features/NetworkLoadBalancers/utils';
 import { useIsPlacementGroupsEnabled } from './features/PlacementGroups/utils';
+import { useIsReserveIpEnabled } from './features/ReservedIps/utils';
 import { useGlobalKeyboardListener } from './hooks/useGlobalKeyboardListener';
 
 import type { SelectOption } from '@linode/ui';
@@ -22,6 +23,7 @@ export const GoTo = React.memo(() => {
   const { isDatabasesEnabled } = useIsDatabasesEnabled();
   const { isMarketplaceV2FeatureEnabled } = useIsMarketplaceV2Enabled();
   const { isNetworkLoadBalancerEnabled } = useIsNetworkLoadBalancerEnabled();
+  const { isReserveIpEnabled } = useIsReserveIpEnabled();
 
   const { goToOpen, setGoToOpen } = useGlobalKeyboardListener();
 
@@ -63,6 +65,11 @@ export const GoTo = React.memo(() => {
         display: 'NodeBalancers',
         href: '/nodebalancers',
       },
+      {
+        display: 'Reserved IPs',
+        hide: !isReserveIpEnabled,
+        href: '/reserved-ips',
+      },
       {
         display: 'Firewalls',
         href: '/firewalls',
@@ -130,6 +137,7 @@ export const GoTo = React.memo(() => {
       isMarketplaceV2FeatureEnabled,
       isNetworkLoadBalancerEnabled,
       isPlacementGroupsEnabled,
+      isReserveIpEnabled,
     ]
   );
 

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

@@ -604,4 +604,18 @@ describe('PrimaryNav', () => {
 
     expect(partnerReferralNavItem).toBeVisible();
   });
+
+  it('should show Reserved IPs menu item if the corresponding flag is enabled', async () => {
+    const flags: Partial<Flags> = {
+      reserveIp: true,
+    };
+
+    const { findByTestId } = renderWithTheme(<PrimaryNav {...props} />, {
+      flags,
+    });
+
+    const reservedIpsNavItem = await findByTestId('menu-item-Reserved IPs');
+
+    expect(reservedIpsNavItem).toBeVisible();
+  });
 });

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

@@ -25,6 +25,7 @@ import { useIsIAMEnabled } from 'src/features/IAM/hooks/useIsIAMEnabled';
 import { useIsMarketplaceV2Enabled } from 'src/features/Marketplace/shared';
 import { useIsNetworkLoadBalancerEnabled } from 'src/features/NetworkLoadBalancers/utils';
 import { useIsPlacementGroupsEnabled } from 'src/features/PlacementGroups/utils';
+import { useIsReserveIpEnabled } from 'src/features/ReservedIps/utils';
 import { useFlags } from 'src/hooks/useFlags';
 
 import PrimaryLink from './PrimaryLink';
@@ -65,6 +66,7 @@ export type NavEntity =
   | 'Placement Groups'
   | 'Quick Deploy Apps'
   | 'Quotas'
+  | 'Reserved IPs'
   | 'Service Transfers'
   | 'StackScripts'
   | 'Users & Grants'
@@ -127,6 +129,8 @@ export const PrimaryNav = (props: PrimaryNavProps) => {
 
   const { isMarketplaceV2FeatureEnabled } = useIsMarketplaceV2Enabled();
 
+  const { isReserveIpEnabled } = useIsReserveIpEnabled();
+
   const {
     data: preferences,
     error: preferencesError,
@@ -234,6 +238,11 @@ export const PrimaryNav = (props: PrimaryNavProps) => {
                 display: 'NodeBalancers',
                 to: '/nodebalancers',
               },
+              {
+                display: 'Reserved IPs',
+                hide: !isReserveIpEnabled,
+                to: '/reserved-ips',
+              },
               {
                 display: 'Domains',
                 to: '/domains',
@@ -357,6 +366,7 @@ export const PrimaryNav = (props: PrimaryNavProps) => {
         isIAMEnabled,
         isMarketplaceV2FeatureEnabled,
         isNetworkLoadBalancerEnabled,
+        isReserveIpEnabled,
         limitsEvolution,
       ]
     );

packages/manager/src/dev-tools/FeatureFlagTool.tsx

@@ -95,6 +95,7 @@ const options: { flag: keyof Flags; label: string }[] = [
   },
   { flag: 'objSummaryPage', label: 'OBJ Summary Page' },
   { flag: 'vpcIpv6', label: 'VPC IPv6' },
+  { flag: 'reserveIp', label: 'Reserve IP' },
   { flag: 'marketplaceV2GlobalBanner', label: 'Marketplace V2 Global Banner' },
 ];
 

packages/manager/src/featureFlags.ts

@@ -274,6 +274,7 @@ export interface Flags {
   promos: boolean;
   promotionalOffers: PromotionalOffer[];
   referralBannerText: BannerContent;
+  reserveIp: boolean;
   resourceLock: ResourceLockFlag;
   secureVmCopy: SecureVMCopy;
   selfServeBetas: boolean;
@@ -392,6 +393,7 @@ export type ProductInformationBannerLocation =
   | 'NodeBalancers'
   | 'Object Storage'
   | 'Placement Groups'
+  | 'Reserved IPs'
   | 'StackScripts'
   | 'Volumes'
   | 'VPC';

packages/manager/src/features/ReservedIps/ReservedIpsLanding/ReservedIpsLanding.tsx

@@ -0,0 +1,20 @@
+import { Notice } from '@linode/ui';
+import * as React from 'react';
+
+import { LandingHeader } from 'src/components/LandingHeader';
+
+export const ReservedIpsLanding = () => {
+  return (
+    <>
+      <LandingHeader
+        breadcrumbProps={{
+          pathname: 'Reserved IPs',
+          removeCrumbX: 1,
+        }}
+        spacingBottom={16}
+        title="Reserved IPs"
+      />
+      <Notice variant="info">Reserved IPs is coming soon...</Notice>
+    </>
+  );
+};

packages/manager/src/features/ReservedIps/ReservedIpsLanding/ReservedIpsLazyRoute.tsx

@@ -0,0 +1,7 @@
+import { createLazyRoute } from '@tanstack/react-router';
+
+import { ReservedIpsLanding } from './ReservedIpsLanding';
+
+export const reservedIpsLazyRoute = createLazyRoute('/reserved-ips')({
+  component: ReservedIpsLanding,
+});

packages/manager/src/features/ReservedIps/utils.test.ts

@@ -0,0 +1,31 @@
+import { renderHook, waitFor } from '@testing-library/react';
+
+import { wrapWithTheme } from 'src/utilities/testHelpers';
+
+import { useIsReserveIpEnabled } from './utils';
+
+describe('useIsReserveIpEnabled', () => {
+  it('returns true if the feature is enabled', async () => {
+    const options = { flags: { reserveIp: true } };
+
+    const { result } = renderHook(() => useIsReserveIpEnabled(), {
+      wrapper: (ui) => wrapWithTheme(ui, options),
+    });
+
+    await waitFor(() => {
+      expect(result.current.isReserveIpEnabled).toBe(true);
+    });
+  });
+
+  it('returns false if the feature is NOT enabled', async () => {
+    const options = { flags: { reserveIp: false } };
+
+    const { result } = renderHook(() => useIsReserveIpEnabled(), {
+      wrapper: (ui) => wrapWithTheme(ui, options),
+    });
+
+    await waitFor(() => {
+      expect(result.current.isReserveIpEnabled).toBe(false);
+    });
+  });
+});

packages/manager/src/features/ReservedIps/utils.ts

@@ -0,0 +1,13 @@
+import { useFlags } from 'src/hooks/useFlags';
+
+/**
+ *
+ * @returns an object that contains boolean property to check whether Reserved IP is enabled or not
+ */
+export const useIsReserveIpEnabled = () => {
+  const flags = useFlags();
+
+  // @TODO ReservedIps: check for customer tag/account capability when it exists
+
+  return { isReserveIpEnabled: flags.reserveIp ?? false };
+};