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.ymlwithstatus: rollout
No JavaScript or controller changes are needed.
How to verify
- Enable the feature flag:
Feature.enable(:vue3_migrate_contributor_analytics) - Navigate to any project's contributor analytics page (Analyze > Contributor analytics,
/-/graphs/master) - Open the browser console and confirm the message:
[gitlab] [V] Using Vue.js 3 - 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.jscovers the main app: fetching chart data on mount, the loading spinner, rendering theRefSelectorand the history buttonhref, 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.jscovers 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 thedataZoomoption).component/contributor_area_chart_spec.jscovers the shared area chart: rendering, thecreatedevent, and tooltip formatting (including the fallback label when the Y axis has no name).store/actions_spec.jscoversfetchChartData: committing the API response and showing an alert on API error.store/mutations_spec.jscoversSET_LOADING_STATE,SET_CHART_DATA, andSET_ACTIVE_BRANCH.store/getters_spec.jscoversshowChartandparsedData(grouping contributions by date, and by email using the most recent author name).utils_spec.jscoversxAxisLabelFormatter(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) coversref_typeassignment and the JSON commit log payload the charts are built from (author_name,author_email,datekeys,MAX_COMMITSlimit).
Not covered
- No feature/system spec visits this page.
spec/features/projects/graph_spec.rbonly exercises the charts action (repository analytics);#commitsand#languagesredirect there, so#showis never rendered in a browser-level spec. - No QA/E2E spec covers this page.
References
- Resolves #607823 (closed)
- Rollout issue: #608045
- Parent epic: gitlab-org#23041
Edited by Brandon Labuschagne