upcoming: [M3-9863] - Add Subnet IPv6 Prefix Length to VPC create page (#12563)

## Description 📝
Add ability to specify a Subnet IPv6 Prefix (`/52 - /62`) in the VPC create page if the selected VPC is Dual Stack

## Changes  🔄
- Add IPv6 support to `MultipleSubnetInput` and `SubnetNode`
- Refactoring of shared code into a `useVPCDualStack` hook
- Update `createVPCSchema` to support IPv6 subnets

### Verification steps

(How to verify changes)

- [ ] Ensure the VPC IPv6 feature flag is enabled and your account has the VPC Dual Stack account capability
- [ ] Go to the VPC Create page and select Dual Stack
- [ ] You should see a `IPv6 Prefix Length` option in the Subnets section with `/56` selected as the default
- [ ] You should see the helper text `Number of Linodes` instead of a `Number of Available IP Addresses` helper text
- [ ] Test adding/removing multiple subnets and switching from IPv4 and DualStack
- [ ] Click Create VPC. You should see `ipv6: [{range: "/X"}]` in the Network Payload under subnets and the auto-allocated IPv6 address with the prefix length from the API response
- [ ] There should be no regressions with VPC IPv4

```
pnpm test SubnetNode
```

Author: hana-akamai

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

@@ -1,4 +1,4 @@
-interface VPCIPv6 {
+export interface VPCIPv6 {
   range?: string;
 }
 

packages/manager/.changeset/pr-12563-upcoming-features-1753372466262.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+Add subnet IPv6 to VPC create page ([#12563](https://github.com/linode/manager/pull/12563))

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

@@ -1,4 +1,3 @@
-import { useAccount } from '@linode/queries';
 import { useIsGeckoEnabled } from '@linode/shared';
 import {
   Box,
@@ -11,13 +10,15 @@ import {
   Typography,
 } from '@linode/ui';
 import { Radio, RadioGroup } from '@linode/ui';
-import {
-  getQueryParamsFromQueryString,
-  isFeatureEnabledV2,
-} from '@linode/utilities';
+import { getQueryParamsFromQueryString } from '@linode/utilities';
 import Grid from '@mui/material/Grid';
 import * as React from 'react';
-import { Controller, useFieldArray, useFormContext } from 'react-hook-form';
+import {
+  Controller,
+  useFieldArray,
+  useFormContext,
+  useWatch,
+} from 'react-hook-form';
 // eslint-disable-next-line no-restricted-imports
 import { useLocation } from 'react-router-dom';
 
@@ -27,6 +28,7 @@ import { Link } from 'src/components/Link';
 import { RegionSelect } from 'src/components/RegionSelect/RegionSelect';
 import { SelectionCard } from 'src/components/SelectionCard/SelectionCard';
 import { useFlags } from 'src/hooks/useFlags';
+import { useVPCDualStack } from 'src/hooks/useVPCDualStack';
 import { sendLinodeCreateFormInputEvent } from 'src/utilities/analytics/formEventAnalytics';
 
 import { VPC_CREATE_FORM_VPC_HELPER_TEXT } from '../../constants';
@@ -60,25 +62,17 @@ export const VPCTopSectionContent = (props: Props) => {
     control,
     formState: { errors },
   } = useFormContext<CreateVPCPayload>();
-  const { append, fields, remove } = useFieldArray({
+
+  const { update } = useFieldArray({
     control,
-    name: 'ipv6',
+    name: 'subnets',
   });
 
-  const isDualStackSelected = fields.some((f) => f.range);
+  const subnets = useWatch({ control, name: 'subnets' });
+  const vpcIPv6 = useWatch({ control, name: 'ipv6' });
 
-  const { data: account } = useAccount();
-  const isDualStackEnabled = isFeatureEnabledV2(
-    'VPC Dual Stack',
-    Boolean(flags.vpcIpv6),
-    account?.capabilities ?? []
-  );
-
-  const isEnterpriseCustomer = isFeatureEnabledV2(
-    'VPC IPv6 Large Prefixes',
-    Boolean(flags.vpcIpv6),
-    account?.capabilities ?? []
-  );
+  const { isDualStackEnabled, isDualStackSelected, isEnterpriseCustomer } =
+    useVPCDualStack(vpcIPv6);
 
   return (
     <>
@@ -152,114 +146,137 @@ export const VPCTopSectionContent = (props: Props) => {
       {isDualStackEnabled && (
         <Box marginTop={2}>
           <FormLabel>Networking IP Stack </FormLabel>
-          <RadioGroup sx={{ display: 'block' }}>
-            <Grid container spacing={2}>
-              <SelectionCard
-                checked={!isDualStackSelected}
-                gridSize={{
-                  md: isDrawer ? 12 : 3,
-                  sm: 12,
-                  xs: 12,
-                }}
-                heading="IPv4"
-                onClick={() => {
-                  remove(0);
-                }}
-                renderIcon={() => <Radio checked={!isDualStackSelected} />}
-                renderVariant={() => (
-                  <TooltipIcon
-                    status="info"
-                    sxTooltipIcon={{
-                      padding: '8px',
+          <Controller
+            control={control}
+            name="ipv6"
+            render={({ field }) => (
+              <RadioGroup sx={{ display: 'block' }}>
+                <Grid container spacing={2}>
+                  <SelectionCard
+                    checked={!isDualStackSelected}
+                    gridSize={{
+                      md: isDrawer ? 12 : 3,
+                      sm: 12,
+                      xs: 12,
                     }}
-                    text={
-                      <Typography>
-                        The VPC uses IPv4 addresses only. The VPC can use the
-                        entire RFC 1918 specified range for subnetting.
-                      </Typography>
-                    }
-                    width={250}
+                    heading="IPv4"
+                    onClick={() => {
+                      field.onChange([]);
+                      subnets?.forEach((subnet, idx) =>
+                        update(idx, {
+                          ...subnet,
+                          ipv6: undefined,
+                        })
+                      );
+                    }}
+                    renderIcon={() => <Radio checked={!isDualStackSelected} />}
+                    renderVariant={() => (
+                      <TooltipIcon
+                        status="info"
+                        sxTooltipIcon={{
+                          padding: '8px',
+                        }}
+                        text={
+                          <Typography>
+                            The VPC uses IPv4 addresses only. The VPC can use
+                            the entire RFC 1918 specified range for subnetting.
+                          </Typography>
+                        }
+                        width={250}
+                      />
+                    )}
+                    subheadings={[]}
+                    sxCardBase={{ gap: 0 }}
+                    sxCardBaseIcon={{ svg: { fontSize: '20px' } }}
                   />
-                )}
-                subheadings={[]}
-                sxCardBase={{ gap: 0 }}
-                sxCardBaseIcon={{ svg: { fontSize: '20px' } }}
-              />
-              <SelectionCard
-                checked={isDualStackSelected}
-                gridSize={{
-                  md: isDrawer ? 12 : 3,
-                  sm: 12,
-                  xs: 12,
-                }}
-                heading="IPv4 + IPv6 (Dual Stack)"
-                onClick={() => {
-                  if (fields.length === 0) {
-                    append({
-                      range: '/52',
-                    });
-                  }
-                }}
-                renderIcon={() => <Radio checked={isDualStackSelected} />}
-                renderVariant={() => (
-                  <TooltipIcon
-                    status="info"
-                    sxTooltipIcon={{
-                      padding: '8px',
+                  <SelectionCard
+                    checked={isDualStackSelected}
+                    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' }],
+                        })
+                      );
                     }}
-                    text={
-                      <Stack spacing={2}>
-                        <Typography>
-                          The VPC supports both IPv4 and IPv6 addresses.
-                        </Typography>
-                        <Typography>
-                          For IPv4, the VPC can use the entire RFC 1918
-                          specified range for subnetting.
-                        </Typography>
-                        <Typography>
-                          For IPv6, the VPC is assigned an IPv6 prefix length of{' '}
-                          <Code>/52</Code> by default.
-                        </Typography>
-                      </Stack>
-                    }
-                    width={250}
+                    renderIcon={() => <Radio checked={isDualStackSelected} />}
+                    renderVariant={() => (
+                      <TooltipIcon
+                        status="info"
+                        sxTooltipIcon={{
+                          padding: '8px',
+                        }}
+                        text={
+                          <Stack spacing={2}>
+                            <Typography>
+                              The VPC supports both IPv4 and IPv6 addresses.
+                            </Typography>
+                            <Typography>
+                              For IPv4, the VPC can use the entire RFC 1918
+                              specified range for subnetting.
+                            </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>
+                </Grid>
+              </RadioGroup>
+            )}
+          />
         </Box>
       )}
       {isDualStackSelected && isEnterpriseCustomer && (
         <Controller
           control={control}
           name="ipv6"
-          render={() => (
+          render={({ field, fieldState }) => (
             <RadioGroup
-              onChange={(_, value) => {
-                remove(0);
-                append({
-                  range: value,
-                });
-              }}
-              value={fields[0].range}
+              onChange={(_, value) => field.onChange([{ range: value }])}
+              value={field.value}
             >
               <StyledFormLabel sx={{ marginTop: 1, marginBottom: 0 }}>
                 VPC IPv6 Prefix Length
               </StyledFormLabel>
               {errors.ipv6 && (
                 <Notice
                   sx={{ marginTop: 1 }}
-                  text={errors.ipv6[0]?.range?.message}
+                  text={fieldState.error?.message}
                   variant="error"
                 />
               )}
               <>
-                <FormControlLabel control={<Radio />} label="/52" value="/52" />
-                <FormControlLabel control={<Radio />} label="/48" value="/48" />
+                <FormControlLabel
+                  checked={vpcIPv6 && vpcIPv6[0].range === '/52'}
+                  control={<Radio />}
+                  label="/52"
+                  value="/52"
+                />
+                <FormControlLabel
+                  checked={vpcIPv6 && vpcIPv6[0].range === '/48'}
+                  control={<Radio />}
+                  label="/48"
+                  value="/48"
+                />
               </>
             </RadioGroup>
           )}

packages/manager/src/features/VPCs/VPCCreate/MultipleSubnetInput.tsx

@@ -1,8 +1,9 @@
 import { Button, Divider } from '@linode/ui';
 import Grid from '@mui/material/Grid';
 import * as React from 'react';
-import { useFieldArray, useFormContext } from 'react-hook-form';
+import { useFieldArray, useFormContext, useWatch } from 'react-hook-form';
 
+import { useVPCDualStack } from 'src/hooks/useVPCDualStack';
 import {
   DEFAULT_SUBNET_IPV4_VALUE,
   getRecommendedSubnetIPv4,
@@ -27,10 +28,14 @@ export const MultipleSubnetInput = (props: Props) => {
     name: 'subnets',
   });
 
+  const vpcIPv6 = useWatch({ control, name: 'ipv6' });
+
   const [lastRecommendedIPv4, setLastRecommendedIPv4] = React.useState(
     DEFAULT_SUBNET_IPV4_VALUE
   );
 
+  const { shouldDisplayIPv6, recommendedIPv6 } = useVPCDualStack(vpcIPv6);
+
   const handleAddSubnet = () => {
     const recommendedIPv4 = getRecommendedSubnetIPv4(
       lastRecommendedIPv4,
@@ -39,6 +44,7 @@ export const MultipleSubnetInput = (props: Props) => {
     setLastRecommendedIPv4(recommendedIPv4);
     append({
       ipv4: recommendedIPv4,
+      ipv6: recommendedIPv6,
       label: '',
     });
   };
@@ -56,6 +62,7 @@ export const MultipleSubnetInput = (props: Props) => {
               idx={subnetIdx}
               isCreateVPCDrawer={isDrawer}
               remove={remove}
+              shouldDisplayIPv6={shouldDisplayIPv6}
             />
           </Grid>
         );