test: Fix create-linode-with-add-ons.spec.ts after Linode Interfaces GA

packages/manager/.changeset/pr-13325-tests-1769449479166.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Tests
+---
+
+Fix `create-linode-with-add-ons.spec.ts` after Linode Interfaces GA ([#13325](https://github.com/linode/manager/pull/13325))

packages/manager/cypress/e2e/core/linodes/create-linode-with-add-ons.spec.ts

@@ -67,7 +67,7 @@ describe('Create Linode with Add-ons', () => {
    * - Confirms that Private IP is reflected in create summary section.
    * - Confirms that outgoing Linode Create API request specifies the private IPs to be enabled.
    */
-  it('can select private IP during Linode Create flow', () => {
+  it('can select private IP during Linode Create flow when using legacy config interfaces', () => {
     const linodeRegion = chooseRegion({ capabilities: ['Linodes'] });
 
     const mockLinode = linodeFactory.build({
@@ -87,6 +87,7 @@ describe('Create Linode with Add-ons', () => {
     linodeCreatePage.selectPlan('Shared CPU', 'Nanode 1 GB');
     linodeCreatePage.setRootPassword(randomString(32));
     linodeCreatePage.checkEUAgreements();
+    linodeCreatePage.selectInterfaceGeneration('legacy_config');
     linodeCreatePage.checkPrivateIPs();
 
     // Confirm Private IP assignment indicator is shown in Linode summary.

packages/manager/cypress/support/ui/pages/linode-create-page.ts

@@ -140,6 +140,15 @@ export const linodeCreatePage = {
     cy.findByText('Configuration Profile Interfaces (Legacy)').click();
   },
 
+  /**
+   * Selects an interface generation.
+   *
+   * @param generation - The interface generation to select.
+   */
+  selectInterfaceGeneration: (generation: 'legacy_config' | 'linode') => {
+    cy.get(`[data-qa-interfaces-option="${generation}"]`).click();
+  },
+
   /**
    * Select the interfaces' type.
    *

packages/manager/src/features/Linodes/LinodeCreate/Addons/Addons.tsx

@@ -1,15 +1,14 @@
 import { useRegionsQuery } from '@linode/queries';
 import { Divider, Notice, Paper, Stack, Typography } from '@linode/ui';
 import React, { useMemo } from 'react';
-import { useFormContext, useWatch } from 'react-hook-form';
+import { useWatch } from 'react-hook-form';
 
 import { Backups } from './Backups';
 import { PrivateIP } from './PrivateIP';
 
 import type { CreateLinodeRequest } from '@linode/api-v4';
 
 export const Addons = () => {
-  const { setValue } = useFormContext<CreateLinodeRequest>();
   const [regionId, interfaceGeneration] = useWatch<
     CreateLinodeRequest,
     ['region', 'interface_generation']
@@ -27,11 +26,6 @@ export const Addons = () => {
 
   const shouldShowPrivateIP = interfaceGeneration !== 'linode';
 
-  // Clean up private IP value when the option is hidden
-  if (!shouldShowPrivateIP) {
-    setValue('private_ip', false);
-  }
-
   return (
     <Paper data-qa-add-ons>
       <Stack spacing={2}>

packages/manager/src/features/Linodes/LinodeCreate/Networking/InterfaceGeneration.tsx

@@ -11,12 +11,15 @@ import {
 } from '@linode/ui';
 import { FormLabel } from '@mui/material';
 import React from 'react';
-import { useController } from 'react-hook-form';
+import { useController, useFormContext } from 'react-hook-form';
 
 import { LinodeInterfaceFeatureStatusChip } from '../../LinodesDetail/LinodeNetworking/LinodeInterfaces/LinodeInterfaceFeatureChip';
 
 import type { LinodeCreateFormValues } from '../utilities';
-import type { LinodeInterfaceAccountSetting } from '@linode/api-v4';
+import type {
+  CreateLinodeRequest,
+  LinodeInterfaceAccountSetting,
+} from '@linode/api-v4';
 
 const disabledReasonMap: Partial<
   Record<LinodeInterfaceAccountSetting, string>
@@ -28,6 +31,8 @@ const disabledReasonMap: Partial<
 };
 
 export const InterfaceGeneration = () => {
+  const { setValue } = useFormContext<CreateLinodeRequest>();
+
   const { field } = useController<
     LinodeCreateFormValues,
     'interface_generation'
@@ -63,7 +68,14 @@ export const InterfaceGeneration = () => {
       </Box>
       <RadioGroup
         aria-labelledby="interface-generation"
-        onChange={field.onChange}
+        onChange={(e, value) => {
+          field.onChange(e);
+
+          // If Linode Interfaces is selected, unset private IP because it's not compatible.
+          if (value === 'linode') {
+            setValue('private_ip', undefined);
+          }
+        }}
         value={field.value ?? 'linode'}
       >
         <FormControlLabel