diff --git a/packages/manager/src/features/VPCs/VPCDetail/SubnetEditDrawer.tsx b/packages/manager/src/features/VPCs/VPCDetail/SubnetEditDrawer.tsx index d4a58da251d..f07b04602b7 100644 --- a/packages/manager/src/features/VPCs/VPCDetail/SubnetEditDrawer.tsx +++ b/packages/manager/src/features/VPCs/VPCDetail/SubnetEditDrawer.tsx @@ -1,12 +1,13 @@ +import { yupResolver } from '@hookform/resolvers/yup'; import { Notice, TextField } from '@linode/ui'; -import { useFormik } from 'formik'; +import { modifySubnetSchema } from '@linode/validation'; import * as React from 'react'; +import { Controller, useForm } from 'react-hook-form'; import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel'; import { Drawer } from 'src/components/Drawer'; import { useGrants, useProfile } from 'src/queries/profile/profile'; import { useUpdateSubnetMutation } from 'src/queries/vpcs/vpcs'; -import { getErrorMap } from 'src/utilities/errorUtils'; import type { ModifySubnetPayload, Subnet } from '@linode/api-v4'; @@ -24,29 +25,41 @@ export const SubnetEditDrawer = (props: Props) => { const { onClose, open, subnet, vpcId } = props; const { - error, isPending, mutateAsync: updateSubnet, - reset, + reset: resetMutation, } = useUpdateSubnetMutation(vpcId, subnet?.id ?? -1); - const form = useFormik({ - enableReinitialize: true, - initialValues: { + const { + control, + formState: { errors, isDirty, isSubmitting }, + handleSubmit, + reset: resetForm, + setError, + } = useForm({ + mode: 'onBlur', + resolver: yupResolver(modifySubnetSchema), + values: { label: subnet?.label ?? '', }, - async onSubmit(values) { - await updateSubnet(values); - onClose(); - }, }); - React.useEffect(() => { - if (open) { - form.resetForm(); - reset(); + const handleDrawerClose = () => { + onClose(); + resetForm(); + resetMutation(); + }; + + const onSubmit = async (values: ModifySubnetPayload) => { + try { + await updateSubnet(values); + handleDrawerClose(); + } catch (errors) { + for (const error of errors) { + setError(error?.field ?? 'root', { message: error.reason }); + } } - }, [open]); + }; const { data: profile } = useProfile(); const { data: grants } = useGrants(); @@ -59,11 +72,11 @@ export const SubnetEditDrawer = (props: Props) => { Boolean(profile?.restricted) && (vpcPermissions?.permissions === 'read_only' || grants?.vpc.length === 0); - const errorMap = getErrorMap(['label'], error); - return ( - - {errorMap.none && } + + {errors.root?.message && ( + + )} {readOnly && ( { variant="error" /> )} -
- + ( + + )} + control={control} name="label" - onChange={form.handleChange} - value={form.values.label} /> {
diff --git a/packages/manager/src/features/VPCs/VPCLanding/VPCEditDrawer.tsx b/packages/manager/src/features/VPCs/VPCLanding/VPCEditDrawer.tsx index 1e2a61d6149..9a2744b44ba 100644 --- a/packages/manager/src/features/VPCs/VPCLanding/VPCEditDrawer.tsx +++ b/packages/manager/src/features/VPCs/VPCLanding/VPCEditDrawer.tsx @@ -1,6 +1,6 @@ import { yupResolver } from '@hookform/resolvers/yup'; import { Notice, TextField } from '@linode/ui'; -import { updateVPCSchema } from '@linode/validation/lib/vpcs.schema'; +import { updateVPCSchema } from '@linode/validation'; import * as React from 'react'; import { Controller, useForm } from 'react-hook-form'; @@ -11,7 +11,7 @@ import { useGrants, useProfile } from 'src/queries/profile/profile'; import { useRegionsQuery } from 'src/queries/regions/regions'; import { useUpdateVPCMutation } from 'src/queries/vpcs/vpcs'; -import type { UpdateVPCPayload, VPC } from '@linode/api-v4/lib/vpcs/types'; +import type { UpdateVPCPayload, VPC } from '@linode/api-v4'; interface Props { onClose: () => void; @@ -47,7 +47,6 @@ export const VPCEditDrawer = (props: Props) => { handleSubmit, reset: resetForm, setError, - watch, } = useForm({ mode: 'onBlur', resolver: yupResolver(updateVPCSchema), @@ -57,15 +56,13 @@ export const VPCEditDrawer = (props: Props) => { }, }); - const values = watch(); - const handleDrawerClose = () => { onClose(); resetForm(); resetMutation(); }; - const onSubmit = async () => { + const onSubmit = async (values: UpdateVPCPayload) => { try { await updateVPC(values); handleDrawerClose();