Frontend: Use next/prev pagination in inventory

What does this MR do and why?

Frontend: Use next/prev pagination in inventory

Replace "Load more" pagination with "Previous / Next" pagination
Subgroups should be listed first, followed by projects
while keeping the pages exactly 20 items each

Changelog: changed
EE: true

Why?

We want to list all of a group's subgroups and projects in one place, but we also want the pages to be finite so that the expectations of bulk selection are clearer (using the select all checkbox selects the current page, one page at a time).

We already made a few attempts to do this on the backend: Unify subgroups and projects pagination on the ... (#578876 - closed), but none of them worked well enough, so we're doing it on the frontend instead.

How?

1. initially request twenty subgroups and twenty projects
2. combine the subgroups and projects into one array (subgroups first)
3. if this array is larger than twenty items:
   1. display the correct twenty items (the first twenty if going in the "next" direction, the last twenty if going in the "prev" direction)
   2. re-request the correct number of items
4. once this array has twenty items or fewer:
   1. store the cursors to use for the next "next" or "prev" action

References

• backend issue: Unify subgroups and projects pagination on the ... (#578876 - closed)
• epic: Security Inventory (beta) (gitlab-org#16484)
• design issue: Design: Group-level Security Inventory (MVC) (#514340 - closed)
• pagination documentation 📓
  • https://design.gitlab.com/components/pagination/
  • https://design-system-pages-2b622b.gitlab.io/storybook/?path=/docs/base-keyset-pagination--docs
  • https://www.apollographql.com/docs/react/pagination/cursor-based
  • https://relay.dev/graphql/connections.htm

Screenshots or screen recordings

Before	After
	selection across pages

How to set up and validate locally

1. have a GitLab Ultimate licence loaded
2. go to a group where you have the maintainer role or higher
3. in the sidebar, choose Secure => Security inventory
4. test the pagination:
   1. pages should show 20 items - if you want to test with a smaller page size then set PAGE_SIZE in ee/app/assets/javascripts/security_inventory/constants.js
   2. subgroups should appear first for as many pages as they cover, then projects should appear after them
   3. going back and forth should show the same pages of 20, even if you reach the end and come back
   4. using the select all checkbox should toggle selection of the current page's items
   5. you should still only be able to select up to 100 items at a time
   6. navigating to a subgroup within the inventory should clear the pagination state and the selection
   7. changing the search/filters should clear the pagination state and the selection

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.