feat(viewer): add unsaved change confirm dialog (#3069) #322
Conversation
|
A more correct translation to "You have unsaved changes. Still discard?" would be "Masz niezapisane zmiany. Czy na pewno chcesz je odrzucić?" |
There was a problem hiding this comment.
Pull request overview
This PR adds an unsaved changes confirmation dialog when users attempt to close the Markdown or Code viewer with unsaved modifications. The feature prevents accidental data loss by prompting users to confirm before discarding their changes when closing via backdrop click or ESC key.
Key Changes:
- Implements
handleDialogClosehandlers in both MarkdownViewer and CodeViewer that check for unsaved changes before closing - Modifies ViewerDialog to pass a custom close reason when the X button is clicked
- Adds the
discardUnsavedConfirmi18n key across 11 language locales
Reviewed changes
Copilot reviewed 14 out of 14 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
src/component/Viewers/ViewerDialog.tsx |
Modified close button handler to pass custom "closeButtonClick" reason instead of standard "backdropClick" |
src/component/Viewers/MarkdownEditor/MarkdownViewer.tsx |
Added handleDialogClose that shows confirmation dialog when closing with unsaved changes via backdrop/ESC |
src/component/Viewers/CodeViewer/CodeViewer.tsx |
Added handleDialogClose that shows confirmation dialog when closing with unsaved changes via backdrop/ESC |
public/locales/zh-TW/application.json |
Added Traditional Chinese translation for unsaved changes confirmation |
public/locales/zh-CN/application.json |
Added Simplified Chinese translation for unsaved changes confirmation |
public/locales/ru-RU/application.json |
Added Russian translation for unsaved changes confirmation |
public/locales/pt-BR/application.json |
Added Brazilian Portuguese translation for unsaved changes confirmation |
public/locales/ko-KR/application.json |
Added Korean translation for unsaved changes confirmation |
public/locales/ja-JP/application.json |
Added Japanese translation for unsaved changes confirmation |
public/locales/it-IT/application.json |
Added Italian translation for unsaved changes confirmation |
public/locales/fr-FR/application.json |
Added French translation for unsaved changes confirmation |
public/locales/es-ES/application.json |
Added Spanish translation for unsaved changes confirmation |
public/locales/en-US/application.json |
Added English translation for unsaved changes confirmation |
public/locales/de-DE/application.json |
Added German translation for unsaved changes confirmation |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| const [fullScreen, setFullScreen] = useState(props.fullScreen || isMobile); | ||
| const onClose = useCallback(() => { | ||
| props.dialogProps.onClose && props.dialogProps.onClose({}, "backdropClick"); | ||
| props.dialogProps.onClose && props.dialogProps.onClose({}, "closeButtonClick" as any); |
There was a problem hiding this comment.
The custom "closeButtonClick" reason bypasses the unsaved changes confirmation dialog. This means users clicking the X button will lose unsaved changes without warning, while clicking the backdrop or pressing ESC shows the confirmation. For better UX and data protection, the X button should also trigger the confirmation when there are unsaved changes. Consider removing this custom reason and letting the X button trigger the standard confirmation flow.
| props.dialogProps.onClose && props.dialogProps.onClose({}, "closeButtonClick" as any); | |
| if (props.dialogProps.onClose) { | |
| props.dialogProps.onClose({}, "backdropClick"); | |
| } |
Great, i will update the translate later. |
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Fixed to cloudreve/cloudreve#3069.
& i18n item for Polish given by AI:
You have unsaved changes. Still discard?→Niezapisane zmiany. Czy na pewno zamknąć?, would this be ok? @LukaszOn.Close cloudreve/cloudreve#3069.