mirror of
https://github.com/open-metadata/OpenMetadata.git
synced 2025-10-04 21:32:16 +00:00
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:
parent
32145ab9df
commit
0213e92f65
@ -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);
|
||||||
}
|
}
|
||||||
|
@ -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 (
|
||||||
|
@ -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();
|
||||||
}
|
}
|
||||||
|
@ -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);
|
||||||
}
|
}
|
||||||
|
@ -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,
|
||||||
|
Loading…
x
Reference in New Issue
Block a user