upcoming: [M3-10575] - VPC Create page feedback (linode#12807)

## Description 📝
Address VPC Create page feedback from Mark Greve

## Changes  🔄

- Add `192.168.128.0/17` exclusion to the VPC IP Stack tooltips
- Set the minimum number of Linodes to 0 instead of negative numbers

## How to test 🧪

### Prerequisites

(How to setup test environment)

- Ensure your account has the VPC IPv6 customer tags

### Reproduction steps

(How to reproduce the issue, if applicable)

- [ ] On another branch or devcloud, go to the VPC Create page
- [ ] Hover over the IP Stack VPC tooltips, the text incorrectly says entire RFC 1918 range
- [ ] In the Subnets section, set the IP Address Range to a `/32` and IPv6 Prefix Length to `/62`. The number of Linodes is a negative number

### Verification steps

(How to verify changes)

- [ ] Check the PR preview link or pull locally and point to devcloud, go to the VPC Create page
- [ ] Hover over the IP Stack VPC tooltips, the text includes the `192.168.128.0/17` exception
- [ ] In the Subnets section, set the IP Address Range to a `/32` and IPv6 Prefix Length to `/62`. The lowest number is 0 instead of negative

Author: hana-akamai

packages/manager/.changeset/pr-12807-upcoming-features-1757091374025.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+VPC Create page feedback ([#12807](https://github.com/linode/manager/pull/12807))

packages/manager/src/features/VPCs/VPCCreate/FormComponents/VPCTopSectionContent.tsx

@@ -29,7 +29,10 @@ import { useFlags } from 'src/hooks/useFlags';
 import { useVPCDualStack } from 'src/hooks/useVPCDualStack';
 import { sendLinodeCreateFormInputEvent } from 'src/utilities/analytics/formEventAnalytics';
 
-import { VPC_CREATE_FORM_VPC_HELPER_TEXT } from '../../constants';
+import {
+  RFC1918HelperText,
+  VPC_CREATE_FORM_VPC_HELPER_TEXT,
+} from '../../constants';
 import { StyledBodyTypography } from './VPCCreateForm.styles';
 
 import type { Region } from '@linode/api-v4';
@@ -170,10 +173,12 @@ export const VPCTopSectionContent = (props: Props) => {
                           padding: '8px',
                         }}
                         text={
-                          <Typography>
-                            The VPC uses IPv4 addresses only. The VPC can use
-                            the entire RFC 1918 specified range for subnetting.
-                          </Typography>
+                          <Stack spacing={2}>
+                            <Typography>
+                              The VPC uses IPv4 addresses only.
+                            </Typography>
+                            <Typography>{RFC1918HelperText}</Typography>
+                          </Stack>
                         }
                         width={250}
                       />
@@ -215,10 +220,7 @@ export const VPCTopSectionContent = (props: Props) => {
                             <Typography>
                               The VPC supports both IPv4 and IPv6 addresses.
                             </Typography>
-                            <Typography>
-                              For IPv4, the VPC can use the entire RFC 1918
-                              specified range for subnetting.
-                            </Typography>
+                            <Typography>{RFC1918HelperText}</Typography>
                             <Typography>
                               For IPv6, the VPC is assigned an IPv6 prefix
                               length of <Code>/52</Code> by default.

packages/manager/src/features/VPCs/VPCCreate/SubnetNode.test.tsx

@@ -161,4 +161,25 @@ describe('SubnetNode', () => {
       screen.queryByText('Number of Available IP Addresses: 252')
     ).not.toBeInTheDocument();
   });
+
+  it('should display zero instead of negative numbers for linodes helper text', () => {
+    renderWithThemeAndHookFormContext({
+      component: <SubnetNode {...props} shouldDisplayIPv6={true} />,
+      useFormOptions: {
+        defaultValues: {
+          ...formOptions.defaultValues,
+          ipv6: [{ range: '/52' }],
+          subnets: [
+            {
+              ipv4: '10.0.0.0/32',
+              ipv6: [{ range: '/56' }],
+              label: 'subnet 0',
+            },
+          ],
+        },
+      },
+    });
+
+    expect(screen.getByText('Number of Linodes: 0')).toBeVisible();
+  });
 });

packages/manager/src/features/VPCs/VPCCreate/SubnetNode.tsx

@@ -38,10 +38,10 @@ export const SubnetNode = (props: Props) => {
       }`
     : undefined;
 
-  const numberOfAvailableIPv4Linodes = numberOfAvailIPs
-    ? numberOfAvailIPs - RESERVED_IP_NUMBER
-    : 0;
-
+  const numberOfAvailableIPv4Linodes =
+    numberOfAvailIPs && numberOfAvailIPs > 4
+      ? numberOfAvailIPs - RESERVED_IP_NUMBER
+      : 0;
   const showRemoveButton = !(isCreateVPCDrawer && idx === 0);
 
   return (

packages/manager/src/features/VPCs/VPCDetail/SubnetCreateDrawer.tsx

@@ -82,9 +82,11 @@ export const SubnetCreateDrawer = (props: Props) => {
 
   const ipv4 = watch('ipv4');
   const numberOfAvailableIPv4IPs = calculateAvailableIPv4sRFC1918(ipv4 ?? '');
-  const numberOfAvailableIPv4Linodes = numberOfAvailableIPv4IPs
-    ? numberOfAvailableIPv4IPs - RESERVED_IP_NUMBER
-    : 0;
+
+  const numberOfAvailableIPv4Linodes =
+    numberOfAvailableIPv4IPs && numberOfAvailableIPv4IPs > 4
+      ? numberOfAvailableIPv4IPs - RESERVED_IP_NUMBER
+      : 0;
 
   const onCreateSubnet = async (values: CreateSubnetPayload) => {
     try {

packages/manager/src/features/VPCs/constants.ts

@@ -72,3 +72,6 @@ export const VPC_DETAILS_ROUTE = '/vpcs/$vpcId';
 export const VPC_CREATE_ROUTE = '/vpcs/create';
 export const SUBNET_ACTION_PATH =
   '/vpcs/$vpcId/subnets/$subnetId/$subnetAction';
+
+export const RFC1918HelperText =
+  'The VPC can use the entire RFC 1918 specified range for subnetting except for 192.168.128.0/17.';