Frontend: Add pagination option in the variable list

Overview

In the discussion #380873 (comment 1237370652)

Currently, the CI variables list is an infinite list of items. We fetch up to 1.5k variables in one query (ouch!) and then the user has to scroll through this blob to reach any of the action buttons at the bottom of the list.

And we noticed that the list is growing without a pagination option - which is not a good user experience. If a user has more than 20 variables, they need to scroll down to see the action buttons (add a variable / reveal values)

Proposal

We could consider having pagination below the list.

• Details: From the issue #388953 (closed) What we want instead is to load the first 20 variables and add the pages button. Since we can sort alphabetically, we want the API ability to sort variables so that if a user changes pages, we keep going forward in the sorted order.

Design

• Iteration 1
  • Adding pagination #388827[Proposal_388827.png]
• Iteration 2:
  • Adding filters #388827[Proposal_388827-filter.png]
• 🔗 Figma spec
• 📖 Storybook pagination
• 🧦 Pajamas guideline - pagination behavior