Add pagination for certificates table

frontend/src/hooks/api/ca/mutations.tsx

@@ -102,7 +102,7 @@ export const useCreateCertificate = () => {
       return data;
     },
     onSuccess: (_, { projectSlug }) => {
-      queryClient.invalidateQueries(workspaceKeys.getWorkspaceCertificates(projectSlug));
+      queryClient.invalidateQueries(workspaceKeys.forWorkspaceCertificates(projectSlug));
     }
   });
 };

frontend/src/hooks/api/certificates/mutations.tsx

@@ -17,7 +17,7 @@ export const useDeleteCert = () => {
       return certificate;
     },
     onSuccess: (_, { projectSlug }) => {
-      queryClient.invalidateQueries(workspaceKeys.getWorkspaceCertificates(projectSlug));
+      queryClient.invalidateQueries(workspaceKeys.forWorkspaceCertificates(projectSlug));
     }
   });
 };
@@ -37,7 +37,7 @@ export const useRevokeCert = () => {
       return certificate;
     },
     onSuccess: (_, { projectSlug }) => {
-      queryClient.invalidateQueries(workspaceKeys.getWorkspaceCertificates(projectSlug));
+      queryClient.invalidateQueries(workspaceKeys.forWorkspaceCertificates(projectSlug));
     }
   });
 };

frontend/src/hooks/api/workspace/queries.tsx

@@ -48,8 +48,18 @@ export const workspaceKeys = {
     [{ projectSlug }, "workspace-cas"] as const,
   specificWorkspaceCas: ({ projectSlug, status }: { projectSlug: string; status?: CaStatus }) =>
     [...workspaceKeys.getWorkspaceCas({ projectSlug }), { status }] as const,
-  getWorkspaceCertificates: (projectSlug: string) =>
-    [{ projectSlug }, "workspace-certificates"] as const
+  allWorkspaceCertificates: () => ["workspace-certificates"] as const,
+  forWorkspaceCertificates: (slug: string) =>
+    [...workspaceKeys.allWorkspaceCertificates(), slug] as const,
+  specificWorkspaceCertificates: ({
+    slug,
+    offset,
+    limit
+  }: {
+    slug: string;
+    offset: number;
+    limit: number;
+  }) => [...workspaceKeys.forWorkspaceCertificates(slug), { offset, limit }] as const
 };
 
 const fetchWorkspaceById = async (workspaceId: string) => {
@@ -526,16 +536,37 @@ export const useListWorkspaceCas = ({
   });
 };
 
-export const useListWorkspaceCertificates = (projectSlug: string) => {
+export const useListWorkspaceCertificates = ({
+  projectSlug,
+  offset,
+  limit
+}: {
+  projectSlug: string;
+  offset: number;
+  limit: number;
+}) => {
   return useQuery({
-    queryKey: workspaceKeys.getWorkspaceCertificates(projectSlug),
+    queryKey: workspaceKeys.specificWorkspaceCertificates({
+      slug: projectSlug,
+      offset,
+      limit
+    }),
     queryFn: async () => {
+      const params = new URLSearchParams({
+        offset: String(offset),
+        limit: String(limit)
+      });
+
       const {
-        data: { certificates }
-      } = await apiRequest.get<{ certificates: TCertificate[] }>(
-        `/api/v2/workspace/${projectSlug}/certificates`
+        data: { certificates, totalCount }
+      } = await apiRequest.get<{ certificates: TCertificate[]; totalCount: number }>(
+        `/api/v2/workspace/${projectSlug}/certificates`,
+        {
+          params
+        }
       );
-      return certificates;
+
+      return { certificates, totalCount };
     },
     enabled: Boolean(projectSlug)
   });

frontend/src/views/Project/CertificatesPage/components/CertificatesTab/components/CertificatesTable.tsx

@@ -1,3 +1,4 @@
+import { useState } from "react";
 import {
   faBan,
   faCertificate,
@@ -17,6 +18,7 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
   EmptyState,
+  Pagination,
   Table,
   TableContainer,
   TableSkeleton,
@@ -25,8 +27,7 @@ import {
   Th,
   THead,
   Tooltip,
-  Tr
-} from "@app/components/v2";
+  Tr} from "@app/components/v2";
 import { ProjectPermissionActions, ProjectPermissionSub, useWorkspace } from "@app/context";
 import { useListWorkspaceCertificates } from "@app/hooks/api";
 import { certStatusToNameMap } from "@app/hooks/api/certificates/constants";
@@ -45,8 +46,16 @@ type Props = {
 };
 
 export const CertificatesTable = ({ handlePopUpOpen }: Props) => {
+  const [page, setPage] = useState(1);
+  const [perPage, setPerPage] = useState(25);
+
   const { currentWorkspace } = useWorkspace();
-  const { data, isLoading } = useListWorkspaceCertificates(currentWorkspace?.slug ?? "");
+  const { data, isLoading } = useListWorkspaceCertificates({
+    projectSlug: currentWorkspace?.slug ?? "",
+    offset: (page - 1) * perPage,
+    limit: perPage
+  });
+
   return (
     <div>
       <TableContainer>
@@ -62,9 +71,7 @@ export const CertificatesTable = ({ handlePopUpOpen }: Props) => {
           <TBody>
             {isLoading && <TableSkeleton columns={3} innerKey="project-cas" />}
             {!isLoading &&
-              data &&
-              data.length > 0 &&
-              data.map((certificate) => {
+              data?.certificates.map((certificate) => {
                 return (
                   <Tr className="h-10" key={`certificate-${certificate.id}`}>
                     <Td>{certificate.friendlyName}</Td>
@@ -177,7 +184,16 @@ export const CertificatesTable = ({ handlePopUpOpen }: Props) => {
               })}
           </TBody>
         </Table>
-        {!isLoading && data?.length === 0 && (
+        {!isLoading && data?.totalCount !== undefined && (
+          <Pagination
+            count={data.totalCount}
+            page={page}
+            perPage={perPage}
+            onChangePage={(newPage) => setPage(newPage)}
+            onChangePerPage={(newPerPage) => setPerPage(newPerPage)}
+          />
+        )}
+        {!isLoading && !data?.certificates?.length && (
           <EmptyState title="No certificates have been created" icon={faCertificate} />
         )}
       </TableContainer>