Move milestones pages to vue 3 rollout

What does this MR do and why?

This MR adds a beta feature flag, vue3_migrate_milestones, default off.

The flag opts all eight milestones pages into Vue 3 compatibility mode: index, new, edit, and show, for both groups and projects. Rails serves the Vue 3 bundle when the flag is on, and the Vue 2 bundle when it is off.

The two show pages have an EE version that adds the burndown chart. Both the CE and EE entries declare the same status and flag, as the migration guide requires.

The flag is off by default. No behaviour changes for users.

Screenshots

The flag is on in every screenshot. Each row names the entrypoint that the page loaded.

Page Entrypoint Screenshot

Group milestones list

/groups/gitlab-org/-/milestones

pages.groups.milestones.index.vue3.js

pages.groups.milestones.index.vue3.js

Group milestone page

/groups/gitlab-org/-/milestones/1

pages.groups.milestones.show.vue3.js

pages.groups.milestones.show.vue3.js

New group milestone

/groups/gitlab-org/-/milestones/new

pages.groups.milestones.new.vue3.js

pages.groups.milestones.new.vue3.js

Edit group milestone

/groups/gitlab-org/-/milestones/1/edit

pages.groups.milestones.edit.vue3.js

pages.groups.milestones.edit.vue3.js

Project milestones list

/flightjs/Flight/-/milestones

pages.projects.milestones.index.vue3.js

pages.projects.milestones.index.vue3.js

Project milestone page

/flightjs/Flight/-/milestones/10

pages.projects.milestones.show.vue3.js

pages.projects.milestones.show.vue3.js

New project milestone

/flightjs/Flight/-/milestones/new

pages.projects.milestones.new.vue3.js

pages.projects.milestones.new.vue3.js

Edit project milestone

/flightjs/Flight/-/milestones/10/edit

pages.projects.milestones.edit.vue3.js

pages.projects.milestones.edit.vue3.js

References

Work item: #608109 (closed) Parent epic: gitlab-org#23066

How to set up and validate locally

168 Jest tests across 16 suites pass for the affected apps, including the EE burndown chart, with VUE_VERSION=3.

  1. In the Rails console, run Feature.enable(:vue3_migrate_milestones).
  2. Visit a group's milestones list, then a project's milestones list.
  3. Open a milestone, then create or edit one.
  4. Confirm the burndown chart still renders on the milestone page.
  5. Confirm the browser console shows no Vue errors.

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 Deepika Guliani

Merge request reports

Loading
Loading