Add dashboard panel component

Problem to solve

Dashboards and dashboard panels are an established a Pajama's design pattern yet we don't have GitLab-UI components for either.

Why? Customizable dashboards is a new core feature that's used to power and build other key features from product analytics, observability, optimize and with the vision that this powers almost all GitLab dashboards in the future. To do this it would be helpful to have the components in GitLab-UI. Currently all the building blocks for this are in the main GitLab code repository as shared components. It makes sense to start with a panel because it's the smallest reusable building block for dashboards. It also provides a way for existing GitLab dashboards to use this component as they transition to being fully customizable. Having a GitLab-UI component will help standerdize our dashboards looks and feel across GitLab.

Suggested solution

Add a new GlDashboardPanel component which:

• Adheres to the Pajamas description of a panel and gitlab-org/gitlab-services/design.gitlab.com#1643 (closed).
• Supports the following:
  • Title (required)
  • Disclosure dropdown with customizable actions
  • Slot for the visualization to render
  • Resize icon at the bottom right (hidden by default)
  • Loading state
• Additionally it should enable the consumer to add alert state via props and/or slots. This is an interim solution while we work on the next panel design iteration that will have panel alerts baked in. This is needed to support the current GitLab Analytics dashboards' panel alerts.

Supporting resources

We should be able to reuse much of the shared PanelsBase (storybook) component from the main GitLab repository.

Design

Design issue Add dashboard panel component (gitlab-org/gitlab-services/design.gitlab.com#1643 - closed)

Design for the first GlDashboardPanel gitlab-org/gitlab-services/design.gitlab.com#1643[Panel_specs_-_Iteration_1.png]

Figma file

View design specs in Figma →

Checklist

Make sure the following are completed before closing the issue:

1. Assign the correct component label to this issue.
2. Create an MR with the additions or updates needed.
3. Be sure to get your MR reviewed by a FE/UX Foundations designer.
4. When applicable, create an MR in Pajamas to update the demos. If you do not have capacity to complete the demos, create an issue in Pajamas and bring the issue to your team planning session for prioritization and scheduling. Mark the issue as related to this one.
5. When applicable, create an MR in Pajamas to update the component status.
6. When applicable, create an issue in Pajamas using the "Component Documentation" issue template to update guidelines. Ping a designer on your team for awareness and bring the issue to your team planning meeting for prioritization and scheduling.
7. When applicable, create an issue in Pajamas using the "Figma update" issue template to update the Figma UI Kit. Ping a designer on your team for awareness and bring the issue to your team planning meeting for prioritization and scheduling.
8. When introducing a major or breaking change, communicate the changes within the Engineering Week in Review.
9. 🎉 Congrats, you made it! You can now close this issue.