Move CRM contacts and organizations pages to Vue 3 rollout

Kushal Pandyarequested to merge
630031-move-crm-pages-to-vue3-rollout into master

What does this MR do and why?

Moves the pages.groups.crm.contacts and pages.groups.crm.organizations entry points onto the Vue 3 migration rollout, behind a new beta flag vue3_migrate_crm. Adds vue3_migration.yml files with status: rollout for both, so Rails serves the .vue3 bundle in compat mode when the flag's on, and the Vue 2 bundle otherwise.

No JS changes were needed, since both apps already work under Vue 3 compat, including the router-driven create and edit drawers and the table sorting. The flag is off by default, so there's no behaviour change for users.

Both pages log a Vue 3 only [Vue warn]: Property "isEmpty" was accessed during render but is not defined on instance. That's an existing bug: tbodyTrClass in contacts_root.vue and organizations_root.vue reads this.isEmpty, which was never defined. Vue 2 doesn't warn about it, and it behaves the same on both versions, so it's out of scope here.

References

Screenshots or screen recordings

Page Vue 2 (flag off) Vue 3 (flag on)
Contacts contacts_v2 contacts_v3
Organizations organizations_v2 organizations_v3

How to set up and validate locally

  1. In the Rails console, enable the flag: 
    Feature.enable(:vue3_migrate_crm)
  2. Restart the frontend dev server so it picks up the new entry map (gdk restart rspack, or gdk restart vite for Vite users).
  3. Visit the contacts page of a group with CRM enabled, for example /groups/toolbox/-/crm/contacts. Sort by a column, switch between the Active, Inactive and All tabs, and search for a contact.
  4. Open New contact and Edit on a row, save each, and confirm the drawer closes and the success toast shows.
  5. Repeat the same on /groups/toolbox/-/crm/organizations.
  6. Confirm the browser console shows Using Vue.js 3 logs and no Vue warnings other than the isEmpty one above.
  7. Disable vue3_migrate_crm, wait up to a minute for the flag cache to clear, and confirm the Vue 2 bundle is served again.

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.

Related to #630031 (closed)

Merge request reports