Migrate find file and network pages to Vue 3

Kushal Pandyarequested to merge
613673-migrate-find-file-network-to-vue3 into master

What does this MR do and why?

Adds vue3_migration.yml for projects/find_file/show and projects/network/show, opting both into the Vue 3 rollout under the vue3_migrate_repo_read_pages flag. projects/find_file/show mounts FindFileRefSelectorRoot, and projects/network/show mounts NetworkRefSelectorRoot and RefSearchFormRoot. There's no application logic change here, only YAML.

References

  • #613673 (closed)
  • gitlab-org#23084
  • Stacked on !250740 (merged), which adds the vue3_migrate_repo_read_pages flag definition. We stack rather than open independent MRs because spec/lib/gitlab/vue3_migration_files_spec.rb requires every feature_flag in a vue3_migration.yml to resolve to a real definition under config/feature_flags/.

Screenshots or screen recordings

NA

How to set up and validate locally

  1. Check out the 613673-migrate-find-file-network-to-vue3 branch.
  2. Run gdk restart vite, since Vite builds its page entry map at startup and won't pick up a new vue3_migration.yml while it's running.
  3. In the Rails console, run Feature.enable(:vue3_migrate_repo_read_pages).
  4. Visit /<group>/<project>/-/find_file/<ref> and /<group>/<project>/-/network/<ref>.
  5. Run this in the browser console and confirm FindFileRefSelectorRoot, NetworkRefSelectorRoot, and RefSearchFormRoot show up: [...document.querySelectorAll('[data-gitlab-vue3-app]')].map((el) => el.dataset.gitlabVue3App).
  6. Confirm there are no console errors.

I tested this in GDK with the flag on: both pages served their .vue3 entrypoints with zero console errors and no @vue/compat deprecation warnings. The find file ref selector filters and navigates, and the jQuery fuzzy filter and arrow key navigation still work. The network ref switcher reloads the graph, the revision search form submits, and the Raphael graph still renders. spec/lib/gitlab/vue3_migration_files_spec.rb passes (581 examples, 0 failures).

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.

Merge request reports