rohit/probo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add resets on forms

Browse Source 
Fix #164

Signed-off-by: Sacha Al Himdani <sacha@getprobo.com>
This commit is contained in:
Jonathan
2025-07-08 15:18:31 +02:00
committed by Sacha Al Himdani
parent f114f3bc4a
commit 1240d2bb2e
9 changed files with 77 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
apps/console/src/components/organizations/InviteUserDialog.tsx
View File

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

9
apps/console/src/components/tasks/TaskFormDialog.tsx
View File

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

2
apps/console/src/pages/auth/RegisterPage.tsx
View File

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

34
apps/console/src/pages/organizations/assets/dialogs/CreateAssetDialog.tsx
View File

@@ -32,18 +32,23 @@ type Props = {
organizationId: string; organizationId: string;
}; };
export function CreateAssetDialog({ children, connection, organizationId }: Props) { export function CreateAssetDialog({
children,
connection,
organizationId,
}: Props) {
const { __ } = useTranslate(); const { __ } = useTranslate();
const { control, handleSubmit, register, formState } = useFormWithSchema(schema, { const { control, handleSubmit, register, formState, reset } =
defaultValues: { useFormWithSchema(schema, {
name: "", defaultValues: {
amount: 0, name: "",
criticity: "LOW", amount: 0,
assetType: "VIRTUAL", criticity: "LOW",
ownerId: "", assetType: "VIRTUAL",
vendorIds: [], ownerId: "",
}, vendorIds: [],
}); },
});
const ref = useDialogRef(); const ref = useDialogRef();
const createAsset = useCreateAsset(connection); const createAsset = useCreateAsset(connection);
@@ -54,6 +59,7 @@ export function CreateAssetDialog({ children, connection, organizationId }: Prop
organizationId, organizationId,
}); });
ref.current?.close(); ref.current?.close();
reset();
} catch (error) { } catch (error) {
console.error("Failed to create asset:", 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"> <form onSubmit={onSubmit} className="space-y-4">
<DialogContent padded 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 <Field
label={__("Amount")} label={__("Amount")}
{...register("amount", { valueAsNumber: true })} {...register("amount", { valueAsNumber: true })}

35
apps/console/src/pages/organizations/data/DatumDetailsPage.tsx
View File

@@ -25,6 +25,7 @@ import { PeopleSelectField } from "/components/form/PeopleSelectField";
import { VendorsMultiSelectField } from "/components/form/VendorsMultiSelectField"; import { VendorsMultiSelectField } from "/components/form/VendorsMultiSelectField";
import { useFormWithSchema } from "/hooks/useFormWithSchema"; import { useFormWithSchema } from "/hooks/useFormWithSchema";
import z from "zod"; import z from "zod";
import type { DatumGraphNodeQuery } from "/hooks/graph/__generated__/DatumGraphNodeQuery.graphql.ts";
const updateDatumSchema = z.object({ const updateDatumSchema = z.object({
name: z.string().min(1, "Name is required"), name: z.string().min(1, "Name is required"),
@@ -38,26 +39,30 @@ type Props = {
}; };
export default function DatumDetailsPage(props: 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 datumEntry = datum.node;
const { __ } = useTranslate(); const { __ } = useTranslate();
const organizationId = useOrganizationId(); const organizationId = useOrganizationId();
const deleteDatum = useDeleteDatum( const deleteDatum = useDeleteDatum(
datumEntry, 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 } =
defaultValues: { useFormWithSchema(updateDatumSchema, {
name: datumEntry?.name || "", defaultValues: {
dataClassification: datumEntry?.dataClassification || "PUBLIC", name: datumEntry?.name || "",
ownerId: datumEntry?.owner?.id || "", dataClassification: datumEntry?.dataClassification || "PUBLIC",
vendorIds: vendorIds, ownerId: datumEntry?.owner?.id || "",
}, vendorIds: vendorIds,
}); },
});
const updateDatum = useUpdateDatum(); const updateDatum = useUpdateDatum();
@@ -104,11 +109,7 @@ export default function DatumDetailsPage(props: Props) {
</div> </div>
<form onSubmit={onSubmit} className="space-y-6 max-w-2xl"> <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 <ControlledField
control={control} control={control}

30
apps/console/src/pages/organizations/data/dialogs/CreateDatumDialog.tsx
View File

@@ -29,16 +29,21 @@ type Props = {
organizationId: string; organizationId: string;
}; };
export function CreateDatumDialog({ children, connection, organizationId }: Props) { export function CreateDatumDialog({
children,
connection,
organizationId,
}: Props) {
const { __ } = useTranslate(); const { __ } = useTranslate();
const { control, handleSubmit, register, formState } = useFormWithSchema(schema, { const { control, handleSubmit, register, formState, reset } =
defaultValues: { useFormWithSchema(schema, {
name: "", defaultValues: {
dataClassification: "PUBLIC", name: "",
ownerId: "", dataClassification: "PUBLIC",
vendorIds: [], ownerId: "",
}, vendorIds: [],
}); },
});
const ref = useDialogRef(); const ref = useDialogRef();
const createDatum = useCreateDatum(connection); const createDatum = useCreateDatum(connection);
@@ -49,6 +54,7 @@ export function CreateDatumDialog({ children, connection, organizationId }: Prop
organizationId, organizationId,
}); });
ref.current?.close(); ref.current?.close();
reset();
} catch (error) { } catch (error) {
console.error("Failed to create datum:", 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"> <form onSubmit={onSubmit} className="space-y-4">
<DialogContent padded 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 <ControlledField
control={control} control={control}
name="dataClassification" name="dataClassification"

3
apps/console/src/pages/organizations/frameworks/dialogs/FrameworkControlDialog.tsx
View File

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

14
apps/console/src/pages/organizations/measures/dialog/CreateEvidenceDialog.tsx
View File

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

9
apps/console/src/pages/organizations/measures/dialog/MeasureFormDialog.tsx
View File

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