fix: [M3-6510] - Modifying Configuration Profile in Cloud breaks with VLANs

CHANGELOG.md

@@ -21,6 +21,7 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
 - Event entities should only be linked for true labels
 - Radio button hover effect #9031
 - Prevent form submission unless action was taken (IP transfer & IP sharing modals) #5976
+- Inability to edit and save Linode Configurations #9053
 
 ### Tech Stories:
 - MUIv5 Migration - Components > CircleProgress #9028

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

@@ -149,10 +149,14 @@ export type LinodeStatus =
 export type InterfacePurpose = 'public' | 'vlan';
 
 export interface Interface {
+  id: number;
   label: string | null;
   purpose: InterfacePurpose;
   ipam_address: string | null;
 }
+
+export type InterfacePayload = Omit<Interface, 'id'>;
+
 export interface Config {
   id: number;
   kernel: string;
@@ -261,7 +265,7 @@ export interface LinodeConfigCreationData {
     devtmpfs_automount: boolean;
   };
   root_device: string;
-  interfaces?: Interface[];
+  interfaces?: InterfacePayload[];
 }
 
 export interface PriceObject {

packages/manager/src/factories/linodeConfigInterfaceFactory.ts

@@ -3,6 +3,7 @@ import { Interface } from '@linode/api-v4/lib/linodes/types';
 
 export const LinodeConfigInterfaceFactory = Factory.Sync.makeFactory<Interface>(
   {
+    id: Factory.each((i) => i),
     label: Factory.each((i) => `interface-${i}`),
     purpose: 'vlan',
     ipam_address: '10.0.0.1/24',

packages/manager/src/features/linodes/LinodesCreate/LinodeCreate.tsx

@@ -1,4 +1,4 @@
-import { Interface, restoreBackup } from '@linode/api-v4/lib/linodes';
+import { InterfacePayload, restoreBackup } from '@linode/api-v4/lib/linodes';
 import { Tag } from '@linode/api-v4/lib/tags/types';
 import { Theme } from '@mui/material/styles';
 import { createStyles, withStyles, WithStyles } from '@mui/styles';
@@ -151,7 +151,7 @@ interface Props {
   showGeneralError?: boolean;
   vlanLabel: string | null;
   ipamAddress: string | null;
-  handleVLANChange: (updatedInterface: Interface) => void;
+  handleVLANChange: (updatedInterface: InterfacePayload) => void;
   showAgreement: boolean;
   showApiAwarenessModal: boolean;
   handleAgreementChange: () => void;
@@ -870,7 +870,7 @@ export class LinodeCreate extends React.PureComponent<
   }
 }
 
-const defaultPublicInterface: Interface = {
+const defaultPublicInterface: InterfacePayload = {
   purpose: 'public',
   label: '',
   ipam_address: '',

packages/manager/src/features/linodes/LinodesDetail/LinodeSettings/InterfaceSelect.tsx

@@ -1,4 +1,7 @@
-import { Interface, InterfacePurpose } from '@linode/api-v4/lib/linodes/types';
+import {
+  InterfacePayload,
+  InterfacePurpose,
+} from '@linode/api-v4/lib/linodes/types';
 import * as React from 'react';
 import Divider from 'src/components/core/Divider';
 import { makeStyles } from '@mui/styles';
@@ -32,7 +35,7 @@ export interface Props {
 
 // To allow for empty slots, which the API doesn't account for
 export type ExtendedPurpose = InterfacePurpose | 'none';
-export interface ExtendedInterface extends Omit<Interface, 'purpose'> {
+export interface ExtendedInterface extends Omit<InterfacePayload, 'purpose'> {
   purpose: ExtendedPurpose;
 }
 

packages/manager/src/features/linodes/LinodesDetail/LinodeSettings/LinodeConfigDialog.tsx

@@ -193,10 +193,15 @@ const pathsOptions = [
 ];
 
 const interfacesToState = (interfaces?: Interface[]) => {
-  if (!interfaces || interfaces.length === 0) {
+  const processedInterfaces = interfaces?.map(
+    ({ ipam_address, label, purpose }) => {
+      return { ipam_address, label, purpose };
+    }
+  );
+  if (!processedInterfaces || processedInterfaces.length === 0) {
     return defaultInterfaceList;
   }
-  return padInterfaceList(interfaces);
+  return padInterfaceList(processedInterfaces);
 };
 
 const interfacesToPayload = (interfaces?: ExtendedInterface[]) => {
@@ -425,6 +430,7 @@ const LinodeConfigDialog: React.FC<CombinedProps> = (props) => {
             (thisOption) => thisOption.value === config?.root_device
           )
         );
+
         resetForm({
           values: {
             useCustomRoot: isUsingCustomRoot(config.root_device),