Show non-billable usage in GitLab Credits usage by user

Sheldon Ledrequested to merge
633154-usage-by-user-non-billable-credits-fe into master

What does this MR do and why?

The Total usage card on the GitLab Credits dashboard counts billable plus non-billable usage, but Usage by user and the user drill-down showed billable usage only, so the rows didn't add up to the card.

!265548 (merged) exposes the user's non-billable credits as nonBillableCreditsUsed on GitlabSubscriptionUsageUserUsage. This MR is the frontend half:

  • Usage by user: each row shows billable + non-billable credits (users_list.vue). Users whose only usage is non-billable, which the backend MR now lists, show their non-billable total instead of 0.
  • User drill-down: the total credits used card adds the non-billable credits so it matches the user's row (users/show/app.vue).
  • Both queries select the field with @gl_introduced(version: "19.6.0"), so a backend without it nulls the field and the UI shows billable usage only.
  • Jest specs and mock data.

!265548 (merged) is merged; this MR targets master. Merge only after the backend has fully rolled out on GitLab.com: deploys are rolling, so a frontend that selects the field earlier could reach a node that doesn't serve it yet. @gl_introduced covers self-managed version skew, not that window.

This is change E (frontend) of the plan in #633154 (comment 4099142904). Docs follow in F.

Not changed here: the drill-down event log and flow type filter stay billable-only (follow-up G). The default sort still comes from CustomersDot's wallet debits, so promo-only users sort last.

References

Screenshots or screen recordings

Before After
Screenshot_2026-10-28_at_08.33.00 Screenshot_2026-10-28_at_08.35.06

How to set up and validate locally

  1. Check out this branch (!265548 (merged) is in master) and https://gitlab.com/gitlab-org/customers-gitlab-com/-/merge_requests/17683 (merged) in your local CustomersDot.

  2. Set up GDK in SaaS mode with that CustomersDot, as in "How to set up and validate locally" in !260725 (merged).

  3. In CustomersDot, seed one user with billable and non-billable Orbit usage and another with non-billable usage only, then enrich and consume:

    bin/populate_usage_data -r 20 --realm SaaS --root-namespace-id <id> --user-id <user_a> --feature-qualified-name orbit_mcp --team-member --skip-reason promo
bin/populate_usage_data -r 20 --realm SaaS --root-namespace-id <id> --user-id <user_a> --feature-qualified-name orbit_rest
bin/populate_usage_data -r 20 --realm SaaS --root-namespace-id <id> --user-id <user_b> --feature-qualified-name orbit_mcp --team-member --skip-reason promo

  4. Visit /groups/<group>/-/settings/gitlab_credits_dashboard and open Usage by user.

  5. User A's row shows billable + non-billable credits; user B (promo only) shows their non-billable total. The rows add up to the Total usage card.

  6. Open user A: the total credits used card matches the row.

  7. Apply a Products filter: the per-user figures follow the filter.

MR acceptance checklist

Evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.

Edited by Sheldon Led

Merge request reports