fix: [UIE-9841] - Hide dual stack option if no IPv6 prefixes available in create VPC flow

Author: grevanak-akamai

packages/api-v4/.changeset/pr-13245-tech-stories-1767723985438.md

@@ -0,0 +1,5 @@
+---
+"@linode/api-v4": Tech Stories
+---
+
+Clean up unused VPC IPv6 Large Prefixes tag ([#13245](https://github.com/linode/manager/pull/13245))

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

@@ -93,7 +93,6 @@ export const accountCapabilities = [
   'Vlans',
   'VPCs',
   'VPC Dual Stack',
-  'VPC IPv6 Large Prefixes',
 ] as const;
 
 export type AccountCapability = (typeof accountCapabilities)[number];

packages/manager/.changeset/pr-13245-fixed-1767723908908.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Fixed
+---
+
+Hide dual stack option if no IPv6 prefixes available in create VPC flow ([#13245](https://github.com/linode/manager/pull/13245))

packages/manager/src/factories/account.ts

@@ -56,6 +56,7 @@ export const accountFactory = Factory.Sync.makeFactory<Account>({
     'Placement Group',
     'Vlans',
     'Kubernetes Enterprise',
+    'VPC Dual Stack',
   ],
   city: 'Philadelphia',
   company: Factory.each((i) => `company-${i}`),

packages/manager/src/factories/userAccountPermissions.ts

@@ -3,4 +3,5 @@ import type { PermissionType } from '@linode/api-v4';
 export const userAccountPermissionsFactory: PermissionType[] = [
   'create_linode',
   'create_firewall',
+  'create_vpc',
 ];

packages/manager/src/features/VPCs/VPCCreate/FormComponents/VPCTopSectionContent.test.tsx

@@ -73,12 +73,11 @@ describe('VPC Top Section form content', () => {
 
     const NetworkingIPStackRadios = screen.getAllByRole('radio');
     expect(NetworkingIPStackRadios[0]).toBeChecked(); // IPv4
-    expect(NetworkingIPStackRadios[1]).not.toBeChecked(); // Dual Stack
   });
 
   it('renders VPC IPv6 Prefix Length options with /52 selected if the selected region has multiple prefix lengths available', async () => {
     const account = accountFactory.build({
-      capabilities: ['VPC Dual Stack', 'VPC IPv6 Large Prefixes'],
+      capabilities: ['VPC Dual Stack'],
     });
 
     server.use(http.get('*/account', () => HttpResponse.json(account)));
@@ -148,7 +147,7 @@ describe('VPC Top Section form content', () => {
     expect(IPv6CIDRRadios[3]).toBeChecked(); // /52
   });
 
-  it('does not render VPC IPv6 Prefix Length options if there are none available or only /52 available', async () => {
+  it('does not show dual stack option and does not render VPC IPv6 Prefix Length options if there are none available or only /52 available', async () => {
     const account = accountFactory.build({
       capabilities: ['VPC Dual Stack'],
     });
@@ -189,10 +188,10 @@ describe('VPC Top Section form content', () => {
       expect(screen.getByText('IP Stack')).toBeVisible();
     });
 
-    const NetworkingIPStackRadios = screen.getAllByRole('radio');
-    await userEvent.click(NetworkingIPStackRadios[1]);
-    expect(NetworkingIPStackRadios[0]).not.toBeChecked(); // IPv4
-    expect(NetworkingIPStackRadios[1]).toBeChecked(); // Dual Stack
+    expect(screen.getByText('IPv4')).toBeVisible(); // IPv4
+    expect(
+      screen.queryByText('IPv4 + IPv6 (Dual Stack)')
+    ).not.toBeInTheDocument(); // Dual Stack
 
     expect(
       screen.queryByText('VPC IPv6 Prefix Length')

packages/manager/src/features/VPCs/VPCCreate/FormComponents/VPCTopSectionContent.tsx

@@ -205,61 +205,64 @@ export const VPCTopSectionContent = (props: Props) => {
                     sxCardBase={{ gap: 0 }}
                     sxCardBaseIcon={{ svg: { fontSize: '20px' } }}
                   />
-                  <SelectionCard
-                    checked={isDualStackSelected}
-                    disabled={!permissions?.create_vpc}
-                    gridSize={{
-                      md: isDrawer ? 12 : 3,
-                      sm: 12,
-                      xs: 12,
-                    }}
-                    heading="IPv4 + IPv6 (Dual Stack)"
-                    onClick={() => {
-                      field.onChange([
-                        {
-                          range: '/52',
-                        },
-                      ]);
-                      subnets?.forEach((subnet, idx) =>
-                        update(idx, {
-                          ...subnet,
-                          ipv6: subnet.ipv6 ?? [{ range: '/56' }],
-                        })
-                      );
-                    }}
-                    renderIcon={() => (
-                      <Radio
+                  {availableRegionIPv6PrefixLengths &&
+                    availableRegionIPv6PrefixLengths.length > 1 && (
+                      <SelectionCard
                         checked={isDualStackSelected}
                         disabled={!permissions?.create_vpc}
-                      />
-                    )}
-                    renderVariant={() => (
-                      <TooltipIcon
-                        status="info"
-                        sxTooltipIcon={{
-                          padding: '8px',
+                        gridSize={{
+                          md: isDrawer ? 12 : 3,
+                          sm: 12,
+                          xs: 12,
                         }}
-                        text={
-                          <Stack spacing={2}>
-                            <Typography>
-                              The VPC supports both IPv4 and IPv6 addresses.
-                            </Typography>
-                            <Typography>
-                              For IPv4, {RFC1918HelperText}
-                            </Typography>
-                            <Typography>
-                              For IPv6, the VPC is assigned an IPv6 prefix
-                              length of <Code>/52</Code> by default.
-                            </Typography>
-                          </Stack>
-                        }
-                        width={250}
+                        heading="IPv4 + IPv6 (Dual Stack)"
+                        onClick={() => {
+                          field.onChange([
+                            {
+                              range: '/52',
+                            },
+                          ]);
+                          subnets?.forEach((subnet, idx) =>
+                            update(idx, {
+                              ...subnet,
+                              ipv6: subnet.ipv6 ?? [{ range: '/56' }],
+                            })
+                          );
+                        }}
+                        renderIcon={() => (
+                          <Radio
+                            checked={isDualStackSelected}
+                            disabled={!permissions?.create_vpc}
+                          />
+                        )}
+                        renderVariant={() => (
+                          <TooltipIcon
+                            status="info"
+                            sxTooltipIcon={{
+                              padding: '8px',
+                            }}
+                            text={
+                              <Stack spacing={2}>
+                                <Typography>
+                                  The VPC supports both IPv4 and IPv6 addresses.
+                                </Typography>
+                                <Typography>
+                                  For IPv4, {RFC1918HelperText}
+                                </Typography>
+                                <Typography>
+                                  For IPv6, the VPC is assigned an IPv6 prefix
+                                  length of <Code>/52</Code> by default.
+                                </Typography>
+                              </Stack>
+                            }
+                            width={250}
+                          />
+                        )}
+                        subheadings={[]}
+                        sxCardBase={{ gap: 0 }}
+                        sxCardBaseIcon={{ svg: { fontSize: '20px' } }}
                       />
                     )}
-                    subheadings={[]}
-                    sxCardBase={{ gap: 0 }}
-                    sxCardBaseIcon={{ svg: { fontSize: '20px' } }}
-                  />
                 </Grid>
               </RadioGroup>
             )}

packages/manager/src/hooks/useVPCDualStack.ts

@@ -17,12 +17,6 @@ export const useVPCDualStack = (ipv6?: VPCIPv6[]) => {
     account?.capabilities ?? []
   );
 
-  const isEnterpriseCustomer = isFeatureEnabledV2(
-    'VPC IPv6 Large Prefixes',
-    Boolean(flags.vpcIpv6),
-    account?.capabilities ?? []
-  );
-
   const shouldDisplayIPv6 = isDualStackEnabled && isDualStackSelected;
   const recommendedIPv6 = shouldDisplayIPv6
     ? [
@@ -35,7 +29,6 @@ export const useVPCDualStack = (ipv6?: VPCIPv6[]) => {
   return {
     isDualStackEnabled,
     isDualStackSelected,
-    isEnterpriseCustomer,
     shouldDisplayIPv6,
     recommendedIPv6,
   };

packages/manager/src/mocks/serverHandlers.ts

@@ -521,6 +521,30 @@ const vpc = [
     const subnet = subnetFactory.build({ ...(body as any) });
     return HttpResponse.json(subnet);
   }),
+  http.get('*/v4beta/regions/vpc-availability', () => {
+    return HttpResponse.json({
+      data: [
+        {
+          region: 'ap-west',
+          available: false,
+          available_ipv6_prefix_lengths: [],
+        },
+        {
+          region: 'in-maa',
+          available: true,
+          available_ipv6_prefix_lengths: [52],
+        },
+        {
+          region: 'us-southeast',
+          available: true,
+          available_ipv6_prefix_lengths: [48, 52],
+        },
+      ],
+      page: 1,
+      pages: 1,
+      results: 3,
+    });
+  }),
 ];
 
 const iam = [