Fix Organizations pages under the Vue 3 rollout

What does this MR do and why?

Fixes the organization pages when running on Vue3.

  1. The Organizations entry points create new VueApollo(...) but never call Vue.use(VueApollo). On Vue 2 this works because the super sidebar installs VueApollo globally. On Vue 3 the page has its own copy of the plugin, which stays inert until installed, so $apollo is undefined. This also breaks the organization users list and organizations list (no data), and settings, new organization, edit group and leaving an organization (fail on save/submit).
  2. The groups and projects router used base: '/' with a single route /, so the current URL never matched. Vue Router 3 tolerated this. Vue Router 4 throws No match for {"query":{"display":"projects"}...} when the switcher pushes a query.

References

Screenshots or screen recordings

None. Behavior is covered by the new feature spec.

How to set up and validate locally

  1. Run gdk config set vite.vue_version 2, gdk reconfigure and gdk restart, so migrated pages run on Vue 3 while the rest stays on Vue 2, like production.
  2. In a Rails console, run Feature.enable(:vue3_migrate_organizations).
  3. Visit /o/default/-/groups_and_projects and confirm the console shows [V] Using Vue.js 3 (with @vue/compat) for OrganizationsGroupsAndProjects.
  4. Confirm groups load. Switch the display to Projects and confirm projects load.

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 Shane Maglangit

Merge request reports

Loading
Loading