From fdb225ee9ba5e329ff465a56273ae0fbb048c518 Mon Sep 17 00:00:00 2001
From: Banks Nussman <banks@nussman.us>
Date: Mon, 24 Mar 2025 18:11:20 -0400
Subject: [PATCH 01/16] save progress

---
 .../Linodes/LinodeCreate/Networking/VPC.tsx   | 85 ++++++++++++++++++-
 .../LinodeCreate/Networking/VPCRanges.tsx     | 63 ++++++++++++++
 .../LinodeCreate/Networking/utilities.ts      | 22 ++++-
 .../features/Linodes/LinodeCreate/VPC/VPC.tsx |  2 +-
 .../Linodes/LinodeCreate/utilities.ts         |  6 +-
 5 files changed, 171 insertions(+), 7 deletions(-)
 create mode 100644 packages/manager/src/features/Linodes/LinodeCreate/Networking/VPCRanges.tsx

diff --git a/packages/manager/src/features/Linodes/LinodeCreate/Networking/VPC.tsx b/packages/manager/src/features/Linodes/LinodeCreate/Networking/VPC.tsx
index fe7c5d3ee6b..e5c59669d99 100644
--- a/packages/manager/src/features/Linodes/LinodeCreate/Networking/VPC.tsx
+++ b/packages/manager/src/features/Linodes/LinodeCreate/Networking/VPC.tsx
@@ -1,13 +1,27 @@
 import { useAllVPCsQuery, useRegionQuery } from '@linode/queries';
-import { Autocomplete, Box, Notice, Stack } from '@linode/ui';
+import {
+  Autocomplete,
+  Box,
+  Checkbox,
+  FormControlLabel,
+  Notice,
+  Stack,
+  TextField,
+  TooltipIcon,
+  Typography,
+} from '@linode/ui';
 import React, { useState } from 'react';
 import { Controller, useFormContext, useWatch } from 'react-hook-form';
 
 import { LinkButton } from 'src/components/LinkButton';
-import { REGION_CAVEAT_HELPER_TEXT } from 'src/features/VPCs/constants';
+import {
+  REGION_CAVEAT_HELPER_TEXT,
+  VPC_AUTO_ASSIGN_IPV4_TOOLTIP,
+} from 'src/features/VPCs/constants';
 import { VPCCreateDrawer } from 'src/features/VPCs/VPCCreateDrawer/VPCCreateDrawer';
 
 import type { LinodeCreateFormValues } from '../utilities';
+import { VPCRanges } from './VPCRanges';
 
 interface Props {
   index: number;
@@ -16,8 +30,9 @@ interface Props {
 export const VPC = ({ index }: Props) => {
   const {
     control,
-    setValue,
     resetField,
+    setValue,
+    formState
   } = useFormContext<LinodeCreateFormValues>();
   const [isCreateDrawerOpen, setIsCreateDrawerOpen] = useState(false);
 
@@ -38,6 +53,8 @@ export const VPC = ({ index }: Props) => {
 
   const selectedVPC = vpcs?.find((vpc) => vpc.id === selectedVPCId);
 
+  console.log(formState.errors)
+
   return (
     <Box>
       <Stack spacing={1.5}>
@@ -118,6 +135,68 @@ export const VPC = ({ index }: Props) => {
           control={control}
           name={`linodeInterfaces.${index}.vpc.subnet_id`}
         />
+        <Controller
+          render={({ field, fieldState }) => (
+            <>
+              <FormControlLabel
+                label={
+                  <Stack alignItems="center" direction="row">
+                    <Typography>
+                      Auto-assign a VPC IPv4 address for this Linode in the VPC
+                    </Typography>
+                    <TooltipIcon
+                      status="help"
+                      text={VPC_AUTO_ASSIGN_IPV4_TOOLTIP}
+                    />
+                  </Stack>
+                }
+                checked={field.value === 'auto'}
+                control={<Checkbox sx={{ ml: -1 }} />}
+                disabled={!regionSupportsVPCs}
+                onChange={(e, checked) => field.onChange(checked ? 'auto' : '')}
+              />
+              {field.value !== 'auto' && (
+                <TextField
+                  errorText={fieldState.error?.message}
+                  label="VPC IPv4"
+                  noMarginTop
+                  onBlur={field.onBlur}
+                  onChange={field.onChange}
+                  required
+                  value={field.value}
+                />
+              )}
+            </>
+          )}
+          control={control}
+          name={`linodeInterfaces.${index}.vpc.ipv4.addresses.0.address`}
+        />
+        <Controller
+          render={({ field }) => (
+            <FormControlLabel
+              label={
+                <Stack alignItems="center" direction="row">
+                  <Typography>
+                    Assign a public IPv4 address for this Linode
+                  </Typography>
+                  <TooltipIcon
+                    text={
+                      'Access the internet through the public IPv4 address using static 1:1 NAT.'
+                    }
+                    status="help"
+                  />
+                </Stack>
+              }
+              checked={field.value === 'auto'}
+              control={<Checkbox sx={{ ml: -1 }} />}
+              disabled={!regionSupportsVPCs}
+              onChange={(e, checked) => field.onChange(checked ? 'auto' : null)}
+            />
+          )}
+          control={control}
+          name={`linodeInterfaces.${index}.vpc.ipv4.addresses.0.nat_1_1_address`}
+        />
+        <VPCRanges interfaceIndex={index} />
       </Stack>
       <VPCCreateDrawer
         onSuccess={(vpc) => {
diff --git a/packages/manager/src/features/Linodes/LinodeCreate/Networking/VPCRanges.tsx b/packages/manager/src/features/Linodes/LinodeCreate/Networking/VPCRanges.tsx
new file mode 100644
index 00000000000..7f1ee579fdb
--- /dev/null
+++ b/packages/manager/src/features/Linodes/LinodeCreate/Networking/VPCRanges.tsx
@@ -0,0 +1,63 @@
+import { Box, IconButton, Stack, TextField } from '@linode/ui';
+import CloseIcon from '@mui/icons-material/Close';
+import React from 'react';
+import { Controller, useFieldArray, useFormContext } from 'react-hook-form';
+
+import { LinkButton } from 'src/components/LinkButton';
+
+import type { LinodeCreateFormValues } from '../utilities';
+
+interface Props {
+  interfaceIndex: number;
+}
+
+export const VPCRanges = ({ interfaceIndex }: Props) => {
+  const { control } = useFormContext<LinodeCreateFormValues>();
+
+  const { append, fields, remove } = useFieldArray({
+    control,
+    name: `linodeInterfaces.${interfaceIndex}.vpc.ipv4.ranges`,
+  });
+
+  return (
+    <Stack spacing={1}>
+      {fields.map((field, index) => (
+        <Stack
+          alignItems="flex-start"
+          direction="row"
+          key={field.id}
+          spacing={0.5}
+        >
+          <Controller
+            render={({ field, fieldState }) => (
+              <TextField
+                errorText={fieldState.error?.message}
+                hideLabel
+                label={`IP Range ${index}`}
+                onBlur={field.onBlur}
+                onChange={field.onChange}
+                placeholder="10.0.0.0/24"
+                sx={{ minWidth: 290 }}
+                value={field.value}
+              />
+            )}
+            control={control}
+            name={`linodeInterfaces.${interfaceIndex}.vpc.ipv4.ranges.${index}.range`}
+          />
+          <IconButton
+            aria-label={`Remove IP Range ${index}`}
+            onClick={() => remove(index)}
+            sx={{ padding: 0.75 }}
+          >
+            <CloseIcon />
+          </IconButton>
+        </Stack>
+      ))}
+      <Box>
+        <LinkButton onClick={() => append({ range: '' })}>
+          Add IPv4 Range
+        </LinkButton>
+      </Box>
+    </Stack>
+  );
+};
diff --git a/packages/manager/src/features/Linodes/LinodeCreate/Networking/utilities.ts b/packages/manager/src/features/Linodes/LinodeCreate/Networking/utilities.ts
index 734857a706d..5ef13a60d4a 100644
--- a/packages/manager/src/features/Linodes/LinodeCreate/Networking/utilities.ts
+++ b/packages/manager/src/features/Linodes/LinodeCreate/Networking/utilities.ts
@@ -62,11 +62,23 @@ export const getLegacyInterfaceFromLinodeInterface = (
   }
 
   if (purpose === 'vpc') {
+    // New interfaces use "auto" to auto-assign a 1:1 NAT address, but legacy uses "any".
+    const nat =
+      linodeInterface.vpc?.ipv4?.addresses?.[0].nat_1_1_address === 'auto'
+        ? 'any'
+        : linodeInterface.vpc?.ipv4?.addresses?.[0].nat_1_1_address;
+
+    // New interfaces use "auto" to auto-assign a VPC IP, but legacy will auto-assign with `null`.
+    const vpcIp =
+      linodeInterface.vpc?.ipv4?.addresses?.[0].address === 'auto'
+        ? null
+        : linodeInterface.vpc?.ipv4?.addresses?.[0].address;
+
     return {
       ip_ranges: linodeInterface.vpc?.ipv4?.ranges?.map(({ range }) => range),
       ipv4: {
-        nat_1_1: linodeInterface.vpc?.ipv4?.addresses?.[0].nat_1_1_address,
-        vpc: linodeInterface.vpc?.ipv4?.addresses?.[0].address,
+        nat_1_1: nat,
+        vpc: vpcIp,
       },
       purpose,
       subnet_id: linodeInterface.vpc?.subnet_id,
@@ -77,7 +89,13 @@ export const getLegacyInterfaceFromLinodeInterface = (
   return { purpose: 'public' };
 };
 
+/**
+ * For example:
+ * `interfaces[0].ip_ranges[1]` should map to `linodeInterfaces.0.vpc.ipv4.ranges.1.range`
+ */
 const legacyFieldToNewFieldMap = {
+  '].ipv4.nat_1_1': '].vpc.ipv4.addresses.0.nat_1_1_address',
+  '].ipv4.vpc': '].vpc.ipv4.addresses.0.address',
   '].label': '].vlan.vlan_lanel',
   '].subnet_id': '].vpc.subnet_id',
 };
diff --git a/packages/manager/src/features/Linodes/LinodeCreate/VPC/VPC.tsx b/packages/manager/src/features/Linodes/LinodeCreate/VPC/VPC.tsx
index f01f31cbf2b..fd1f098592b 100644
--- a/packages/manager/src/features/Linodes/LinodeCreate/VPC/VPC.tsx
+++ b/packages/manager/src/features/Linodes/LinodeCreate/VPC/VPC.tsx
@@ -1,3 +1,4 @@
+import { useAllVPCsQuery, useRegionsQuery } from '@linode/queries';
 import {
   Autocomplete,
   Box,
@@ -21,7 +22,6 @@ import {
   VPC_AUTO_ASSIGN_IPV4_TOOLTIP,
 } from 'src/features/VPCs/constants';
 import { VPCCreateDrawer } from 'src/features/VPCs/VPCCreateDrawer/VPCCreateDrawer';
-import { useRegionsQuery, useAllVPCsQuery } from '@linode/queries';
 import { sendLinodeCreateFormInputEvent } from 'src/utilities/analytics/formEventAnalytics';
 import { doesRegionSupportFeature } from 'src/utilities/doesRegionSupportFeature';
 
diff --git a/packages/manager/src/features/Linodes/LinodeCreate/utilities.ts b/packages/manager/src/features/Linodes/LinodeCreate/utilities.ts
index 187b44eb538..fe1683950ab 100644
--- a/packages/manager/src/features/Linodes/LinodeCreate/utilities.ts
+++ b/packages/manager/src/features/Linodes/LinodeCreate/utilities.ts
@@ -276,7 +276,11 @@ const defaultLinodeInterfaces: LinodeCreateInterface[] = [
     public: {},
     purpose: 'public',
     vlan: null,
-    vpc: null,
+    vpc: {
+      ipv4: { addresses: [{ address: 'auto', nat_1_1_address: null }]},
+      vpc_id: null,
+      subnet_id: null,
+    },
   },
 ];
 

From 03addadf00a50e65c1882013c303e03918ea835f Mon Sep 17 00:00:00 2001
From: Banks Nussman <banks@nussman.us>
Date: Mon, 24 Mar 2025 18:22:33 -0400
Subject: [PATCH 02/16] handle complex error case

---
 .../Linodes/LinodeCreate/Networking/utilities.ts     | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/packages/manager/src/features/Linodes/LinodeCreate/Networking/utilities.ts b/packages/manager/src/features/Linodes/LinodeCreate/Networking/utilities.ts
index 5ef13a60d4a..8afb55d771e 100644
--- a/packages/manager/src/features/Linodes/LinodeCreate/Networking/utilities.ts
+++ b/packages/manager/src/features/Linodes/LinodeCreate/Networking/utilities.ts
@@ -89,10 +89,6 @@ export const getLegacyInterfaceFromLinodeInterface = (
   return { purpose: 'public' };
 };
 
-/**
- * For example:
- * `interfaces[0].ip_ranges[1]` should map to `linodeInterfaces.0.vpc.ipv4.ranges.1.range`
- */
 const legacyFieldToNewFieldMap = {
   '].ipv4.nat_1_1': '].vpc.ipv4.addresses.0.nat_1_1_address',
   '].ipv4.vpc': '].vpc.ipv4.addresses.0.address',
@@ -118,6 +114,14 @@ export const transformLegacyInterfaceErrorsToLinodeInterfaceErrors = (
           legacyFieldToNewFieldMap[key as keyof typeof legacyFieldToNewFieldMap]
         );
       }
+      if (error.field && error.field.includes('ip_ranges')) {
+        // Handle the more complex case where:
+        // `interfaces[0].ip_ranges[1]` should map to `linodeInterfaces.0.vpc.ipv4.ranges.1.range`
+        error.field = error.field.replace(
+          /ip_ranges\[(\d+)\]/,
+          'vpc.ipv4.ranges.$1.range'
+        );
+      }
       if (error.field && error.field.startsWith('interfaces')) {
         error.field = error.field.replace('interfaces', 'linodeInterfaces');
       }

From 77ea0ecefba9fabf24a5c61fff850a865e510e10 Mon Sep 17 00:00:00 2001
From: Banks Nussman <banks@nussman.us>
Date: Mon, 24 Mar 2025 19:22:18 -0400
Subject: [PATCH 03/16] more fixes

---
 .../Linodes/LinodeCreate/Networking/VPC.tsx   | 139 ++++++++++--------
 .../LinodeCreate/Networking/VPCRanges.tsx     |  80 ++++++----
 packages/validation/src/linodes.schema.ts     |   4 +-
 3 files changed, 126 insertions(+), 97 deletions(-)

diff --git a/packages/manager/src/features/Linodes/LinodeCreate/Networking/VPC.tsx b/packages/manager/src/features/Linodes/LinodeCreate/Networking/VPC.tsx
index e5c59669d99..19ad44f545f 100644
--- a/packages/manager/src/features/Linodes/LinodeCreate/Networking/VPC.tsx
+++ b/packages/manager/src/features/Linodes/LinodeCreate/Networking/VPC.tsx
@@ -3,6 +3,7 @@ import {
   Autocomplete,
   Box,
   Checkbox,
+  Divider,
   FormControlLabel,
   Notice,
   Stack,
@@ -13,6 +14,7 @@ import {
 import React, { useState } from 'react';
 import { Controller, useFormContext, useWatch } from 'react-hook-form';
 
+import { Link } from 'src/components/Link';
 import { LinkButton } from 'src/components/LinkButton';
 import {
   REGION_CAVEAT_HELPER_TEXT,
@@ -20,9 +22,10 @@ import {
 } from 'src/features/VPCs/constants';
 import { VPCCreateDrawer } from 'src/features/VPCs/VPCCreateDrawer/VPCCreateDrawer';
 
-import type { LinodeCreateFormValues } from '../utilities';
 import { VPCRanges } from './VPCRanges';
 
+import type { LinodeCreateFormValues } from '../utilities';
+
 interface Props {
   index: number;
 }
@@ -32,7 +35,6 @@ export const VPC = ({ index }: Props) => {
     control,
     resetField,
     setValue,
-    formState
   } = useFormContext<LinodeCreateFormValues>();
   const [isCreateDrawerOpen, setIsCreateDrawerOpen] = useState(false);
 
@@ -53,8 +55,6 @@ export const VPC = ({ index }: Props) => {
 
   const selectedVPC = vpcs?.find((vpc) => vpc.id === selectedVPCId);
 
-  console.log(formState.errors)
-
   return (
     <Box>
       <Stack spacing={1.5}>
@@ -135,67 +135,80 @@ export const VPC = ({ index }: Props) => {
           control={control}
           name={`linodeInterfaces.${index}.vpc.subnet_id`}
         />
-        <Controller
-          render={({ field, fieldState }) => (
-            <>
-              <FormControlLabel
-                label={
-                  <Stack alignItems="center" direction="row">
-                    <Typography>
-                      Auto-assign a VPC IPv4 address for this Linode in the VPC
-                    </Typography>
-                    <TooltipIcon
-                      status="help"
-                      text={VPC_AUTO_ASSIGN_IPV4_TOOLTIP}
-                    />
-                  </Stack>
-                }
-                checked={field.value === 'auto'}
-                control={<Checkbox sx={{ ml: -1 }} />}
-                disabled={!regionSupportsVPCs}
-                onChange={(e, checked) => field.onChange(checked ? 'auto' : '')}
-              />
-              {field.value !== 'auto' && (
-                <TextField
-                  errorText={fieldState.error?.message}
-                  label="VPC IPv4"
-                  noMarginTop
-                  onBlur={field.onBlur}
-                  onChange={field.onChange}
-                  required
-                  value={field.value}
+        <Stack>
+          <Controller
+            render={({ field, fieldState }) => (
+              <>
+                <FormControlLabel
+                  label={
+                    <Stack alignItems="center" direction="row">
+                      <Typography>
+                        Auto-assign a VPC IPv4 address for this Linode in the
+                        VPC
+                      </Typography>
+                      <TooltipIcon
+                        status="help"
+                        text={VPC_AUTO_ASSIGN_IPV4_TOOLTIP}
+                      />
+                    </Stack>
+                  }
+                  onChange={(e, checked) =>
+                    field.onChange(checked ? 'auto' : '')
+                  }
+                  checked={field.value === 'auto'}
+                  control={<Checkbox sx={{ ml: 0.4 }} />}
+                  disabled={!regionSupportsVPCs}
                 />
-              )}
-            </>
-          )}
-          control={control}
-          name={`linodeInterfaces.${index}.vpc.ipv4.addresses.0.address`}
-        />
-        <Controller
-          render={({ field }) => (
-            <FormControlLabel
-              label={
-                <Stack alignItems="center" direction="row">
-                  <Typography>
-                    Assign a public IPv4 address for this Linode
-                  </Typography>
-                  <TooltipIcon
-                    text={
-                      'Access the internet through the public IPv4 address using static 1:1 NAT.'
-                    }
-                    status="help"
+                {field.value !== 'auto' && (
+                  <TextField
+                    containerProps={{ sx: { my: 1 }}}
+                    errorText={fieldState.error?.message}
+                    label="VPC IPv4"
+                    noMarginTop
+                    onBlur={field.onBlur}
+                    onChange={field.onChange}
+                    required
+                    value={field.value}
                   />
-                </Stack>
-              }
-              checked={field.value === 'auto'}
-              control={<Checkbox sx={{ ml: -1 }} />}
-              disabled={!regionSupportsVPCs}
-              onChange={(e, checked) => field.onChange(checked ? 'auto' : null)}
-            />
-          )}
-          control={control}
-          name={`linodeInterfaces.${index}.vpc.ipv4.addresses.0.nat_1_1_address`}
-        />
+                )}
+              </>
+            )}
+            control={control}
+            name={`linodeInterfaces.${index}.vpc.ipv4.addresses.0.address`}
+          />
+          <Controller
+            render={({ field, fieldState }) => (
+              <>
+                {fieldState.error?.message && (
+                  <Notice text={fieldState.error.message} variant="error" />
+                )}
+                <FormControlLabel
+                  label={
+                    <Stack alignItems="center" direction="row">
+                      <Typography>
+                        Assign a public IPv4 address for this Linode
+                      </Typography>
+                      <TooltipIcon
+                        text={
+                          'Access the internet through the public IPv4 address using static 1:1 NAT.'
+                        }
+                        status="help"
+                      />
+                    </Stack>
+                  }
+                  onChange={(e, checked) =>
+                    field.onChange(checked ? 'auto' : null)
+                  }
+                  checked={field.value === 'auto'}
+                  control={<Checkbox sx={{ ml: 0.4 }} />}
+                  disabled={!regionSupportsVPCs}
+                />
+              </>
+            )}
+            control={control}
+            name={`linodeInterfaces.${index}.vpc.ipv4.addresses.0.nat_1_1_address`}
+          />
+        </Stack>
         <VPCRanges interfaceIndex={index} />
       </Stack>
       <VPCCreateDrawer
diff --git a/packages/manager/src/features/Linodes/LinodeCreate/Networking/VPCRanges.tsx b/packages/manager/src/features/Linodes/LinodeCreate/Networking/VPCRanges.tsx
index 7f1ee579fdb..e279f439c96 100644
--- a/packages/manager/src/features/Linodes/LinodeCreate/Networking/VPCRanges.tsx
+++ b/packages/manager/src/features/Linodes/LinodeCreate/Networking/VPCRanges.tsx
@@ -1,8 +1,9 @@
-import { Box, IconButton, Stack, TextField } from '@linode/ui';
+import { Box, IconButton, Stack, TextField, Typography } from '@linode/ui';
 import CloseIcon from '@mui/icons-material/Close';
 import React from 'react';
 import { Controller, useFieldArray, useFormContext } from 'react-hook-form';
 
+import { Link } from 'src/components/Link';
 import { LinkButton } from 'src/components/LinkButton';
 
 import type { LinodeCreateFormValues } from '../utilities';
@@ -21,38 +22,53 @@ export const VPCRanges = ({ interfaceIndex }: Props) => {
 
   return (
     <Stack spacing={1}>
-      {fields.map((field, index) => (
-        <Stack
-          alignItems="flex-start"
-          direction="row"
-          key={field.id}
-          spacing={0.5}
-        >
-          <Controller
-            render={({ field, fieldState }) => (
-              <TextField
-                errorText={fieldState.error?.message}
-                hideLabel
-                label={`IP Range ${index}`}
-                onBlur={field.onBlur}
-                onChange={field.onChange}
-                placeholder="10.0.0.0/24"
-                sx={{ minWidth: 290 }}
-                value={field.value}
-              />
-            )}
-            control={control}
-            name={`linodeInterfaces.${interfaceIndex}.vpc.ipv4.ranges.${index}.range`}
-          />
-          <IconButton
-            aria-label={`Remove IP Range ${index}`}
-            onClick={() => remove(index)}
-            sx={{ padding: 0.75 }}
+      <Stack spacing={0.75}>
+        <Typography sx={(theme) => ({ font: theme.font.bold })}>
+          Assign additional IPv4 ranges
+        </Typography>
+        <Typography>
+          Assign additional IPv4 address ranges that the VPC can use to reach
+          services running on this Linode.{' '}
+          <Link to="https://techdocs.akamai.com/cloud-computing/docs/assign-a-compute-instance-to-a-vpc">
+            Learn more
+          </Link>
+          .
+        </Typography>
+      </Stack>
+      <Stack spacing={1}>
+        {fields.map((field, index) => (
+          <Stack
+            alignItems="flex-start"
+            direction="row"
+            key={field.id}
+            spacing={0.5}
           >
-            <CloseIcon />
-          </IconButton>
-        </Stack>
-      ))}
+            <Controller
+              render={({ field, fieldState }) => (
+                <TextField
+                  errorText={fieldState.error?.message}
+                  hideLabel
+                  label={`IP Range ${index}`}
+                  onBlur={field.onBlur}
+                  onChange={field.onChange}
+                  placeholder="10.0.0.0/24"
+                  sx={{ minWidth: 290 }}
+                  value={field.value}
+                />
+              )}
+              control={control}
+              name={`linodeInterfaces.${interfaceIndex}.vpc.ipv4.ranges.${index}.range`}
+            />
+            <IconButton
+              aria-label={`Remove IP Range ${index}`}
+              onClick={() => remove(index)}
+              sx={{ padding: 0.75 }}
+            >
+              <CloseIcon />
+            </IconButton>
+          </Stack>
+        ))}
+      </Stack>
       <Box>
         <LinkButton onClick={() => append({ range: '' })}>
           Add IPv4 Range
diff --git a/packages/validation/src/linodes.schema.ts b/packages/validation/src/linodes.schema.ts
index abfb12d6c65..3e179ce65dd 100644
--- a/packages/validation/src/linodes.schema.ts
+++ b/packages/validation/src/linodes.schema.ts
@@ -532,7 +532,7 @@ const BaseInterfaceIPv4AddressSchema = object({
 });
 
 const VPCInterfaceIPv4RangeSchema = object({
-  range: string().required(),
+  range: string().required("Range is required."),
 });
 
 const PublicInterfaceRangeSchema = object({
@@ -540,7 +540,7 @@ const PublicInterfaceRangeSchema = object({
 });
 
 const CreateVPCInterfaceIpv4AddressSchema = object({
-  address: string().required(),
+  address: string().required("VPC IPv4 is required."),
   primary: boolean(),
   nat_1_1_address: string().nullable(),
 });

From 7624e85844a75ac183728f240be94a39abd2aa52 Mon Sep 17 00:00:00 2001
From: Banks Nussman <banks@nussman.us>
Date: Mon, 24 Mar 2025 19:30:44 -0400
Subject: [PATCH 04/16] dial in UI

---
 .../Linodes/LinodeCreate/Networking/VPC.tsx   |  2 +-
 .../LinodeCreate/Networking/VPCRanges.tsx     | 46 +++++++++++--------
 2 files changed, 28 insertions(+), 20 deletions(-)

diff --git a/packages/manager/src/features/Linodes/LinodeCreate/Networking/VPC.tsx b/packages/manager/src/features/Linodes/LinodeCreate/Networking/VPC.tsx
index 19ad44f545f..c5fac6329fa 100644
--- a/packages/manager/src/features/Linodes/LinodeCreate/Networking/VPC.tsx
+++ b/packages/manager/src/features/Linodes/LinodeCreate/Networking/VPC.tsx
@@ -209,7 +209,7 @@ export const VPC = ({ index }: Props) => {
             name={`linodeInterfaces.${index}.vpc.ipv4.addresses.0.nat_1_1_address`}
           />
         </Stack>
-        <VPCRanges interfaceIndex={index} />
+        <VPCRanges disabled={!regionSupportsVPCs} interfaceIndex={index} />
       </Stack>
       <VPCCreateDrawer
         onSuccess={(vpc) => {
diff --git a/packages/manager/src/features/Linodes/LinodeCreate/Networking/VPCRanges.tsx b/packages/manager/src/features/Linodes/LinodeCreate/Networking/VPCRanges.tsx
index e279f439c96..24f69fb5b91 100644
--- a/packages/manager/src/features/Linodes/LinodeCreate/Networking/VPCRanges.tsx
+++ b/packages/manager/src/features/Linodes/LinodeCreate/Networking/VPCRanges.tsx
@@ -1,4 +1,10 @@
-import { Box, IconButton, Stack, TextField, Typography } from '@linode/ui';
+import {
+  IconButton,
+  Stack,
+  TextField,
+  TooltipIcon,
+  Typography,
+} from '@linode/ui';
 import CloseIcon from '@mui/icons-material/Close';
 import React from 'react';
 import { Controller, useFieldArray, useFormContext } from 'react-hook-form';
@@ -9,10 +15,11 @@ import { LinkButton } from 'src/components/LinkButton';
 import type { LinodeCreateFormValues } from '../utilities';
 
 interface Props {
+  disabled: boolean;
   interfaceIndex: number;
 }
 
-export const VPCRanges = ({ interfaceIndex }: Props) => {
+export const VPCRanges = ({ disabled, interfaceIndex }: Props) => {
   const { control } = useFormContext<LinodeCreateFormValues>();
 
   const { append, fields, remove } = useFieldArray({
@@ -21,20 +28,7 @@ export const VPCRanges = ({ interfaceIndex }: Props) => {
   });
 
   return (
-    <Stack spacing={1}>
-      <Stack spacing={0.75}>
-        <Typography sx={(theme) => ({ font: theme.font.bold })}>
-          Assign additional IPv4 ranges
-        </Typography>
-        <Typography>
-          Assign additional IPv4 address ranges that the VPC can use to reach
-          services running on this Linode.{' '}
-          <Link to="https://techdocs.akamai.com/cloud-computing/docs/assign-a-compute-instance-to-a-vpc">
-            Learn more
-          </Link>
-          .
-        </Typography>
-      </Stack>
+    <Stack>
       <Stack spacing={1}>
         {fields.map((field, index) => (
           <Stack
@@ -69,11 +63,25 @@ export const VPCRanges = ({ interfaceIndex }: Props) => {
           </Stack>
         ))}
       </Stack>
-      <Box>
-        <LinkButton onClick={() => append({ range: '' })}>
+      <Stack alignItems="center" direction="row" spacing={1}>
+        <LinkButton isDisabled={disabled} onClick={() => append({ range: '' })}>
           Add IPv4 Range
         </LinkButton>
-      </Box>
+        <TooltipIcon
+          text={
+            <Typography>
+              Assign additional IPv4 address ranges that the VPC can use to
+              reach services running on this Linode.{' '}
+              <Link to="https://techdocs.akamai.com/cloud-computing/docs/assign-a-compute-instance-to-a-vpc">
+                Learn more
+              </Link>
+              .
+            </Typography>
+          }
+          status="help"
+          sxTooltipIcon={{ p: 0.5 }}
+        />
+      </Stack>
     </Stack>
   );
 };

From d5a14c608d1a9524558133d117b203a950d4705c Mon Sep 17 00:00:00 2001
From: Banks Nussman <banks@nussman.us>
Date: Mon, 24 Mar 2025 20:24:25 -0400
Subject: [PATCH 05/16] default firewalls work on Linode Create flow

---
 .../LinodeCreate/Networking/InterfaceType.tsx | 33 ++++++++++++++-
 .../LinodeCreate/Networking/Networking.tsx    | 17 ++++----
 .../Linodes/LinodeCreate/Networking/VPC.tsx   |  4 +-
 .../LinodeCreate/Networking/utilities.ts      | 36 ++++++++++++++++
 .../Linodes/LinodeCreate/utilities.ts         | 41 +++++++++++--------
 5 files changed, 99 insertions(+), 32 deletions(-)

diff --git a/packages/manager/src/features/Linodes/LinodeCreate/Networking/InterfaceType.tsx b/packages/manager/src/features/Linodes/LinodeCreate/Networking/InterfaceType.tsx
index 2f76d9f2e67..e86c8a35fd6 100644
--- a/packages/manager/src/features/Linodes/LinodeCreate/Networking/InterfaceType.tsx
+++ b/packages/manager/src/features/Linodes/LinodeCreate/Networking/InterfaceType.tsx
@@ -1,3 +1,4 @@
+import { useFirewallSettingsQuery } from '@linode/queries';
 import { FormControl, FormControlLabel, Radio, RadioGroup } from '@linode/ui';
 import React from 'react';
 import { useController, useFormContext } from 'react-hook-form';
@@ -11,7 +12,9 @@ interface Props {
 }
 
 export const InterfaceType = ({ index }: Props) => {
-  const { control } = useFormContext<LinodeCreateFormValues>();
+  const { control, setValue } = useFormContext<LinodeCreateFormValues>();
+
+  const { data: firewallSettings } = useFirewallSettingsQuery();
 
   const { field } = useController({
     control,
@@ -24,8 +27,34 @@ export const InterfaceType = ({ index }: Props) => {
         Network Connection
       </FormLabel>
       <RadioGroup
+        onChange={(e, value) => {
+          field.onChange(value);
+
+          if (
+            value === 'vpc' &&
+            firewallSettings?.default_firewall_ids.vpc_interface
+          ) {
+            setValue(
+              `linodeInterfaces.${index}.firewall_id`,
+              firewallSettings?.default_firewall_ids.vpc_interface
+            );
+          }
+
+          if (
+            value === 'public' &&
+            firewallSettings?.default_firewall_ids.public_interface
+          ) {
+            setValue(
+              `linodeInterfaces.${index}.firewall_id`,
+              firewallSettings?.default_firewall_ids.public_interface
+            );
+          }
+
+          if (value === 'vlan') {
+            setValue(`linodeInterfaces.${index}.firewall_id`, null);
+          }
+        }}
         aria-labelledby="network-interface"
-        onChange={field.onChange}
         row
         sx={{ mb: '0px !important' }}
         value={field.value}
diff --git a/packages/manager/src/features/Linodes/LinodeCreate/Networking/Networking.tsx b/packages/manager/src/features/Linodes/LinodeCreate/Networking/Networking.tsx
index 9ecbf859fd3..bd1ebda2ab0 100644
--- a/packages/manager/src/features/Linodes/LinodeCreate/Networking/Networking.tsx
+++ b/packages/manager/src/features/Linodes/LinodeCreate/Networking/Networking.tsx
@@ -1,3 +1,4 @@
+import { useFirewallSettingsQuery } from '@linode/queries';
 import {
   Button,
   Divider,
@@ -13,6 +14,7 @@ import { useFieldArray, useFormContext, useWatch } from 'react-hook-form';
 import { Firewall } from './Firewall';
 import { InterfaceGeneration } from './InterfaceGeneration';
 import { LinodeInterface } from './LinodeInterface';
+import { getDefaultInterfacePayload } from './utilities';
 
 import type { LinodeCreateFormValues } from '../utilities';
 
@@ -22,6 +24,8 @@ export const Networking = () => {
     formState: { errors },
   } = useFormContext<LinodeCreateFormValues>();
 
+  const { data: firewallSettings } = useFirewallSettingsQuery();
+
   const { append, fields, remove } = useFieldArray({
     control,
     name: 'linodeInterfaces',
@@ -42,16 +46,9 @@ export const Networking = () => {
         >
           <Typography variant="h2">Networking</Typography>
           <Button
-            onClick={() =>
-              append({
-                default_route: null,
-                firewall_id: null,
-                public: {},
-                purpose: 'public',
-                vlan: null,
-                vpc: null,
-              })
-            }
+            onClick={() => {
+              append(getDefaultInterfacePayload('public', firewallSettings));
+            }}
             buttonType="outlined"
             endIcon={<PlusSignIcon height="12px" width="12px" />}
           >
diff --git a/packages/manager/src/features/Linodes/LinodeCreate/Networking/VPC.tsx b/packages/manager/src/features/Linodes/LinodeCreate/Networking/VPC.tsx
index c5fac6329fa..403c55cf64c 100644
--- a/packages/manager/src/features/Linodes/LinodeCreate/Networking/VPC.tsx
+++ b/packages/manager/src/features/Linodes/LinodeCreate/Networking/VPC.tsx
@@ -3,7 +3,6 @@ import {
   Autocomplete,
   Box,
   Checkbox,
-  Divider,
   FormControlLabel,
   Notice,
   Stack,
@@ -14,7 +13,6 @@ import {
 import React, { useState } from 'react';
 import { Controller, useFormContext, useWatch } from 'react-hook-form';
 
-import { Link } from 'src/components/Link';
 import { LinkButton } from 'src/components/LinkButton';
 import {
   REGION_CAVEAT_HELPER_TEXT,
@@ -161,7 +159,7 @@ export const VPC = ({ index }: Props) => {
                 />
                 {field.value !== 'auto' && (
                   <TextField
-                    containerProps={{ sx: { my: 1 }}}
+                    containerProps={{ sx: { my: 1 } }}
                     errorText={fieldState.error?.message}
                     label="VPC IPv4"
                     noMarginTop
diff --git a/packages/manager/src/features/Linodes/LinodeCreate/Networking/utilities.ts b/packages/manager/src/features/Linodes/LinodeCreate/Networking/utilities.ts
index 8afb55d771e..bb3c14ba24d 100644
--- a/packages/manager/src/features/Linodes/LinodeCreate/Networking/utilities.ts
+++ b/packages/manager/src/features/Linodes/LinodeCreate/Networking/utilities.ts
@@ -1,6 +1,7 @@
 import type {
   APIError,
   CreateLinodeInterfacePayload,
+  FirewallSettings,
   InterfacePayload,
   InterfacePurpose,
 } from '@linode/api-v4';
@@ -129,3 +130,38 @@ export const transformLegacyInterfaceErrorsToLinodeInterfaceErrors = (
   }
   return errors;
 };
+
+export const getDefaultInterfacePayload = (
+  purpose: InterfacePurpose,
+  firewallSettings: FirewallSettings | null | undefined
+): LinodeCreateInterface => {
+  let firewallId: null | number = null;
+
+  if (
+    purpose === 'public' &&
+    firewallSettings?.default_firewall_ids.public_interface
+  ) {
+    firewallId = firewallSettings.default_firewall_ids.public_interface;
+  }
+  if (
+    purpose === 'vpc' &&
+    firewallSettings?.default_firewall_ids.vpc_interface
+  ) {
+    firewallId = firewallSettings.default_firewall_ids.vpc_interface;
+  }
+
+  return {
+    default_route: null,
+    firewall_id: firewallId,
+    public: {},
+    purpose: 'public',
+    vlan: null,
+    vpc: {
+      ipv4: { addresses: [{ address: 'auto', nat_1_1_address: null }] },
+      // @ts-expect-error the user must select this
+      subnet_id: null,
+      // @ts-expect-error the user must select this
+      vpc_id: null,
+    },
+  };
+};
diff --git a/packages/manager/src/features/Linodes/LinodeCreate/utilities.ts b/packages/manager/src/features/Linodes/LinodeCreate/utilities.ts
index fe1683950ab..71a54c7861e 100644
--- a/packages/manager/src/features/Linodes/LinodeCreate/utilities.ts
+++ b/packages/manager/src/features/Linodes/LinodeCreate/utilities.ts
@@ -1,4 +1,8 @@
-import { accountQueries, linodeQueries } from '@linode/queries';
+import {
+  accountQueries,
+  firewallQueries,
+  linodeQueries,
+} from '@linode/queries';
 import { omitProps } from '@linode/ui';
 import {
   getQueryParamsFromQueryString,
@@ -16,6 +20,7 @@ import { sendLinodeCreateFormErrorEvent } from 'src/utilities/analytics/formEven
 import { isPrivateIP } from 'src/utilities/ipUtils';
 
 import {
+  getDefaultInterfacePayload,
   getLegacyInterfaceFromLinodeInterface,
   getLinodeInterfacePayload,
 } from './Networking/utilities';
@@ -27,6 +32,7 @@ import type { LinodeCreateType } from './types';
 import type {
   AccountSettings,
   CreateLinodeRequest,
+  FirewallSettings,
   InterfaceGenerationType,
   InterfacePayload,
   Linode,
@@ -269,21 +275,6 @@ const defaultInterfaces: InterfacePayload[] = [
   },
 ];
 
-const defaultLinodeInterfaces: LinodeCreateInterface[] = [
-  {
-    default_route: null,
-    firewall_id: null,
-    public: {},
-    purpose: 'public',
-    vlan: null,
-    vpc: {
-      ipv4: { addresses: [{ address: 'auto', nat_1_1_address: null }]},
-      vpc_id: null,
-      subnet_id: null,
-    },
-  },
-];
-
 /**
  * We extend the API's payload type so that we can hold some extra state
  * in the react-hook-form form.
@@ -394,16 +385,32 @@ export const defaultValues = async (
     }
   }
 
+  let firewallSettings: FirewallSettings | null = null;
+
+  if (isLinodeInterfacesEnabled) {
+    try {
+      firewallSettings = await queryClient.ensureQueryData(
+        firewallQueries.settings
+      );
+    } catch {
+      // We can silently fail. Worst case, a user's default firewall won't be pre-populated.
+    }
+  }
+
   const privateIp = linode?.ipv4.some(isPrivateIP) ?? false;
 
   const values: LinodeCreateFormValues = {
     backup_id: params.backupID,
     backups_enabled: linode?.backups.enabled,
+    firewall_id:
+      firewallSettings && firewallSettings.default_firewall_ids.linode
+        ? firewallSettings.default_firewall_ids.linode
+        : undefined,
     image: getDefaultImageId(params),
     interface_generation: interfaceGeneration,
     interfaces: defaultInterfaces,
     linode,
-    linodeInterfaces: defaultLinodeInterfaces,
+    linodeInterfaces: [getDefaultInterfacePayload('public', firewallSettings)],
     private_ip: privateIp,
     region: linode ? linode.region : '',
     stackscript_data: stackscript?.user_defined_fields

From 138aa2a64c578c2fd60a5c4557700e7040e3108b Mon Sep 17 00:00:00 2001
From: Banks Nussman <banks@nussman.us>
Date: Mon, 24 Mar 2025 20:38:51 -0400
Subject: [PATCH 06/16] clean up a bit

---
 .../LinodeCreate/Networking/InterfaceType.tsx | 41 +++++++------------
 .../LinodeCreate/Networking/utilities.ts      | 39 ++++++++++--------
 2 files changed, 38 insertions(+), 42 deletions(-)

diff --git a/packages/manager/src/features/Linodes/LinodeCreate/Networking/InterfaceType.tsx b/packages/manager/src/features/Linodes/LinodeCreate/Networking/InterfaceType.tsx
index e86c8a35fd6..8165f3e769f 100644
--- a/packages/manager/src/features/Linodes/LinodeCreate/Networking/InterfaceType.tsx
+++ b/packages/manager/src/features/Linodes/LinodeCreate/Networking/InterfaceType.tsx
@@ -5,7 +5,10 @@ import { useController, useFormContext } from 'react-hook-form';
 
 import { FormLabel } from 'src/components/FormLabel';
 
+import { getDefaultFirewallForInterfacePurpose } from './utilities';
+
 import type { LinodeCreateFormValues } from '../utilities';
+import type { InterfacePurpose } from '@linode/api-v4';
 
 interface Props {
   index: number;
@@ -28,31 +31,17 @@ export const InterfaceType = ({ index }: Props) => {
       </FormLabel>
       <RadioGroup
         onChange={(e, value) => {
+          // Change the interface purpose (Public, VPC, VLAN)
           field.onChange(value);
 
-          if (
-            value === 'vpc' &&
-            firewallSettings?.default_firewall_ids.vpc_interface
-          ) {
-            setValue(
-              `linodeInterfaces.${index}.firewall_id`,
-              firewallSettings?.default_firewall_ids.vpc_interface
-            );
-          }
-
-          if (
-            value === 'public' &&
-            firewallSettings?.default_firewall_ids.public_interface
-          ) {
-            setValue(
-              `linodeInterfaces.${index}.firewall_id`,
-              firewallSettings?.default_firewall_ids.public_interface
-            );
-          }
-
-          if (value === 'vlan') {
-            setValue(`linodeInterfaces.${index}.firewall_id`, null);
-          }
+          // Set the Firewall based on defaults
+          setValue(
+            `linodeInterfaces.${index}.firewall_id`,
+            getDefaultFirewallForInterfacePurpose(
+              value as InterfacePurpose,
+              firewallSettings
+            )
+          );
         }}
         aria-labelledby="network-interface"
         row
@@ -60,9 +49,9 @@ export const InterfaceType = ({ index }: Props) => {
         value={field.value}
       >
         <FormControlLabel
-          control={<Radio />}
-          label="Public Internet"
-          value="public"
+        control={<Radio />}
+        label="Public Internet"
+        value="public"
         />
         <FormControlLabel control={<Radio />} label="VPC" value="vpc" />
         <FormControlLabel control={<Radio />} label="VLAN" value="vlan" />
diff --git a/packages/manager/src/features/Linodes/LinodeCreate/Networking/utilities.ts b/packages/manager/src/features/Linodes/LinodeCreate/Networking/utilities.ts
index bb3c14ba24d..217b3fb1652 100644
--- a/packages/manager/src/features/Linodes/LinodeCreate/Networking/utilities.ts
+++ b/packages/manager/src/features/Linodes/LinodeCreate/Networking/utilities.ts
@@ -135,24 +135,12 @@ export const getDefaultInterfacePayload = (
   purpose: InterfacePurpose,
   firewallSettings: FirewallSettings | null | undefined
 ): LinodeCreateInterface => {
-  let firewallId: null | number = null;
-
-  if (
-    purpose === 'public' &&
-    firewallSettings?.default_firewall_ids.public_interface
-  ) {
-    firewallId = firewallSettings.default_firewall_ids.public_interface;
-  }
-  if (
-    purpose === 'vpc' &&
-    firewallSettings?.default_firewall_ids.vpc_interface
-  ) {
-    firewallId = firewallSettings.default_firewall_ids.vpc_interface;
-  }
-
   return {
     default_route: null,
-    firewall_id: firewallId,
+    firewall_id: getDefaultFirewallForInterfacePurpose(
+      purpose,
+      firewallSettings
+    ),
     public: {},
     purpose: 'public',
     vlan: null,
@@ -165,3 +153,22 @@ export const getDefaultInterfacePayload = (
     },
   };
 };
+
+export const getDefaultFirewallForInterfacePurpose = (
+  purpose: InterfacePurpose,
+  firewallSettings: FirewallSettings | null | undefined
+) => {
+  if (!firewallSettings) {
+    return null;
+  }
+
+  if (purpose === 'public') {
+    return firewallSettings.default_firewall_ids.public_interface;
+  }
+
+  if (purpose === 'vpc') {
+    return firewallSettings.default_firewall_ids.vpc_interface;
+  }
+
+  return null;
+};

From 7f9561f49d1893fe902e44224a0120f94bba99c0 Mon Sep 17 00:00:00 2001
From: Banks Nussman <banks@nussman.us>
Date: Mon, 24 Mar 2025 22:03:22 -0400
Subject: [PATCH 07/16] unit test a few things

---
 .../LinodeCreate/Networking/InterfaceType.tsx |   6 +-
 .../LinodeCreate/Networking/utilities.test.ts | 174 ++++++++++++------
 2 files changed, 122 insertions(+), 58 deletions(-)

diff --git a/packages/manager/src/features/Linodes/LinodeCreate/Networking/InterfaceType.tsx b/packages/manager/src/features/Linodes/LinodeCreate/Networking/InterfaceType.tsx
index 8165f3e769f..286a4485abf 100644
--- a/packages/manager/src/features/Linodes/LinodeCreate/Networking/InterfaceType.tsx
+++ b/packages/manager/src/features/Linodes/LinodeCreate/Networking/InterfaceType.tsx
@@ -49,9 +49,9 @@ export const InterfaceType = ({ index }: Props) => {
         value={field.value}
       >
         <FormControlLabel
-        control={<Radio />}
-        label="Public Internet"
-        value="public"
+          control={<Radio />}
+          label="Public Internet"
+          value="public"
         />
         <FormControlLabel control={<Radio />} label="VPC" value="vpc" />
         <FormControlLabel control={<Radio />} label="VLAN" value="vlan" />
diff --git a/packages/manager/src/features/Linodes/LinodeCreate/Networking/utilities.test.ts b/packages/manager/src/features/Linodes/LinodeCreate/Networking/utilities.test.ts
index acb500b8970..22335647e03 100644
--- a/packages/manager/src/features/Linodes/LinodeCreate/Networking/utilities.test.ts
+++ b/packages/manager/src/features/Linodes/LinodeCreate/Networking/utilities.test.ts
@@ -1,69 +1,133 @@
 import { linodeInterfaceFactoryPublic } from '@linode/utilities';
 
+import { firewallSettingsFactory } from 'src/factories';
+
 import {
-  transformLegacyInterfaceErrorsToLinodeInterfaceErrors,
+  getDefaultFirewallForInterfacePurpose,
   getLinodeInterfacePayload,
+  transformLegacyInterfaceErrorsToLinodeInterfaceErrors,
 } from './utilities';
-import { APIError } from '@linode/api-v4';
-
-describe('Linode Create Networking Utilities', () => {
-  describe('getLinodeInterfacesPayload', () => {
-    it('only retains the field of the given interface type', () => {
-      const networkInterface = {
-        ...linodeInterfaceFactoryPublic.build({
-          public: {
-            ipv4: {
-              addresses: [
-                {
-                  address: '10.0.0.0',
-                  primary: true,
-                },
-              ],
-            },
-            ipv6: {
-              ranges: [],
-            },
+
+import type { APIError } from '@linode/api-v4';
+
+describe('getLinodeInterfacesPayload', () => {
+  it('only retains the field of the given interface type', () => {
+    const networkInterface = {
+      ...linodeInterfaceFactoryPublic.build({
+        public: {
+          ipv4: {
+            addresses: [
+              {
+                address: '10.0.0.0',
+                primary: true,
+              },
+            ],
           },
-          vlan: {
-            ipam_address: '192.168.0.1',
-            vlan_label: 'vlan-interface',
+          ipv6: {
+            ranges: [],
           },
-          vpc: {
-            ipv4: {
-              addresses: [
-                {
-                  address: '10.0.0.0',
-                  primary: true,
-                },
-              ],
-              ranges: [],
-            },
-            subnet_id: 1,
-            vpc_id: 1,
+        },
+        vlan: {
+          ipam_address: '192.168.0.1',
+          vlan_label: 'vlan-interface',
+        },
+        vpc: {
+          ipv4: {
+            addresses: [
+              {
+                address: '10.0.0.0',
+                primary: true,
+              },
+            ],
+            ranges: [],
           },
-        }),
-        purpose: 'public' as const,
-      };
-
-      expect(getLinodeInterfacePayload(networkInterface)).toEqual({
-        ...networkInterface,
-        vlan: null,
-        vpc: null,
-      });
+          subnet_id: 1,
+          vpc_id: 1,
+        },
+      }),
+      purpose: 'public' as const,
+    };
+
+    expect(getLinodeInterfacePayload(networkInterface)).toEqual({
+      ...networkInterface,
+      vlan: null,
+      vpc: null,
+    });
+  });
+});
+
+describe('getLinodeInterfaceErrorsFromLegacyInterfaceErrors', () => {
+  it('transforms a legacy error into a linodeInterface error', () => {
+    const error: APIError[] = [
+      { field: 'interfaces[1].subnet_id', reason: 'Fake message' },
+    ];
+
+    expect(
+      transformLegacyInterfaceErrorsToLinodeInterfaceErrors(error)
+    ).toStrictEqual([
+      { field: 'linodeInterfaces[1].vpc.subnet_id', reason: 'Fake message' },
+    ]);
+  });
+
+  it('handles a complex VPC IP range error', () => {
+    const error: APIError[] = [
+      { field: 'interfaces[1].ip_ranges[3]', reason: 'Range is invalid.' },
+    ];
+
+    expect(
+      transformLegacyInterfaceErrorsToLinodeInterfaceErrors(error)
+    ).toStrictEqual([
+      {
+        field: 'linodeInterfaces[1].vpc.ipv4.ranges.3.range',
+        reason: 'Range is invalid.',
+      },
+    ]);
+  });
+});
+
+describe('getDefaultFirewallForInterfacePurpose', () => {
+  it('returns the public_interface setting when the purpose is public', () => {
+    const settings = firewallSettingsFactory.build({
+      default_firewall_ids: {
+        linode: 1,
+        nodebalancer: 2,
+        public_interface: 3,
+        vpc_interface: 4,
+      },
     });
+
+    expect(getDefaultFirewallForInterfacePurpose('public', settings)).toBe(3);
   });
 
-  describe('getLinodeInterfaceErrorsFromLegacyInterfaceErrors', () => {
-    it('transforms a legacy error into a linodeInterface error', () => {
-      const error: APIError[] = [
-        { field: 'interfaces[1].subnet_id', reason: 'Fake message' },
-      ];
-
-      expect(
-        transformLegacyInterfaceErrorsToLinodeInterfaceErrors(error)
-      ).toStrictEqual([
-        { field: 'linodeInterfaces[1].vpc.subnet_id', reason: 'Fake message' },
-      ]);
+  it('returns the vpc_interface setting when the purpose is vpc', () => {
+    const settings = firewallSettingsFactory.build({
+      default_firewall_ids: {
+        linode: 1,
+        nodebalancer: 2,
+        public_interface: 3,
+        vpc_interface: 4,
+      },
     });
+
+    expect(getDefaultFirewallForInterfacePurpose('vpc', settings)).toBe(4);
+  });
+
+  it('returns null setting when the purpose is vlan', () => {
+    // VLAN does not support Firewalls
+
+    const settings = firewallSettingsFactory.build({
+      default_firewall_ids: {
+        linode: 1,
+        nodebalancer: 2,
+        public_interface: 3,
+        vpc_interface: 4,
+      },
+    });
+
+    expect(getDefaultFirewallForInterfacePurpose('vlan', settings)).toBeNull();
+  });
+
+  it('returns null if firewall settings are null', () => {
+    expect(getDefaultFirewallForInterfacePurpose('public', null)).toBeNull();
   });
 });

From 15504c92bdfb36153ab2f055f5a5b7cafda838fb Mon Sep 17 00:00:00 2001
From: Banks Nussman <banks@nussman.us>
Date: Tue, 25 Mar 2025 11:09:23 -0400
Subject: [PATCH 08/16] Added changeset: Support more VPC features when using
 Linode Interfaces on the Linode Create page

---
 .../.changeset/pr-11915-upcoming-features-1742915363501.md   | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 packages/manager/.changeset/pr-11915-upcoming-features-1742915363501.md

diff --git a/packages/manager/.changeset/pr-11915-upcoming-features-1742915363501.md b/packages/manager/.changeset/pr-11915-upcoming-features-1742915363501.md
new file mode 100644
index 00000000000..a8863fbd4d3
--- /dev/null
+++ b/packages/manager/.changeset/pr-11915-upcoming-features-1742915363501.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+Support more VPC features when using Linode Interfaces on the Linode Create page ([#11915](https://github.com/linode/manager/pull/11915))

From 8b82080d567f13dd72b3689a8a4c0a0efec532b3 Mon Sep 17 00:00:00 2001
From: Banks Nussman <banks@nussman.us>
Date: Tue, 25 Mar 2025 11:10:07 -0400
Subject: [PATCH 09/16] Added changeset: Pre-select default firewalls on the
 Linode Create flow

---
 .../.changeset/pr-11915-upcoming-features-1742915406867.md   | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 packages/manager/.changeset/pr-11915-upcoming-features-1742915406867.md

diff --git a/packages/manager/.changeset/pr-11915-upcoming-features-1742915406867.md b/packages/manager/.changeset/pr-11915-upcoming-features-1742915406867.md
new file mode 100644
index 00000000000..3321319c8d8
--- /dev/null
+++ b/packages/manager/.changeset/pr-11915-upcoming-features-1742915406867.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+Pre-select default firewalls on the Linode Create flow ([#11915](https://github.com/linode/manager/pull/11915))

From 5fcea03a92b19c9fbd065f8ce8abfd4039c5eb7c Mon Sep 17 00:00:00 2001
From: Banks Nussman <banks@nussman.us>
Date: Tue, 25 Mar 2025 11:10:33 -0400
Subject: [PATCH 10/16] not sure what to do here

---
 .../src/features/Linodes/LinodeCreate/Networking/utilities.ts   | 2 --
 1 file changed, 2 deletions(-)

diff --git a/packages/manager/src/features/Linodes/LinodeCreate/Networking/utilities.ts b/packages/manager/src/features/Linodes/LinodeCreate/Networking/utilities.ts
index 217b3fb1652..478314877d8 100644
--- a/packages/manager/src/features/Linodes/LinodeCreate/Networking/utilities.ts
+++ b/packages/manager/src/features/Linodes/LinodeCreate/Networking/utilities.ts
@@ -146,9 +146,7 @@ export const getDefaultInterfacePayload = (
     vlan: null,
     vpc: {
       ipv4: { addresses: [{ address: 'auto', nat_1_1_address: null }] },
-      // @ts-expect-error the user must select this
       subnet_id: null,
-      // @ts-expect-error the user must select this
       vpc_id: null,
     },
   };

From 66175d5646e04682dc71f2425138d903ab3263e8 Mon Sep 17 00:00:00 2001
From: Banks Nussman <banks@nussman.us>
Date: Tue, 25 Mar 2025 11:15:06 -0400
Subject: [PATCH 11/16] not sure what to do here

---
 .../src/features/Linodes/LinodeCreate/Networking/utilities.ts   | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/manager/src/features/Linodes/LinodeCreate/Networking/utilities.ts b/packages/manager/src/features/Linodes/LinodeCreate/Networking/utilities.ts
index 478314877d8..9e5b61e176c 100644
--- a/packages/manager/src/features/Linodes/LinodeCreate/Networking/utilities.ts
+++ b/packages/manager/src/features/Linodes/LinodeCreate/Networking/utilities.ts
@@ -146,7 +146,9 @@ export const getDefaultInterfacePayload = (
     vlan: null,
     vpc: {
       ipv4: { addresses: [{ address: 'auto', nat_1_1_address: null }] },
+      // @ts-expect-error the user must select this (I can't find a way to make these types partial)
       subnet_id: null,
+      // @ts-expect-error the user must select this (I can't find a way to make these types partial)
       vpc_id: null,
     },
   };

From 40af5de2a9bba08b4612bf0d8e0117ad3434afd9 Mon Sep 17 00:00:00 2001
From: Banks Nussman <banks@nussman.us>
Date: Tue, 25 Mar 2025 20:22:22 -0400
Subject: [PATCH 12/16] some fixes and better error handling

---
 .../Networking/InterfaceFirewall.tsx           | 18 +++++-------------
 .../Linodes/LinodeCreate/Networking/VPC.tsx    |  7 ++++++-
 2 files changed, 11 insertions(+), 14 deletions(-)

diff --git a/packages/manager/src/features/Linodes/LinodeCreate/Networking/InterfaceFirewall.tsx b/packages/manager/src/features/Linodes/LinodeCreate/Networking/InterfaceFirewall.tsx
index fa7b1d65a46..c2398652726 100644
--- a/packages/manager/src/features/Linodes/LinodeCreate/Networking/InterfaceFirewall.tsx
+++ b/packages/manager/src/features/Linodes/LinodeCreate/Networking/InterfaceFirewall.tsx
@@ -1,9 +1,9 @@
-import { useAllFirewallsQuery } from '@linode/queries';
-import { Autocomplete, Box, Stack } from '@linode/ui';
+import { Box, Stack } from '@linode/ui';
 import React, { useState } from 'react';
 import { useController, useFormContext, useWatch } from 'react-hook-form';
 
 import { LinkButton } from 'src/components/LinkButton';
+import { FirewallSelect } from 'src/features/Firewalls/components/FirewallSelect';
 import { CreateFirewallDrawer } from 'src/features/Firewalls/FirewallLanding/CreateFirewallDrawer';
 import { useRestrictedGlobalGrantCheck } from 'src/hooks/useRestrictedGlobalGrantCheck';
 
@@ -26,31 +26,23 @@ export const InterfaceFirewall = ({ index }: Props) => {
     name: `linodeInterfaces.${index}.firewall_id`,
   });
 
-  const { data: firewalls, error, isLoading } = useAllFirewallsQuery();
-
   const [isDrawerOpen, setIsDrawerOpen] = useState(false);
 
   const isLinodeCreateRestricted = useRestrictedGlobalGrantCheck({
     globalGrantType: 'add_linodes',
   });
 
-  const selectedFirewall =
-    firewalls?.find((firewall) => firewall.id === field.value) ?? null;
-
   return (
     <Stack spacing={2}>
       <Stack spacing={1.5}>
-        <Autocomplete
+        <FirewallSelect
           disabled={isLinodeCreateRestricted}
-          errorText={fieldState.error?.message ?? error?.[0].reason}
+          errorText={fieldState.error?.message}
           label={`${labelMap[interfaceType]} Interface Firewall`}
-          loading={isLoading}
-          noMarginTop
           onBlur={field.onBlur}
           onChange={(e, firewall) => field.onChange(firewall?.id ?? null)}
-          options={firewalls ?? []}
           placeholder="None"
-          value={selectedFirewall}
+          value={field.value}
         />
         <Box>
           <LinkButton
diff --git a/packages/manager/src/features/Linodes/LinodeCreate/Networking/VPC.tsx b/packages/manager/src/features/Linodes/LinodeCreate/Networking/VPC.tsx
index 403c55cf64c..2a7bfdbbba2 100644
--- a/packages/manager/src/features/Linodes/LinodeCreate/Networking/VPC.tsx
+++ b/packages/manager/src/features/Linodes/LinodeCreate/Networking/VPC.tsx
@@ -33,6 +33,7 @@ export const VPC = ({ index }: Props) => {
     control,
     resetField,
     setValue,
+    formState: { errors },
   } = useFormContext<LinodeCreateFormValues>();
   const [isCreateDrawerOpen, setIsCreateDrawerOpen] = useState(false);
 
@@ -159,8 +160,12 @@ export const VPC = ({ index }: Props) => {
                 />
                 {field.value !== 'auto' && (
                   <TextField
+                    errorText={
+                      fieldState.error?.message ??
+                      errors.linodeInterfaces?.[index]?.vpc?.ipv4
+                        ?.addresses?.[0]?.message
+                    }
                     containerProps={{ sx: { my: 1 } }}
-                    errorText={fieldState.error?.message}
                     label="VPC IPv4"
                     noMarginTop
                     onBlur={field.onBlur}

From e94b0956b2bdbd39c7801ab59d9847c11f03628f Mon Sep 17 00:00:00 2001
From: Banks Nussman <banks@nussman.us>
Date: Wed, 26 Mar 2025 22:36:43 -0400
Subject: [PATCH 13/16] fix clickable areas in VPC section

---
 .../features/Linodes/LinodeCreate/Networking/VPC.tsx   | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/manager/src/features/Linodes/LinodeCreate/Networking/VPC.tsx b/packages/manager/src/features/Linodes/LinodeCreate/Networking/VPC.tsx
index 2a7bfdbbba2..2e2ed7a477d 100644
--- a/packages/manager/src/features/Linodes/LinodeCreate/Networking/VPC.tsx
+++ b/packages/manager/src/features/Linodes/LinodeCreate/Networking/VPC.tsx
@@ -137,7 +137,7 @@ export const VPC = ({ index }: Props) => {
         <Stack>
           <Controller
             render={({ field, fieldState }) => (
-              <>
+              <Box>
                 <FormControlLabel
                   label={
                     <Stack alignItems="center" direction="row">
@@ -165,7 +165,7 @@ export const VPC = ({ index }: Props) => {
                       errors.linodeInterfaces?.[index]?.vpc?.ipv4
                         ?.addresses?.[0]?.message
                     }
-                    containerProps={{ sx: { my: 1 } }}
+                    containerProps={{ sx: { mb: 1.5, mt: 1 } }}
                     label="VPC IPv4"
                     noMarginTop
                     onBlur={field.onBlur}
@@ -174,14 +174,14 @@ export const VPC = ({ index }: Props) => {
                     value={field.value}
                   />
                 )}
-              </>
+              </Box>
             )}
             control={control}
             name={`linodeInterfaces.${index}.vpc.ipv4.addresses.0.address`}
           />
           <Controller
             render={({ field, fieldState }) => (
-              <>
+              <Box>
                 {fieldState.error?.message && (
                   <Notice text={fieldState.error.message} variant="error" />
                 )}
@@ -206,7 +206,7 @@ export const VPC = ({ index }: Props) => {
                   control={<Checkbox sx={{ ml: 0.4 }} />}
                   disabled={!regionSupportsVPCs}
                 />
-              </>
+              </Box>
             )}
             control={control}
             name={`linodeInterfaces.${index}.vpc.ipv4.addresses.0.nat_1_1_address`}

From d566d46d4f648c612d0ba1100900fbbff7c705ef Mon Sep 17 00:00:00 2001
From: Banks Nussman <banks@nussman.us>
Date: Thu, 27 Mar 2025 13:00:43 -0400
Subject: [PATCH 14/16] improve default firewall ux

---
 .../LinodeCreate/Networking/InterfaceType.tsx | 26 +++++++++++++------
 1 file changed, 18 insertions(+), 8 deletions(-)

diff --git a/packages/manager/src/features/Linodes/LinodeCreate/Networking/InterfaceType.tsx b/packages/manager/src/features/Linodes/LinodeCreate/Networking/InterfaceType.tsx
index 286a4485abf..9cec47c7906 100644
--- a/packages/manager/src/features/Linodes/LinodeCreate/Networking/InterfaceType.tsx
+++ b/packages/manager/src/features/Linodes/LinodeCreate/Networking/InterfaceType.tsx
@@ -15,7 +15,11 @@ interface Props {
 }
 
 export const InterfaceType = ({ index }: Props) => {
-  const { control, setValue } = useFormContext<LinodeCreateFormValues>();
+  const {
+    control,
+    setValue,
+    getFieldState,
+  } = useFormContext<LinodeCreateFormValues>();
 
   const { data: firewallSettings } = useFirewallSettingsQuery();
 
@@ -34,14 +38,20 @@ export const InterfaceType = ({ index }: Props) => {
           // Change the interface purpose (Public, VPC, VLAN)
           field.onChange(value);
 
-          // Set the Firewall based on defaults
-          setValue(
-            `linodeInterfaces.${index}.firewall_id`,
-            getDefaultFirewallForInterfacePurpose(
-              value as InterfacePurpose,
-              firewallSettings
-            )
+          const defaultFirewall = getDefaultFirewallForInterfacePurpose(
+            value as InterfacePurpose,
+            firewallSettings
           );
+
+          // Set the Firewall based on defaults if:
+          // - there is a default firewall for this interface type
+          // - the user has not touched the Firewall field
+          if (
+            defaultFirewall &&
+            !getFieldState(`linodeInterfaces.${index}.firewall_id`).isTouched
+          ) {
+            setValue(`linodeInterfaces.${index}.firewall_id`, defaultFirewall);
+          }
         }}
         aria-labelledby="network-interface"
         row

From 7ce8c8d5fb4f7accc784c0363cb2ac5f674e112f Mon Sep 17 00:00:00 2001
From: Banks Nussman <banks@nussman.us>
Date: Thu, 27 Mar 2025 14:20:37 -0400
Subject: [PATCH 15/16] hacky fix to improve error handling for duplicate
 purpose field

---
 .../src/features/Linodes/LinodeCreate/Networking/VPC.tsx  | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/packages/manager/src/features/Linodes/LinodeCreate/Networking/VPC.tsx b/packages/manager/src/features/Linodes/LinodeCreate/Networking/VPC.tsx
index 2e2ed7a477d..43eccdfdc18 100644
--- a/packages/manager/src/features/Linodes/LinodeCreate/Networking/VPC.tsx
+++ b/packages/manager/src/features/Linodes/LinodeCreate/Networking/VPC.tsx
@@ -161,9 +161,11 @@ export const VPC = ({ index }: Props) => {
                 {field.value !== 'auto' && (
                   <TextField
                     errorText={
-                      fieldState.error?.message ??
-                      errors.linodeInterfaces?.[index]?.vpc?.ipv4
-                        ?.addresses?.[0]?.message
+                      fieldState.isTouched ?
+                        fieldState.error?.message ??
+                        errors.linodeInterfaces?.[index]?.vpc?.ipv4
+                          ?.addresses?.[0]?.message
+                        : undefined
                     }
                     containerProps={{ sx: { mb: 1.5, mt: 1 } }}
                     label="VPC IPv4"

From eb3acd3dcf28fe6f5faf4861257d730f46e8f189 Mon Sep 17 00:00:00 2001
From: Banks Nussman <banks@nussman.us>
Date: Thu, 27 Mar 2025 14:42:13 -0400
Subject: [PATCH 16/16] Revert "hacky fix to improve error handling for
 duplicate purpose field"

This reverts commit 7ce8c8d5fb4f7accc784c0363cb2ac5f674e112f.
---
 .../src/features/Linodes/LinodeCreate/Networking/VPC.tsx  | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/packages/manager/src/features/Linodes/LinodeCreate/Networking/VPC.tsx b/packages/manager/src/features/Linodes/LinodeCreate/Networking/VPC.tsx
index 43eccdfdc18..2e2ed7a477d 100644
--- a/packages/manager/src/features/Linodes/LinodeCreate/Networking/VPC.tsx
+++ b/packages/manager/src/features/Linodes/LinodeCreate/Networking/VPC.tsx
@@ -161,11 +161,9 @@ export const VPC = ({ index }: Props) => {
                 {field.value !== 'auto' && (
                   <TextField
                     errorText={
-                      fieldState.isTouched ?
-                        fieldState.error?.message ??
-                        errors.linodeInterfaces?.[index]?.vpc?.ipv4
-                          ?.addresses?.[0]?.message
-                        : undefined
+                      fieldState.error?.message ??
+                      errors.linodeInterfaces?.[index]?.vpc?.ipv4
+                        ?.addresses?.[0]?.message
                     }
                     containerProps={{ sx: { mb: 1.5, mt: 1 } }}
                     label="VPC IPv4"