feat: [M3-7121 & M3-7122] - Support VPC in Linode Add/Edit Config dialog

packages/manager/src/features/Linodes/LinodesCreate/AttachVLAN.tsx

@@ -18,7 +18,7 @@ import {
 
 import { InterfaceSelect } from '../LinodesDetail/LinodeSettings/InterfaceSelect';
 
-// @TODO Delete this file when VPC is released
+// @TODO VPC: Delete this file when VPC is released
 
 interface Props {
   handleVLANChange: (updatedInterface: Interface) => void;
@@ -105,14 +105,16 @@ export const AttachVLAN = React.memo((props: Props) => {
             .
           </Typography>
           <InterfaceSelect
+            errors={{
+              ipamError,
+              labelError,
+            }}
             handleChange={(newInterface: Interface) =>
               handleVLANChange(newInterface)
             }
             fromAddonsPanel
             ipamAddress={ipamAddress}
-            ipamError={ipamError}
             label={vlanLabel}
-            labelError={labelError}
             purpose="vlan"
             readOnly={readOnly || !regionSupportsVLANs || false}
             region={region}

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

@@ -602,6 +602,7 @@ export class LinodeCreate extends React.PureComponent<
             }
             assignPublicIPv4Address={this.props.assignPublicIPv4Address}
             autoassignIPv4WithinVPC={this.props.autoassignIPv4WithinVPC}
+            from="linodeCreate"
             handleSelectVPC={this.props.setSelectedVPC}
             handleSubnetChange={this.props.handleSubnetChange}
             handleVPCIPv4Change={this.props.handleVPCIPv4Change}

packages/manager/src/features/Linodes/LinodesCreate/VLANAccordion.tsx

@@ -108,14 +108,16 @@ export const VLANAccordion = React.memo((props: Props) => {
         .
       </Typography>
       <InterfaceSelect
+        errors={{
+          ipamError,
+          labelError,
+        }}
         handleChange={(newInterface: Interface) =>
           handleVLANChange(newInterface)
         }
         fromAddonsPanel
         ipamAddress={ipamAddress}
-        ipamError={ipamError}
         label={vlanLabel}
-        labelError={labelError}
         purpose="vlan"
         readOnly={readOnly || !regionSupportsVLANs || false}
         region={region}

packages/manager/src/features/Linodes/LinodesCreate/VPCPanel.test.tsx

@@ -7,7 +7,7 @@ import { makeResourcePage } from 'src/mocks/serverHandlers';
 import { rest, server } from 'src/mocks/testServer';
 import { mockMatchMedia, renderWithTheme } from 'src/utilities/testHelpers';
 
-import { VPCPanel } from './VPCPanel';
+import { VPCPanel, VPCPanelProps } from './VPCPanel';
 
 const queryClient = new QueryClient();
 
@@ -19,6 +19,7 @@ afterEach(() => {
 const props = {
   assignPublicIPv4Address: false,
   autoassignIPv4WithinVPC: true,
+  from: 'linodeCreate' as VPCPanelProps['from'],
   handleSelectVPC: jest.fn(),
   handleSubnetChange: jest.fn(),
   handleVPCIPv4Change: jest.fn(),

packages/manager/src/features/Linodes/LinodesCreate/VPCPanel.tsx

@@ -1,4 +1,6 @@
 import Stack from '@mui/material/Stack';
+import { useTheme } from '@mui/material/styles';
+import useMediaQuery from '@mui/material/useMediaQuery';
 import * as React from 'react';
 
 import { Box } from 'src/components/Box';
@@ -23,20 +25,23 @@ import scrollErrorIntoView from 'src/utilities/scrollErrorIntoView';
 import { StyledCreateLink } from './LinodeCreate.styles';
 import { REGION_CAVEAT_HELPER_TEXT } from './constants';
 
-interface VPCPanelProps {
+export interface VPCPanelProps {
   assignPublicIPv4Address: boolean;
   autoassignIPv4WithinVPC: boolean;
+  from: 'linodeConfig' | 'linodeCreate';
   handleSelectVPC: (vpcId: number) => void;
   handleSubnetChange: (subnetId: number) => void;
   handleVPCIPv4Change: (IPv4: string) => void;
+  nat_1_1Error?: string;
   region: string | undefined;
-  selectedSubnetId: number | undefined;
-  selectedVPCId: number | undefined;
+  selectedSubnetId?: null | number;
+  selectedVPCId?: null | number;
   subnetError?: string;
   toggleAssignPublicIPv4Address: () => void;
   toggleAutoassignIPv4WithinVPCEnabled: () => void;
   vpcIPv4AddressOfLinode: string | undefined;
   vpcIPv4Error?: string;
+  vpcIdError?: string;
 }
 
 const ERROR_GROUP_STRING = 'vpc-errors';
@@ -45,9 +50,11 @@ export const VPCPanel = (props: VPCPanelProps) => {
   const {
     assignPublicIPv4Address,
     autoassignIPv4WithinVPC,
+    from,
     handleSelectVPC,
     handleSubnetChange,
     handleVPCIPv4Change,
+    nat_1_1Error,
     region,
     selectedSubnetId,
     selectedVPCId,
@@ -56,8 +63,12 @@ export const VPCPanel = (props: VPCPanelProps) => {
     toggleAutoassignIPv4WithinVPCEnabled,
     vpcIPv4AddressOfLinode,
     vpcIPv4Error,
+    vpcIdError,
   } = props;
 
+  const theme = useTheme();
+  const isSmallBp = useMediaQuery(theme.breakpoints.down('sm'));
+
   const flags = useFlags();
   const { account } = useAccountManagement();
 
@@ -104,10 +115,15 @@ export const VPCPanel = (props: VPCPanelProps) => {
       : accumulator;
   }, []);
 
-  vpcDropdownOptions.unshift({
-    label: 'None',
-    value: -1,
-  });
+  const fromLinodeCreate = from === 'linodeCreate';
+  const fromLinodeConfig = from === 'linodeConfig';
+
+  if (fromLinodeCreate) {
+    vpcDropdownOptions.unshift({
+      label: 'None',
+      value: -1,
+    });
+  }
 
   const subnetDropdownOptions: Item[] =
     vpcs
@@ -121,26 +137,47 @@ export const VPCPanel = (props: VPCPanelProps) => {
     ? getAPIErrorOrDefault(error, 'Unable to load VPCs')[0].reason
     : undefined;
 
-  const mainCopyVPC =
-    vpcDropdownOptions.length <= 1
-      ? 'Allow Linode to communicate in an isolated environment.'
-      : 'Assign this Linode to an existing VPC.';
+  const getMainCopyVPC = () => {
+    if (fromLinodeConfig) {
+      return null;
+    }
+
+    const copy =
+      vpcDropdownOptions.length <= 1
+        ? 'Allow Linode to communicate in an isolated environment.'
+        : 'Assign this Linode to an existing VPC.';
+
+    return (
+      <>
+        {copy} <Link to="">Learn more</Link>.
+      </>
+    );
+  };
 
   return (
     <Paper
+      sx={(theme) => ({
+        ...(fromLinodeCreate && {
+          marginTop: theme.spacing(3),
+        }),
+        ...(fromLinodeConfig && {
+          padding: 0,
+        }),
+      })}
       data-testid="vpc-panel"
-      sx={(theme) => ({ marginTop: theme.spacing(3) })}
     >
-      <Typography
-        sx={(theme) => ({ marginBottom: theme.spacing(2) })}
-        variant="h2"
-      >
-        VPC
-      </Typography>
+      {fromLinodeCreate && (
+        <Typography
+          sx={(theme) => ({ marginBottom: theme.spacing(2) })}
+          variant="h2"
+        >
+          VPC
+        </Typography>
+      )}
       <Stack>
         <Typography>
           {/* @TODO VPC: Update link */}
-          {mainCopyVPC} <Link to="">Learn more</Link>.
+          {getMainCopyVPC()}
         </Typography>
         <Select
           onChange={(selectedVPC: Item<number, string>) => {
@@ -152,15 +189,15 @@ export const VPCPanel = (props: VPCPanelProps) => {
           value={vpcDropdownOptions.find(
             (option) => option.value === selectedVPCId
           )}
-          defaultValue={vpcDropdownOptions[0]}
+          defaultValue={fromLinodeConfig ? null : vpcDropdownOptions[0]} // If we're in the Config dialog, there is no "None" option at index 0
           disabled={!regionSupportsVPCs}
-          errorText={vpcError}
+          errorText={vpcIdError ?? vpcError}
           isClearable={false}
           isLoading={isLoading}
-          label="Assign VPC"
+          label={from === 'linodeCreate' ? 'Assign VPC' : 'VPC'}
           noOptionsMessage={() => 'Create a VPC to assign to this Linode.'}
           options={vpcDropdownOptions}
-          placeholder={''}
+          placeholder={'Select a VPC'}
         />
         {vpcDropdownOptions.length <= 1 && regionSupportsVPCs && (
           <Typography sx={(theme) => ({ paddingTop: theme.spacing(1.5) })}>
@@ -169,9 +206,11 @@ export const VPCPanel = (props: VPCPanelProps) => {
           </Typography>
         )}
 
-        <StyledCreateLink to={`${APP_ROOT}/vpcs/create`}>
-          Create VPC
-        </StyledCreateLink>
+        {from === 'linodeCreate' && (
+          <StyledCreateLink to={`${APP_ROOT}/vpcs/create`}>
+            Create VPC
+          </StyledCreateLink>
+        )}
 
         {selectedVPCId !== -1 && regionSupportsVPCs && (
           <Stack data-testid="subnet-and-additional-options-section">
@@ -214,7 +253,7 @@ export const VPCPanel = (props: VPCPanelProps) => {
                     flexDirection="row"
                     sx={{}}
                   >
-                    <Typography noWrap>
+                    <Typography noWrap={!isSmallBp && from === 'linodeConfig'}>
                       Auto-assign a VPC IPv4 address for this Linode in the VPC
                     </Typography>
                     <TooltipIcon
@@ -245,7 +284,6 @@ export const VPCPanel = (props: VPCPanelProps) => {
               })}
               alignItems="center"
               display="flex"
-              flexDirection="row"
             >
               <FormControlLabel
                 control={
@@ -268,6 +306,15 @@ export const VPCPanel = (props: VPCPanelProps) => {
                   </Box>
                 }
               />
+              {assignPublicIPv4Address && nat_1_1Error && (
+                <Typography
+                  sx={(theme) => ({
+                    color: theme.color.red,
+                  })}
+                >
+                  {nat_1_1Error}
+                </Typography>
+              )}
             </Box>
           </Stack>
         )}

packages/manager/src/features/Linodes/LinodesDetail/LinodeConfigs/ConfigRow.tsx

@@ -1,4 +1,4 @@
-import { Config, Interface } from '@linode/api-v4/lib/linodes';
+import { Config } from '@linode/api-v4/lib/linodes';
 import { styled } from '@mui/material/styles';
 import * as React from 'react';
 
@@ -9,6 +9,7 @@ import { useAllLinodeDisksQuery } from 'src/queries/linodes/disks';
 import { useLinodeKernelQuery } from 'src/queries/linodes/linodes';
 import { useLinodeVolumesQuery } from 'src/queries/volumes';
 
+import { InterfaceListItem } from './InterfaceListItem';
 import { ConfigActionMenu } from './LinodeConfigActionMenu';
 
 interface Props {
@@ -59,7 +60,7 @@ export const ConfigRow = React.memo((props: Props) => {
             return undefined;
           }
           return (
-            <li style={{ paddingBottom: 4 }} key={thisDevice}>
+            <li key={thisDevice} style={{ paddingBottom: 4 }}>
               /dev/{thisDevice} - {label}
             </li>
           );
@@ -76,17 +77,12 @@ export const ConfigRow = React.memo((props: Props) => {
   const InterfaceList = (
     <StyledUl>
       {interfaces.map((interfaceEntry, idx) => {
-        // The order of the config.interfaces array as returned by the API is significant.
-        // Index 0 is eth0, index 1 is eth1, index 2 is eth2.
-        const interfaceName = `eth${idx}`;
-
         return (
-          <li
-            style={{ paddingBottom: 4 }}
+          <InterfaceListItem
+            idx={idx}
+            interfaceEntry={interfaceEntry}
             key={interfaceEntry.label ?? 'public' + idx}
-          >
-            {interfaceName} – {getInterfaceLabel(interfaceEntry)}
-          </li>
+          />
         );
       })}
     </StyledUl>
@@ -132,15 +128,3 @@ const StyledTableCell = styled(TableCell, { label: 'StyledTableCell' })({
   },
   padding: '0 !important',
 });
-
-export const getInterfaceLabel = (configInterface: Interface): string => {
-  if (configInterface.purpose === 'public') {
-    return 'Public Internet';
-  }
-
-  const interfaceLabel = configInterface.label;
-  const ipamAddress = configInterface.ipam_address;
-  const hasIPAM = Boolean(ipamAddress);
-
-  return `VLAN: ${interfaceLabel} ${hasIPAM ? `(${ipamAddress})` : ''}`;
-};

packages/manager/src/features/Linodes/LinodesDetail/LinodeConfigs/InterfaceListItem.tsx

@@ -0,0 +1,44 @@
+import { Interface } from '@linode/api-v4/lib/linodes';
+import React from 'react';
+
+import { useVPCQuery } from 'src/queries/vpcs';
+
+interface Props {
+  idx: number;
+  interfaceEntry: Interface;
+}
+
+export const InterfaceListItem = (props: Props) => {
+  const { idx, interfaceEntry } = props;
+  const { data: vpc } = useVPCQuery(
+    interfaceEntry?.vpc_id ?? -1,
+    Boolean(interfaceEntry.vpc_id)
+  );
+
+  // The order of the config.interfaces array as returned by the API is significant.
+  // Index 0 is eth0, index 1 is eth1, index 2 is eth2.
+  const interfaceName = `eth${idx}`;
+
+  const getInterfaceLabel = (configInterface: Interface): string => {
+    if (configInterface.purpose === 'public') {
+      return 'Public Internet';
+    }
+
+    const interfaceLabel = configInterface.label;
+
+    if (configInterface.purpose === 'vlan') {
+      const ipamAddress = configInterface.ipam_address;
+      const hasIPAM = Boolean(ipamAddress);
+      return `VLAN: ${interfaceLabel} ${hasIPAM ? `(${ipamAddress})` : ''}`;
+    }
+
+    const vpcIpv4 = configInterface.ipv4?.vpc;
+    return `VPC: ${vpc?.label} ${Boolean(vpcIpv4) ? `(${vpcIpv4})` : ''}`;
+  };
+
+  return (
+    <li style={{ paddingBottom: 4 }}>
+      {interfaceName} – {getInterfaceLabel(interfaceEntry)}
+    </li>
+  );
+};