Add section headings to the DAP Impact Adoption view

What does this MR do and why?

The Adoption view of the DAP Impact dashboard mixes two changes that landed independently. One merge request filled the view with GLQL panels, sized in default-grid rows. Another switched the whole dashboard to gridHeight: compact, where a row is 10px instead of 137px. Together they left every Adoption panel collapsed to the grid's 10-row minimum.

This MR converts the Adoption panel heights to compact rows while keeping the same pixel sizes, and adds the three section headings from the design: Users, Engagement, and Adoption tiers. Adoption tiers carries a tooltip explaining the tier bands. The design copy says "this month", but the dashboard has a date range filter, so the descriptions say "in the selected date range" to match the panel tooltips.

The section header component is bottom-aligned, so the rows above its text act as spacing from the panel above. Each section is 8 rows, the smallest cell that fits the heading with its divider, so the gap to the panel above stays tight. Each sets minHeight: 8 because gitlab-ui passes the compact grid's minimum cell height (10) to gridstack as a minimum row count, which would otherwise stretch every section back to 10 rows.

The companion merge request !254441 (merged) fixes the section header's vertical alignment and adds a divider above each heading. This MR renders acceptably without it: the headings sit at the top of their rows until it merges.

There is no changelog entry because the dashboard sits behind the default-off explore_analytics_dashboards feature flag.

References

• https://gitlab.com/gitlab-org/gitlab/-/work_items/605725: section header work item
• !252246 (merged): added the SectionHeader panel type
• !253534 (merged): footer links and the switch to the compact grid
• !254195 (merged): filled the Adoption view with GLQL panels
• !254441 (merged): section header alignment and divider

Screenshots or screen recordings

How to set up and validate locally

1. Enable the feature flags in the Rails console: Feature.enable(:explore_analytics_dashboards) and Feature.enable(:dap_impact_v1). The second gates the duoWorkflows engine the Adoption panels query against.
2. Run gdk restart rails-web, since the system dashboards loader memoises the YAML.
3. Visit /explore/analytics_dashboards/dap_impact?view=1 and pick a group.
4. Confirm the Users, Engagement and Adoption tiers headings render, the panels are the same height as before the compact grid switch, and no panel collapses to a thin strip.
5. Confirm the Adoption tiers heading has an info icon with the tier bands.
6. Run the feature spec: bin/rspec ee/spec/features/explore/system_dashboards_spec.rb -e 'DAP Impact'. The GLQL example is tagged :click_house and needs ClickHouse running locally.

MR acceptance checklist

Evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.