Enable Vue 3 migration rollout for group CI/CD analytics

Brandon Labuschagnerequested to merge
614009-vue3-migrate-ci-cd-analytics into master

What does this MR do and why?

Enables the Vue 3 migration rollout for the group CI/CD analytics page (ee/app/assets/javascripts/pages/groups/analytics/ci_cd_analytics/index.js).

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

Note: the project level CI/CD analytics page (app/assets/javascripts/pages/projects/pipelines/charts/index.js, served by Projects::PipelinesController#charts) is a separate feature owned by a different team and is explicitly out of scope for this MR.

What changed

  • Added config/feature_flags/beta/vue3_migrate_ci_cd_analytics.yml
  • Added ee/app/assets/javascripts/pages/groups/analytics/ci_cd_analytics/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_ci_cd_analytics)
  2. Make sure your test group has at least a Premium license. The controller calls authorize_view_by_action!(:view_group_ci_cd_analytics), which 403s the whole page unless the group has at least one of the group_ci_cd_analytics_pipelines (Premium and Ultimate) or group_ci_cd_analytics_releases (Ultimate only) licensed features.
  3. Navigate to any group's CI/CD analytics page (Analyze > CI/CD Analytics, /groups/<group>/-/analytics/ci_cd)
  4. Open the browser console and confirm the message: [gitlab] [V] Using Vue.js 3
  5. Run the smoke tests from the feature issue:
    • Switch between the Pipelines and Release statistics tabs, confirm the tab query parameter updates, and the correct tab stays selected after using browser back and forward
    • On the Pipelines tab, select a date range and confirm the URL query parameters update
    • On the Release statistics tab, confirm it loads and displays the releases count and the percentage of projects with releases
    • If your test group is a root group and you can admin it, confirm the "View group pipeline usage quota" link renders and points to the usage quotas page

Note on the Pipelines tab: it also needs the pre-existing group_ci_cd_analytics_pipelines_ff flag (type wip, default off, owned by group::ci platform) on top of the group_ci_cd_analytics_pipelines license. Its dashboard has no panels wired up yet (dashboardConfig returns an empty panels: [] array, with a source comment saying it is still in development), so there is little to smoke test on that tab beyond the tab and filter plumbing above.

Existing test coverage for the group CI/CD analytics page

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

  • app_spec.js: covers the top-level app, which tabs render based on licensed features and the pipelines feature flag, tab selection from the tab query parameter (including invalid and missing values), restoring the selected tab on browser back and forward (popstate), and the "View group pipeline usage quota" link rendering and its href, gated on a canViewGroupUsageQuota permission.
  • components/group_pipelines_dashboard_spec.js: covers the Pipelines tab shell, rendering the dashboard layout and filters, the default 7-day date range passed to filters, and recomputing query variables (fromTime and toTime) when filters change or a time URL query parameter is present. Test comments explicitly mark these variables as temporary, pending the backend queries that will eventually drive the still-empty panels.
  • components/group_pipelines_dashboard_filters_spec.js: covers the date range filter component, default null selection, reflecting the value prop, emitting an input event on selection, and reacting to prop changes.
  • components/group_release_stats_card_spec.js: covers the Release statistics tab, loading state while the GraphQL query is in flight, the fetched fullPath variable, rendering header and statistics once loaded, rendering zeros correctly, and rendering placeholder dashes on a GraphQL error.

None of these four spec files appear in scripts/frontend/quarantined_vue3_specs.txt, so they run in both the jest (Vue 2) and jest vue3 (@vue/compat) CI jobs.

Backend

  • ee/spec/controllers/groups/analytics/ci_cd_analytics_controller_spec.rb: covers #show, renders for a reporter, 403 for a guest, 403 for a non-member, redirects to login when signed out, and 403 when neither group_ci_cd_analytics_pipelines nor group_ci_cd_analytics_releases is licensed.

Feature (system) specs

  • ee/spec/features/groups/analytics/ci_cd_analytics_spec.rb: visits the page with only group_ci_cd_analytics_releases licensed, clicks into the Release statistics tab, and asserts the rendered release count and percentage of projects with releases text.

QA / E2E

None exist for this page.

Not covered

No system spec exercises the Pipelines tab (it needs the separate group_ci_cd_analytics_pipelines_ff flag plus a license, and has no panels to assert on yet). No system spec covers switching tabs via the tab query parameter, browser back and forward tab restoration, or the pipeline usage quota link (Jest-only today). No QA or E2E spec covers this page at all.

References

Merge request reports