Extract namespace specific logic into new SaaS component

What does this MR do and why?

This MR is part of the preparatory work to be able to reuse Code Suggestions Usage related components for both SaaS and SM.

This MR extracts namespace specific logic into new SaaS component in Code Suggestions Usage flow

• Creates a new component for SaaS add-on eligible user list which has namespace specific logic and query and display it for SaaS
  • There will be a similar component for SM alongside this file which will be used in SM instance
• Makes existing add-on-eligible-list.vue component more generic
• Update search_and_sort_bar.vue component for optional fullPath
• Renames GQL query props for pagination to be consistent
• Updates and adds tests for the above

More context around this approach can be found here - !138714 (closed)

List of MRs that do the preparatory work for reuse from both flows:

Nr	MR
1	Replace namespace query with instance query to ... (!139025 - merged)
2	Remove redundant cache update logic after addon... (!139170 - merged)
3	Make createHandRaiseLeadPath an optional inject... (!139477 - merged)
4	Extract namespace specific logic into new SaaS ... (!139476 - merged) (Depends on 1) 👈 👈 👈 You are here

Related to #432440

Screenshots or screen recordings

No visual changes are introduced in this MR. Screenshots below are making sure that the existing functionality still works.

Before	After
Pagination	Screenshot Screen_Recording_2023-12-12_at_2.28.44_PM
Search and search input validation	Screenshot Screen_Recording_2023-12-12_at_2.32.53_PM
Add-on eligible users fetch error and error dismissal	Screenshot Screen_Recording_2023-12-12_at_2.34.43_PM
Loading state	Screenshot
No pages state	Screenshot
No users to display	Screenshot

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(:hamilton_seat_management, Namespace.find(your-group-id))

Add-on purchase

Purchase an add-on for the subscription purchased above in Group setup step by following the instructions here (under Add Code Suggestions Add-On to a subscription section).

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.