Enable Vue 3 migration rollout for project contributor analytics

What does this MR do and why?

Enables the Vue 3 migration rollout for the project contributor analytics page (app/assets/javascripts/pages/projects/graphs/show).

This uses the vue3_migration.yml mechanism to opt the page into Vue 3 behind a feature flag. When vue3_migrate_contributor_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_contributor_analytics.yml
  • Added app/assets/javascripts/pages/projects/graphs/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_contributor_analytics)
  2. Navigate to any project's contributor analytics page (Analyze > Contributor analytics, /-/graphs/master)
  3. Open the browser console and confirm the message: [gitlab] [V] Using Vue.js 3
  4. Verify the main commits graph and per-contributor graphs render, date range selection filters the individual graphs, and switching the ref reloads the data

Existing test coverage for the contributor 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), spec/frontend/contributors/

  • component/contributors_spec.js covers the main app: fetching chart data on mount, the loading spinner, rendering the RefSelector and the history button href, navigating to the selected branch/tag, rendering the master chart and the individual per-contributor charts, and propagating master-chart zoom to the individual charts.
  • component/individual_chart_spec.js covers the per-contributor chart: contributor name as the header, total commit count, area chart options, and zoom behaviour (filtering commits to the zoomed period, updating the dataZoom option).
  • component/contributor_area_chart_spec.js covers the shared area chart: rendering, the created event, and tooltip formatting (including the fallback label when the Y axis has no name).
  • store/actions_spec.js covers fetchChartData: committing the API response and showing an alert on API error.
  • store/mutations_spec.js covers SET_LOADING_STATE, SET_CHART_DATA, and SET_ACTIVE_BRANCH.
  • store/getters_spec.js covers showChart and parsedData (grouping contributions by date, and by email using the most recent author name).
  • utils_spec.js covers xAxisLabelFormatter (year label in January, month name otherwise).

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

  • spec/controllers/projects/graphs_controller_spec.rb (#show) covers ref_type assignment and the JSON commit log payload the charts are built from (author_name, author_email, date keys, MAX_COMMITS limit).

Not covered

  • No feature/system spec visits this page. spec/features/projects/graph_spec.rb only exercises the charts action (repository analytics); #commits and #languages redirect there, so #show is never rendered in a browser-level spec.
  • No QA/E2E spec covers this page.

References

Edited by Brandon Labuschagne

Merge request reports

Loading