New Custom Dashboard Flow - Dashboard designer MVC

Problem to solve

As part of the Create a new Custom DashboardFlow (#416673 - closed) we need to update the current proof of concept dashboard editor to match the MVC designs.

Related non-blocking issue to update the available visualizations list component New Custom Dashboard Flow - Available visualiza... (#422025 - closed).

Proposed solution

Update the proof of concept dashboard editor to match the MVC designs.

Other considerations

The visualization designer call to action is not part of the design. The button should remain behind a dedicated feature flag and can be tact on the top of the new design layout.

Designs

See the designs in this thread #422024 (comment 1522613080).

Deprecated designs below.

Figma file

Note: For the MVC we can keep the move and resize actions using the current drag and drop functionality.

Intended users

• Parker (Product Manager)
• Delaney (Development Team Lead)

Use Cases to support

• Create a dashboard for the current project
• Add existing saved visualizations
• Name & Save the dashboard

Feature Usage Metrics

• Creation of dashboards should be already tracked by the following metrics
  • counts.projects_with_analytics_dashboard_weekly
  • counts.projects_with_analytics_dashboard_monthly

Implementation plan

frontend 3️⃣

• Add a page title Create a dashboard / Edit dashboard.
• Add an input group for the dashboard title and make the field required.
  • Show an inline error if the user attempts to save with an empty title.
• Hide the dashboard filter when in the edit experience as uses might confuse this for a static filter.
• Remove the code button.
• Move the save and cancel buttons to the bottom
• Move the Visualization designer button to the top of design somewhere and add it behind a feature flag.
• Verify and add if required the usage metrics pings.
• Update applicable specs.