Engineering Discovery: Identify the different usages of "classic" pagination across GitLab

We should identify all usages of the "classic" pagination across GitLab, in Vue and in HAML/Ruby, in order to change every implementation to match the design system.

Vue

In Vue components, the pagination-links component has already been updated to use GitLab UI's pagination, which covers most use cases.

Uncovered cases:

  • app/assets/javascripts/vue_shared/components/pagination/graphql_pagination.vue: Pagination Component for graphql API, this component has its own implementation and does not support numbered items, it only show prev/next buttons
  • ee/app/assets/javascripts/design_management/components/toolbar/pagination.vue: This component is specific to design management and does not support numbered items
  • app/assets/javascripts/vue_shared/components/pagination/table_pagination.vue: This component uses .gl-pagination styles and is used in multiple components:
    • app/assets/javascripts/commit/pipelines/pipelines_table.vue
    • app/assets/javascripts/environments/components/container.vue
    • app/assets/javascripts/pipelines/components/pipelines.vue
    • app/assets/javascripts/registry/components/table_registry.vue
    • ee/app/assets/javascripts/feature_flags/components/feature_flags.vue

HAML/Ruby

On the HAML/Ruby side, pagination is implemented with Kaminari, a paginator gem. GitLab overrides Kaminari markup in app/views/kaminari/gitlab, we should update this markup to reflect GlPagination's template. This change would impact the following controllers:

  • app/controllers/admin/applications_controller.rb
  • app/controllers/clusters/clusters_controller.rb
  • app/controllers/dashboard/milestones_controller.rb
  • app/controllers/groups/milestones_controller.rb
  • app/controllers/projects/branches_controller.rb
  • app/controllers/projects/registry/tags_controller.rb
  • app/controllers/projects/tags_controller.rb
  • app/controllers/projects/wikis_controller.rb

Kaminari-based pagination will be updated in #33071 (closed)

Edited by Paul Gascou-Vaillancourt