Loading
Fix Vue 3 compat blockers on the commit pages
What does this MR do and why?
Fixes three Vue 3 compatibility blockers on the commit pages so they're ready to migrate in the next MR. There's no feature flag in this MR and no behaviour change on the Vue 2 lane that everyone gets today.
app/assets/javascripts/projects/commits/graphql.jsnow callsVue.use(VueApollo).- The commits list page fetches its data with Apollo (GraphQL), but nothing on the page set Apollo up itself. On Vue 2 it accidentally worked because a different part of the app set it up globally and everything shared one copy of Vue. On Vue 3, each page gets its own copy, so that setup didn't carry over and the commit list came up blank with a console error.
- We remove
app/assets/javascripts/projects/commit/index.jsandapp/assets/javascripts/projects/commit_box/info/index.js, and the three pages that used them now call the startup functions directly.- These two files existed only to group a handful of Vue app startup calls and re-export them as one function. The migration tooling doesn't look through a file like that, so five Vue apps behind them (the commit options dropdown, the branches and tags list, the pipeline summary, and the cherry-pick and revert modals) had no way to move to Vue 3. That behaviour is right for genuinely shared things like tooltips and toasts, which should stay on one Vue version, so we removed these two files rather than changing the tooling.
app/assets/javascripts/rapid_diffs/app/file_browser/index.jsswitches its threenew Vue({ pinia })roots toinitVueApp.- These three apps are the diff file browser and its two toggle buttons.
new Vuedoesn't hook up Pinia (our state store) on Vue 3, so the file browser logged a warning every time it rendered.initVueAppis the shared helper that works on both Vue versions.
- These three apps are the diff file browser and its two toggle buttons.
Heads up for reviewers: app/assets/javascripts/rapid_diffs/app/file_browser/index.js is owned by groupcode review and is shared with the merge request diffs pages, so it needs their eyes too
References
- #613678 (closed)
- gitlab-org#23084
- Stacked on top of this one: !252084 (merged)
Screenshots or screen recordings
NA
How to set up and validate locally
- Check out this branch.
- Visit a single commit page and the commit pipelines tab. With
vue3_migrate_commit_listabsent (this MR ships no flag), confirm they render with zero Vue 3 apps and zero console errors. - Check out the next branch in the stack, then run
node scripts/frontend/infection_scanner/infection_scanner.mjsandgdk restart vite rails-web. - In the Rails console, run
Feature.enable(:vue3_migrate_commit_list). - On a single commit page, confirm
CommitOptionsDropdownRootandCommitBranchesRootare now Vue 3, and that the cherry-pick and revert modals both open with their own Pinia state. - Confirm the only Vue 2 roots left are the global singletons
DuoPanel,TooltipsRoot, andPopoversRoot. - Narrow the viewport on a compare page, open the file browser drawer, and confirm there are no
[Vue warn]messages. Widen it again and confirm the drawer toggle is replaced by the sidebar toggle.
I ran spec/frontend/rapid_diffs, spec/frontend/projects/commit, and spec/frontend/projects/commits (1510 tests, 0 failures), plus ESLint and Prettier.
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.
Edited by Kushal Pandya