Vue 3 migration: Google Cloud (Cloud Seed) pages

Part of &23285.

This issue tracks the Vue 3 migration of the Google Cloud (Cloud Seed) page entrypoints, using Option 1 (vue3_migration.yml plus a feature flag).

Reachability

Two gates sit in front of every page, both in app/controllers/projects/google_cloud/base_controller.rb.

Gate Effect Pages affected
admin_project_google_cloud (:7) Access denied without it. Granted at maintainer level; blocked when the project's infrastructure feature is off (app/policies/project_policy.rb:448). All six
google_oauth2_enabled! (:8) Access denied with "This GitLab instance not configured for Google Oauth2" unless the OmniAuth provider has an app id and secret. Not configured in a default GDK. All six
validate_gcp_token! Redirects to Google's OAuth consent screen when the session token fails a live check. Deployments, Databases, Service accounts

So configuration and gcp_regions render on any instance with Google OAuth configured. The other four also need a valid Google token in session.

Entrypoints & apps

Six entrypoints, all under app/assets/javascripts/pages/projects/google_cloud/. Each is a two-line shim into ~/google_cloud. One flag covers all six because they share one app and one component set.

Entrypoint App root name Components
configuration GoogleCloudConfigurationPanelRoot 5
deployments GoogleCloudDeploymentsPanelRoot 3
databases/index GoogleCloudDatabasesPanelRoot 4
databases/new GoogleCloudDatabasesFormRoot 1
gcp_regions GoogleCloudGcpRegionsFormRoot 1
service_accounts GoogleCloudServiceAccountsFormRoot 1

13 components in total, all in ~/google_cloud. No Apollo, Vuex or Pinia; data arrives as props from a JSON data attribute the controller writes.

ee/app/assets/javascripts/pages/projects/google_cloud/artifact_registry is not included. It shares the directory name only: it mounts packages_and_registries/google_artifact_registry, is EE-only, and belongs to container_registry. It needs its own flag and issue.

Risks

  • All six mounted with the raw new Vue({ el, render }) constructor and passed data through attrs. The accompanying merge request converts them to initVueApp, which stamps the Vue 3 root marker and passes named props. Without that conversion a silent fallback to Vue 2 would be invisible.
  • GlTable appears on five of the six pages and is the only bootstrap-vue surface in the app. There are no modals, popovers, tooltips or dropdowns, so the phantom-instance failure seen on the milestone popover does not apply.
  • The three forms submit through a Rails form_tag, so a prop that fails to reach GlFormSelect would show up as a wrong POST value rather than a console error.
  • The 74 existing jest specs cover the 13 components, not the six mount files. They pass under both Vue versions and prove nothing about the conversion.
  • The area is feature_category :not_owned and the docs read group: unassigned, so there is no team on the hook for the ramp. group::environments was chosen because four of the six pages already sit under deploy in scripts/frontend/vue3_migration_stats.mjs.

Tasks / MRs

  • MR 1: add the vue3_migrate_google_cloud flag definition, add a vue3_migration.yml (status: rollout) to all six entrypoints, and convert the six mounts to initVueApp.
  • Verify configuration and gcp_regions under Vue 3.
  • Verify deployments, databases, databases/new and service_accounts under Vue 3, with the Google gates stubbed locally.
  • Check that the three forms still POST the selected values.
  • Ramp the flag, per the ladder below.
  • Cleanup MR: move all six vue3_migration.yml files to status: migrated.

Rollout

1. Enable vue3_migrate_google_cloud 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 to set status: migrated.

Notes

  • Restart the Vite dev server after adding a vue3_migration.yml, or the entry map stays stale and the app never mounts, with no console error.
  • The flag alone switches the bundle. Gitlab::Vue3Migration.entrypoint_for resolves the .vue3 sibling per user, so there is no need to put the whole GDK on Vue 3 to check these pages.
  • A default GDK has no google_oauth2 provider, so all six pages are unreachable until it is configured or the gate is stubbed.