Add resets on forms

Fix #164

Signed-off-by: Sacha Al Himdani <sacha@getprobo.com>

apps/console/src/components/organizations/InviteUserDialog.tsx

@@ -34,7 +34,10 @@ export function InviteUserDialog({ children }: PropsWithChildren) {
     successMessage: __("User invited successfully"),
     errorMessage: __("Failed to invite user"),
   });
-  const { register, handleSubmit, formState } = useFormWithSchema(schema, {});
+  const { register, handleSubmit, formState, reset } = useFormWithSchema(
+    schema,
+    {},
+  );
 
   const dialogRef = useDialogRef();
 
@@ -48,6 +51,7 @@ export function InviteUserDialog({ children }: PropsWithChildren) {
         },
       },
       onSuccess: () => {
+        reset();
         dialogRef.current?.close();
       },
     });

apps/console/src/components/tasks/TaskFormDialog.tsx

@@ -103,9 +103,8 @@ export default function TaskFormDialog(props: Props) {
         errorMessage: __("Failed to create task. Please try again."),
       });
 
-  const { control, handleSubmit, register, formState } = useFormWithSchema(
+  const { control, handleSubmit, register, formState, reset } =
-    schema,
+    useFormWithSchema(schema, {
-    {
       defaultValues: {
         name: task?.name ?? "",
         description: task?.description ?? "",
@@ -114,8 +113,7 @@ export default function TaskFormDialog(props: Props) {
         measureId: task?.measure?.id ?? props.measureId ?? "",
         deadline: task?.deadline?.split("T")[0] ?? null,
       },
-    }
+    });
-  );
 
   const onSubmit = handleSubmit(async (data) => {
     if (task) {
@@ -145,6 +143,7 @@ export default function TaskFormDialog(props: Props) {
           connections: [props.connection!],
         },
       });
+      reset();
     }
     dialogRef.current?.close();
   });

apps/console/src/pages/auth/RegisterPage.tsx

@@ -34,7 +34,7 @@ export default function RegisterPage() {
         },
         credentials: "include",
         body: JSON.stringify(data),
-      }
+      },
     );
 
     // Registration failed

apps/console/src/pages/organizations/assets/dialogs/CreateAssetDialog.tsx

@@ -32,9 +32,14 @@ type Props = {
   organizationId: string;
 };
 
-export function CreateAssetDialog({ children, connection, organizationId }: Props) {
+export function CreateAssetDialog({
+  children,
+  connection,
+  organizationId,
+}: Props) {
   const { __ } = useTranslate();
-  const { control, handleSubmit, register, formState } = useFormWithSchema(schema, {
+  const { control, handleSubmit, register, formState, reset } =
+    useFormWithSchema(schema, {
       defaultValues: {
         name: "",
         amount: 0,
@@ -54,6 +59,7 @@ export function CreateAssetDialog({ children, connection, organizationId }: Prop
         organizationId,
       });
       ref.current?.close();
+      reset();
     } catch (error) {
       console.error("Failed to create asset:", error);
     }
@@ -67,11 +73,7 @@ export function CreateAssetDialog({ children, connection, organizationId }: Prop
     >
       <form onSubmit={onSubmit} className="space-y-4">
         <DialogContent padded className="space-y-4">
-          <Field
+          <Field label={__("Name")} {...register("name")} type="text" />
-            label={__("Name")}
-            {...register("name")}
-            type="text"
-          />
           <Field
             label={__("Amount")}
             {...register("amount", { valueAsNumber: true })}

apps/console/src/pages/organizations/data/DatumDetailsPage.tsx

@@ -25,6 +25,7 @@ import { PeopleSelectField } from "/components/form/PeopleSelectField";
 import { VendorsMultiSelectField } from "/components/form/VendorsMultiSelectField";
 import { useFormWithSchema } from "/hooks/useFormWithSchema";
 import z from "zod";
+import type { DatumGraphNodeQuery } from "/hooks/graph/__generated__/DatumGraphNodeQuery.graphql.ts";
 
 const updateDatumSchema = z.object({
   name: z.string().min(1, "Name is required"),
@@ -38,19 +39,23 @@ type Props = {
 };
 
 export default function DatumDetailsPage(props: Props) {
-  const datum = usePreloadedQuery(datumNodeQuery, props.queryRef);
+  const datum = usePreloadedQuery<DatumGraphNodeQuery>(
+    datumNodeQuery,
+    props.queryRef,
+  );
   const datumEntry = datum.node;
   const { __ } = useTranslate();
   const organizationId = useOrganizationId();
   const deleteDatum = useDeleteDatum(
     datumEntry,
-    ConnectionHandler.getConnectionID(organizationId, "DataPage_data")
+    ConnectionHandler.getConnectionID(organizationId, "DataPage_data"),
   );
 
-  const vendors = datumEntry?.vendors?.edges.map((edge: any) => edge.node) ?? [];
+  const vendors = datumEntry?.vendors?.edges.map((edge) => edge.node) ?? [];
-  const vendorIds = vendors.map((vendor: any) => vendor.id);
+  const vendorIds = vendors.map((vendor) => vendor.id);
 
-  const { control, formState, handleSubmit, register, reset } = useFormWithSchema(updateDatumSchema, {
+  const { control, formState, handleSubmit, register, reset } =
+    useFormWithSchema(updateDatumSchema, {
       defaultValues: {
         name: datumEntry?.name || "",
         dataClassification: datumEntry?.dataClassification || "PUBLIC",
@@ -104,11 +109,7 @@ export default function DatumDetailsPage(props: Props) {
       </div>
 
       <form onSubmit={onSubmit} className="space-y-6 max-w-2xl">
-        <Field
+        <Field label={__("Name")} {...register("name")} type="text" />
-          label={__("Name")}
-          {...register("name")}
-          type="text"
-        />
 
         <ControlledField
           control={control}

apps/console/src/pages/organizations/data/dialogs/CreateDatumDialog.tsx

@@ -29,9 +29,14 @@ type Props = {
   organizationId: string;
 };
 
-export function CreateDatumDialog({ children, connection, organizationId }: Props) {
+export function CreateDatumDialog({
+  children,
+  connection,
+  organizationId,
+}: Props) {
   const { __ } = useTranslate();
-  const { control, handleSubmit, register, formState } = useFormWithSchema(schema, {
+  const { control, handleSubmit, register, formState, reset } =
+    useFormWithSchema(schema, {
       defaultValues: {
         name: "",
         dataClassification: "PUBLIC",
@@ -49,6 +54,7 @@ export function CreateDatumDialog({ children, connection, organizationId }: Prop
         organizationId,
       });
       ref.current?.close();
+      reset();
     } catch (error) {
       console.error("Failed to create datum:", error);
     }
@@ -62,11 +68,7 @@ export function CreateDatumDialog({ children, connection, organizationId }: Prop
     >
       <form onSubmit={onSubmit} className="space-y-4">
         <DialogContent padded className="space-y-4">
-          <Field
+          <Field label={__("Name")} {...register("name")} type="text" />
-            label={__("Name")}
-            {...register("name")}
-            type="text"
-          />
           <ControlledField
             control={control}
             name="dataClassification"

apps/console/src/pages/organizations/frameworks/dialogs/FrameworkControlDialog.tsx

@@ -77,7 +77,7 @@ export function FrameworkControlDialog(props: Props) {
         successMessage: __("Control created successfully."),
         errorMessage: __("Failed to create control. Please try again."),
       });
-  const { control, handleSubmit, register } = useFormWithSchema(schema, {
+  const { control, handleSubmit, register, reset } = useFormWithSchema(schema, {
     defaultValues: {
       name: frameworkControl?.name ?? "",
       description: frameworkControl?.description ?? "",
@@ -111,6 +111,7 @@ export function FrameworkControlDialog(props: Props) {
           connections: [props.connectionId!],
         },
       });
+      reset();
     }
     dialogRef.current?.close();
   });

apps/console/src/pages/organizations/measures/dialog/CreateEvidenceDialog.tsx

@@ -129,12 +129,15 @@ const linkSchema = z.object({
 
 function EvidenceLink({ measureId, connectionId, ref }: Props) {
   const { __ } = useTranslate();
-  const { handleSubmit, register, formState } = useFormWithSchema(linkSchema, {
+  const { handleSubmit, register, formState, reset } = useFormWithSchema(
+    linkSchema,
+    {
       defaultValues: {
         name: "",
         url: "",
       },
-  });
+    },
+  );
 
   const [mutate] = useMutationWithToasts(uploadEvidenceMutation, {
     successMessage: __("Evidence created successfully"),
@@ -158,6 +161,7 @@ function EvidenceLink({ measureId, connectionId, ref }: Props) {
       },
     });
     ref.current?.close();
+    reset();
   });
   return (
     <form onSubmit={onSubmit}>

apps/console/src/pages/organizations/measures/dialog/MeasureFormDialog.tsx

@@ -76,17 +76,15 @@ export default function MeasureFormDialog(props: Props) {
         errorMessage: __("Failed to create measure. Please try again."),
       });
 
-  const { control, handleSubmit, register, formState } = useFormWithSchema(
+  const { control, handleSubmit, register, formState, reset } =
-    measureSchema,
+    useFormWithSchema(measureSchema, {
-    {
       defaultValues: {
         name: measure?.name ?? "",
         description: measure?.description ?? "",
         category: measure?.category ?? "",
         state: "NOT_STARTED",
       },
-    }
+    });
-  );
 
   const onSubmit = handleSubmit(async (data) => {
     if (measure) {
@@ -113,6 +111,7 @@ export default function MeasureFormDialog(props: Props) {
           connections: [props.connection!],
         },
       });
+      reset();
     }
     dialogRef.current?.close();
   });