Add pagination to add-on user list on Code Suggestions tab

What does this MR do and why?

Adds pagination to add-on user list on Code Suggestions tab on Usage Quotas page. Also implements logic to scroll to top of the user table on assignment/un-assignment errors.

The changes are behind a feature flag.

Note:

The API changes to fetch the user list is being implemented in Create add on eligible users GraphQL API (!129203 - merged). In the meantime, we're using client resolvers to resolve the value of addOnEligibleUsers to display the user list on Code Suggestions tab. This will let us deploy frontend code while the API is being implemented. The plan is to remove the client resolvers once the API changes are live.

Related to #421967

MR	Notes
Show add-on eligible user list	!131461 (merged)
Add pagination to add-on user list	👈 You are here
Add search and sort functionality to add-on user list	!132184 (merged)
Update cache with latest add-on assignment status on assignment mutation	🚧
Remove client resolvers and use the API to fetch eligible users list	🚧

Screenshots or screen recordings

Scenario	Screenshot
Pagination	Screenshot Screen_Recording_2023-09-19_at_2.35.56_PM
Scroll to top on error	Screenshot Screen_Recording_2023-09-19_at_2.34.34_PM

How to set up and validate locally

Application setup

1. Customers Dot needs to be setup in order to view the billing page for a group
2. Start GDK in SaaS mode GITLAB_SIMULATE_SAAS=1 gdk start

Group setup

1. Create a Group
2. Buy a Subscription for your group from Settings > Billing

Feature flag

Run the following in your rails console

Feature.enable(:enable_hamilton_in_usage_quotas_ui, Namespace.find(your-group-id)

Feature.enable(:hamilton_seat_management, Namespace.find(your-group-id)

Add-on purchase

Run the following in your rails console

1. Find the namespace

namespace = Namespace.find(your-group-id)

2. Create an Addon

add_on = GitlabSubscriptions::AddOn.find_or_create_by!(name: "code_suggestions") {|e| e.description = "Test"}

3. Create an add-on purchase

GitlabSubscriptions::AddOnPurchase.create!(add_on: add_on, namespace: namespace, expires_on: 1.month.from_now, quantity: 20, purchase_xid: 'A-S0001')

Client resolvers for add-on user list

1. Apply patch to resolve user list locally on Client side: Paginated_Add_On_Users.patch

Code Suggestions tab

1. Visit /groups/<your-namespace-name>/-/usage_quotas#code-suggestions-usage-tab

MR acceptance checklist

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

• I have evaluated the MR acceptance checklist for this MR.