upcoming: [M3-9637] - Support more VPC features and default Firewalls on the Linode Create flow

packages/manager/.changeset/pr-11915-upcoming-features-1742915363501.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+Support more VPC features when using Linode Interfaces on the Linode Create page ([#11915](https://github.com/linode/manager/pull/11915))

packages/manager/.changeset/pr-11915-upcoming-features-1742915406867.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+Pre-select default firewalls on the Linode Create flow ([#11915](https://github.com/linode/manager/pull/11915))

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

@@ -1,9 +1,9 @@
-import { useAllFirewallsQuery } from '@linode/queries';
-import { Autocomplete, Box, Stack } from '@linode/ui';
+import { Box, Stack } from '@linode/ui';
 import React, { useState } from 'react';
 import { useController, useFormContext, useWatch } from 'react-hook-form';
 
 import { LinkButton } from 'src/components/LinkButton';
+import { FirewallSelect } from 'src/features/Firewalls/components/FirewallSelect';
 import { CreateFirewallDrawer } from 'src/features/Firewalls/FirewallLanding/CreateFirewallDrawer';
 import { useRestrictedGlobalGrantCheck } from 'src/hooks/useRestrictedGlobalGrantCheck';
 
@@ -26,31 +26,23 @@ export const InterfaceFirewall = ({ index }: Props) => {
     name: `linodeInterfaces.${index}.firewall_id`,
   });
 
-  const { data: firewalls, error, isLoading } = useAllFirewallsQuery();
-
   const [isDrawerOpen, setIsDrawerOpen] = useState(false);
 
   const isLinodeCreateRestricted = useRestrictedGlobalGrantCheck({
     globalGrantType: 'add_linodes',
   });
 
-  const selectedFirewall =
-    firewalls?.find((firewall) => firewall.id === field.value) ?? null;
-
   return (
     <Stack spacing={2}>
       <Stack spacing={1.5}>
-        <Autocomplete
+        <FirewallSelect
           disabled={isLinodeCreateRestricted}
-          errorText={fieldState.error?.message ?? error?.[0].reason}
+          errorText={fieldState.error?.message}
           label={`${labelMap[interfaceType]} Interface Firewall`}
-          loading={isLoading}
-          noMarginTop
           onBlur={field.onBlur}
           onChange={(e, firewall) => field.onChange(firewall?.id ?? null)}
-          options={firewalls ?? []}
           placeholder="None"
-          value={selectedFirewall}
+          value={field.value}
         />
         <Box>
           <LinkButton

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

@@ -1,17 +1,27 @@
+import { useFirewallSettingsQuery } from '@linode/queries';
 import { FormControl, FormControlLabel, Radio, RadioGroup } from '@linode/ui';
 import React from 'react';
 import { useController, useFormContext } from 'react-hook-form';
 
 import { FormLabel } from 'src/components/FormLabel';
 
+import { getDefaultFirewallForInterfacePurpose } from './utilities';
+
 import type { LinodeCreateFormValues } from '../utilities';
+import type { InterfacePurpose } from '@linode/api-v4';
 
 interface Props {
   index: number;
 }
 
 export const InterfaceType = ({ index }: Props) => {
-  const { control } = useFormContext<LinodeCreateFormValues>();
+  const {
+    control,
+    setValue,
+    getFieldState,
+  } = useFormContext<LinodeCreateFormValues>();
+
+  const { data: firewallSettings } = useFirewallSettingsQuery();
 
   const { field } = useController({
     control,
@@ -24,8 +34,26 @@ export const InterfaceType = ({ index }: Props) => {
         Network Connection
       </FormLabel>
       <RadioGroup
+        onChange={(e, value) => {
+          // Change the interface purpose (Public, VPC, VLAN)
+          field.onChange(value);
+
+          const defaultFirewall = getDefaultFirewallForInterfacePurpose(
+            value as InterfacePurpose,
+            firewallSettings
+          );
+
+          // Set the Firewall based on defaults if:
+          // - there is a default firewall for this interface type
+          // - the user has not touched the Firewall field
+          if (
+            defaultFirewall &&
+            !getFieldState(`linodeInterfaces.${index}.firewall_id`).isTouched
+          ) {
+            setValue(`linodeInterfaces.${index}.firewall_id`, defaultFirewall);
+          }
+        }}
         aria-labelledby="network-interface"
-        onChange={field.onChange}
         row
         sx={{ mb: '0px !important' }}
         value={field.value}

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

@@ -1,3 +1,4 @@
+import { useFirewallSettingsQuery } from '@linode/queries';
 import {
   Button,
   Divider,
@@ -13,6 +14,7 @@ import { useFieldArray, useFormContext, useWatch } from 'react-hook-form';
 import { Firewall } from './Firewall';
 import { InterfaceGeneration } from './InterfaceGeneration';
 import { LinodeInterface } from './LinodeInterface';
+import { getDefaultInterfacePayload } from './utilities';
 
 import type { LinodeCreateFormValues } from '../utilities';
 
@@ -22,6 +24,8 @@ export const Networking = () => {
     formState: { errors },
   } = useFormContext<LinodeCreateFormValues>();
 
+  const { data: firewallSettings } = useFirewallSettingsQuery();
+
   const { append, fields, remove } = useFieldArray({
     control,
     name: 'linodeInterfaces',
@@ -42,16 +46,9 @@ export const Networking = () => {
         >
           <Typography variant="h2">Networking</Typography>
           <Button
-            onClick={() =>
-              append({
-                default_route: null,
-                firewall_id: null,
-                public: {},
-                purpose: 'public',
-                vlan: null,
-                vpc: null,
-              })
-            }
+            onClick={() => {
+              append(getDefaultInterfacePayload('public', firewallSettings));
+            }}
             buttonType="outlined"
             endIcon={<PlusSignIcon height="12px" width="12px" />}
           >

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

@@ -1,12 +1,27 @@
 import { useAllVPCsQuery, useRegionQuery } from '@linode/queries';
-import { Autocomplete, Box, Notice, Stack } from '@linode/ui';
+import {
+  Autocomplete,
+  Box,
+  Checkbox,
+  FormControlLabel,
+  Notice,
+  Stack,
+  TextField,
+  TooltipIcon,
+  Typography,
+} from '@linode/ui';
 import React, { useState } from 'react';
 import { Controller, useFormContext, useWatch } from 'react-hook-form';
 
 import { LinkButton } from 'src/components/LinkButton';
-import { REGION_CAVEAT_HELPER_TEXT } from 'src/features/VPCs/constants';
+import {
+  REGION_CAVEAT_HELPER_TEXT,
+  VPC_AUTO_ASSIGN_IPV4_TOOLTIP,
+} from 'src/features/VPCs/constants';
 import { VPCCreateDrawer } from 'src/features/VPCs/VPCCreateDrawer/VPCCreateDrawer';
 
+import { VPCRanges } from './VPCRanges';
+
 import type { LinodeCreateFormValues } from '../utilities';
 
 interface Props {
@@ -18,6 +33,7 @@ export const VPC = ({ index }: Props) => {
     control,
     resetField,
     setValue,
+    formState: { errors },
   } = useFormContext<LinodeCreateFormValues>();
   const [isCreateDrawerOpen, setIsCreateDrawerOpen] = useState(false);
 
@@ -118,6 +134,85 @@ export const VPC = ({ index }: Props) => {
           control={control}
           name={`linodeInterfaces.${index}.vpc.subnet_id`}
         />
+        <Stack>
+          <Controller
+            render={({ field, fieldState }) => (
+              <Box>
+                <FormControlLabel
+                  label={
+                    <Stack alignItems="center" direction="row">
+                      <Typography>
+                        Auto-assign a VPC IPv4 address for this Linode in the
+                        VPC
+                      </Typography>
+                      <TooltipIcon
+                        status="help"
+                        text={VPC_AUTO_ASSIGN_IPV4_TOOLTIP}
+                      />
+                    </Stack>
+                  }
+                  onChange={(e, checked) =>
+                    field.onChange(checked ? 'auto' : '')
+                  }
+                  checked={field.value === 'auto'}
+                  control={<Checkbox sx={{ ml: 0.4 }} />}
+                  disabled={!regionSupportsVPCs}
+                />
+                {field.value !== 'auto' && (
+                  <TextField
+                    errorText={
+                      fieldState.error?.message ??
+                      errors.linodeInterfaces?.[index]?.vpc?.ipv4
+                        ?.addresses?.[0]?.message
+                    }
+                    containerProps={{ sx: { mb: 1.5, mt: 1 } }}
+                    label="VPC IPv4"
+                    noMarginTop
+                    onBlur={field.onBlur}
+                    onChange={field.onChange}
+                    required
+                    value={field.value}
+                  />
+                )}
+              </Box>
+            )}
+            control={control}
+            name={`linodeInterfaces.${index}.vpc.ipv4.addresses.0.address`}
+          />
+          <Controller
+            render={({ field, fieldState }) => (
+              <Box>
+                {fieldState.error?.message && (
+                  <Notice text={fieldState.error.message} variant="error" />
+                )}
+                <FormControlLabel
+                  label={
+                    <Stack alignItems="center" direction="row">
+                      <Typography>
+                        Assign a public IPv4 address for this Linode
+                      </Typography>
+                      <TooltipIcon
+                        text={
+                          'Access the internet through the public IPv4 address using static 1:1 NAT.'
+                        }
+                        status="help"
+                      />
+                    </Stack>
+                  }
+                  onChange={(e, checked) =>
+                    field.onChange(checked ? 'auto' : null)
+                  }
+                  checked={field.value === 'auto'}
+                  control={<Checkbox sx={{ ml: 0.4 }} />}
+                  disabled={!regionSupportsVPCs}
+                />
+              </Box>
+            )}
+            control={control}
+            name={`linodeInterfaces.${index}.vpc.ipv4.addresses.0.nat_1_1_address`}
+          />
+        </Stack>
+        <VPCRanges disabled={!regionSupportsVPCs} interfaceIndex={index} />
       </Stack>
       <VPCCreateDrawer
         onSuccess={(vpc) => {

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

@@ -0,0 +1,87 @@
+import {
+  IconButton,
+  Stack,
+  TextField,
+  TooltipIcon,
+  Typography,
+} from '@linode/ui';
+import CloseIcon from '@mui/icons-material/Close';
+import React from 'react';
+import { Controller, useFieldArray, useFormContext } from 'react-hook-form';
+
+import { Link } from 'src/components/Link';
+import { LinkButton } from 'src/components/LinkButton';
+
+import type { LinodeCreateFormValues } from '../utilities';
+
+interface Props {
+  disabled: boolean;
+  interfaceIndex: number;
+}
+
+export const VPCRanges = ({ disabled, interfaceIndex }: Props) => {
+  const { control } = useFormContext<LinodeCreateFormValues>();
+
+  const { append, fields, remove } = useFieldArray({
+    control,
+    name: `linodeInterfaces.${interfaceIndex}.vpc.ipv4.ranges`,
+  });
+
+  return (
+    <Stack>
+      <Stack spacing={1}>
+        {fields.map((field, index) => (
+          <Stack
+            alignItems="flex-start"
+            direction="row"
+            key={field.id}
+            spacing={0.5}
+          >
+            <Controller
+              render={({ field, fieldState }) => (
+                <TextField
+                  errorText={fieldState.error?.message}
+                  hideLabel
+                  label={`IP Range ${index}`}
+                  onBlur={field.onBlur}
+                  onChange={field.onChange}
+                  placeholder="10.0.0.0/24"
+                  sx={{ minWidth: 290 }}
+                  value={field.value}
+                />
+              )}
+              control={control}
+              name={`linodeInterfaces.${interfaceIndex}.vpc.ipv4.ranges.${index}.range`}
+            />
+            <IconButton
+              aria-label={`Remove IP Range ${index}`}
+              onClick={() => remove(index)}
+              sx={{ padding: 0.75 }}
+            >
+              <CloseIcon />
+            </IconButton>
+          </Stack>
+        ))}
+      </Stack>
+      <Stack alignItems="center" direction="row" spacing={1}>
+        <LinkButton isDisabled={disabled} onClick={() => append({ range: '' })}>
+          Add IPv4 Range
+        </LinkButton>
+        <TooltipIcon
+          text={
+            <Typography>
+              Assign additional IPv4 address ranges that the VPC can use to
+              reach services running on this Linode.{' '}
+              <Link to="https://techdocs.akamai.com/cloud-computing/docs/assign-a-compute-instance-to-a-vpc">
+                Learn more
+              </Link>
+              .
+            </Typography>
+          }
+          status="help"
+          sxTooltipIcon={{ p: 0.5 }}
+        />
+      </Stack>
+    </Stack>
+  );
+};