Add Vue 3 rollout flag for the Google Cloud pages

Anna Vovchenkorequested to merge
631118-vue3-migrate-google-cloud into master

Adds the vue3_migrate_google_cloud feature flag and a vue3_migration.yml for the Google Cloud (Cloud Seed) page entrypoints. The flag is default-off.

Scope

The Google Cloud mounts go through initVueApp with named props, so each root carries the Vue 3 marker and the entry file states which props the component receives. Every key the controllers put in @js_data is a declared prop.

Risk

GlTable is the only bootstrap-vue surface here. The app has no modals, popovers, tooltips or dropdowns. The three forms submit through a Rails form_tag, so a prop that fails to reach GlFormSelect would show as a wrong POST value rather than a console error.

Verification

  • bundle exec rspec spec/lib/gitlab/vue3_migration_files_spec.rb — 1481 examples, 0 failures
  • node scripts/frontend/vue3_migration_stats.mjs --owners reports the Google Cloud entrypoints under vue3_migrate_google_cloud
  • yarn jest spec/frontend/google_cloud — 74 passed
  • VUE_VERSION=3 yarn jest spec/frontend/google_cloud — 74 passed

The jest runs cover the components, not the entrypoints, so they are necessary and not sufficient. The browser walkthrough below is the real signal.

Local verification

A temporary feature spec signed in as a project maintainer and loaded each page twice, once with vue3_migrate_google_cloud off and once with it on. With the flag off it asserted the base entrypoint is served and no [data-gitlab-vue3-app] element exists; with it on, that the .vue3 entrypoint is served and the marker carries the expected root name. Each run saved a screenshot. 12 examples, 0 failures.

Page Entrypoint (flag on) Vue 3 root marker
Configuration pages.projects.google_cloud.configuration.vue3.js GoogleCloudConfigurationPanelRoot
Deployments pages.projects.google_cloud.deployments.vue3.js GoogleCloudDeploymentsPanelRoot
Databases pages.projects.google_cloud.databases.index.vue3.js GoogleCloudDatabasesPanelRoot
New CloudSQL instance pages.projects.google_cloud.databases.new.vue3.js GoogleCloudDatabasesFormRoot
GCP regions pages.projects.google_cloud.gcp_regions.vue3.js GoogleCloudGcpRegionsFormRoot
Service accounts pages.projects.google_cloud.service_accounts.vue3.js GoogleCloudServiceAccountsFormRoot

Configuration

Before (Vue 2) After (Vue 3)
configuration on Vue 2 configuration on Vue 3

Deployments

Before (Vue 2) After (Vue 3)
deployments on Vue 2 deployments on Vue 3

Databases

Before (Vue 2) After (Vue 3)
databases on Vue 2 databases on Vue 3

New CloudSQL instance

Before (Vue 2) After (Vue 3)
databases_new on Vue 2 databases_new on Vue 3

GCP regions

Before (Vue 2) After (Vue 3)
gcp_regions on Vue 2 gcp_regions on Vue 3

Service accounts

Before (Vue 2) After (Vue 3)
service_accounts on Vue 2 service_accounts on Vue 3

How to set up and validate locally

  1. Enable the flag:

    Feature.enable(:vue3_migrate_google_cloud)

  2. Restart the Vite dev server, so it picks up the new vue3_migration.yml files.

  3. Configure a google_oauth2 OmniAuth provider. Without one, every page is denied with "This GitLab instance not configured for Google Oauth2". Any non-blank app id and secret will pass the check.

  4. Visit /<namespace>/<project>/-/google_cloud/configuration and /-/google_cloud/gcp_regions. Confirm the console reports Using Vue.js 3 ... for GoogleCloudConfigurationPanelRoot and ... GoogleCloudGcpRegionsFormRoot, and that the tables render.

  5. On the regions form, pick a region and a ref and submit. Confirm the values arrive in the POST.

  6. /-/google_cloud/deployments, /-/google_cloud/databases, /-/google_cloud/databases/new/postgres and /-/google_cloud/service_accounts also need a valid Google token in session, because validate_gcp_token! redirects to Google's consent screen otherwise.

References

Edited by Anna Vovchenko

Merge request reports