Enable Vue 3 migration rollout for issue analytics

Brandon Labuschagnerequested to merge
607826-vue3-migrate-issues-analytics into master

What does this MR do and why?

Enables the Vue 3 migration rollout for the group and project issue analytics pages (ee/app/assets/javascripts/pages/groups/issues_analytics and ee/app/assets/javascripts/pages/projects/analytics/issues_analytics).

This uses the vue3_migration.yml mechanism to opt the pages into Vue 3 behind a feature flag. When vue3_migrate_issues_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_issues_analytics.yml
  • Added ee/app/assets/javascripts/pages/groups/issues_analytics/vue3_migration.yml with status: rollout
  • Added ee/app/assets/javascripts/pages/projects/analytics/issues_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_issues_analytics)
  2. Navigate to a group's issue analytics page (Analyze > Issue analytics, /groups/<group>/-/issues_analytics) and a project's issue analytics page (Analyze > Issue analytics, /<project>/-/analytics/issues_analytics)
  3. Open the browser console and confirm the message on both pages: [gitlab] [V] Using Vue.js 3
  4. Verify the issues chart renders at group and project level, filtered search (labels, milestones, authors) updates the chart, and the issues table below the chart populates

Existing test coverage for the issue 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.

Frontend unit tests (Jest), ee/spec/frontend/issues_analytics/

  • components/issues_analytics_spec.js covers the top-level app: choosing between the new TotalIssuesAnalyticsChart and the legacy IssuesAnalyticsChart based on the hasIssuesCompletedFeature flag, passing transformed page filters down to the chart and table, months_back updating the start date, the warning alert for unsupported raw text search, and the filtered search manager wiring.
  • components/issues_analytics_table_spec.js covers the issues table: skeleton loader while loading, table headers, issue details (title, epic, labels popover, iteration, computed age, status), filtering to supported states, the GraphQL query variables for both group and project types, and the error alert when the query fails.
  • components/total_issues_analytics_chart_spec.js covers the opened vs closed stacked column chart: chart props and axis titles, the opened/closed count queries with and without filters, loading state, the empty states (with and without filters), and Sentry error capture when queries fail.
  • components/issues_analytics_chart_spec.js covers the legacy Vuex-based chart: dispatching fetchChartData on mount and on filter changes, rendering the column chart, loading state, and both empty-state variants.
  • components/issues_analytics_empty_state_spec.js covers the two empty-state variants (no data, and no data with filters applied).
  • filtered_search_issues_analytics_spec.js covers the supported filtered search tokens (author, assignee, milestone, label, epic, weight) and multiple-assignee support.
  • api_spec.js, utils_spec.js, and graphql/issues_analytics_counts_query_builder_spec.js cover transforming the GraphQL count responses into chart data, month bucketing for the chart date range, and the dynamic opened/completed counts query builder.
  • stores/modules/issues_analytics/actions_spec.js and mutations_spec.js cover the Vuex actions (setFilters, setLoadingState, fetchChartData) and mutations.

None of these specs are 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

  • ee/spec/controllers/groups/issues_analytics_controller_spec.rb and ee/spec/controllers/projects/analytics/issues_analytics_controller_spec.rb share ee/spec/support/shared_examples/controllers/analytics/issues_analytics/shared_issues_analytics_examples.rb. Together they cover: 404 when the license is unavailable or the user lacks permission, rendering the show template, the JSON chart data response, excluding issues the user cannot view from the counts, and visit/event tracking (g_analytics_issues, p_analytics_issues).

Feature (system) specs

  • ee/spec/features/projects/analytics/issues_analytics_controller_spec.rb is the only browser-level spec that loads one of these pages: it visits the project issue analytics page and asserts the chart loads without the "Failed to load chart." error.
  • ee/spec/features/groups/active_tabs_spec.rb and ee/spec/features/projects/navbar_spec.rb only assert navigation state (active tab, sidebar item), not page functionality.

QA (end-to-end)

  • qa/qa/specs/features/ee/browser_ui/14_analytics/issues_analytics_spec.rb covers both the group and project pages via shared examples, but each example only signs in, visits the page, and asserts the graph is visible.

Not covered

  • No group-level feature spec renders the page in a browser; only the project-level page has one.
  • Filtered search, the issues table contents, and the empty states are only covered at the Jest unit level; no browser-level spec exercises them.
  • No frontend fixtures or view specs exist for these pages.

References

Merge request reports