feat: Add a featured sort option for CatalogItems and paginate

[machikoyasuda]

closes #4983
closes #5004

Currently, the catalogItems query returns a tag's products in order by newest products first. Now that the operator tag management tool is finished and deployed, a developer should be able to query for a tag's catalogItems in the order set in a tag. This ticket modifies the query to add a featured as a sorting option, and also makes featured the default option.

Technical specs

• adds a featured to CatalogItemSortByField
• adds a catalogItemsAggregate() method to the catalogItems() resolver that returns catalogItems in the order of its tag's featuredProductIds, passed through to getPaginatedAggregateResponse
• fixes getPaginatedAggregateResponse() and applyPaginationToMongoAggregation() to so that catalogItems and productsByTagId queries paginate correctly
• adds integration specs ✨ for catalogItems query
• adds integration specs ✨ for productsByTagId query

Test cases:

• Test tag with fewer than 20 products
• Test tag with more than 20 products, on first page
• Test tag with more than 20 products, on middle pages
• Test tag with more than 20 products, on last page
• Test tag with more than 20 products, going back to first page using after
• Test tag with 0 featuredProductIds
• Test on StarterKit
• Test on Admin

Testing

After this ticket is merged, reactioncommerce/example-storefront#498 can be tested and merged to display the products in the Starter-Kit with this query with the featured sorting option. This Starter Kit PR can also be used to test both the front-end and back-end:

1. Log in as Admin
2. Go to http://localhost:3000/operator/tags/
3. Choose a tag to edit http://localhost:3000/operator/tags/edit/cmVhY3Rpb24vdGFnOnJwakN2VEJHamhCaTJ4ZHJv
4. Make the last product show up first by adding 0 to the Priority column. Save.
5. View the tag on http://localhost:4000/tag/shop

Test on GraphQL with a query variable: "slugOrId": "shop".

First, confirm a Tag's featuredProductIds with this query for a tag,

query getTagId($slugOrId: String!) {
  tag(slugOrId:$slugOrId) {
    _id
    name
    featuredProductIds
    displayTitle
    slug
  }
}

You should get something like:

{
  "data": {
    "tag": {
      "_id": "cmVhY3Rpb24vdGFnOnJwakN2VEJHamhCaTJ4ZHJv",
      "name": "Shop",
      "featuredProductIds": [
        "J4FquyjPnvTyw6kQA",
        "BCTMZ6HTxFSppJESk",
        "i7mbZ62dcwtnN8chF"
      ],
      "displayTitle": "Test Display Title",
      "slug": "shop"
    }
  }
}

Then, pass featured into the catalogItems query:

query catalogItems($shopIds: [ID]!, $tagIds: [ID]) {
  catalogItems(shopIds: $shopIds, tagIds:$tagIds, sortBy:featured) {
    totalCount
    pageInfo {
      hasNextPage
      hasPreviousPage
    }
    nodes {
      ... on CatalogItemProduct {
        product {
          title
          slug
        }
      }
    }
  }
}

This query should return the products in order of featuredProductIds.

Example

1. Featured Croakies and One by Optic to the 0 and 1 spots in Admin:

2. Sorted by featured-desc in Starter Kit:

[mikemurray]

admin panel mis-represents order of items. The catalogItems query updates need to be readapted for the admin panel, either in this PR or in another.

[rosshadden]

👍

[mikemurray]

• Products pagination in tag admin works
• Query results for catalogItems are in correct order and seem to paginate correctly

Soooo... lgtm 👍

[machikoyasuda]

Thank youuuu @rosshadden + @mikemurray + @aldeed !