From 0213e92f65e77910424981cd16cfe6d8515e0613 Mon Sep 17 00:00:00 2001 From: Satish Date: Tue, 30 Sep 2025 13:35:50 +0530 Subject: [PATCH] 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 --- .../DataProduct/DataProductListPage.tsx | 7 ++++++- .../AddDomainForm/AddDomainForm.component.tsx | 7 ++++++- .../DomainDetailsPage.component.tsx | 16 ++++++++++++++-- .../components/DomainListing/DomainListPage.tsx | 7 ++++++- .../common/atoms/drawer/useCompositeDrawer.tsx | 7 +++++++ 5 files changed, 39 insertions(+), 5 deletions(-) diff --git a/openmetadata-ui/src/main/resources/ui/src/components/DataProduct/DataProductListPage.tsx b/openmetadata-ui/src/main/resources/ui/src/components/DataProduct/DataProductListPage.tsx index 067aa7a1c88..6b76f613cb0 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/DataProduct/DataProductListPage.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/DataProduct/DataProductListPage.tsx @@ -80,6 +80,9 @@ const DataProductListPage = () => { anchor: 'right', width: 670, closeOnEscape: false, + onCancel: () => { + form.resetFields(); + }, form: ( { 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); } diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Domain/AddDomainForm/AddDomainForm.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Domain/AddDomainForm/AddDomainForm.component.tsx index 508daa1b5a4..7c461cdcaec 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/Domain/AddDomainForm/AddDomainForm.component.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/Domain/AddDomainForm/AddDomainForm.component.tsx @@ -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 ( diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Domain/DomainDetailsPage/DomainDetailsPage.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Domain/DomainDetailsPage/DomainDetailsPage.component.tsx index a6daae781af..c3e3419c39d 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/Domain/DomainDetailsPage/DomainDetailsPage.component.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/Domain/DomainDetailsPage/DomainDetailsPage.component.tsx @@ -219,6 +219,9 @@ const DomainDetailsPage = ({ anchor: 'right', width: 670, closeOnEscape: false, + onCancel: () => { + dataProductForm.resetFields(); + }, form: ( { - // 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: ( { - // 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(); } diff --git a/openmetadata-ui/src/main/resources/ui/src/components/DomainListing/DomainListPage.tsx b/openmetadata-ui/src/main/resources/ui/src/components/DomainListing/DomainListPage.tsx index 32a003606a9..a07369f6486 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/DomainListing/DomainListPage.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/DomainListing/DomainListPage.tsx @@ -80,6 +80,9 @@ const DomainListPage = () => { anchor: 'right', width: 670, closeOnEscape: false, + onCancel: () => { + form.resetFields(); + }, form: ( { 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); } diff --git a/openmetadata-ui/src/main/resources/ui/src/components/common/atoms/drawer/useCompositeDrawer.tsx b/openmetadata-ui/src/main/resources/ui/src/components/common/atoms/drawer/useCompositeDrawer.tsx index 6d335f69e76..2e8515a38e5 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/common/atoms/drawer/useCompositeDrawer.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/common/atoms/drawer/useCompositeDrawer.tsx @@ -113,8 +113,15 @@ export const useCompositeDrawer = (config: CompositeDrawerConfig = {}) => { return ; }, [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,