Add pages in variable list and preserve sorting order
What does this MR do and why?
In the CI/CD settings / variables, we currently batch load every single variable up to 2k variables and then proceed to display all of them in one long list. This pushes down the action buttons way down in the page and is a overall poor experience. This MR introduces a change to this behaviour behind a feature flag : ci_variables_pages which will only load 20 variables in one go and then display pages control at the bottom of it. This will ensure that the actual page of variables does not take too much vertical space. It will also removes the need to bach load the variables and we will be able to rely more on the natural data flow of apollo.
IMPORTANT: The diff looks big, but it's quite smaller. There is a lot of moving lines around and nesting some tests, so I believe it is small enough to be one MR.
Screenshots or screen recordings
Landing screenshot
| Before | After |
|---|---|
 |
 |
General navigation
| Before | After |
|---|---|
| variable_list_before_pages | variable_list_after_pages |
Sorting
| Before | After |
|---|---|
| variable_list_before_sort | variable_list_after_sort |
How to set up and validate locally
- Enable feature flag:
ci_variables_pages - Go to
Settings => Ci/CD => Variables - Add at least 21 variables
- Refresh
- Notice only 20 are loaded and pages appear for the following ones
- Sort by ASC alphabetical order
- Notice that you are taken back to the first page in alphabetical order
- Go to page 2
- Notice the order continues
- Click on sort by DESC
- Notice you are taken back to page 1
- Notice the variables are sorted in alphabetical DESC order
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.
Related to #388827 (closed)