Expand supported number projects on Environments Dashboard by adding pagination

Problem to solve.

Currently, the results on the Environment/Operation dashboard are limited to 7 projects with 3 environments. This means the dashboards are not very usable for organizations that are looking to manage many deployments from the dashboard.

See relevant discussion at #33609 (comment 229333878)

Intended users

• Sasha (Software Developer)
• Delaney (Development Team Lead)
• Rachel (Release Manager)

User experience goal

As a user managing 100s of deployments, I want to be able to see my active environments on the environments dashboard. I should be able to add more projects to the current view.

Proposal

frontend

• Lists with more than 20 items require pagination which is always located below the list and takes the form of a button group.
• If a list has less than 20 items, the pagination should not be shown.
• The gitlab-ui pagination component should be used https://gitlab.com/gitlab-org/gitlab-ui/tree/master/components/base/pagination
  • The component should comply with the existing Pajamas (design system) guidelines https://design.gitlab.com/components/pagination
  • In case UX issues are identified, they should generate UX debt or ~enhancement for the component:pagination

backend

• Add backend pagination with response headers to be consumed by frontend (e.g. https://gitlab.com/gitlab-org/gitlab/-/blob/8a7fe44ead1533d70d781ba3b09770892bc1675b/app/assets/javascripts/vue_shared/components/pagination/table_pagination.vue#L37)

1. add pagination with default per_page = 7 (weight = 1)
2. change per_page to 20 behind the feature flag (weight = 2)

Permissions and Security

• Members with no access (0) should not be able to view dashboard
• Guest (10) members should not be able to add to the dashboard
• Reporter (20) members should not be able to add to the dashboard
• Developer (30) members should not be able to add to the dashboard
• Maintainer (40) members should able to add, remove and change projects on the dashboard
• Owner (50) members should able to add, remove and change projects on the dashboard

What is the type of buyer?

GitLab Premium , as the Environments Dashboard is premium