Enable Vue 3 migration rollout for group contribution analytics

Brandon Labuschagnerequested to merge
607822-vue3-migrate-contribution-analytics into master

What does this MR do and why?

Enables the Vue 3 migration rollout for the group contribution analytics page (ee/app/assets/javascripts/pages/groups/contribution_analytics/show).

This uses the vue3_migration.yml mechanism to opt the page into Vue 3 behind a feature flag. When vue3_migrate_contribution_analytics is enabled, Rails serves the Vue 3 (@vue/compat) chunk; otherwise the page continues to run on Vue 2.

What changed

  • Added config/feature_flags/beta/vue3_migrate_contribution_analytics.yml
  • Added ee/app/assets/javascripts/pages/groups/contribution_analytics/show/vue3_migration.yml with status: rollout

No JavaScript or controller changes are needed.

How to verify

  1. Enable the feature flag: Feature.enable(:vue3_migrate_contribution_analytics)
  2. Navigate to any group's contribution analytics page (Analyze > Contribution analytics, /groups/<group>/-/contribution_analytics)
  3. Open the browser console and confirm the message: [gitlab] [V] Using Vue.js 3
  4. Verify the push, merge request, and issue charts render, changing the date range updates the charts, and the contributions table renders and sorts per column

Existing test coverage for the contribution analytics page

For visibility while this rollout is in flight: what is and is not covered for this page today, independent of the Vue 3 mechanism.

Frontend unit tests (Jest), ee/spec/frontend/analytics/contribution_analytics/

  • components/app_spec.js covers the main app: the loading spinner while the request is pending, the error alert (and Sentry capture) when the request returns no data, and fetching contributions via the contributions GraphQL query for both data sources, ClickHouse (single date range, following pagination cursors) and PostgreSQL (split into weekly requests, following pagination cursors), then passing the merged results to the group members table.
  • components/pushes_chart_spec.js, components/merge_requests_chart_spec.js, and components/issues_chart_spec.js cover the three charts: the empty-state description when there is no data, the summary text built from the data (for example 55 pushes by 3 contributors.), and sorting the chart data in descending order.
  • components/column_chart_spec.js snapshot-tests the shared column chart wrapper the three charts render through.
  • components/group_members_table_spec.js covers the contributions table: the column headers, one row per contributor with a link to the user profile, and sorting by column.
  • utils_spec.js covers the data helpers: formatChartData, filterPushes, filterMergeRequests, filterIssues, restrictRequestEndDate (slicing the date range into weekly requests), and mergeContributions.

This suite is not in scripts/frontend/quarantined_vue3_specs.txt, so it runs and must pass in both the jest (Vue 2) and jest vue3 (@vue/compat) CI jobs.

Backend

  • ee/spec/controllers/groups/contribution_analytics_controller_spec.rb (#show) covers authorization (license and usage ping availability, auditor access, the read_group_contribution_analytics ability), the redirect to the new contributions dashboard when contributions_analytics_dashboard is enabled, the data collector instance variables and @data_source_clickhouse, the JSON member contributions payload (including subgroup projects and excluding projects outside the group, for both PostgreSQL and ClickHouse data sources), N+1 query guards, and usage/Snowplow tracking.
  • ee/spec/requests/api/graphql/analytics/contribution_analytics/contributions_spec.rb covers the Group.contributions GraphQL query the Vue app is built on: license gating, returned data, pagination (including a bogus cursor), and N+1 guards for both PostgreSQL and ClickHouse data sources.

Feature specs (Capybara)

  • ee/spec/features/groups/contribution_analytics_spec.rb visits the page in a browser and covers: navigation via the sidebar, the page header and empty-state messages, the date range tabs (links, default active tab, switching tabs), the Using ClickHouse badge, chart contents for events inside and outside the selected date range (including updating after selecting a broader range), and the redirect to the contributions dashboard when contributions_analytics_dashboard is enabled.

QA/E2E

  • qa/qa/specs/features/ee/browser_ui/14_analytics/contribution_analytics_spec.rb performs real contributions (push, issue closed, merge request merged) and asserts the push, merge request, and issue chart summaries on the page.

References

Merge request reports