Vue 3 migration: deployment details (show) page

What does this MR do and why?

Adds the vue3_migrate_deployments feature flag and a vue3_migration.yml for the deployment details (show) page. It opts into Option 1: the bundler builds a Vue 2 and a Vue 3 chunk, and Rails serves the Vue 3 chunk only when the flag is on (default-off).

One entrypoint, pages/projects/deployments/show, mounting the ~/deployments/show app (ShowDeploymentRoot, Apollo) via initVueApp. status: rollout behind vue3_migrate_deployments.

Risk

Low. The ~/deployments tree (5 components + utils) and the shared SPA machinery were audited against the real Vue 2→3 breakers: data() is a function throughout, no removed filters: component option, no Vue.extend/propsData/Vue.observable/$children/local functional components. The mount already uses initVueApp. No cross-team popover blocker applies (the reference popovers aren't wired up on this page). Covered by spec/frontend/deployments (green under Vue 3).

References

Screenshots or screen recordings

Vue 3 walkthrough video to be attached.

How to set up and validate locally

  1. Enable the flag:
    Feature.enable(:vue3_migrate_deployments)
  2. Visit a deployment, e.g. /<project>/-/environments/:environment_id/deployments/:iid. Confirm the console shows [V] Using Vue.js 3 for ShowDeploymentRoot.
  3. Confirm the header, aside, and deploy block render and the deployment/environment/release Apollo data loads.
  4. Run VUE_VERSION=3 yarn jest spec/frontend/deployments.

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 Anna Vovchenko

Merge request reports

Loading
Loading