Merge pull request #4616 from Infisical/pam-fix-forms

fix pam forms

frontend/src/pages/pam/PamAccountsPage/components/PamAccountForm/GenericAccountFields.tsx

@@ -10,21 +10,18 @@ export const genericAccountFieldsSchema = z.object({
 });
 
 export const GenericAccountFields = () => {
-  const {
+  const { control } = useFormContext<{ name: string; description: string }>();
-    formState: { errors },
-    control
-  } = useFormContext<{ name: string; description: string }>();
 
   return (
     <>
       <Controller
         name="name"
         control={control}
-        render={({ field }) => (
+        render={({ field, fieldState: { error } }) => (
           <FormControl
             helperText="Name must be slug-friendly"
-            errorText={errors.name?.message}
+            errorText={error?.message}
-            isError={Boolean(errors.name?.message)}
+            isError={Boolean(error?.message)}
             label="Name"
           >
             <Input autoFocus placeholder="my-account" {...field} />
@@ -34,10 +31,10 @@ export const GenericAccountFields = () => {
       <Controller
         name="description"
         control={control}
-        render={({ field }) => (
+        render={({ field, fieldState: { error } }) => (
           <FormControl
-            errorText={errors.name?.message}
+            errorText={error?.message}
-            isError={Boolean(errors.name?.message)}
+            isError={Boolean(error?.message)}
             label="Description"
           >
             <TextArea {...field} />

frontend/src/pages/pam/PamAccountsPage/components/PamFolderForm.tsx

@@ -34,7 +34,7 @@ export const PamFolderForm = ({ folder, onSubmit }: Props) => {
   const {
     control,
     handleSubmit,
-    formState: { isSubmitting, isDirty, errors }
+    formState: { isSubmitting, isDirty }
   } = form;
 
   return (
@@ -47,11 +47,11 @@ export const PamFolderForm = ({ folder, onSubmit }: Props) => {
         <Controller
           name="name"
           control={control}
-          render={({ field }) => (
+          render={({ field, fieldState: { error } }) => (
             <FormControl
               helperText="Name must be slug-friendly"
-              errorText={errors.name?.message}
+              errorText={error?.message}
-              isError={Boolean(errors.name?.message)}
+              isError={Boolean(error?.message)}
               label="Name"
             >
               <Input autoFocus placeholder="my-folder" {...field} />
@@ -61,10 +61,10 @@ export const PamFolderForm = ({ folder, onSubmit }: Props) => {
         <Controller
           name="description"
           control={control}
-          render={({ field }) => (
+          render={({ field, fieldState: { error } }) => (
             <FormControl
-              errorText={errors.name?.message}
+              errorText={error?.message}
-              isError={Boolean(errors.name?.message)}
+              isError={Boolean(error?.message)}
               label="Description"
               isOptional
             >

frontend/src/pages/pam/PamResourcesPage/components/PamResourceForm/GenericResourceFields.tsx

@@ -14,21 +14,18 @@ export const genericResourceFieldsSchema = z.object({
 export const GenericResourceFields = () => {
   const { data: gateways, isPending: isGatewaysLoading } = useQuery(gatewaysQueryKeys.list());
 
-  const {
+  const { control } = useFormContext<{ name: string; gatewayId: string }>();
-    formState: { errors },
-    control
-  } = useFormContext<{ name: string; gatewayId: string }>();
 
   return (
     <>
       <Controller
         name="name"
         control={control}
-        render={({ field }) => (
+        render={({ field, fieldState: { error } }) => (
           <FormControl
             helperText="Name must be slug-friendly"
-            errorText={errors.name?.message}
+            errorText={error?.message}
-            isError={Boolean(errors.name?.message)}
+            isError={Boolean(error?.message)}
             label="Name"
           >
             <Input autoFocus placeholder="my-resource" {...field} />