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 |
---|---|
Data table
Before | After |
---|---|
How to set up and validate locally
- Follow these instructions to setup Product Analytics in GDK.
- Be sure to also enable the designer's feature flag
combined_analytics_visualization_editor
.
- Be sure to also enable the designer's feature flag
- Onboard
Product Analytics
by setting up the feature at Project > Analytics > Analytics dashboards. - Navigate back to Project > Analytics > Analytics dashboards and click on
Visualizaiton Designer
at the top right. - 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.
-
I have evaluated the MR acceptance checklist for this MR.
Related to #426194 (closed)
Edited by Jiaan Louw