Enable Vue 3 migration rollout for repository analytics

Brandon Labuschagnerequested to merge
607830-vue3-migrate-repository-analytics into master

What does this MR do and why?

Enables the Vue 3 migration rollout for the repository analytics pages: the group Repository analytics page (ee/app/assets/javascripts/pages/groups/analytics/repository_analytics) and the project Repository analytics page (app/assets/javascripts/pages/projects/graphs/charts).

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

What changed

  • Added config/feature_flags/beta/vue3_migrate_repository_analytics.yml
  • Added ee/app/assets/javascripts/pages/groups/analytics/repository_analytics/vue3_migration.yml with status: rollout
  • Added app/assets/javascripts/pages/projects/graphs/charts/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_repository_analytics)
  2. Navigate to a group's repository analytics page (Analyze > Repository analytics, /groups/<group>/-/analytics/repository_analytics) and a project's repository analytics page (Analyze > Repository analytics, /<project>/-/graphs/master/charts)
  3. Open the browser console and confirm the message on both pages: [gitlab] [V] Using Vue.js 3
  4. Verify the key workflows:
    • Group: test coverage summary, coverage table, and coverage CSV download
    • Project: programming languages chart and code coverage chart with the ref switcher
    • Project: commit statistics charts (month, weekday, hour)

Existing test coverage for the repository analytics pages

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

Group page: frontend unit tests (Jest), ee/spec/frontend/analytics/repository_analytics/

  • components/group_repository_analytics_spec.js covers the app shell: rendering the coverage summary and coverage table components, and tracking a visit event on mount.
  • components/test_coverage_summary_spec.js covers the coverage summary: the header, the last updated date, empty metrics and empty chart state, the loading state, coverage metrics when data is available, and the area chart data and label formatting.
  • components/test_coverage_table_spec.js covers the coverage table: empty state, loading state, rendering the download component and the table rows, sorting by most recently updated report, project links, the i_testing_group_code_coverage_project_click_total usage metric, and the clear-all behaviour of the project filter.
  • components/download_test_coverage_spec.js covers the CSV download modal: the trigger button, the download link's project_ids parameter for all/some/one/no selected projects, disabling the download with no selection, the select-all button, date range selection, and the alert when the projects query fails.
  • components/select_projects_dropdown_spec.js covers the project selector: select-all behaviour and events, selecting individual projects, and pagination via the intersection observer (including fetch-more errors and the loading spinner).

Project page: frontend unit tests (Jest), spec/frontend/pages/projects/graphs/

  • code_coverage_spec.js covers the code coverage chart component: rendering the area chart with sorted dates on successful fetch, error and empty-state messages, hiding the download button when there is no data, and the coverage series dropdown (options, selected icon, switching the graph data).
  • The other charts on the page (programming languages, commit statistics per month/weekday/hour, and the ref switcher) are wired up in app/assets/javascripts/pages/projects/graphs/charts/init_graphs_charts.js and have no dedicated unit specs; they are thin wrappers around GlColumnChart and RefSelector.

Neither suite is in scripts/frontend/quarantined_vue3_specs.txt, so they run and must pass in both the jest (Vue 2) and jest vue3 (@vue/compat) CI jobs.

Backend

  • spec/controllers/projects/graphs_controller_spec.rb (#charts) covers rendering for anonymous users, the daily coverage options assignment (and hiding it when build report results are not readable), the languages assignment, visit/Snowplow tracking, and 503 handling when Gitaly is unavailable.
  • ee/spec/controllers/groups/analytics/repository_analytics_controller_spec.rb covers the group page: success for reporters, the Snowplow pageview event, the redirect from a redirected group path, 403 without the group_repository_analytics license, and 403 for users without group access (with an auditor exception).
  • ee/spec/controllers/groups/analytics/coverage_reports_controller_spec.rb covers the CSV endpoint behind the group page's coverage download (200 with CSV data, permission and license checks, query count).

Feature specs (Capybara)

  • spec/features/projects/graph_spec.rb exercises the project charts page: the commit statistics content (also via the #commits and #languages redirects), HTML escaping of the branch name, and switching refs with the ref switcher.
  • No feature/system spec visits the group repository analytics page.

Not covered

  • No QA/E2E spec covers either page.

References

Merge request reports