Enable Vue 3 migration rollout for insights

Brandon Labuschagnerequested to merge
607825-vue3-migrate-insights into master

What does this MR do and why?

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

This uses the vue3_migration.yml mechanism to opt the pages into Vue 3 behind a feature flag. When vue3_migrate_insights 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_insights.yml
  • Added ee/app/assets/javascripts/pages/groups/insights/vue3_migration.yml with status: rollout
  • Added ee/app/assets/javascripts/pages/projects/insights/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_insights)
  2. Navigate to a group's insights page (Analyze > Insights, /groups/<group>/-/insights) and a project's insights page (Analyze > Insights, /<group>/<project>/-/insights)
  3. Open the browser console and confirm the message: [gitlab] [V] Using Vue.js 3
  4. Verify the default insights charts render at group and project level, navigating between insights pages re-renders the charts, and a group or project with a custom insights configuration renders its configured charts

Existing test coverage for the insights 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/insights/

  • components/insights_spec.js covers the top-level app: fetching the config on mount, the config loading state, the nav tabs and dropdown title, disabling and enabling the tab selector while charts load, the notice alert for config warnings, the empty-config and filtered-out warnings, and hash-fragment tab selection.
  • components/insights_page_spec.js covers a single insights page: the empty state when no charts are configured, fetching chart data on mount, the loading state, the props passed to the chart component, and the tracking events emitted when a drillable chart item is clicked.
  • components/insights_chart_spec.js covers an individual chart: the loader, rendering each chart type (bar, line, stacked bar, pie), drill-down navigation for issue and merge_request data sources at both group and project level, non-drillable chart behaviour, and the error state.
  • components/insights_chart_error_spec.js covers the chart error component rendering.
  • insights_router_spec.js covers setting the active tab when the route changes.
  • stores/insights/actions_spec.js covers the Vuex actions: config fetch success and error paths (including alerts), chart data fetch success and error paths, setActiveTab, and initChartData.
  • stores/insights/mutations_spec.js covers all mutations, including how chart responses populate type, description, filter and collection labels, group_by, and the data source type (including DORA metrics).
  • stores/insights/helpers_spec.js covers transformChartDataForGlCharts: axis labels and the per-chart-type data shapes, including DORA series handling.

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

  • ee/spec/controllers/groups/insights_controller_spec.rb and ee/spec/controllers/projects/insights_controller_spec.rb cover authorization around the insights configuration project (404 vs 200 for GET #show.html, GET #show.json, and POST #query, including nested groups and the legacy query format) and visit tracking events.
  • ee/spec/requests/groups/insights_controller_spec.rb and ee/spec/requests/projects/insights_controller_spec.rb cover structurally invalid and partially valid insights.yml configurations (the invalid-config notice and the JSON config output), the projects.only filter-out notice, query success, and the statement timeout error response.

Feature (Capybara) specs

  • ee/spec/features/groups/insights_spec.rb and ee/spec/features/projects/insights_spec.rb both run ee/spec/support/shared_examples/features/insights_shared_examples.rb, which renders the page with :js and covers the page title, loading the default (first) tab, hash-fragment navigation to a specific tab, browser back navigation, and a 404 without the insights license.

QA/E2E

  • qa/qa/specs/features/ee/browser_ui/14_analytics/default_insights_spec.rb verifies that the default issues and merge requests dashboards display on both the group and the project insights pages.

References

Merge request reports