Add UserOverridesList component with data fetching and pagination

What does this MR do and why?

Adds a draft per-user budget cap overrides list on the Credit Caps page. This MR focuses on API integration, error handling and pagination.

MR series

# MR Status
1 Add UserOverridesList component with data fetching and pagination ✅ This MR
2 Add read-only table with editable inputs and toggles TBC ⏳
3 Add Save and Remove buttons with mutation TBC ⏳
4 Add no-op "Add override" button TBC ⏳

References

Screenshots or screen recordings

before after
Screenshot_2026-08-31_at_12.31.18 Screenshot_2026-08-28_at_19.17.16

How to set up and validate locally

Prerequisites: self-managed GitLab instance with the Credits Dashboard enabled. .

  1. Enable SM

  2. Open /-/graphql-explorer

  3. Find some user's Global IDs

query {
  users { # OR users(usernames: ["alice.smith"])
    nodes {
      id
      name
      username
    }
  }
}
  1. Create a per-user cap override for the found users (can use gid://gitlab/User/1 for admin)
mutation ($overrides: UpsertUserBudgetCapOverridesInput!) {
  upsertUserBudgetCapOverrides(input: $overrides) {
    userOverrides {
      cap
      capEnabled
      user {
        username
      }
    }
    errors
  }
}

with variables:

{
  "overrides": {
    "overrides": [
      {
        "userId": "gid://gitlab/User/1",
        "cap": 20,
        "enabled": true
      }
    ]
  }
}
  1. Open http://localhost:3000/admin/gitlab_credits_dashboard/credit_caps
  2. Verify that new records show-up in the JSON output

Alternatively

  1. Start Storybook yarn storybook:start
  2. Verify these stories work:

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 Kos Palchyk

Merge request reports

Loading
Loading