Handle unsaved changes on visualization designer
What does this MR do and why?
Adds a confirmation when leaving the product analytics visualization designer:
- When clicking the cancel button
- When router navigates (e.g. clicking Vue breadcrumbs)
- When unloading the browser tab (refresh tab, close tab)
This will help our customers avoid losing any unsaved changes unexpectedly.
The confirm dialog only shows if changes have been made in the visualization designer (title changed, chart type selected, or metric/dimensions set). When unloading the browser tab, a native browser confirm dialog is used instead of the custom gitlab/ui one due to restrictions in what we can do in the beforeunload event.
Note that product analytics is an experimental feature, behind a default-off feature flag.
Screenshots or screen recordings
Before | After |
---|---|
(redirects when clicking cancel) | |
(clicking refresh reloads, closing tab closes) |
How to set up and validate locally
- Follow these instructions to setup Product Analytics in GDK.
- Onboard
Product Analytics
by setting up the feature at Project > Analytics > Analytics dashboards. - Follow the alert prompt on Project > Analytics > Analytics dashboards to enable customizable dashboards.
- Navigate back to Project > Analytics > Analytics dashboards and click on
Visualization designer
. - Make some changes and click on the
Analytics dashboards
breadcrumb. - Confirm that the confirmation modal is shown.
- Navigate again to the
Visualization designer
view and make some changes. - Click on the cancel button.
- Confirm that the confirmation modal is shown.
- Navigate again to the
Visualization designer
view and make some changes. - Reload the browser tab.
- Confirm that the browser confirmation modal is shown.
MR acceptance checklist
This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.
-
I have evaluated the MR acceptance checklist for this MR.
Related to #426563 (closed)
Edited by Elwyn Benson