update SubnetEditDrawer

linode · Dec 11, 2024 · 70bbe75 · 70bbe75
1 parent f96d787
commit 70bbe75
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 36 deletions.
diff --git 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<ModifySubnetPayload>({
-    enableReinitialize: true,
-    initialValues: {
+  const {
+    control,
+    formState: { errors, isDirty, isSubmitting },
+    handleSubmit,
+    reset: resetForm,
+    setError,
+  } = useForm<ModifySubnetPayload>({
+    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,26 +72,33 @@ export const SubnetEditDrawer = (props: Props) => {
     Boolean(profile?.restricted) &&
     (vpcPermissions?.permissions === 'read_only' || grants?.vpc.length === 0);
 
-  const errorMap = getErrorMap(['label'], error);
-
   return (
-    <Drawer onClose={onClose} open={open} title="Edit Subnet">
-      {errorMap.none && <Notice text={errorMap.none} variant="error" />}
+    <Drawer onClose={handleDrawerClose} open={open} title="Edit Subnet">
+      {errors.root?.message && (
+        <Notice text={errors.root.message} variant="error" />
+      )}
       {readOnly && (
         <Notice
           important
           text={`You don't have permissions to edit ${subnet?.label}. Please contact an account administrator for details.`}
           variant="error"
         />
       )}
-      <form onSubmit={form.handleSubmit}>
-        <TextField
-          disabled={readOnly}
-          errorText={errorMap.label}
-          label="Label"
+      <form onSubmit={handleSubmit(onSubmit)}>
+        <Controller
+          render={({ field, fieldState }) => (
+            <TextField
+              disabled={readOnly}
+              errorText={fieldState.error?.message}
+              label="Label"
+              name="label"
+              onBlur={field.onBlur}
+              onChange={field.onChange}
+              value={field.value}
+            />
+          )}
+          control={control}
           name="label"
-          onChange={form.handleChange}
-          value={form.values.label}
         />
         <TextField
           disabled
@@ -89,12 +109,12 @@ export const SubnetEditDrawer = (props: Props) => {
         <ActionsPanel
           primaryButtonProps={{
             'data-testid': 'save-button',
-            disabled: !form.dirty,
+            disabled: !isDirty || readOnly,
             label: 'Save',
-            loading: isPending,
+            loading: isPending || isSubmitting,
             type: 'submit',
           }}
-          secondaryButtonProps={{ label: 'Cancel', onClick: onClose }}
+          secondaryButtonProps={{ label: 'Cancel', onClick: handleDrawerClose }}
         />
       </form>
     </Drawer>

diff --git 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<UpdateVPCPayload>({
     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();