mirror of
https://github.com/supabase/supabase.git
synced 2026-10-10 20:05:06 +03:00
Gildas Garcia
d571c7404a
## Problem We want `ui-patterns` to contain only visual components but https://github.com/supabase/supabase/pull/43577 introduced a component with logic about navigation ## Solution Extract the logic part into a hook and use it in the component. Next step will be to remove this component and use `<DiscardChangesConfirmationDialog>` directly along the hook where needed ## How to test Check that the fixes from #43577 still work: On staging, for each case: - Authentication email templates - Observability reports - Edge functions creation - Edge functions edition Test: - Modify the template/report/function - Navigate away using either the sidebar link, the browser back button or closing the tab - Cancel navigation in the confirmation dialog - Navigation should be prevented and you should not loose your changes Test: - Modify the template/report/function - Navigate away using either the sidebar link, the browser back button or closing the tab - Confirm navigation in the confirmation dialog - Navigation should not be prevented and you should have lost your changes
27 lines
724 B
TypeScript
27 lines
724 B
TypeScript
import {
|
|
DiscardChangesConfirmationDialog,
|
|
type DiscardChangesConfirmationDialogProps,
|
|
} from './DiscardChangesConfirmationDialog'
|
|
import { usePreventNavigationOnUnsavedChanges } from '@/hooks/ui/usePreventNavigationOnUnsavedChanges'
|
|
|
|
export const PreventNavigationOnUnsavedChanges = ({
|
|
hasChanges,
|
|
...props
|
|
}: { hasChanges: boolean } & Omit<
|
|
DiscardChangesConfirmationDialogProps,
|
|
'visible' | 'onClose' | 'onCancel'
|
|
>) => {
|
|
const { handleCancel, handleConfirm, shouldConfirm } = usePreventNavigationOnUnsavedChanges({
|
|
hasChanges,
|
|
})
|
|
|
|
return (
|
|
<DiscardChangesConfirmationDialog
|
|
visible={shouldConfirm}
|
|
onCancel={handleCancel}
|
|
onClose={handleConfirm}
|
|
{...props}
|
|
/>
|
|
)
|
|
}
|