Add pagination and tab counts to Compliance Framework Labels list view

Based on the designs/discussions in the discovery issue and backend issue, this issue is to handle the possibility that the GraphQL endpoint returns more than one pages worth of content. This should also factor in updating the tab counts to either make use of the count field if it exists or apply an xx+ style if the hasNextPage or hasPrevPage is present.

Note: Pagination is not part of the existing designs so this will need to be added using https://gitlab-org.gitlab.io/gitlab-ui/?path=/story/base-pagination--compact minus the Page x of x text

Mockups

Settings___General__New_label_

Tier

The ability to create/edit/assign custom compliance labels is a GitLab Ultimate feature.

Feature flag

This feature should only be shown if the feature flag :ff_custom_compliance_frameworks is set

Implementation plan

  • Check for the existence of the count field in GraphQL if it exists, use to populate the All tabs count
  • Update tabs in ee/app/assets/javascripts/groups/settings/compliance_framework_labels/components/list.vue to count the results of each tab section and add to the badge count
  • If hasNextPage or hasPrevPage exists in pageInfo then show a + next to the counts
  • If hasNextPage or hasPrevPage exists then show GlPagination in compact mode below the listing
  • Update the GraphQL queries to fetch on pagination the next set of results
  • Update tests
Edited by Robert Hunt