refactor: [M3-10638] - VPC IPv4 and IPv6 address code clean up (#12940)

## Description 📝
Clean up duplicate VPC IPv4 and IPv6 address / public access code across the various VPC flows

## How to test 🧪

### Prerequisites

(How to setup test environment)

- Ensure you have the VPC IPv6 flag and customer tags to test VPC Dual Stack

### Verification steps

(How to verify changes)

- [ ] Ensure there are no regressions to the Linode Create VPC (legacy and Linode Interfaces) flows, Legacy config dialog flows, Add/Edit Interface drawers

Author: hana-akamai

packages/manager/.changeset/pr-12940-tech-stories-1759341754178.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Tech Stories
+---
+
+VPC IPv4 and IPv6 address code clean up ([#12940](https://github.com/linode/manager/pull/12940))

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

@@ -1,31 +1,14 @@
 import { useAllVPCsQuery, useRegionQuery } from '@linode/queries';
-import {
-  Autocomplete,
-  Box,
-  Checkbox,
-  Divider,
-  FormControlLabel,
-  Notice,
-  Stack,
-  TextField,
-  TooltipIcon,
-  Typography,
-} from '@linode/ui';
+import { Autocomplete, Box, Divider, Stack, Typography } from '@linode/ui';
 import { LinkButton } from '@linode/ui';
 import React, { useState } from 'react';
 import { Controller, useFormContext, useWatch } from 'react-hook-form';
 
-import {
-  VPCIPv6PublicIPLabel,
-  VPCPublicIPLabel,
-} from 'src/features/VPCs/components/VPCPublicIPLabel';
-import {
-  REGION_CAVEAT_HELPER_TEXT,
-  VPC_AUTO_ASSIGN_IPV4_TOOLTIP,
-  VPC_AUTO_ASSIGN_IPV6_TOOLTIP,
-  VPC_IPV4_INPUT_HELPER_TEXT,
-  VPC_IPV6_INPUT_HELPER_TEXT,
-} from 'src/features/VPCs/constants';
+import { PublicIPv4Access } from 'src/features/Linodes/LinodesDetail/LinodeNetworking/LinodeInterfaces/PublicIPv4Access';
+import { PublicIPv6Access } from 'src/features/Linodes/LinodesDetail/LinodeNetworking/LinodeInterfaces/PublicIPv6Access';
+import { VPCIPv4Address } from 'src/features/Linodes/LinodesDetail/LinodeNetworking/LinodeInterfaces/VPCIPv4Address';
+import { VPCIPv6Address } from 'src/features/Linodes/LinodesDetail/LinodeNetworking/LinodeInterfaces/VPCIPv6Address';
+import { REGION_CAVEAT_HELPER_TEXT } from 'src/features/VPCs/constants';
 import { VPCCreateDrawer } from 'src/features/VPCs/VPCCreateDrawer/VPCCreateDrawer';
 import { useVPCDualStack } from 'src/hooks/useVPCDualStack';
 
@@ -161,85 +144,35 @@ export const VPC = ({ index }: Props) => {
             control={control}
             name={`linodeInterfaces.${index}.vpc.ipv4.addresses.0.address`}
             render={({ field, fieldState }) => (
-              <Box>
-                <FormControlLabel
-                  checked={field.value === 'auto'}
-                  control={<Checkbox sx={{ ml: 0.4 }} />}
-                  disabled={!regionSupportsVPCs}
-                  label={
-                    <Stack alignItems="center" direction="row">
-                      <Typography>Auto-assign VPC IPv4</Typography>
-                      <TooltipIcon
-                        status="info"
-                        text={VPC_AUTO_ASSIGN_IPV4_TOOLTIP}
-                      />
-                    </Stack>
-                  }
-                  onChange={(e, checked) =>
-                    field.onChange(checked ? 'auto' : '')
-                  }
-                />
-                {field.value !== 'auto' && (
-                  <TextField
-                    containerProps={{ sx: { mb: 1.5, mt: 1 } }}
-                    errorText={
-                      fieldState.error?.message ??
-                      errors.linodeInterfaces?.[index]?.vpc?.ipv4
-                        ?.addresses?.[0]?.message
-                    }
-                    helperText={VPC_IPV4_INPUT_HELPER_TEXT}
-                    label="VPC IPv4"
-                    noMarginTop
-                    onBlur={field.onBlur}
-                    onChange={field.onChange}
-                    required
-                    value={field.value}
-                  />
-                )}
-              </Box>
+              <VPCIPv4Address
+                disabled={!regionSupportsVPCs}
+                errorMessage={
+                  fieldState.error?.message ??
+                  errors.linodeInterfaces?.[index]?.vpc?.ipv4?.addresses?.[0]
+                    ?.message
+                }
+                fieldValue={field.value}
+                onBlur={field.onBlur}
+                onChange={field.onChange}
+              />
             )}
           />
           {showIPv6Fields && (
             <Controller
               control={control}
               name={`linodeInterfaces.${index}.vpc.ipv6.slaac.0.range`}
               render={({ field, fieldState }) => (
-                <Box>
-                  <FormControlLabel
-                    checked={field.value === 'auto'}
-                    control={<Checkbox sx={{ ml: 0.4 }} />}
-                    disabled={!regionSupportsVPCs}
-                    label={
-                      <Stack alignItems="center" direction="row">
-                        <Typography>Auto-assign VPC IPv6</Typography>
-                        <TooltipIcon
-                          status="info"
-                          text={VPC_AUTO_ASSIGN_IPV6_TOOLTIP}
-                        />
-                      </Stack>
-                    }
-                    onChange={(e, checked) =>
-                      field.onChange(checked ? 'auto' : '')
-                    }
-                  />
-                  {field.value !== 'auto' && (
-                    <TextField
-                      containerProps={{ sx: { mb: 1.5, mt: 1 } }}
-                      errorText={
-                        fieldState.error?.message ??
-                        errors.linodeInterfaces?.[index]?.vpc?.ipv6?.slaac?.[0]
-                          ?.range?.message
-                      }
-                      helperText={VPC_IPV6_INPUT_HELPER_TEXT}
-                      label="VPC IPv6"
-                      noMarginTop
-                      onBlur={field.onBlur}
-                      onChange={field.onChange}
-                      required
-                      value={field.value}
-                    />
-                  )}
-                </Box>
+                <VPCIPv6Address
+                  disabled={!regionSupportsVPCs}
+                  errorMessage={
+                    fieldState.error?.message ??
+                    errors.linodeInterfaces?.[index]?.vpc?.ipv6?.slaac?.[0]
+                      ?.range?.message
+                  }
+                  fieldValue={field.value}
+                  onBlur={field.onBlur}
+                  onChange={field.onChange}
+                />
               )}
             />
           )}
@@ -254,39 +187,25 @@ export const VPC = ({ index }: Props) => {
               control={control}
               name={`linodeInterfaces.${index}.vpc.ipv4.addresses.0.nat_1_1_address`}
               render={({ field, fieldState }) => (
-                <Box>
-                  {fieldState.error?.message && (
-                    <Notice text={fieldState.error.message} variant="error" />
-                  )}
-                  <FormControlLabel
-                    checked={field.value === 'auto'}
-                    control={<Checkbox sx={{ ml: 0.4 }} />}
-                    disabled={!regionSupportsVPCs}
-                    label={<VPCPublicIPLabel />}
-                    onChange={(e, checked) =>
-                      field.onChange(checked ? 'auto' : null)
-                    }
-                  />
-                </Box>
+                <PublicIPv4Access
+                  checked={Boolean(field.value)}
+                  disabled={!regionSupportsVPCs}
+                  errorMessage={fieldState.error?.message}
+                  onChange={field.onChange}
+                />
               )}
             />
             {showIPv6Fields && (
               <Controller
                 control={control}
                 name={`linodeInterfaces.${index}.vpc.ipv6.is_public`}
                 render={({ field, fieldState }) => (
-                  <Box>
-                    {fieldState.error?.message && (
-                      <Notice text={fieldState.error.message} variant="error" />
-                    )}
-                    <FormControlLabel
-                      checked={field.value === true}
-                      control={<Checkbox sx={{ ml: 0.4 }} />}
-                      disabled={!regionSupportsVPCs}
-                      label={<VPCIPv6PublicIPLabel />}
-                      onChange={() => field.onChange(!field.value)}
-                    />
-                  </Box>
+                  <PublicIPv6Access
+                    checked={field.value === true}
+                    disabled={!regionSupportsVPCs}
+                    errorMessage={fieldState.error?.message}
+                    onChange={field.onChange}
+                  />
                 )}
               />
             )}