Implement pagination for folders
What does this MR do and why?
This MR implements #431905 (closed) and is a part of a bigger effort to refactor the Folder
page of Environments
area.
In the scope of this MR we add pagination to the page and also a few performance improvements:
- Prevent component destruction on page transitions via assigning
index
as a key forenvironment-item
components - Preload next/previos pages on page load to improve perceived page navigation speed
Screenshots or screen recordings
Screenshots are required for UI changes, and strongly recommended for all other merge requests.
Video demonstration: 2023-12-08_18-07-15.mkv
How to set up and validate locally
Numbered steps to set up and validate the change are strongly suggested.
- Enable a feature toggle:
Feature.enable(:environments_folder_new_look)
- Navigate to a project that has environments with folders. If you don't have one, use the following gitlab-ci configuration:
Click to expand
deploy:dev/static-files-1:
stage: deploy
script: echo "done"
environment: dev/static-files-1
deploy:dev/static-files-2:
stage: deploy
script: echo "done"
environment: dev/static-files-2
deploy:dev/static-files-3:
stage: deploy
script: echo "done"
environment: dev/static-files-3
deploy:dev/static-files-4:
stage: deploy
script: echo "done"
environment: dev/static-files-4
deploy:dev/static-files-5:
stage: deploy
script: echo "done"
environment: dev/static-files-5
deploy:dev/static-files-6:
stage: deploy
script: echo "done"
environment: dev/static-files-6
deploy:dev/static-files-7:
stage: deploy
script: echo "done"
environment: dev/static-files-7
deploy:dev/static-files-8:
stage: deploy
script: echo "done"
environment: dev/static-files-8
deploy:dev/static-files-9:
stage: deploy
script: echo "done"
environment: dev/static-files-9
deploy:dev/static-files-10:
stage: deploy
script: echo "done"
environment: dev/static-files-10
deploy:dev/static-files-11:
stage: deploy
script: echo "done"
environment: dev/static-files-11
deploy:dev/static-files-12:
stage: deploy
script: echo "done"
environment: dev/static-files-12
deploy:dev/static-files-13:
stage: deploy
script: echo "done"
environment: dev/static-files-13
deploy:dev/static-files-14:
stage: deploy
script: echo "done"
environment: dev/static-files-14
deploy:dev/static-files-15:
stage: deploy
script: echo "done"
environment: dev/static-files-15
deploy:dev/static-files-16:
stage: deploy
script: echo "done"
environment: dev/static-files-16
deploy:dev/static-files-17:
stage: deploy
script: echo "done"
environment: dev/static-files-17
deploy:dev/static-files-18:
stage: deploy
script: echo "done"
environment: dev/static-files-18
deploy:dev/static-files-19:
stage: deploy
script: echo "done"
environment: dev/static-files-19
deploy:dev/static-files-20:
stage: deploy
script: echo "done"
environment: dev/static-files-20
deploy:dev/static-files-21:
stage: deploy
script: echo "done"
environment: dev/static-files-21
deploy:dev/static-files-22:
stage: deploy
script: echo "done"
environment: dev/static-files-22
deploy:dev/static-files-23:
stage: deploy
script: echo "done"
environment: dev/static-files-23
deploy:dev/static-files-24:
stage: deploy
script: echo "done"
environment: dev/static-files-24
deploy:dev/static-files-25:
stage: deploy
script: echo "done"
environment: dev/static-files-25
deploy:dev/static-files-26:
stage: deploy
script: echo "done"
environment: dev/static-files-26
deploy:dev/static-files-27:
stage: deploy
script: echo "done"
environment: dev/static-files-27
deploy:dev/static-files-28:
stage: deploy
script: echo "done"
environment: dev/static-files-28
deploy:dev/static-files-29:
stage: deploy
script: echo "done"
environment: dev/static-files-29
deploy:dev/static-files-30:
stage: deploy
script: echo "done"
environment: dev/static-files-30
deploy:dev/static-files-31:
stage: deploy
script: echo "done"
environment: dev/static-files-31
deploy:dev/static-files-32:
stage: deploy
script: echo "done"
environment: dev/static-files-32
deploy:dev/static-files-33:
stage: deploy
script: echo "done"
environment: dev/static-files-33
deploy:dev/static-files-34:
stage: deploy
script: echo "done"
environment: dev/static-files-34
deploy:dev/static-files-35:
stage: deploy
script: echo "done"
environment: dev/static-files-35
deploy:dev/static-files-36:
stage: deploy
script: echo "done"
environment: dev/static-files-36
deploy:dev/static-files-37:
stage: deploy
script: echo "done"
environment: dev/static-files-37
deploy:dev/static-files-38:
stage: deploy
script: echo "done"
environment: dev/static-files-38
deploy:dev/static-files-39:
stage: deploy
script: echo "done"
environment: dev/static-files-39
deploy:dev/static-files-40:
stage: deploy
script: echo "done"
environment: dev/static-files-40
deploy:stg/static-files-1:
stage: deploy
script: echo "done"
environment: stg/static-files-1
deploy:stg/static-files-2:
stage: deploy
script: echo "done"
environment: stg/static-files-2
deploy:prd/static-files-1:
stage: deploy
script: echo "done"
environment: prd/static-files-1
deploy:prd/static-files-2:
stage: deploy
script: echo "done"
environment: prd/static-files-2
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.
Edited by Andrei Zubov