Render the DevOps adoption table before its data loads

What does this MR do and why?

Fixes an uncaught TypeError on the DevOps adoption page (Admin > Analytics > DevOps adoption, and the group DevOps adoption page). EE only.

devops_adoption_overview.vue passes :data="data" to the table component ee/app/assets/javascripts/analytics/devops_reports/devops_adoption/components/devops_adoption_overview_table.vue. The data prop defaults to an empty object and stays empty until the enabled-namespaces Apollo query resolves. The overview's own computed already guards with this.data.nodes?.some(...).

The table's formattedData computed ran this.data.nodes.map(...) without a guard. With an empty object that threw Uncaught TypeError: Cannot read properties of undefined (reading 'map') during the first render. The page is migrated to Vue 3, where a throw inside a computed during render is not swallowed the way Vue 2 did it, so it appears in the console as an uncaught error.

In CI this logged the error in 13 examples of ee/spec/features/admin/admin_dev_ops_reports_spec.rb. The same spec file also logged 6 Cannot read properties of null (reading 'emitsOptions') errors from Vue internals while switching tabs. Those most likely come from the failed render leaving a null component instance, so they should disappear with this fix. That is a hypothesis. If they remain after this MR merges, they get their own entry.

Changes made:

  • devops_adoption_overview_table.vue — map over this.data.nodes ?? []
  • devops_adoption_overview_table_spec.js — new block "when the parent has not loaded any data yet" that mounts the table with an empty data object and asserts it does not throw and renders no rows. The createComponent helper now accepts props.

How to set up and validate locally

  1. In GDK with an Ultimate license, sign in as an admin and open Admin > Analytics > DevOps adoption.

  2. Open the DevTools console and reload.

  3. Check there is no reading 'map' TypeError while the page loads.

    DevOps adoption overview rendering with the table
  4. Add a group with the "Add or remove groups" dropdown and check the table renders its row.

  5. Switch between the Dev, Sec, and Ops tabs and check the console stays clean.

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

References

🤖 Generated with Claude Code

Edited by Miguel Rincon

Merge request reports

Loading
Loading