upcoming: [M3-9513] – Update endpoints, types, and validation for VPC Linode instances (#11942)

Author: dwiley-akamai

packages/api-v4/.changeset/pr-11942-upcoming-features-1743626885050.md

@@ -0,0 +1,5 @@
+---
+"@linode/api-v4": Upcoming Features
+---
+
+Add ipv6 field to VPCInterfaceData and update ConfigInterfaceIPv6 type ([#11942](https://github.com/linode/manager/pull/11942))

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

@@ -179,13 +179,23 @@ export type LinodeStatus =
 // ----------------------------------------------------------------------
 export type InterfacePurpose = 'public' | 'vlan' | 'vpc';
 
+// IPv4
 export interface ConfigInterfaceIPv4 {
   vpc?: string | null;
   nat_1_1?: string | null;
 }
 
+export interface IPv6SLAAC {
+  range: string;
+  address: string;
+}
+
 export interface ConfigInterfaceIPv6 {
-  vpc?: string | null;
+  slaac: IPv6SLAAC[];
+  ranges: {
+    range?: string;
+  }[];
+  is_public: boolean;
 }
 
 // The legacy interface type - for Configuration Profile Interfaces
@@ -286,17 +296,26 @@ export interface LinodeInterfaces {
   interfaces: LinodeInterface[];
 }
 
+export interface LinodeInterfaceIPv6 {
+  slaac: IPv6SLAAC[];
+  ranges: {
+    range: string;
+  }[];
+  is_public: boolean;
+}
+
 export interface VPCInterfaceData {
   vpc_id: number;
   subnet_id: number;
-  ipv4: {
+  ipv4?: {
     addresses: {
       address: string;
       primary: boolean;
       nat_1_1_address?: string;
     }[];
     ranges: { range: string }[];
   };
+  ipv6?: LinodeInterfaceIPv6;
 }
 
 export interface PublicInterfaceData {

packages/manager/src/features/Linodes/LinodeCreate/Networking/utilities.ts

@@ -7,8 +7,8 @@ import type {
 } from '@linode/api-v4';
 
 /**
- * Extend the API's new interface type with a vpc_id so that state managment is easier for us
- * The new endpoint only uses subnet_id and I guess it dervies the VPC from that?
+ * Extend the API's new interface type with a vpc_id so that state management is easier for us
+ * The new endpoint only uses subnet_id and I guess it derives the VPC from that?
  */
 interface VPC extends NonNullable<CreateLinodeInterfacePayload['vpc']> {
   vpc_id: number;

packages/manager/src/features/Linodes/LinodeCreate/schemas.ts

@@ -10,7 +10,7 @@ import type { LinodeCreateFormValues } from './utilities';
 import type { ObjectSchema } from 'yup';
 
 /**
- * Extends pure `CreateLinodeSchema` because the Lindoe Create form
+ * Extends pure `CreateLinodeSchema` because the Linode Create form
  * has extra fields that we want to validate.
  * In theory, this schema should align with the `LinodeCreateFormValues` type.
  */

packages/manager/src/features/Linodes/LinodeCreate/utilities.ts

@@ -295,9 +295,11 @@ export interface LinodeCreateFormValues extends CreateLinodeRequest {
    */
   hasSignedEUAgreement?: boolean;
   /**
-   * Override the interfaces type of the Linode Create flow so it only has Legacy Interfaces
+   * Override the interfaces type of the Linode Create flow so it only has Legacy Interfaces.
+   * `ipv4` and `ipv6` fields are only accepted for VPC interfaces and the omit type avoids
+   * `CreateLinodeSchema` type errors (see https://github.com/linode/manager/pull/11942#discussion_r2043029481)
    */
-  interfaces: InterfacePayload[];
+  interfaces: InterfacePayload[] | Omit<InterfacePayload, 'ipv4' | 'ipv6'>[];
   /**
    * The currently selected Linode (used for the Backups and Clone tabs)
    */

packages/manager/src/features/Linodes/LinodesDetail/LinodeConfigs/UpgradeInterfaces/DialogContents/SuccessDialogContent.tsx

@@ -108,9 +108,9 @@ type VPCInterfaceInfo = VPCInterfaceData &
 
 const VPCInterfaceInfo = (props: VPCInterfaceInfo) => {
   const { default_route, ipv4, subnet_id, vpc_id } = props;
-  const { addresses, ranges } = ipv4;
+  const { addresses, ranges } = ipv4 || {};
 
-  const primaryAddress = addresses.find((address) => address.primary === true);
+  const primaryAddress = addresses?.find((address) => address.primary === true);
 
   return (
     <>
@@ -127,13 +127,13 @@ const VPCInterfaceInfo = (props: VPCInterfaceInfo) => {
         <Typography>VPC ID: {vpc_id}</Typography>
         <Typography>Subnet ID: {subnet_id}</Typography>
         <Typography>
-          Addresses: {addresses.map((address) => address.address).join(', ')}
+          Addresses: {addresses?.map((address) => address.address).join(', ')}
         </Typography>
         {primaryAddress && (
           <Typography>Primary Address: {primaryAddress.address}</Typography>
         )}
-        {ranges.length > 0 && (
-          <Typography>Routed Ranges: {ranges.join(', ')}</Typography>
+        {ranges?.length && ranges?.length > 0 && (
+          <Typography>Routed Ranges: {ranges?.join(', ')}</Typography>
         )}
       </Stack>
     </>

packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/LinodeInterfaces/EditInterfaceDrawer/VPCInterface/VPCIPv4Address.tsx

@@ -51,7 +51,7 @@ export const VPCIPv4Address = (props: Props) => {
                   field.onChange(
                     checked
                       ? 'auto'
-                      : (linodeInterface.vpc?.ipv4.addresses[index].address ??
+                      : (linodeInterface.vpc?.ipv4?.addresses[index].address ??
                           '')
                   )
                 }

packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/LinodeInterfaces/InterfaceDetailsDrawer/VPCInterfaceDetailsContent.tsx

@@ -15,7 +15,7 @@ export const VPCInterfaceDetailsContent = (props: VPCInterfaceData) => {
 
   const ipv4ToTypography = (
     <>
-      {ipv4.addresses.map((address) =>
+      {ipv4?.addresses.map((address) =>
         address.nat_1_1_address ? (
           <Stack key={address.address}>
             <MaskableText
@@ -35,7 +35,7 @@ export const VPCInterfaceDetailsContent = (props: VPCInterfaceData) => {
           />
         )
       )}
-      {ipv4.ranges.map((range) => (
+      {ipv4?.ranges.map((range) => (
         <MaskableText
           isToggleable
           key={range.range}

packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/LinodeInterfaces/LinodeInterfaceIPs.utils.ts

@@ -37,7 +37,7 @@ export function getLinodeInterfaceIPs(linodeInterface: LinodeInterface) {
     }
   }
 
-  if (linodeInterface.vpc) {
+  if (linodeInterface.vpc && linodeInterface.vpc.ipv4) {
     // VPC IPv4s
     for (const address of linodeInterface.vpc.ipv4.addresses) {
       if (address.primary) {
@@ -52,6 +52,7 @@ export function getLinodeInterfaceIPs(linodeInterface: LinodeInterface) {
         }
       }
     }
+
     // VPC IPv4 Ranges
     for (const address of linodeInterface.vpc.ipv4.ranges) {
       ips.push(address.range);

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

@@ -30,7 +30,7 @@ export const hasUnrecommendedConfigurationLinodeInterface = (
 ) => {
   return (
     isInterfaceActive &&
-    linodeInterface?.vpc?.ipv4.addresses.some(
+    linodeInterface?.vpc?.ipv4?.addresses.some(
       (address) => address.nat_1_1_address
     ) &&
     !linodeInterface?.default_route.ipv4
@@ -83,10 +83,10 @@ export const getIsVPCLKEEnterpriseCluster = (vpc: VPC) =>
   /^lke\d+/i.test(vpc.label);
 
 export const getLinodeInterfacePrimaryIPv4 = (iface: LinodeInterface) =>
-  iface.vpc?.ipv4.addresses.find((address) => address.primary)?.address;
+  iface.vpc?.ipv4?.addresses.find((address) => address.primary)?.address;
 
 export const getLinodeInterfaceRanges = (iface: LinodeInterface) =>
-  iface.vpc?.ipv4.ranges.map((range) => range.range);
+  iface.vpc?.ipv4?.ranges.map((range) => range.range);
 
 // TODO: update this when converting to react-hook-form
 // gets the VPC Interface payload depending on whether we want a Linode Interface or Config Interface payload