Skip to content

Handle unsaved changes on visualization designer

Elwyn Benson requested to merge 426563-handle-unsaved-changes-on-visualization-designer into master

What does this MR do and why?

Adds a confirmation when leaving the product analytics visualization designer:

  1. When clicking the cancel button
  2. When router navigates (e.g. clicking Vue breadcrumbs)
  3. 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) image
(clicking refresh reloads, closing tab closes) image

How to set up and validate locally

  1. Follow these instructions to setup Product Analytics in GDK.
  2. Onboard Product Analytics by setting up the feature at Project > Analytics > Analytics dashboards.
  3. Follow the alert prompt on Project > Analytics > Analytics dashboards to enable customizable dashboards.
  4. Navigate back to Project > Analytics > Analytics dashboards and click on Visualization designer.
  5. Make some changes and click on the Analytics dashboards breadcrumb.
  6. Confirm that the confirmation modal is shown.
  7. Navigate again to the Visualization designer view and make some changes.
  8. Click on the cancel button.
  9. Confirm that the confirmation modal is shown.
  10. Navigate again to the Visualization designer view and make some changes.
  11. Reload the browser tab.
  12. 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.

Related to #426563 (closed)

Edited by Elwyn Benson

Merge request reports