Vue 3 migration: explore.catalog

Part of &23285. This issue migrates the CI/CD catalog page to Vue 3 with Option 1: a vue3_migration.yml file and a feature flag.

Entrypoints & apps

Entrypoint Vue apps mounted
app/assets/javascripts/pages/explore/catalog/index.js GlobalCatalog on #js-ci-cd-catalog, and a breadcrumb app mounted through injectVueAppBreadcrumbs

The entrypoint is 3 lines. It imports initCatalog from ~/ci/catalog/ and calls it.

initCatalog, in app/assets/javascripts/ci/catalog/index.js:

  • mounts GlobalCatalog with initVueApp({ el, ... }) on #js-ci-cd-catalog
  • uses vue-router through createRouter
  • uses VueApollo with a custom cacheConfig, custom resolvers and a typedefs.graphql
  • mounts a second app for the breadcrumb through injectVueAppBreadcrumbs(router, CiCatalogBreadcrumb)

The page reaches 135 .vue files. 31 are distinctive, and 28 of those are in ci/catalog. Only 6% of the distinctive tree is already proven under another flag, so most of this code runs on Vue 3 for the first time.

The app mounts with el, so the data-gitlab-vue3-app marker appears on the root element. Use that marker to tell a real Vue 3 render from a silent fallback to Vue 2.

Tasks / MRs

  • MR 1: add the vue3_migrate_ci_catalog flag definition, and add vue3_migration.yml next to the entrypoint with status: rollout and feature_flag: vue3_migrate_ci_catalog
  • Confirm the page renders under Vue 3 and that the root element carries data-gitlab-vue3-app
  • Check the catalog list page, a resource detail page, and the breadcrumb
  • Check vue-router navigation from the list to a detail page and back
  • Check the Apollo cache, resolvers and local typedefs behave as they do on Vue 2
  • Write a Sentry query for this flag before you ramp it
  • Ramp the flag as shown below
  • Cleanup MR: set the yml to status: migrated, remove the feature_flag: line, and delete the flag definition

Rollout

enable for gitlab-org (dogfood)
→ 10% → 50% → 100%, with a soak between steps
→ default_enabled: true → cleanup MR

Notes

  • Restart the Vite dev server after you add vue3_migration.yml. If you do not, the entry map stays stale, the app never mounts, and no error appears in the console.
  • Local GDK runs Vue 2. To check rendering in feature specs, stub this flag off.