Enable Vue 3 migration rollout for DevOps adoption

Brandon Labuschagnerequested to merge
607824-vue3-migrate-devops-adoption into master

What does this MR do and why?

Enables the Vue 3 migration rollout for the DevOps adoption pages: the group-level DevOps adoption page (ee/app/assets/javascripts/pages/groups/analytics/devops_adoption) and the admin DevOps Report page (ee/app/assets/javascripts/pages/admin/dev_ops_report/show). Both entrypoints mount the same ee/analytics/devops_reports/devops_adoption app.

This uses the vue3_migration.yml mechanism to opt the pages into Vue 3 behind a feature flag. When vue3_migrate_devops_adoption is enabled, Rails serves the Vue 3 (@vue/compat) chunks; otherwise the pages continue to run on Vue 2.

What changed

  • Added config/feature_flags/beta/vue3_migrate_devops_adoption.yml
  • Added ee/app/assets/javascripts/pages/groups/analytics/devops_adoption/vue3_migration.yml with status: rollout
  • Added ee/app/assets/javascripts/pages/admin/dev_ops_report/show/vue3_migration.yml with status: rollout

No JavaScript or controller changes are needed.

Scope note: the admin DevOps Report page also loads the CE bundle app/assets/javascripts/pages/admin/dev_ops_report/index.js (DevOps Score). That bundle intentionally stays on Vue 2 for now: compat hybrid mode supports Vue 2 and Vue 3 apps on the same page, so no vue3_migration.yml is added for the CE bundle.

How to verify

  1. Enable the feature flag: Feature.enable(:vue3_migrate_devops_adoption)
  2. Navigate to a group's DevOps adoption page (Analyze > DevOps adoption, /groups/<group>/-/analytics/devops_adoption)
  3. Open the browser console and confirm the message: [gitlab] [V] Using Vue.js 3
  4. Verify the Dev, Sec, and Ops adoption tables render, and add and remove a sub-group or project from the table
  5. Navigate to the admin DevOps Report page (Admin area > Analytics > DevOps Reports, /admin/dev_ops_reports) and confirm the same console message
  6. Verify the Adoption tab renders alongside the DevOps Score tab

Existing test coverage for the DevOps adoption pages

For visibility while this rollout is in flight: what is and is not covered for these pages today, independent of the Vue 3 mechanism.

Frontend unit tests (Jest), ee/spec/frontend/analytics/devops_reports/devops_adoption/

  • components/devops_adoption_app_spec.js covers the top-level app: fetching group data via GraphQL (fetch once, error handling with Sentry, refetching on search), enabling a namespace via mutation (variables, cache updates, error handling), table data polling, and the tab layout (Overview tab, per-section adoption tabs, the add dropdown as the last tab, tab click tracking, and the DevOps Score tab shown at admin level but not at group level).
  • components/devops_adoption_section_spec.js covers a report section: loading state, table and header with enabled namespace data, empty state, header timestamp, and the add groups dropdown.
  • components/devops_adoption_table_spec.js covers the main table: headings and helper tooltips, the name cell (group link, "This group" badge, pending state), per-column cell flags, the actions cell and delete modal integration, and sorting with local storage persistence.
  • components/devops_adoption_overview_spec.js covers the overview container: header, overview cards and data passthrough, overview table, chart visibility at group level, card title click events, and loading state.
  • components/devops_adoption_overview_table_spec.js covers the overview table: headings, the name cell (including relative URLs), per-column progress bars, delete modal events, and sort persistence.
  • components/devops_adoption_overview_card_spec.js covers the overview card: icon, title, progress bar, description, and meta rows.
  • components/devops_adoption_overview_chart_spec.js covers the overview chart: rendering, computed series data, loading state, and tooltip content (snapshot).
  • components/devops_adoption_add_dropdown_spec.js covers the add/enable dropdown: disabled state and tooltip, group versus instance variants, enabling and disabling namespaces (including multi-select), Sentry error handling, loading state, and search.
  • components/devops_adoption_delete_modal_spec.js covers the delete modal: confirmation message, submit states, successful removal (mutation variables, emitted events, modal close), and Sentry error handling.
  • components/devops_adoption_empty_state_spec.js and components/devops_adoption_table_cell_flag_spec.js cover the empty state and the enabled/disabled cell flag (snapshots).
  • graphql/resolvers_spec.js covers the client-side GraphQL resolvers for fetching groups and subgroups.
  • utils/cache_updates_spec.js and utils/helpers_spec.js cover the Apollo cache updates for adding and removing enabled namespaces, plus shouldPollTableData, getAdoptedCountsByCols, and getGroupAdoptionPath.

For the CE DevOps Score tab (which stays on Vue 2), spec/frontend/analytics/devops_reports/components/service_ping_disabled_spec.js covers the Service Ping disabled empty state.

scripts/frontend/quarantined_vue3_specs.txt is currently empty, so all of these suites run and must pass in both the jest (Vue 2) and jest vue3 (@vue/compat) CI jobs.

Backend

  • ee/spec/requests/groups/analytics/devops_adoption_controller_spec.rb (GET show) covers authorization (403 without view_group_devops_adoption, access for auditors and group maintainers), license availability, rendering, and usage event tracking.
  • ee/spec/controllers/admin/dev_ops_report_controller_spec.rb covers show_adoption? (license and usage ping variants) and #show with DevOps adoption available versus unavailable.
  • spec/controllers/admin/dev_ops_report_controller_spec.rb (CE) covers show_adoption? being false and GET #show (success for admins, 404 for regular users).
  • GraphQL specs cover the page's data layer: ee/spec/requests/api/graphql/analytics/devops_adoption/enabled_namespaces_spec.rb (the table data query), ee/spec/graphql/resolvers/analytics/devops_adoption/enabled_namespaces_resolver_spec.rb (authorization at instance and group level), and ee/spec/requests/api/graphql/mutations/analytics/devops_adoption/enabled_namespaces/{enable,bulk_enable,disable}_spec.rb (the mutations behind the add dropdown and delete modal).

Feature specs (Capybara)

  • ee/spec/features/admin/admin_dev_ops_reports_spec.rb (:js) covers the admin page with an Ultimate license: the tabbed layout, defaulting to the Overview tab, tab content and ?tab= URL behavior, the DevOps Score tab states (usage ping disabled, no data, with data), and the fallback without a license.
  • spec/features/admin/admin_dev_ops_reports_spec.rb (CE, :js) covers the DevOps Score empty states and the score app when data exists.
  • ee/spec/features/groups/navbar_spec.rb asserts the "DevOps adoption" nav item appears under Analyze when licensed (navigation only).

Not covered

  • No feature/system spec exercises the group DevOps adoption page itself beyond the nav item check.
  • No QA/E2E spec covers these pages (qa/qa/ee/page/group/sub_menus/analyze.rb has a go_to_devops_adoption navigation helper, but no spec uses it).

References

Merge request reports