Loading
Migrate AI Governance Dashboard Vue app to Vue 3
What does this MR do and why?
Add a feature flag and vue3_migration.yml files to opt the AI Governance Dashboard app into Vue 3 compatibility mode.
The AI Governance Dashboard app at ee/app/assets/javascripts/ai/governance/ already uses initVueApp() from ~/lib/utils/vue3compat/init_vue_app, which transparently handles Vue 2/3 switching. No JS changes are needed — we only need to:
- Create the
vue3_migrate_ai_governancebeta feature flag - Add
vue3_migration.ymlfiles for both page entrypoints that callinitGovernanceApp():ee/app/assets/javascripts/pages/groups/settings/gitlab_duo/governance/ee/app/assets/javascripts/pages/projects/settings/gitlab_duo/governance/
When the feature flag is enabled, the Vue 3 infection scanner promotes these entrypoints to Vue 3 mode, and initVueApp() uses createApp instead of new Vue.
References
- Work item: #607945 (closed)
- Parent issue: #607904 (closed)
- Migration guide: https://docs.gitlab.com/development/fe_guide/vue3_migration/#option-1-recommended-migrate-your-page-entrypoint-using-a-feature-flag-and-vue3_migrationyml
- Example migration MR: !247789 (merged)
Screenshots or screen recordings
No UI changes — this is a configuration-only change.
| Before | After |
|---|---|
| N/A | N/A |
How to set up and validate locally
- Enable the feature flag in rails console:
Feature.enable(:vue3_migrate_ai_governance) - Visit the group AI Governance page (requires
ai_governance_dashboardflag) - Verify the browser console shows:
[gitlab] [V] Using Vue.js 3 (with @vue/compat) for GovernanceRoot - Verify the Dashboard, Tool Management, and Agent Artifacts tabs render correctly
- Verify tab switching via query params works correctly
- Repeat for the project AI Governance page
MR acceptance checklist
Evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.