Draft: Validate the native Vue 3 @gitlab/ui against system specs
What does this MR do and why?
Draft / experiment — not intended to merge in this form.
Runs the monolith's real-browser system spec suites against the native
Vue 3 rewrite of @gitlab/ui
(gitlab-ui-vue3, design.gitlab.com!6146).
The branch is hyper-focused on exactly what that lane needs — 8 files:
- CI wiring: a
compile-test-assets vue3variant compiles assets against the native package — component entries resolve to its prebuilt dist (its Vue 3-only SFC templates cannot go through the patched Vue 2 compiler), plain-JS deep imports (utils/tokens) to its src mirror, sass intentionally stays on upstream (class names are byte-parity). A fetch script clones and builds the package from its design.gitlab.com branch; nothing in the monolith'snode_modulesis mutated.@gitlab/ui/src/configresolves to a shim re-exporting the copy bundled with the components (the registry is stateful; a second source-resolved instance silently swallows the translations registered bycommons/gitlab_ui.js). - Runtime shims, all branched on the running Vue version so default
pipelines are unaffected: function slots in
alert.js/renderVueComponentForLegacyJS, Vue 3 directive hook names intooltip_on_truncate, and thevModelDynamicassigner backfill in the vue3compat layer (previously supplied as a side effect of importing the compat@gitlab/ui, which the native rewrite doesn't carry).
The pipeline:run-rspec-vue3 label on this MR runs the CE + EE system spec suites (48 shards) against those assets.
Result
44 / 48 shards green (final full run before the branch was trimmed to rspec-only changes). The burn-down went 256 → 51 → 18 → 10 → 6 → 4 unique failing spec files over six rounds; the ten root causes were all fixed package-side (on the design.gitlab.com branch), so this MR stayed thin. The 4 residual spec files:
| Spec | Classification |
|---|---|
spec/features/explore/catalog_spec.rb |
pre-existing — fails identically on the baseline compat vue3 lane |
spec/features/user_settings/granular_personal_access_tokens/tokens_table_spec.rb |
pre-existing baseline debt |
spec/features/projects/pipelines/pipeline_spec.rb |
under investigation — apollo returns an empty pipeline without error |
ee/spec/features/duo_chat_spec.rb |
intermittent (3 of 5 rounds), not part of baseline debt |
The jest half of the validation (full frontend suite,
6,059/6,059 suites — 90,562/90,562 tests under
VUE_VERSION=3 GITLAB_UI_VUE3=1) was developed on this branch but has been
split out to keep this MR focused; its infrastructure is preserved on
xanf/gitlab-ui-vue3-embed-full.
References
- Native package MR: gitlab-org/gitlab-services/design.gitlab.com!6146 (closed)
- Package branch consumed by the fetch script: https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/commits/xanf/gitlab-ui-vue3-ultracode
⚠️ Like the package itself, every line in this MR was written by Claude (Fable 5) supervised by @xanf.