Migrate Value Stream Analytics to Vue 3

Migrate the Value Stream Analytics page entrypoint(s) to Vue 3 behind a feature flag.

Docs: Value Stream Analytics

Scope

This issue covers only the flag-gated rollout switch from Option 1 of the Vue 3 migration guide: add a single feature flag, add a vue3_migration.yml per entrypoint, and smoke test the affected pages. Full Vue 3 compliance (fixing compatibility issues, migrating unit tests) is not required here. Capture anything found during smoke testing in follow-up issues instead.

Implementation plan

1. Add the feature flag

Create vue3_migrate_value_stream_analytics using bin/feature-flag:

  • type: beta, default_enabled: false, group: group::optimize
  • Read the milestone value from the VERSION file
  • Set feature_issue_url to this issue
  • Use user as the feature flag actor during rollout
  • Create a rollout issue from the "Feature Flag Roll Out" template and link it as rollout_issue_url
  • Link the rollout issue to the parent epic gitlab-org&23041

2. Add a vue3_migration.yml per entrypoint

Create this file next to each index.js listed below:

status: rollout
feature_flag: vue3_migrate_value_stream_analytics
group: group::optimize
migration_issue: https://gitlab.com/gitlab-org/gitlab/-/issues/607821

Entrypoints:

  • app/assets/javascripts/pages/projects/cycle_analytics/show/index.js (CE, project VSA; loads the ee_else_ce bundle, so it serves both the CE and EE project experiences)
  • ee/app/assets/javascripts/pages/groups/analytics/cycle_analytics/show/index.js (EE, group VSA)
  • ee/app/assets/javascripts/pages/groups/analytics/cycle_analytics/value_streams/new/index.js (EE, group value stream creation form)
  • ee/app/assets/javascripts/pages/groups/analytics/cycle_analytics/value_streams/edit/index.js (EE, group value stream edit form)
  • ee/app/assets/javascripts/pages/projects/analytics/cycle_analytics/value_streams/new/index.js (EE, project value stream creation form)
  • ee/app/assets/javascripts/pages/projects/analytics/cycle_analytics/value_streams/edit/index.js (EE, project value stream edit form)

3. Document existing test coverage in the MR

  • Add a section to the MR description listing which functionality of the feature is currently tested and where those tests are located, as in this example

4. Smoke test

Enable the flag locally and confirm the browser console logs [gitlab] [V] Using Vue.js 3 on each page, then verify the key workflows:

  • Project VSA: lifecycle metrics, stage table, and filters (check the unlicensed CE view too, since the entrypoint serves both via ee_else_ce)
  • Group VSA: overview metrics, stage table, filtered search, and date range
  • Create a value stream with custom stages at group and project level
  • Edit an existing value stream at group and project level

5. Follow-ups

  • Open follow-up issues for any Vue 3 compatibility problems found during smoke testing and link them here

References

Edited by 🤖 GitLab Bot 🤖