feat(GlKeysetPagination): Add GlKeysetPagination

What does this MR do?

Adds a GraphQL-friendly pagination component that uses cursors to paginate.

Related issues: #545 (closed), #925 (closed)

Screenshots

Usage

Given a GraphQL query that returns a PageInfo type:

{
  project(fullPath: "gitlab-org/gitlab") {
    releases(first: 5) {
      nodes {
        name
        tagName
      }
      pageInfo {
        startCursor
        endCursor
        hasPreviousPage
        hasNextPage
      }
    }
  }
}

The pageInfo field can be bound directly to this component:

<gl-keyset-pagination v-bind="pageInfo">

Why so minimal?

The pagination information provided by the GraphQL endpoint is very sparse - it only provides four pieces of information:

1. Whether or not there is a previous page (used to enable/disable the Prev button)
2. Whether or not there is a next page (used to enable/disable the Next button)
3. A "cursor" that points to the first item on the page (used when navigating to the previous page)
4. A "cursor" that points to the last item on the page (used when navigating to the next page)

Because of this, it's not possible to render much of the traditional pagination UI (page numbers, first/last buttons, page counts).

For more information on offset pagination vs keyset pagination, see https://docs.gitlab.com/ee/development/graphql_guide/pagination.html.

Pajamas reference

https://design.gitlab.com/components/pagination