feat: [M3-6757] - Create VPC page

packages/api-v4/.changeset/pr-9537-upcoming-features-1692216355268.md

@@ -0,0 +1,5 @@
+---
+"@linode/api-v4": Upcoming Features
+---
+
+Add add_vpcs to GlobalGrantTypes ([#9537](https://github.com/linode/manager/pull/9537))

packages/api-v4/src/account/types.ts

@@ -45,7 +45,8 @@ export type AccountCapability =
   | 'Vlans'
   | 'Machine Images'
   | 'LKE HA Control Planes'
-  | 'Managed Databases';
+  | 'Managed Databases'
+  | 'VPCs';
 
 export interface AccountSettings {
   managed: boolean;
@@ -147,7 +148,8 @@ export type GlobalGrantTypes =
   | 'add_nodebalancers'
   | 'add_images'
   | 'add_volumes'
-  | 'add_firewalls';
+  | 'add_firewalls'
+  | 'add_vpcs';
 
 export interface GlobalGrants {
   global: Record<GlobalGrantTypes, boolean | GrantLevel>;

packages/manager/.changeset/pr-9537-upcoming-features-1692202603416.md

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

packages/manager/src/factories/grants.ts

@@ -41,6 +41,7 @@ export const grantsFactory = Factory.Sync.makeFactory<Grants>({
     add_volumes: true,
     cancel_account: false,
     longview_subscription: true,
+    add_vpcs: true,
   },
   image: [
     {

packages/manager/src/features/VPC/VPCCreate/MultipleSubnetInput.tsx

@@ -0,0 +1,68 @@
+import * as React from 'react';
+import Grid from '@mui/material/Unstable_Grid2';
+import { useTheme } from '@mui/material/styles';
+
+import { Divider } from 'src/components/Divider';
+import { Button } from 'src/components/Button/Button';
+import { SubnetFieldState } from 'src/utilities/subnets';
+import { SubnetNode } from './SubnetNode';
+
+interface Props {
+  subnets: SubnetFieldState[];
+  onChange: (subnets: SubnetFieldState[]) => void;
+  disabled?: boolean;
+}
+
+export const MultipleSubnetInput = (props: Props) => {
+  const theme = useTheme();
+  const { subnets, onChange, disabled } = props;
+
+  const addSubnet = () => {
+    onChange([
+      ...subnets,
+      { label: '', labelError: '', ip: { ipv4: '', ipv4Error: '' } },
+    ]);
+  };
+
+  const handleSubnetChange = (
+    subnet: SubnetFieldState,
+    subnetIdx: number,
+    removable: boolean
+  ) => {
+    const newSubnets = [...subnets];
+    if (removable) {
+      newSubnets.splice(subnetIdx, 1);
+    } else {
+      newSubnets[subnetIdx] = subnet;
+    }
+    onChange(newSubnets);
+  };
+
+  return (
+    <Grid>
+      {subnets.map((subnet, subnetIdx) => (
+        <Grid key={`subnet-${subnetIdx}`}>
+          {subnetIdx !== 0 && <Divider sx={{ marginTop: theme.spacing(3) }} />}
+          <SubnetNode
+            idx={subnetIdx}
+            subnet={subnet}
+            disabled={disabled}
+            // janky solution to enable SubnetNode to work on its own or be part of MultipleSubnetInput
+            onChange={(subnet, subnetIdx, removable) =>
+              handleSubnetChange(subnet, subnetIdx ?? 0, !!removable)
+            }
+            isRemovable={true}
+          />
+        </Grid>
+      ))}
+      <Button
+        buttonType="outlined"
+        disabled={disabled}
+        onClick={addSubnet}
+        sx={{ marginTop: theme.spacing(3) }}
+      >
+        Add a Subnet
+      </Button>
+    </Grid>
+  );
+};

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

@@ -0,0 +1,44 @@
+import * as React from 'react';
+import userEvent from '@testing-library/user-event';
+import { screen } from '@testing-library/react';
+
+import { SubnetNode } from './SubnetNode';
+import { renderWithTheme } from 'src/utilities/testHelpers';
+
+describe('SubnetNode', () => {
+  it('should calculate the correct subnet mask', async () => {
+    renderWithTheme(
+      <SubnetNode
+        disabled={false}
+        idx={0}
+        onChange={() => {}}
+        subnet={{ label: '', ip: { ipv4: '' } }}
+      />
+    );
+    const subnetAddress = screen.getAllByTestId('textfield-input');
+    expect(subnetAddress[1]).toBeInTheDocument();
+    await userEvent.type(subnetAddress[1], '192.0.0.0/24', { delay: 1 });
+
+    expect(subnetAddress[1]).toHaveValue('192.0.0.0/24');
+    const availIps = screen.getByText('Available IP Addresses: 252');
+    expect(availIps).toBeInTheDocument();
+  });
+
+  it('should not show a subnet mask for an ip without a mask', async () => {
+    renderWithTheme(
+      <SubnetNode
+        disabled={false}
+        idx={0}
+        onChange={() => {}}
+        subnet={{ label: '', ip: { ipv4: '' } }}
+      />
+    );
+    const subnetAddress = screen.getAllByTestId('textfield-input');
+    expect(subnetAddress[1]).toBeInTheDocument();
+    await userEvent.type(subnetAddress[1], '192.0.0.0', { delay: 1 });
+
+    expect(subnetAddress[1]).toHaveValue('192.0.0.0');
+    const availIps = screen.queryByText('Available IP Addresses:');
+    expect(availIps).not.toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,108 @@
+import * as React from 'react';
+import Grid from '@mui/material/Unstable_Grid2';
+import { styled } from '@mui/material/styles';
+
+import Close from '@mui/icons-material/Close';
+import { Button } from 'src/components/Button/Button';
+import { TextField } from 'src/components/TextField';
+import { SubnetFieldState } from 'src/utilities/subnets';
+import { FormHelperText } from 'src/components/FormHelperText';
+import { determineIPType } from '@linode/validation';
+import { calculateAvailableIPv4s } from 'src/utilities/subnets';
+
+interface Props {
+  disabled?: boolean;
+  idx?: number;
+  // janky solution to enable SubnetNode to be an independent component or be part of MultipleSubnetInput
+  // (not the biggest fan tbh)
+  onChange: (
+    subnet: SubnetFieldState,
+    subnetIdx?: number,
+    remove?: boolean
+  ) => void;
+  isRemovable?: boolean;
+  subnet: SubnetFieldState;
+}
+
+const RESERVED_IP_NUMBER = 4;
+
+// TODO: VPC - currently only supports IPv4, must update when/if IPv6 is also supported
+export const SubnetNode = (props: Props) => {
+  const { disabled, idx, onChange, subnet, isRemovable } = props;
+  const [availIPs, setAvailIPs] = React.useState<number | undefined>(undefined);
+
+  const onLabelChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const newSubnet = {
+      ...subnet,
+      label: e.target.value,
+      labelError: '',
+    };
+    onChange(newSubnet, idx);
+  };
+
+  const onIpv4Change = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const ipType = determineIPType(e.target.value);
+    const newSubnet = {
+      ...subnet,
+      ip: { ipv4: e.target.value },
+    };
+    setAvailIPs(calculateAvailableIPv4s(e.target.value, ipType));
+    onChange(newSubnet, idx);
+  };
+
+  const removeSubnet = () => {
+    onChange(subnet, idx, isRemovable);
+  };
+
+  return (
+    <Grid key={idx} sx={{ maxWidth: 460 }}>
+      <Grid direction="row" container spacing={2}>
+        <Grid xs={isRemovable ? 11 : 12}>
+          <TextField
+            disabled={disabled}
+            label="Subnet label"
+            onChange={onLabelChange}
+            value={subnet.label}
+            errorText={subnet.labelError}
+          />
+        </Grid>
+        {isRemovable && !!idx && (
+          <Grid xs={1}>
+            <StyledButton onClick={removeSubnet}>
+              <Close data-testid={`delete-subnet-${idx}`} />
+            </StyledButton>
+          </Grid>
+        )}
+      </Grid>
+      <Grid xs={isRemovable ? 11 : 12}>
+        <TextField
+          disabled={disabled}
+          label="Subnet IP Range Address"
+          onChange={onIpv4Change}
+          value={subnet.ip.ipv4}
+          errorText={subnet.ip.ipv4Error}
+        />
+        {availIPs && (
+          <FormHelperText>
+            Available IP Addresses:{' '}
+            {availIPs > 4 ? availIPs - RESERVED_IP_NUMBER : 0}
+          </FormHelperText>
+        )}
+      </Grid>
+    </Grid>
+  );
+};
+
+const StyledButton = styled(Button, { label: 'StyledButton' })(({ theme }) => ({
+  '& :hover, & :focus': {
+    backgroundColor: theme.color.grey2,
+  },
+  '& > span': {
+    padding: 2,
+  },
+  color: theme.textColors.tableHeader,
+  marginTop: theme.spacing(6),
+  minHeight: 'auto',
+  minWidth: 'auto',
+  padding: 0,
+}));

packages/manager/src/features/VPC/VPCCreate/VPCCreate.styles.ts

@@ -0,0 +1,19 @@
+import { styled } from '@mui/material/styles';
+
+import { Typography } from 'src/components/Typography';
+
+export const StyledBodyTypography = styled(Typography, {
+  label: 'StyledBodyTypography',
+})(({ theme }) => ({
+  marginTop: theme.spacing(2),
+  marginBottom: theme.spacing(1),
+  [theme.breakpoints.up('sm')]: {
+    maxWidth: '80%',
+  },
+}));
+
+export const StyledHeaderTypography = styled(Typography, {
+  label: 'StyledHeaderTypography',
+})(({ theme }) => ({
+  marginTop: theme.spacing(1),
+}));