Skip to content

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:

  1. Prevent component destruction on page transitions via assigning index as a key for environment-item components
  2. 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.

  1. Enable a feature toggle:
Feature.enable(:environments_folder_new_look)
  1. 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
3. Navigate to `Environments` page 4. Expand an environment folder and click `Show All` link Screenshot_2023-11-16_at_12.33.44 6. Check that the new folder page contains environments located in that folder and has `Active` and `Stopped` tabs. 7. Interact with the pagination, check that query parameters remain consistent (for example, `scope` parameter)

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

Edited by Andrei Zubov

Merge request reports