fix: warn before closing Generate YAML form with unsaved changes (DE-903)#1711
fix: warn before closing Generate YAML form with unsaved changes (DE-903)#1711
Conversation
Signed-off-by: Yeganathan S <63534555+skwowet@users.noreply.github.com>
There was a problem hiding this comment.
Pull request overview
Adds unsaved-change protection to the “Generate YAML security file” modal to reduce accidental data loss during modal dismissal and page unload.
Changes:
- Adds
closeFunctionhandling to intercept Escape / click-outside closes with a confirmation prompt. - Updates the header close (X) button to use the same confirmation flow.
- Adds a
beforeunloadlistener when the form is considered “dirty” to warn on refresh/navigation.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| const hasUnsavedChanges = computed(() => !!type.value); | ||
|
|
||
| const confirmClose = (): boolean => { | ||
| if (!hasUnsavedChanges.value) return true; | ||
| return window.confirm('You have unsaved changes. Are you sure you want to close? All progress will be lost.'); | ||
| }; | ||
|
|
||
| const handleClose = () => { | ||
| if (confirmClose()) { | ||
| isModalOpen.value = false; | ||
| } | ||
| }; | ||
|
|
||
| const onBeforeUnload = (event: BeforeUnloadEvent) => { | ||
| if (hasUnsavedChanges.value) { | ||
| event.preventDefault(); | ||
| } | ||
| }; | ||
|
|
||
| watch(hasUnsavedChanges, (dirty) => { | ||
| if (dirty) { | ||
| window.addEventListener('beforeunload', onBeforeUnload); | ||
| } else { | ||
| window.removeEventListener('beforeunload', onBeforeUnload); | ||
| } | ||
| }); |
There was a problem hiding this comment.
hasUnsavedChanges only depends on type, so once a user selects a template the beforeunload listener remains active even after the modal is closed (and also after closing via overlay/Escape through closeFunction). This can cause an unload warning when the modal isn’t open. Consider tying the dirty state to isModalOpen (e.g., only warn when open), or clearing/resetting type/step/form (and thus removing the listener) whenever the modal closes.
|
|
||
| const onBeforeUnload = (event: BeforeUnloadEvent) => { | ||
| if (hasUnsavedChanges.value) { | ||
| event.preventDefault(); |
There was a problem hiding this comment.
The beforeunload handler calls event.preventDefault(), but most browsers only show the confirmation prompt if event.returnValue is also set (typically to an empty string). Update the handler to set event.returnValue when hasUnsavedChanges is true so the refresh/navigation warning reliably appears.
| event.preventDefault(); | |
| event.preventDefault(); | |
| event.returnValue = ''; |
Summary
beforeunloadlistener to prevent data loss on page refresh when the form is dirty.