fix: ensure form resets on cancel and preserves data on error

- Fix form not resetting when drawer is cancelled/closed
- Override closeDrawer in useCompositeDrawer to call onBeforeClose
- Add onCancel callbacks to reset form in all domain/data product drawers
- Prevent form reset on submission errors by rejecting promises
- Ensure form data is preserved when errors occur (e.g., duplicate names)

This ensures proper form state management:
- Forms reset when drawer is closed via X button or Cancel button
- Forms preserve user input when validation or server errors occur
- Users can fix errors and retry without re-entering all data
This commit is contained in:
Satish 2025-09-30 13:35:50 +05:30
parent 32145ab9df
commit 0213e92f65
5 changed files with 39 additions and 5 deletions

View File

@ -80,6 +80,9 @@ const DataProductListPage = () => {
anchor: 'right',
width: 670,
closeOnEscape: false,
onCancel: () => {
form.resetFields();
},
form: (
<AddDomainForm
isFormInDialog
@ -87,7 +90,7 @@ const DataProductListPage = () => {
loading={isLoading}
type={DomainFormType.DATA_PRODUCT}
onCancel={() => {
// No-op: Drawer close is handled by useFormDrawerWithRef
// No-op: Drawer close and form reset handled by useFormDrawerWithRef
}}
onSubmit={async (formData: CreateDomain | CreateDataProduct) => {
setIsLoading(true);
@ -126,7 +129,9 @@ const DataProductListPage = () => {
}),
{ vertical: 'top', horizontal: 'center' }
);
// Keep drawer open on error so user can fix and retry
throw error; // Re-throw to reject the promise
} finally {
setIsLoading(false);
}

View File

@ -321,7 +321,12 @@ const AddDomainForm = ({
delete (data as CreateDomain & { domains?: unknown }).domains;
}
onSubmit(data).then(() => form.resetFields());
onSubmit(data)
.then(() => form.resetFields())
.catch(() => {
// Form will not be reset on error
// Error is already handled by parent component
});
};
return (

View File

@ -219,6 +219,9 @@ const DomainDetailsPage = ({
anchor: 'right',
width: 670,
closeOnEscape: false,
onCancel: () => {
dataProductForm.resetFields();
},
form: (
<AddDomainForm
isFormInDialog
@ -227,7 +230,7 @@ const DomainDetailsPage = ({
parentDomain={domain}
type={DomainFormType.DATA_PRODUCT}
onCancel={() => {
// No-op: Drawer close is handled by useFormDrawerWithRef
// No-op: Drawer close and form reset handled by useFormDrawerWithRef
}}
onSubmit={async (formData: CreateDomain | CreateDataProduct) => {
setIsDataProductLoading(true);
@ -271,6 +274,8 @@ const DomainDetailsPage = ({
}),
{ vertical: 'top', horizontal: 'center' }
);
throw error; // Re-throw to reject the promise
} finally {
setIsDataProductLoading(false);
}
@ -339,6 +344,9 @@ const DomainDetailsPage = ({
anchor: 'right',
width: 670,
closeOnEscape: false,
onCancel: () => {
subDomainForm.resetFields();
},
form: (
<AddDomainForm
isFormInDialog
@ -346,7 +354,7 @@ const DomainDetailsPage = ({
loading={isSubDomainLoading}
type={DomainFormType.SUBDOMAIN}
onCancel={() => {
// No-op: Drawer close is handled by useFormDrawerWithRef
// No-op: Drawer close and form reset handled by useFormDrawerWithRef
}}
onSubmit={async (formData: CreateDomain | CreateDataProduct) => {
setIsSubDomainLoading(true);
@ -387,6 +395,8 @@ const DomainDetailsPage = ({
}),
{ vertical: 'top', horizontal: 'center' }
);
throw error; // Re-throw to reject the promise
} finally {
setIsSubDomainLoading(false);
}
@ -494,6 +504,8 @@ const DomainDetailsPage = ({
}),
{ vertical: 'top', horizontal: 'center' }
);
throw error; // Re-throw to reject the promise
} finally {
closeSubDomainDrawer();
}

View File

@ -80,6 +80,9 @@ const DomainListPage = () => {
anchor: 'right',
width: 670,
closeOnEscape: false,
onCancel: () => {
form.resetFields();
},
form: (
<AddDomainForm
isFormInDialog
@ -87,7 +90,7 @@ const DomainListPage = () => {
loading={isLoading}
type={DomainFormType.DOMAIN}
onCancel={() => {
// No-op: Drawer close is handled by useFormDrawerWithRef
// No-op: Drawer close and form reset handled by useFormDrawerWithRef
}}
onSubmit={async (formData: CreateDomain | CreateDataProduct) => {
setIsLoading(true);
@ -126,6 +129,8 @@ const DomainListPage = () => {
}),
{ vertical: 'top', horizontal: 'center' }
);
throw error; // Re-throw to reject the promise
} finally {
setIsLoading(false);
}

View File

@ -113,8 +113,15 @@ export const useCompositeDrawer = (config: CompositeDrawerConfig = {}) => {
return <Component {...DrawerComponent.props} children={drawerContent} />;
}, [baseDrawer.drawer, drawerContent]);
// Override closeDrawer to call onBeforeClose
const closeDrawer = useCallback(() => {
onBeforeClose?.();
baseDrawer.closeDrawer();
}, [onBeforeClose, baseDrawer.closeDrawer]);
return {
...baseDrawer,
closeDrawer, // Override with our version that calls onBeforeClose
compositeDrawer,
drawerHeader,
drawerBody,