Skip to content

Environment details vue migration, step 2: pagination

What does this MR do and why?

Describe in detail what your merge request does and why.

This MR is about adding pagination to the environment details page vue app (#385731 (closed)). It is a part of a bigger effort to move the existing environment details page to vue.

In a nutshell the following things were done here:

  1. Add pagination UI and necessary data-fetching adjustments. It is using Keyset Pagination
  2. Since the environment details vue app became quite complex, it was split into smaller components. That also simplified unit testing.
  3. I've realised that the empty page state was not covered in a previous MR, so I've added it here.
  4. In order to improve pagination experience, I've added prefetching for the next and previous page data respectively.

Screenshots or screen recordings

Screenshots are required for UI changes, and strongly recommended for all other merge requests.

Empty state Pagination
Screenshot_2022-12-16_at_18.44.17 Screenshot_2022-12-16_at_18.41.56

How to set up and validate locally

Numbered steps to set up and validate the change are strongly suggested.

  1. Turn the feature toggle on in the rails console:
    Feature.enable(:environment_details_vue)
  2. Navigate to Project -> Environments and click on one of the environments link.
  3. If the environment does not have any deployments, you should be able to see the empty page state
  4. If the environment have any deployments, they will be listed there. If the environment doesn't have any deployments, you would need to create some. To simplify that you could clone this project: https://gitlab.com/andrei.zubov/pipelinestest and run a few deployment pipelines.
  5. In order to see pagination controls, you need to have number of deployments more than the page size, which could be cumbersome to set up. Protip: change the page size constant in app/assets/javascripts/environments/environment_details/constants.js
export const ENVIRONMENT_DETAILS_PAGE_SIZE = 20; // change to it something like 3 to have a better look on pagination feature

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