Skip to content

Improve visualization designer UI layout

What does this MR do and why?

Improve the visualization designer UI layout as described in Small improvements to UI layout of visualizatio... (#426194 - closed) with the following changes:

  • Update the designer by replacing div with semantic elements.
  • Add a page title & description with a link to user docs.
  • Move the Save button to the bottom of the page.
  • Add a Cancel button at the bottom of the page.
  • Update the copy to match the designs.
  • Fix long preview table height by limiting it to 600px.
  • Update applicable spec files.

Note: There is a separate issue to add new docs for the designer Add documentation for the visualization designer (#427709 - closed).

Note: This feature is experimental and hidden behind a default off feature flag.

Screenshots or screen recordings

Main view

Before After
image image

Data table

Before After
image image

How to set up and validate locally

  1. Follow these instructions to setup Product Analytics in GDK.
    • Be sure to also enable the designer's feature flag combined_analytics_visualization_editor.
  2. Onboard Product Analytics by setting up the feature at Project > Analytics > Analytics dashboards.
  3. Navigate back to Project > Analytics > Analytics dashboards and click on Visualizaiton Designer at the top right.
  4. Validate that the designer UI matches that of the design in the related issue.

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 #426194 (closed)

Edited by Jiaan Louw

Merge request reports