[Bug] Handle unsaved changes in analytics dashboard
Problem to solve
There are two problems with unsaved changes when users edit and then cancel editing:
- The changes remain on the primary dashboard view - so it appears like the changes were saved when in reality only the local state was updated.
- Users have no indication or warning that unsaved changes will be lost.
Steps to reproduce
- Open a custom analytics dashboard.
- Click on the
Edit
button. - Update the dashboard title.
- Click on the
Cancel Edit
button.
Observe that the title appears to have been updated even though it has not been saved.
- Now go back to the listing and open the same dashboard again.
This also happens with panels added, resized or moved, not just title.
Observe that the title reverted to the original unsaved one.
Proposal
When a user has made changes in the edit mode and they click Cancel Edit
:
- Show a modal (confirm, cancel) to warn the user that unsaved changes will be lost.
- Revert to the local dashboard state to the original (remote) state if the modal is confirmed.
Design
Show a modal similar to the comment discard confirmation model.
Implementation plan
frontend
- Add a shared
GlModal
to the customizable dashboards component.- New dashboard text:
Are you sure you want to cancel creating this dashboard?
+Continue creating
- Edit dashboard text:
Are you sure you want to cancel editing this dashboard?
+Continue editing
- New dashboard text:
- Compare the initial
dashboard
with the one being edited and see if any changes were made. If none, don't display the modal. - When there are changes and a user clicks on
cancel
orgo back
and they have made changes, show the confirmation modal.- If a user clicks on
Continue editing
, close the model and prevent any action they were trying to do. - If a user clicks on
Discard changes
, close the modal and continue with the action they were trying to do.-
NB: Revert the mutable
dashboard
object to it's original / initial state on discard.
-
NB: Revert the mutable
- If a user clicks on
- Update specs to cover this new feature.
Edited by Jiaan Louw