upcoming: [M3-10532] - Disable legacy interface selection in Linode Interface UI when creating Linode from backups (linode#12772)

* disable legacy interfaces when creat
ing from backup

* tooltip for vpc legacy flow

* minor updates

* something like this?

* changeset

* whoops didn't save + add test

* tooltip when disabled

* update tooltip

* no selection when disabled

* add test case

* this feels really weird ngl

* address feedback

* this seems more legit

* remove stray console

Author: coliu-akamai

packages/manager/.changeset/pr-12772-upcoming-features-1756221031061.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+Disable legacy interface selection for Linode Interfaces when creating a Linode from backups ([#12772](https://github.com/linode/manager/pull/12772))

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

@@ -1,5 +1,6 @@
 import { firewallQueries, useQueryClient } from '@linode/queries';
 import {
+  Box,
   FormControl,
   Radio,
   RadioGroup,
@@ -9,11 +10,12 @@ import {
 import { Grid } from '@mui/material';
 import { useSnackbar } from 'notistack';
 import React from 'react';
-import { useController, useFormContext } from 'react-hook-form';
+import { useController, useFormContext, useWatch } from 'react-hook-form';
 
 import { FormLabel } from 'src/components/FormLabel';
 import { SelectionCard } from 'src/components/SelectionCard/SelectionCard';
 
+import { useGetLinodeCreateType } from '../Tabs/utils/useGetLinodeCreateType';
 import { getDefaultFirewallForInterfacePurpose } from './utilities';
 
 import type { LinodeCreateFormValues } from '../utilities';
@@ -57,6 +59,16 @@ export const InterfaceType = ({ index }: Props) => {
     name: `linodeInterfaces.${index}.purpose`,
   });
 
+  const interfaceGeneration = useWatch({
+    control,
+    name: 'interface_generation',
+  });
+
+  const createType = useGetLinodeCreateType();
+  const isCreatingFromBackup = createType === 'Backups';
+
+  const disabled = isCreatingFromBackup && interfaceGeneration !== 'linode';
+
   const onChange = async (value: InterfacePurpose) => {
     // Change the interface purpose (Public, VPC, VLAN)
     field.onChange(value);
@@ -96,7 +108,20 @@ export const InterfaceType = ({ index }: Props) => {
 
   return (
     <FormControl>
-      <FormLabel id="network-connection-label">Network Connection</FormLabel>
+      <Box alignItems="center" display="flex" flexDirection="row">
+        <FormLabel id="network-connection-label">Network Connection</FormLabel>
+        {disabled && (
+          <TooltipIcon
+            status="info"
+            sxTooltipIcon={{
+              padding: 0,
+              marginLeft: '8px',
+              marginBottom: '8px',
+            }}
+            text="You cannot use Configuration Profile Interfaces when deploying to a new Linode from a backup."
+          />
+        )}
+      </Box>
       <Typography id="network-connection-helper-text">
         The default interface used by this Linode to route network traffic.
         Additional interfaces can be added after the Linode is created.
@@ -109,7 +134,8 @@ export const InterfaceType = ({ index }: Props) => {
         <Grid container spacing={2}>
           {interfaceTypes.map((interfaceType) => (
             <SelectionCard
-              checked={field.value === interfaceType.purpose}
+              checked={disabled ? false : field.value === interfaceType.purpose}
+              disabled={disabled}
               gridSize={{
                 md: 3,
                 sm: 12,
@@ -119,7 +145,12 @@ export const InterfaceType = ({ index }: Props) => {
               key={interfaceType.purpose}
               onClick={() => onChange(interfaceType.purpose)}
               renderIcon={() => (
-                <Radio checked={field.value === interfaceType.purpose} />
+                <Radio
+                  checked={
+                    disabled ? false : field.value === interfaceType.purpose
+                  }
+                  disabled={disabled}
+                />
               )}
               renderVariant={() => (
                 <TooltipIcon

packages/manager/src/features/Linodes/LinodeCreate/Tabs/utils/useGetLinodeCreateType.ts

@@ -28,6 +28,10 @@ export const linodesCreateTypes = Array.from(linodesCreateTypesMap.keys());
 export const useGetLinodeCreateType = () => {
   const { pathname } = useLocation() as { pathname: LinkProps['to'] };
 
+  return getLinodeCreateType(pathname);
+};
+
+export const getLinodeCreateType = (pathname: LinkProps['to']) => {
   switch (pathname) {
     case '/linodes/create/backups':
       return 'Backups';

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

@@ -71,6 +71,8 @@ export const VPC = () => {
       : 'Assign this Linode to an existing VPC.';
 
   const createType = useGetLinodeCreateType();
+  const isCreatingFromBackup = createType === 'Backups';
+  const disabled = !regionSupportsVPCs || isCreatingFromBackup;
 
   const vpcFormEventOptions: LinodeCreateFormEventOptions = {
     createType: createType ?? 'OS',
@@ -82,7 +84,16 @@ export const VPC = () => {
   return (
     <Paper data-testid="vpc-panel">
       <Stack spacing={2}>
-        <Typography variant="h2">VPC</Typography>
+        <Box alignItems="center" display="flex" flexDirection="row">
+          <Typography variant="h2">VPC</Typography>
+          {isCreatingFromBackup && (
+            <TooltipIcon
+              status="info"
+              sxTooltipIcon={{ p: 0, marginLeft: '8px' }}
+              text="You cannot assign a VPC when deploying to a new Linode from a backup."
+            />
+          )}
+        </Box>
         <Typography>
           {copy}{' '}
           <Link
@@ -104,7 +115,7 @@ export const VPC = () => {
             name="interfaces.0.vpc_id"
             render={({ field, fieldState }) => (
               <Autocomplete
-                disabled={!regionSupportsVPCs}
+                disabled={disabled}
                 errorText={error?.[0].reason ?? fieldState.error?.message}
                 helperText={
                   !regionId

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

@@ -29,7 +29,10 @@ import {
   useVMHostMaintenanceEnabled,
 } from 'src/features/Account/utils';
 import { usePermissions } from 'src/features/IAM/hooks/usePermissions';
-import { useGetLinodeCreateType } from 'src/features/Linodes/LinodeCreate/Tabs/utils/useGetLinodeCreateType';
+import {
+  getLinodeCreateType,
+  useGetLinodeCreateType,
+} from 'src/features/Linodes/LinodeCreate/Tabs/utils/useGetLinodeCreateType';
 import { useFlags } from 'src/hooks/useFlags';
 import { useSecureVMNoticesEnabled } from 'src/hooks/useSecureVMNoticesEnabled';
 import { useTabs } from 'src/hooks/useTabs';
@@ -146,8 +149,10 @@ export const LinodeCreate = () => {
     handleTabChange(index);
 
     if (index !== tabIndex) {
+      const newTab = tabs[index];
+      const newLinodeCreateType = getLinodeCreateType(newTab.to);
       // Get the default values for the new tab and reset the form
-      defaultValues(linodeCreateType, search, queryClient, {
+      defaultValues(newLinodeCreateType, search, queryClient, {
         isLinodeInterfacesEnabled,
         isVMHostMaintenanceEnabled,
       }).then(form.reset);

packages/manager/src/features/Linodes/LinodeCreate/utilities.test.tsx

@@ -70,6 +70,38 @@ describe('getLinodeCreatePayload', () => {
       placement_group: undefined,
     });
   });
+
+  it('should remove interface from the payload if using legacy interfaces with the new UI and the linode is being created from backups', () => {
+    const values = {
+      ...createLinodeRequestFactory.build({
+        interface_generation: 'legacy_config',
+        backup_id: 1,
+      }),
+      linodeInterfaces: [{ purpose: 'public', public: {} }],
+    } as LinodeCreateFormValues;
+
+    expect(
+      getLinodeCreatePayload(values, {
+        isShowingNewNetworkingUI: true,
+      }).interfaces
+    ).toEqual(undefined);
+  });
+
+  it('should not remove interface from the payload when using new interfaces and creating from a backup', () => {
+    const values = {
+      ...createLinodeRequestFactory.build({
+        interface_generation: 'linode',
+        backup_id: 1,
+      }),
+      linodeInterfaces: [{ purpose: 'public', public: {} }],
+    } as LinodeCreateFormValues;
+
+    expect(
+      getLinodeCreatePayload(values, {
+        isShowingNewNetworkingUI: true,
+      }).interfaces
+    ).toEqual([{ public: {}, vpc: null, vlan: null }]);
+  });
 });
 
 describe('getInterfacesPayload', () => {

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

@@ -98,9 +98,11 @@ export const getLinodeCreatePayload = (
       );
       values.firewall_id = undefined;
     } else {
-      values.interfaces = formValues.linodeInterfaces.map(
-        getLegacyInterfaceFromLinodeInterface
-      );
+      values.interfaces = formValues.backup_id
+        ? undefined
+        : formValues.linodeInterfaces.map(
+            getLegacyInterfaceFromLinodeInterface
+          );
     }
   } else {
     values.interfaces = getInterfacesPayload(