Skip to content

Update custom dashboard with MVC design

Jiaan Louw requested to merge 422024-new-custom-dashboard-flow-mvc into master

What does this MR do and why?

Update the custom dashboard component to match the designs from New Custom Dashboard Flow - Dashboard designer MVC (#422024 - closed).

Changes are largely visual in nature, but they include:

  • Add a page title to edit mode.
  • Add an empty state for new dashboards.
  • Add no visualization validation to edit mode.
  • Update the Dashboard title input to be smaller and add inline validation.
  • Update the new dashboard state to start without a title.
  • Update the Save button to exit edit mode after successfully saving to match new dashboard flow.
  • Move Save & Cancel edit buttons to bottom of view to match the designs.
  • Remove the Go back button on dashboards to match the designs.
  • Remove Code button & view from edit mode to match the designs.
  • Remove the edit mode dashboard grey background to match the designs.
  • Remove the dashboard filters from the edit mode to match the desgins.
  • Fix a bug where new dashboards saved in local cache could not be updated.

Note: Analytics dashboard is an experimental feature hidden behind a default off feature flag.

Note: There is a sepreate issue to update the visualizations sidebar New Custom Dashboard Flow - Available visualiza... (#422025 - closed).

Screenshots or screen recordings

Recording

Analytics-dashboards--Gitlab-Org-Snowplow2--GitLab

Dashboard view

Removed back button

Before After
image image

New dashboard

Before After
image image

Edit dashboard

Before After
image image

Validation

Additional validate states added

State Screenshot
No title image
No visualization 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. Enable custom dashboards by following the alert prompt on Project > Analytics > Analytics dashboards.
  4. Create a new custom dashboard by clicking on New dashboard on Project > Analytics > Analytics dashboards.
  5. Edit your newly created custom dashboard by clicking on Edit button, making some changes and clicking Save your dashboard.

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

Edited by Jiaan Louw

Merge request reports