fix: Pagination not working on Client Keys page

static/app/views/settings/project/projectKeys/list/index.spec.tsx

@@ -255,4 +255,52 @@ describe('ProjectKeys', () => {
       })
     );
   });
+
+  it('shows pagination when there are multiple pages', async () => {
+    const response = {
+      url: `/projects/${organization.slug}/${project.slug}/keys/`,
+      method: 'GET',
+      body: projectKeys,
+      headers: {
+        Link:
+          `<http://localhost/api/0/projects/${organization.slug}/${project.slug}/keys/?cursor=2:0:0>; rel="next"; results="true"; cursor="2:0:0",` +
+          `<http://localhost/api/0/projects/${organization.slug}/${project.slug}/keys/?cursor=1:0:0>; rel="previous"; results="false"; cursor="1:0:0"`,
+      },
+    };
+
+    MockApiClient.addMockResponse({
+      ...response,
+      match: [MockApiClient.matchQuery({cursor: undefined})],
+    });
+
+    const nextResponse = MockApiClient.addMockResponse({
+      ...response,
+      match: [MockApiClient.matchQuery({cursor: '2:0:0'})],
+    });
+
+    const {router} = render(<ProjectKeys project={ProjectFixture()} />, {
+      initialRouterConfig,
+    });
+
+    const nextButton = await screen.findByRole('button', {name: 'Next'});
+    expect(screen.getByRole('button', {name: 'Previous'})).toBeDisabled();
+
+    await userEvent.click(nextButton);
+
+    await waitFor(() => {
+      expect(router.location.query.cursor).toBe('2:0:0');
+    });
+
+    expect(nextResponse).toHaveBeenCalled();
+  });
+
+  it('hides pagination when there is none', async () => {
+    render(<ProjectKeys project={ProjectFixture()} />, {
+      initialRouterConfig,
+    });
+
+    await screen.findByRole('heading', {name: 'Client Keys'});
+    expect(screen.queryByRole('button', {name: 'Previous'})).not.toBeInTheDocument();
+    expect(screen.queryByRole('button', {name: 'Next'})).not.toBeInTheDocument();
+  });
 });

static/app/views/settings/project/projectKeys/list/index.tsx

@@ -18,6 +18,7 @@ import {IconAdd, IconFlag} from 'sentry/icons';
 import {t, tct} from 'sentry/locale';
 import type {Project, ProjectKey} from 'sentry/types/project';
 import {useApiQuery, useMutation} from 'sentry/utils/queryClient';
+import {decodeScalar} from 'sentry/utils/queryString';
 import useApi from 'sentry/utils/useApi';
 import {useLocation} from 'sentry/utils/useLocation';
 import useOrganization from 'sentry/utils/useOrganization';
@@ -49,9 +50,20 @@ function ProjectKeys({project}: Props) {
     isError,
     refetch,
     getResponseHeader,
-  } = useApiQuery<ProjectKey[]>([`/projects/${organization.slug}/${projectId}/keys/`], {
-    staleTime: 0,
-  });
+  } = useApiQuery<ProjectKey[]>(
+    [
+      `/projects/${organization.slug}/${projectId}/keys/`,
+      {
+        query: {
+          cursor: decodeScalar(location.query.cursor),
+          per_page: 100,
+        },
+      },
+    ],
+    {
+      staleTime: 0,
+    }
+  );
 
   /**
    * Optimistically remove key