feat(clerk-js): Implement server-side pagination and filtering for API keys (#6453)

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

Author: wobsoriano

.changeset/bright-papayas-accept.md

@@ -0,0 +1,6 @@
+---
+"@clerk/clerk-js": minor
+"@clerk/shared": minor
+---
+
+Implemented server-side pagination and filtering for API keys

integration/testUtils/usersService.ts

@@ -200,7 +200,7 @@ export const createUserService = (clerkClient: ClerkClient) => {
 
       const apiKey = await clerkClient.apiKeys.create({
         subject: userId,
-        name: `Integration Test - ${userId}`,
+        name: `Integration Test - ${faker.string.uuid()}`,
         secondsUntilExpiration: TWENTY_MINUTES,
       });
 

integration/tests/machine-auth/component.test.ts

@@ -66,6 +66,70 @@ testAgainstRunningApps({
     await expect(u.page.locator('.cl-apiKeysTable .cl-tableBody .cl-tableRow')).toHaveCount(2);
   });
 
+  test('pagination works correctly with multiple pages', async ({ page, context }) => {
+    const u = createTestUtils({ app, page, context });
+
+    // Create user and 11 API keys to trigger pagination (default perPage is 10)
+    const fakeUser = u.services.users.createFakeUser();
+    const bapiUser = await u.services.users.createBapiUser(fakeUser);
+    const fakeAPIKeys = await Promise.all(
+      Array.from({ length: 11 }, () => u.services.users.createFakeAPIKey(bapiUser.id)),
+    );
+
+    await u.po.signIn.goTo();
+    await u.po.signIn.waitForMounted();
+    await u.po.signIn.signInWithEmailAndInstantPassword({ email: fakeUser.email, password: fakeUser.password });
+    await u.po.expect.toBeSignedIn();
+
+    await u.po.page.goToRelative('/api-keys');
+    await u.po.apiKeys.waitForMounted();
+
+    // Verify first page
+    await expect(u.page.getByText(/Displaying 1 – 10 of 11/i)).toBeVisible();
+    await expect(u.page.locator('.cl-apiKeysTable .cl-tableBody .cl-tableRow')).toHaveCount(10);
+
+    // Navigate to second page
+    const page2Button = u.page.locator('.cl-paginationButton').filter({ hasText: /^2$/ });
+    await page2Button.click();
+    await expect(u.page.getByText(/Displaying 11 – 11 of 11/i)).toBeVisible();
+    await expect(u.page.locator('.cl-apiKeysTable .cl-tableBody .cl-tableRow')).toHaveCount(1);
+
+    // Navigate back to first page
+    const page1Button = u.page.locator('.cl-paginationButton').filter({ hasText: /^1$/ });
+    await page1Button.click();
+    await expect(u.page.getByText(/Displaying 1 – 10 of 11/i)).toBeVisible();
+    await expect(u.page.locator('.cl-apiKeysTable .cl-tableBody .cl-tableRow')).toHaveCount(10);
+
+    // Cleanup
+    await Promise.all(fakeAPIKeys.map(key => key.revoke()));
+    await fakeUser.deleteIfExists();
+  });
+
+  test('pagination does not show when items fit in one page', async ({ page, context }) => {
+    const u = createTestUtils({ app, page, context });
+    await u.po.signIn.goTo();
+    await u.po.signIn.waitForMounted();
+    await u.po.signIn.signInWithEmailAndInstantPassword({ email: fakeAdmin.email, password: fakeAdmin.password });
+    await u.po.expect.toBeSignedIn();
+
+    await u.po.page.goToRelative('/api-keys');
+    await u.po.apiKeys.waitForMounted();
+
+    const apiKeyName = `${fakeAdmin.firstName}-single-page-${Date.now()}`;
+    await u.po.apiKeys.clickAddButton();
+    await u.po.apiKeys.waitForFormOpened();
+    await u.po.apiKeys.typeName(apiKeyName);
+    await u.po.apiKeys.selectExpiration('1d');
+    await u.po.apiKeys.clickSaveButton();
+
+    await u.po.apiKeys.waitForCopyModalOpened();
+    await u.po.apiKeys.clickCopyAndCloseButton();
+    await u.po.apiKeys.waitForCopyModalClosed();
+    await u.po.apiKeys.waitForFormClosed();
+
+    await expect(u.page.getByText(/Displaying.*of.*/i)).toBeHidden();
+  });
+
   test('can revoke api keys', async ({ page, context }) => {
     const u = createTestUtils({ app, page, context });
     await u.po.signIn.goTo();

packages/clerk-js/src/core/modules/apiKeys/index.ts

@@ -3,12 +3,14 @@ import type {
   ApiKeyJSON,
   APIKeyResource,
   APIKeysNamespace,
+  ClerkPaginatedResponse,
   CreateAPIKeyParams,
   GetAPIKeysParams,
   RevokeAPIKeyParams,
 } from '@clerk/shared/types';
 
 import type { FapiRequestInit } from '@/core/fapiClient';
+import { convertPageToOffsetSearchParams } from '@/utils/convertPageToOffsetSearchParams';
 
 import { APIKey, BaseResource } from '../../resources/internal';
 
@@ -35,23 +37,24 @@ export class APIKeys implements APIKeysNamespace {
     };
   }
 
-  async getAll(params?: GetAPIKeysParams): Promise<APIKeyResource[]> {
-    return BaseResource.clerk
-      .getFapiClient()
-      .request<{ api_keys: ApiKeyJSON[] }>({
-        ...(await this.getBaseFapiProxyOptions()),
-        method: 'GET',
-        path: '/api_keys',
-        search: {
-          subject: params?.subject ?? BaseResource.clerk.organization?.id ?? BaseResource.clerk.user?.id ?? '',
-          // TODO: (rob) Remove when server-side pagination is implemented.
-          limit: '100',
-        },
-      })
-      .then(res => {
-        const apiKeysJSON = res.payload as unknown as { api_keys: ApiKeyJSON[] };
-        return apiKeysJSON.api_keys.map(json => new APIKey(json));
-      });
+  async getAll(params?: GetAPIKeysParams): Promise<ClerkPaginatedResponse<APIKeyResource>> {
+    return BaseResource._fetch({
+      ...(await this.getBaseFapiProxyOptions()),
+      method: 'GET',
+      path: '/api_keys',
+      search: convertPageToOffsetSearchParams({
+        ...params,
+        subject: params?.subject ?? BaseResource.clerk.organization?.id ?? BaseResource.clerk.user?.id ?? '',
+        query: params?.query ?? '',
+      }),
+    }).then(res => {
+      const { data: apiKeys, total_count } = res as unknown as ClerkPaginatedResponse<ApiKeyJSON>;
+
+      return {
+        total_count,
+        data: apiKeys.map(apiKey => new APIKey(apiKey)),
+      };
+    });
   }
 
   async create(params: CreateAPIKeyParams): Promise<APIKeyResource> {

packages/clerk-js/src/ui/components/ApiKeys/ApiKeyModal.tsx renamed to packages/clerk-js/src/ui/components/ApiKeys/APIKeyModal.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import { Modal } from '@/ui/elements/Modal';
 import type { ThemableCssProp } from '@/ui/styledSystem';
 
-type ApiKeyModalProps = React.ComponentProps<typeof Modal> & {
+type APIKeyModalProps = React.ComponentProps<typeof Modal> & {
   modalRoot?: React.MutableRefObject<HTMLElement | null>;
 };
 
@@ -33,7 +33,7 @@ const getScopedPortalContainerStyles = (modalRoot?: React.MutableRefObject<HTMLE
   ];
 };
 
-export const ApiKeyModal = ({ modalRoot, containerSx, ...modalProps }: ApiKeyModalProps) => {
+export const APIKeyModal = ({ modalRoot, containerSx, ...modalProps }: APIKeyModalProps) => {
   return (
     <Modal
       {...modalProps}

packages/clerk-js/src/ui/components/ApiKeys/ApiKeysTable.tsx renamed to packages/clerk-js/src/ui/components/ApiKeys/APIKeysTable.tsx

@@ -19,7 +19,7 @@ import { ThreeDotsMenu } from '@/ui/elements/ThreeDotsMenu';
 import { mqu } from '@/ui/styledSystem';
 import { timeAgo } from '@/ui/utils/timeAgo';
 
-export const ApiKeysTable = ({
+export const APIKeysTable = ({
   rows,
   isLoading,
   onRevoke,