Vue 3 migration: artifacts pages

Everyone can contribute. Help move this issue forward while earning points, leveling up and collecting rewards.

Part of &23285.

This issue tracks the Vue 3 migration of the artifacts page entrypoints. Three entrypoints move under one new feature flag, vue3_migrate_artifacts.

Entrypoints & apps

Entrypoint Vue apps mounted Page-specific components
app/assets/javascripts/pages/projects/artifacts/index.js Mounts a Vue app via initVueApp in app/assets/javascripts/ci/artifacts/index.js:25. Uses VueApollo. 11 total (8 in ci/artifacts, 3 in vendor/assets)
app/assets/javascripts/pages/projects/artifacts/file/index.js None. Runs addShortcutsExtension(ShortcutsNavigation) and new BlobViewer() from ~/blob/viewer/index. 0 page-specific (118 .vue files reached in total)
app/assets/javascripts/pages/projects/artifacts/browse/index.js None. Runs addShortcutsExtension(ShortcutsNavigation) and new BuildArtifacts() from ~/build_artifacts. 0 page-specific (98 .vue files reached in total)

file and browse add no new work. BlobViewer does not import viewers eagerly. It lazy-loads them with dynamic import() calls, in app/assets/javascripts/blob/viewer/index.js:21-31: the notebook, openapi, csv, pdf, sketch and stl viewers. These same viewers already run under Vue 3 on projects/blob/show, covered by the vue3_migrate_repository flag. So file and browse only need the yml files. They need no new component work.

Why a new flag

vue3_migrate_repository is default_enabled: true as of milestone 19.1. A flag that is on by default cannot gate new entrypoints. So this migration needs its own flag, vue3_migrate_artifacts.

Risks

  • projects/artifacts/file and projects/artifacts/browse mount no Vue app of their own. So they have no data-gitlab-vue3-app marker to confirm the Vue 3 bundle serves. Confirm the migration another way, for example by checking which chunk the network tab loads.
  • The blob viewers load lazily. A regression appears only when a user opens an artifact of that specific type. Check a notebook, a PDF and a CSV artifact by hand.

Tasks / MRs

  • MR 1: add the vue3_migrate_artifacts feature flag definition and add vue3_migration.yml (status: rollout) next to each of the three entrypoints.
  • Check that the artifacts table page renders under Vue 3 and that its Apollo queries work.
  • Open a notebook, a PDF and a CSV artifact. Check that the lazy-loaded viewers work.
  • Confirm the correct chunk loads on file and browse under Vue 3.
  • Write a Sentry query to track errors on the migrated pages.
  • Ramp the feature flag in stages.
  • Open a cleanup MR. Move all three vue3_migration.yml files to status: migrated.

Rollout

1. Enable for gitlab-org.
2. Enable for 10% of actors. Soak.
3. Enable for 50% of actors. Soak.
4. Enable for 100% of actors. Soak.
5. Set default_enabled: true.
6. Open the cleanup MR.

Notes

  • After adding a vue3_migration.yml, restart the Vite dev server. Otherwise the entry map stays stale, the app never mounts, and no console error appears.
  • Local GDK runs Vue 2. Stub the flag off to check rendering in feature specs.
Edited by 🤖 GitLab Bot 🤖