Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

refactor: [M3-8877] - Refactor VPC Create to use react-hook-form #11357

Merged
merged 17 commits into from
Dec 11, 2024
Merged

refactor: [M3-8877] - Refactor VPC Create to use react-hook-form #11357

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
b5be294
begin refactoring VPC create hook
coliu-akamai Nov 5, 2024
c1c94c5
save
coliu-akamai Nov 6, 2024
a1965c2
save progress
coliu-akamai Nov 7, 2024
86d0aac
update tests for vpc components
coliu-akamai Dec 2, 2024
0ca008e
update drawer
coliu-akamai Dec 3, 2024
e06832c
remove unnecessary types
coliu-akamai Dec 3, 2024
2291f7f
fix vpc create drawer bug default values
coliu-akamai Dec 9, 2024
bc20b43
general subnet errors?
coliu-akamai Dec 9, 2024
90aeb37
remove unnecessary util
coliu-akamai Dec 9, 2024
9a35ffc
switch back to scrollIntoError v1 :/
coliu-akamai Dec 9, 2024
b96c7ab
general subnet errors i think this works for real
coliu-akamai Dec 9, 2024
b769420
Added changeset: Refactor VPC Create to use `react-hook-form` instead…
coliu-akamai Dec 9, 2024
f1fb905
feedback @bnussman-akamai, fix reset when using cancel button for VPC…
coliu-akamai Dec 10, 2024
85ce27b
cleanup use of useWatch and add some accessibility help to remove bu…
coliu-akamai Dec 10, 2024
af5dddd
update cypress test due to updated accessibility labels for subnet re…
coliu-akamai Dec 10, 2024
3f200ef
hiding mention of IPv6 in validation for now since we don't support it
coliu-akamai Dec 11, 2024
988d548
validation changeset
coliu-akamai Dec 11, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
96 changes: 48 additions & 48 deletions packages/manager/src/features/VPCs/VPCCreate/SubnetNode.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,9 @@
import { Button, FormHelperText, TextField } from '@linode/ui';
import { Button, TextField } from '@linode/ui';
import Close from '@mui/icons-material/Close';
import Stack from '@mui/material/Stack';
import { styled } from '@mui/material/styles';
import Grid from '@mui/material/Unstable_Grid2';
import * as React from 'react';
import { Controller, useFormContext } from 'react-hook-form';
import { Controller, useFormContext, useWatch } from 'react-hook-form';

import {
RESERVED_IP_NUMBER,
Expand All @@ -24,11 +23,21 @@ interface Props {
export const SubnetNode = (props: Props) => {
const { disabled, idx, isCreateVPCDrawer, remove } = props;

const { control, watch } = useFormContext<CreateVPCPayload>();
const { control } = useFormContext<CreateVPCPayload>();

const subnet = watch(`subnets.${idx}`);
const subnets = useWatch({ control, name: 'subnets' });

coliu-akamai marked this conversation as resolved.
Show resolved Hide resolved
const numberOfAvailIPs = calculateAvailableIPv4sRFC1918(subnet.ipv4 ?? '');
const numberOfAvailIPs = calculateAvailableIPv4sRFC1918(
(subnets && subnets[idx].ipv4) ?? ''
);

const availableIPHelperText = numberOfAvailIPs
? `Number of Available IP Addresses: ${
numberOfAvailIPs > 4
? (numberOfAvailIPs - RESERVED_IP_NUMBER).toLocaleString()
: 0
}`
: undefined;

const showRemoveButton = !(isCreateVPCDrawer && idx === 0);

Expand All @@ -39,49 +48,40 @@ export const SubnetNode = (props: Props) => {
sx={{ ...(!showRemoveButton && { width: '100%' }), flexGrow: 1 }}
xs={showRemoveButton ? 11 : 12}
>
<Stack>
<Controller
render={({ field, fieldState }) => (
<TextField
aria-label="Enter a subnet label"
disabled={disabled}
errorText={fieldState.error?.message}
inputId={`subnet-label-${idx}`}
label="Subnet Label"
onBlur={field.onBlur}
onChange={field.onChange}
placeholder="Enter a subnet label"
value={field.value}
/>
)}
control={control}
name={`subnets.${idx}.label`}
/>
<Controller
render={({ field, fieldState }) => (
<TextField
aria-label="Enter an IPv4"
disabled={disabled}
errorText={fieldState.error?.message}
inputId={`subnet-ipv4-${idx}`}
label="Subnet IP Address Range"
onBlur={field.onBlur}
onChange={field.onChange}
value={field.value}
/>
)}
control={control}
name={`subnets.${idx}.ipv4`}
/>
{numberOfAvailIPs && (
<FormHelperText>
Number of Available IP Addresses:{' '}
{numberOfAvailIPs > 4
? (numberOfAvailIPs - RESERVED_IP_NUMBER).toLocaleString()
: 0}
</FormHelperText>
<Controller
render={({ field, fieldState }) => (
<TextField
aria-label="Enter a subnet label"
disabled={disabled}
errorText={fieldState.error?.message}
inputId={`subnet-label-${idx}`}
label="Subnet Label"
onBlur={field.onBlur}
onChange={field.onChange}
placeholder="Enter a subnet label"
value={field.value}
/>
)}
control={control}
name={`subnets.${idx}.label`}
/>
<Controller
render={({ field, fieldState }) => (
<TextField
aria-label="Enter an IPv4"
disabled={disabled}
errorText={fieldState.error?.message}
helperText={availableIPHelperText}
inputId={`subnet-ipv4-${idx}`}
label="Subnet IP Address Range"
onBlur={field.onBlur}
onChange={field.onChange}
value={field.value}
/>
)}
</Stack>
control={control}
name={`subnets.${idx}.ipv4`}
/>
</Grid>
{showRemoveButton && (
<Grid xs={1}>
Expand Down
16 changes: 7 additions & 9 deletions packages/manager/src/features/VPCs/VPCCreateDrawer/VPCCreateDrawer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,15 +45,13 @@ export const VPCCreateDrawer = (props: Props) => {
reset,
} = form;

const handleDrawerClose = () => {
onClose();
reset();
};

return (
<Drawer
onClose={() => {
onClose();
reset();
}}
open={open}
title={'Create VPC'}
>
<Drawer onClose={handleDrawerClose} open={open} title={'Create VPC'}>
{userCannotAddVPC && CannotCreateVPCNotice}
<FormProvider {...form}>
<Grid>
Expand All @@ -80,7 +78,7 @@ export const VPCCreateDrawer = (props: Props) => {
secondaryButtonProps={{
'data-testid': 'cancel',
label: 'Cancel',
onClick: onClose,
onClick: handleDrawerClose,
}}
style={{ marginTop: theme.spacing(3) }}
/>
Expand Down
Loading