feat(*): add pagination for consumers/<id>/consumer_groups and consumer_groups/<id>/consumers

packages/entities/entities-consumer-groups/docs/consumer-group-list.md

@@ -79,6 +79,12 @@ A table component for consumer groups.
     - default: `null`
     - Current consumer username if the ConsumerGroupList in nested in the consumer groups tab on a consumer detail page.
 
+  - `paginatedEndpoint`:
+    - type: `boolean`
+    - required: `false`
+    - default: `null`
+    - A boolean to indicate if the paginated endpoint is used when `consumerId` is provided.
+
   - `workspace`:
     - type: `string`
     - required: `true`

packages/entities/entities-consumer-groups/sandbox/pages/ConsumerGroupListPage.vue

@@ -67,6 +67,7 @@ const kongManagerConfig = ref<KongManagerConsumerGroupListConfig>({
   workspace: 'default',
   apiBaseUrl: '/kong-manager', // For local dev server proxy
   isExactMatch: false,
+  paginatedEndpoint: true,
   // Uncomment to test Consumer -> Consumer Groups
   // consumerId: import.meta.env.VITE_KONG_MANAGER_CONSUMER_ID,
   // consumerUsername: 'c-1',

packages/entities/entities-consumer-groups/src/components/ConsumerGroupList.cy.ts

@@ -34,6 +34,7 @@ describe('<ConsumerGroupList />', () => {
       workspace: 'default',
       apiBaseUrl: '/kong-manager',
       isExactMatch: false,
+      paginatedEndpoint: true,
       filterSchema: {},
       createRoute: 'create-consumer-group',
       getViewRoute: () => 'view-consumer-group',
@@ -70,12 +71,14 @@ describe('<ConsumerGroupList />', () => {
           method: 'GET',
           url: `${baseConfigKM.apiBaseUrl}/${configConsumerKM.workspace}/consumers/${configConsumerKM.consumerId}/consumer_groups*`,
         },
-        {
-          statusCode: 200,
-          body: {
-            data: params?.mockData ?? [],
-            total: params?.mockData?.length ?? 0,
-          },
+        (req) => {
+          const size = req.query.size ? Number(req.query.size) : 30
+          const offset = req.query.offset ? Number(req.query.offset) : 0
+
+          req.reply({
+            statusCode: 200,
+            body: paginate(params?.mockData ?? [], size, offset),
+          })
         },
       ).as(params?.alias ?? 'getGroups')
     }
@@ -117,8 +120,8 @@ describe('<ConsumerGroupList />', () => {
       ).as(params?.alias ?? 'getConsumerGroupsMultiPage')
     }
 
-    const triggerQuery = '.kong-ui-entities-consumer-groups-list tbody tr [data-testid="dropdown-trigger"]'
-    const exitQuery = '.kong-ui-entities-consumer-groups-list tbody tr [data-testid="action-entity-delete"]'
+    const triggerQuery = '.kong-ui-entities-consumer-groups-list tbody tr:first-child [data-testid="dropdown-trigger"]'
+    const exitQuery = '.kong-ui-entities-consumer-groups-list tbody tr:first-child [data-testid="action-entity-delete"]'
     const modalQuery = 'exit-group-modal'
 
     it('should show empty state and create consumer group cta', () => {
@@ -405,8 +408,8 @@ describe('<ConsumerGroupList />', () => {
 
       cy.wait('@getGroups')
 
-      cy.getTestId('toolbar-add-consumer-group').should('exist')
-      cy.getTestId('toolbar-add-consumer-group').should('contain.text', 'Add to Consumer Group')
+      cy.getTestId('add-to-consumer-group').should('exist')
+      cy.getTestId('add-to-consumer-group').should('contain.text', 'Add to Consumer Group')
     })
 
     it('should render AddToGroupModal onclick Add to Group button when consumerId is provided', () => {
@@ -425,7 +428,7 @@ describe('<ConsumerGroupList />', () => {
 
       cy.wait('@getGroups')
 
-      cy.getTestId('toolbar-add-consumer-group').click()
+      cy.getTestId('add-to-consumer-group').click()
       cy.getTestId('add-to-group-modal').should('exist')
     })
 
@@ -446,7 +449,7 @@ describe('<ConsumerGroupList />', () => {
 
       cy.wait('@getGroups')
 
-      cy.getTestId('toolbar-add-consumer-group').click()
+      cy.getTestId('add-to-consumer-group').click()
       cy.getTestId('add-to-group-modal').should('exist')
 
       cy.get('@vueWrapper').then((wrapper: any) => wrapper.findComponent(AddToGroupModal).vm.$emit('cancel'))
@@ -473,7 +476,7 @@ describe('<ConsumerGroupList />', () => {
 
       cy.wait('@getGroups')
 
-      cy.getTestId('toolbar-add-consumer-group').click()
+      cy.getTestId('add-to-consumer-group').click()
       cy.getTestId('add-to-group-modal').should('exist')
 
       cy.get('@vueWrapper').then((wrapper: any) => wrapper.findComponent(AddToGroupModal).vm.$emit('add:success', expectedData))
@@ -502,7 +505,7 @@ describe('<ConsumerGroupList />', () => {
 
         cy.wait('@getGroups')
 
-        cy.getTestId('toolbar-add-consumer-group').click()
+        cy.getTestId('add-to-consumer-group').click()
         cy.getTestId('add-to-group-modal').should('exist')
 
         cy.get('@vueWrapper').then((wrapper: any) => wrapper.findComponent(AddToGroupModal)
@@ -703,8 +706,7 @@ describe('<ConsumerGroupList />', () => {
         {
           statusCode: 200,
           body: {
-            data: params?.mockData ?? [],
-            total: params?.mockData?.length ?? 0,
+            consumer_groups: params?.mockData ?? [],
           },
         },
       ).as(params?.alias ?? 'getGroups')
@@ -746,8 +748,8 @@ describe('<ConsumerGroupList />', () => {
       ).as(params?.alias ?? 'getConsumerGroupsMultiPage')
     }
 
-    const triggerQuery = '.kong-ui-entities-consumer-groups-list tbody tr [data-testid="dropdown-trigger"]'
-    const exitQuery = '.kong-ui-entities-consumer-groups-list tbody tr [data-testid="action-entity-delete"]'
+    const triggerQuery = '.kong-ui-entities-consumer-groups-list tbody tr:first-child [data-testid="dropdown-trigger"]'
+    const exitQuery = '.kong-ui-entities-consumer-groups-list tbody tr:first-child [data-testid="action-entity-delete"]'
     const modalQuery = 'exit-group-modal'
 
     it('should show empty state and create consumer group cta', () => {
@@ -1034,8 +1036,8 @@ describe('<ConsumerGroupList />', () => {
 
       cy.wait('@getGroups')
 
-      cy.getTestId('toolbar-add-consumer-group').should('exist')
-      cy.getTestId('toolbar-add-consumer-group').should('contain.text', 'Add to Consumer Group')
+      cy.getTestId('add-to-consumer-group').should('exist')
+      cy.getTestId('add-to-consumer-group').should('contain.text', 'Add to Consumer Group')
     })
 
     it('should render AddToGroupModal onclick Add to Group button when consumerId is provided', () => {
@@ -1054,7 +1056,7 @@ describe('<ConsumerGroupList />', () => {
 
       cy.wait('@getGroups')
 
-      cy.getTestId('toolbar-add-consumer-group').click()
+      cy.getTestId('add-to-consumer-group').click()
       cy.getTestId('add-to-group-modal').should('exist')
     })
 
@@ -1075,7 +1077,7 @@ describe('<ConsumerGroupList />', () => {
 
       cy.wait('@getGroups')
 
-      cy.getTestId('toolbar-add-consumer-group').click()
+      cy.getTestId('add-to-consumer-group').click()
       cy.getTestId('add-to-group-modal').should('exist')
 
       cy.get('@vueWrapper').then((wrapper: any) => wrapper.findComponent(AddToGroupModal).vm.$emit('cancel'))
@@ -1102,7 +1104,7 @@ describe('<ConsumerGroupList />', () => {
 
       cy.wait('@getGroups')
 
-      cy.getTestId('toolbar-add-consumer-group').click()
+      cy.getTestId('add-to-consumer-group').click()
       cy.getTestId('add-to-group-modal').should('exist')
 
       cy.get('@vueWrapper').then((wrapper: any) => wrapper.findComponent(AddToGroupModal).vm.$emit('add:success', expectedData))
@@ -1131,7 +1133,7 @@ describe('<ConsumerGroupList />', () => {
 
         cy.wait('@getGroups')
 
-        cy.getTestId('toolbar-add-consumer-group').click()
+        cy.getTestId('add-to-consumer-group').click()
         cy.getTestId('add-to-group-modal').should('exist')
 
         cy.get('@vueWrapper').then((wrapper: any) => wrapper.findComponent(AddToGroupModal)

packages/entities/entities-consumer-groups/src/components/ConsumerGroupList.vue

@@ -2,7 +2,7 @@
   <div class="kong-ui-entities-consumer-groups-list">
     <EntityBaseTable
       :cache-identifier="cacheIdentifier"
-      :disable-pagination="isConsumerPage"
+      :disable-pagination="isConsumerPage && !config.paginatedEndpoint"
       disable-pagination-page-jump
       :disable-sorting="disableSorting"
       :empty-state-options="emptyStateOptions"
@@ -11,7 +11,7 @@
       :fetcher="fetcher"
       :fetcher-cache-key="fetcherCacheKey"
       pagination-type="offset"
-      preferences-storage-key="kong-ui-entities-consumer-groups-list"
+      :preferences-storage-key="preferencesStorageKey"
       :query="filterQuery"
       :row-attributes="rowAttributes"
       :table-headers="tableHeaders"
@@ -275,6 +275,9 @@ const { axiosInstance } = useAxios({
 })
 const fetcherCacheKey = ref<number>(1)
 const isConsumerPage = computed<boolean>(() => !!props.config.consumerId)
+const preferencesStorageKey = computed<string>(
+  () => isConsumerPage.value ? 'kong-ui-entities-consumer-groups-list-in-consumer-page' : 'kong-ui-entities-consumer-groups-list',
+)
 
 /**
  * Table Headers
@@ -338,7 +341,7 @@ const filterConfig = computed<InstanceType<typeof EntityFilter>['$props']['confi
   } as FuzzyMatchFilterConfig
 })
 
-const dataKeyName = computed((): string | undefined => isConsumerPage.value ? 'consumer_groups' : undefined)
+const dataKeyName = computed((): string | undefined => isConsumerPage.value && !props.config.paginatedEndpoint ? 'consumer_groups' : undefined)
 const { fetcher, fetcherState } = useFetcher(props.config, fetcherBaseUrl.value, dataKeyName.value)
 
 const clearFilter = (): void => {

packages/entities/entities-consumer-groups/src/types/consumer-group-list.ts

@@ -12,6 +12,8 @@ export interface BaseConsumerGroupListConfig {
   consumerUsername?: string
   /** Route for creating a consumer group */
   createRoute: RouteLocationRaw
+  /** A boolean to indicate if the paginated endpoint is used when consumerId is provided */
+  paginatedEndpoint?: boolean
   /** A function that returns the route for viewing a consumer group */
   getViewRoute: (id: string) => RouteLocationRaw
   /** A function that returns the route for editing a consumer group */

packages/entities/entities-consumers/docs/consumer-list.md

@@ -79,6 +79,12 @@ A table component for consumers.
     - default: `null`
     - Current consumer group name if the ConsumerList in nested in the consumers tab on a consumer group detail page.
 
+  - `paginatedEndpoint`:
+    - type: `boolean`
+    - required: `false`
+    - default: `null`
+    - A boolean to indicate if the paginated endpoint is used when `consumerGroupId` is provided.
+
   - `workspace`:
     - type: `string`
     - required: `true`

packages/entities/entities-consumers/sandbox/pages/ConsumerListPage.vue

@@ -70,6 +70,7 @@ const kongManagerConfig = ref<KongManagerConsumerListConfig>({
   workspace: 'default',
   apiBaseUrl: '/kong-manager', // For local dev server proxy
   isExactMatch: false,
+  paginatedEndpoint: true,
   createRoute: { name: 'create-consumer' },
   // Uncomment to test Consumer Groups -> Consumers
   // consumerGroupId: import.meta.env.VITE_KONG_MANAGER_CONSUMER_GROUP_ID,

packages/entities/entities-consumers/src/components/ConsumerList.cy.ts

@@ -34,6 +34,7 @@ describe('<ConsumerList />', () => {
       workspace: 'default',
       apiBaseUrl: '/kong-manager',
       isExactMatch: false,
+      paginatedEndpoint: true,
       filterSchema: {},
       createRoute: 'create-consumer',
       getViewRoute: () => 'view-consumer',
@@ -70,12 +71,14 @@ describe('<ConsumerList />', () => {
           method: 'GET',
           url: `${baseConfigKM.apiBaseUrl}/${configGroupKM.workspace}/consumer_groups/${configGroupKM.consumerGroupId}/consumers*`,
         },
-        {
-          statusCode: 200,
-          body: {
-            data: params?.mockData ?? [],
-            total: params?.mockData?.length ?? 0,
-          },
+        (req) => {
+          const size = req.query.size ? Number(req.query.size) : 30
+          const offset = req.query.offset ? Number(req.query.offset) : 0
+
+          req.reply({
+            statusCode: 200,
+            body: paginate(params?.mockData ?? [], size, offset),
+          })
         },
       ).as(params?.alias ?? 'getGroupConsumers')
     }
@@ -117,8 +120,8 @@ describe('<ConsumerList />', () => {
       ).as(params?.alias ?? 'getConsumersMultiPage')
     }
 
-    const triggerQuery = '.kong-ui-entities-consumers-list tbody tr [data-testid="dropdown-trigger"]'
-    const removeQuery = '.kong-ui-entities-consumers-list tbody tr [data-testid="action-entity-delete"]'
+    const triggerQuery = '.kong-ui-entities-consumers-list tbody tr:first-child [data-testid="dropdown-trigger"]'
+    const removeQuery = '.kong-ui-entities-consumers-list tbody tr:first-child [data-testid="action-entity-delete"]'
     const modalQuery = 'remove-consumer-modal'
 
     it('should show empty state and create consumer cta', () => {
@@ -405,7 +408,7 @@ describe('<ConsumerList />', () => {
 
       cy.wait('@getGroupConsumers')
 
-      cy.getTestId('toolbar-add-consumer').should('exist')
+      cy.getTestId('add-consumer').should('exist')
       cy.getTestId('new-consumer').should('not.exist')
     })
 
@@ -425,7 +428,7 @@ describe('<ConsumerList />', () => {
 
       cy.wait('@getGroupConsumers')
 
-      cy.getTestId('toolbar-add-consumer').click()
+      cy.getTestId('add-consumer').click()
       cy.getTestId('add-consumer-modal').should('exist')
     })
 
@@ -446,7 +449,7 @@ describe('<ConsumerList />', () => {
 
       cy.wait('@getGroupConsumers')
 
-      cy.getTestId('toolbar-add-consumer').click()
+      cy.getTestId('add-consumer').click()
       cy.getTestId('add-consumer-modal').should('exist')
 
       cy.get('@vueWrapper').then((wrapper: any) => wrapper.findComponent(AddConsumerModal).vm.$emit('cancel'))
@@ -473,7 +476,7 @@ describe('<ConsumerList />', () => {
 
       cy.wait('@getGroupConsumers')
 
-      cy.getTestId('toolbar-add-consumer').click()
+      cy.getTestId('add-consumer').click()
       cy.getTestId('add-consumer-modal').should('exist')
 
       cy.get('@vueWrapper').then((wrapper: any) => wrapper.findComponent(AddConsumerModal).vm.$emit('add:success', expectedData))
@@ -502,7 +505,7 @@ describe('<ConsumerList />', () => {
 
         cy.wait('@getGroupConsumers')
 
-        cy.getTestId('toolbar-add-consumer').click()
+        cy.getTestId('add-consumer').click()
         cy.getTestId('add-consumer-modal').should('exist')
 
         cy.get('@vueWrapper').then((wrapper: any) => wrapper.findComponent(AddConsumerModal)
@@ -703,8 +706,7 @@ describe('<ConsumerList />', () => {
         {
           statusCode: 200,
           body: {
-            data: params?.mockData ?? [],
-            total: params?.mockData?.length ?? 0,
+            consumers: params?.mockData ?? [],
           },
         },
       ).as(params?.alias ?? 'getGroupConsumers')
@@ -746,8 +748,8 @@ describe('<ConsumerList />', () => {
       ).as(params?.alias ?? 'getConsumersMultiPage')
     }
 
-    const triggerQuery = '.kong-ui-entities-consumers-list tbody tr [data-testid="dropdown-trigger"]'
-    const removeQuery = '.kong-ui-entities-consumers-list tbody tr [data-testid="action-entity-delete"]'
+    const triggerQuery = '.kong-ui-entities-consumers-list tbody tr:first-child [data-testid="dropdown-trigger"]'
+    const removeQuery = '.kong-ui-entities-consumers-list tbody tr:first-child [data-testid="action-entity-delete"]'
     const modalQuery = 'remove-consumer-modal'
 
     it('should show empty state and create consumer cta', () => {
@@ -1034,7 +1036,7 @@ describe('<ConsumerList />', () => {
 
       cy.wait('@getGroupConsumers')
 
-      cy.getTestId('toolbar-add-consumer').should('exist')
+      cy.getTestId('add-consumer').should('exist')
       cy.getTestId('new-consumer').should('not.exist')
     })
 
@@ -1054,7 +1056,7 @@ describe('<ConsumerList />', () => {
 
       cy.wait('@getGroupConsumers')
 
-      cy.getTestId('toolbar-add-consumer').click()
+      cy.getTestId('add-consumer').click()
       cy.getTestId('add-consumer-modal').should('exist')
     })
 
@@ -1075,7 +1077,7 @@ describe('<ConsumerList />', () => {
 
       cy.wait('@getGroupConsumers')
 
-      cy.getTestId('toolbar-add-consumer').click()
+      cy.getTestId('add-consumer').click()
       cy.getTestId('add-consumer-modal').should('exist')
 
       cy.get('@vueWrapper').then((wrapper: any) => wrapper.findComponent(AddConsumerModal).vm.$emit('cancel'))
@@ -1102,7 +1104,7 @@ describe('<ConsumerList />', () => {
 
       cy.wait('@getGroupConsumers')
 
-      cy.getTestId('toolbar-add-consumer').click()
+      cy.getTestId('add-consumer').click()
       cy.getTestId('add-consumer-modal').should('exist')
 
       cy.get('@vueWrapper').then((wrapper: any) => wrapper.findComponent(AddConsumerModal).vm.$emit('add:success', expectedData))
@@ -1131,7 +1133,7 @@ describe('<ConsumerList />', () => {
 
         cy.wait('@getGroupConsumers')
 
-        cy.getTestId('toolbar-add-consumer').click()
+        cy.getTestId('add-consumer').click()
         cy.getTestId('add-consumer-modal').should('exist')
 
         cy.get('@vueWrapper').then((wrapper: any) => wrapper.findComponent(AddConsumerModal)