Handle unsaved changes on visualization designer
Problem to solve
In Small improvements to UI layout of visualizatio... (#426194 - closed) we added a Cancel
button. Users can accidentally click this or accidentally navigate away from the page leading to a loss of their draft visualization.
Suggested solution
Similar to [Bug] Handle unsaved changes in analytics dashb... (#410349 - closed) we should add a confirmation modal when exiting a draft state.
Design
See the dashboard designer's issue for designs.
Implementation plan
frontend
Update analytics_visualization_designer.vue
as follows:
- Add a method that uses
confirmAction
which is called when a user clicksCancel
or navigates away using the Vue router.- If no changes have been made, don't call
confirmAction
. - Wait for confirmation, if confirmed continue to route away, if not confirm don't route away.
- If no changes have been made, don't call
- Add a
beforeunload
event listener- If no changes have been made don't do anything.
- Else display a browser confirmation dialog. See !132640 (diffs).
- Update specs
Use the [Bug] Handle unsaved changes in analytics dashb... (#410349 - closed) merge requests as examples.