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.

  1. app/assets/javascripts/projects/commits/graphql.js now calls Vue.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.
  2. We remove app/assets/javascripts/projects/commit/index.js and app/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.
  3. app/assets/javascripts/rapid_diffs/app/file_browser/index.js switches its three new Vue({ pinia }) roots to initVueApp.
    • These three apps are the diff file browser and its two toggle buttons. new Vue doesn't hook up Pinia (our state store) on Vue 3, so the file browser logged a warning every time it rendered. initVueApp is the shared helper that works on both Vue versions.

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

Screenshots or screen recordings

NA

How to set up and validate locally

  1. Check out this branch.
  2. Visit a single commit page and the commit pipelines tab. With vue3_migrate_commit_list absent (this MR ships no flag), confirm they render with zero Vue 3 apps and zero console errors.
  3. Check out the next branch in the stack, then run node scripts/frontend/infection_scanner/infection_scanner.mjs and gdk restart vite rails-web.
  4. In the Rails console, run Feature.enable(:vue3_migrate_commit_list).
  5. On a single commit page, confirm CommitOptionsDropdownRoot and CommitBranchesRoot are now Vue 3, and that the cherry-pick and revert modals both open with their own Pinia state.
  6. Confirm the only Vue 2 roots left are the global singletons DuoPanel, TooltipsRoot, and PopoversRoot.
  7. 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

Merge request reports

Loading
Loading