Move dashboard pages to vue 3 rollout

What does this MR do and why?

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

The flag opts four dashboard pages into Vue 3 compatibility mode: the issues dashboard, the work items dashboard, the To-Do List, and the milestones dashboard. Rails serves the Vue 3 bundle when the flag is on, and the Vue 2 bundle when it is off.

The work item also lists a "dashboard milestones show" page. That page does not exist. The route only supports index, so this MR skips it on purpose.

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

Work items dashboard

/dashboard/work_items

pages.dashboard.work_items.vue3.js

pages.dashboard.work_items.vue3.js

To-Do List

/dashboard/todos

pages.dashboard.todos.index.vue3.js

pages.dashboard.todos.index.vue3.js

Milestones dashboard

/dashboard/milestones

pages.dashboard.milestones.index.vue3.js

pages.dashboard.milestones.index.vue3.js

The issues dashboard is not in the table. DashboardController sends /dashboard/issues to /dashboard/work_items with a 301, so it never loads a pages.dashboard.issues bundle. See the verification comment for details.

References

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

How to set up and validate locally

  1. In the Rails console, run Feature.enable(:vue3_migrate_dashboard).
  2. Visit /dashboard/issues, /dashboard/work_items, /dashboard/todos, and /dashboard/milestones.
  3. Confirm each page loads.
  4. Confirm filtering and sorting still work.
  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