New Custom Dashboard Flow - Available visualizations MVC

Problem to solve

As part of the Create a new Custom DashboardFlow (#416673 - closed) we need to update the current available visualizations component to match the MVC designs.

Related non-blocking issue to update the dashboard editor New Custom Dashboard Flow - Dashboard designer MVC (#422024 - closed).

Proposed solution

Update current available visualizations component to match the MVC designs.

Other considerations

The visualization designer call to action is not part of the design. However the component should continue to list custom built visualizations.

The custom visualizations can be listed under the Built-in section for the first iteration. We can follow-up with a Custom / User defined tab.

Designs

Design	Mockup

Deprecated designs below.

Figma file

Implementation plan

frontend 3️⃣

• Update available visualizations list to use a side drawer.
• Add a tabs with a Built-in + counter to the top of the list.
  • We'll follow-up with a Custom tab.
• Update available visualizations list to use multi-select checkboxes.
  • Consider automatically checking the visualizations that are already on the dashboard.
• Add a Add to dashboard button that stretches the entire width at the top of the dashboard.
  • When clicked, it should add the selected visualizations to the dashboard as panels.
  • Hide this button when not editing.
• Update available visualizations list to group items by visualization type.
  • Add user friendly strings for each visualization type. This could be accomplished using a map.
• Update the visualization list item to match the design.
  • Remove the icon.
  • Add a border around each option.
• Update specs.