Add search functionality to add-on users list

What does this MR do and why?

Adds search functionality to add-on users list on Code Suggestions tab on Usage Quotas page. The changes are behind a feature flag.

• Created a new component for search and sort to make it extensible to add more search options if needed in the future.

This MR only adds search functionality, sort functionality to be implemented in a follow-up MR.

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	!132076 (merged)
Add search functionality to add-on user list	👈 You are here
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

Screenshots are required for UI changes, and strongly recommended for all other merge requests.

Before	After
Search bar	Screenshot
Search results	Screenshot
Search with less than 3 characters	Screenshot
Search functionality	Screenshot Screen_Recording_2023-09-26_at_12.29.49_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: Search_resolver_for_add_on_users.patch

The patch will return a mock user list and upon search, it will return the first user from the list with no pagination.

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.