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

View File

@ -321,7 +321,12 @@ const AddDomainForm = ({
delete (data as CreateDomain & { domains?: unknown }).domains; 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 ( return (

View File

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

View File

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

View File

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