ui fetch private key if permission allows it

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

@@ -6,7 +6,8 @@ import { TCertificate } from "./types";
 
 export const certKeys = {
   getCertById: (serialNumber: string) => [{ serialNumber }, "cert"],
-  getCertBody: (serialNumber: string) => [{ serialNumber }, "certBody"]
+  getCertBody: (serialNumber: string) => [{ serialNumber }, "certBody"],
+  getCertBundle: (serialNumber: string) => [{ serialNumber }, "certBundle"]
 };
 
 export const useGetCert = (serialNumber: string) => {
@@ -38,3 +39,19 @@ export const useGetCertBody = (serialNumber: string) => {
     enabled: Boolean(serialNumber)
   });
 };
+
+export const useGetCertBundle = (serialNumber: string) => {
+  return useQuery({
+    queryKey: certKeys.getCertBundle(serialNumber),
+    queryFn: async () => {
+      const { data } = await apiRequest.get<{
+        certificate: string;
+        certificateChain: string;
+        serialNumber: string;
+        privateKey: string;
+      }>(`/api/v1/pki/certificates/${serialNumber}/bundle`);
+      return data;
+    },
+    enabled: Boolean(serialNumber)
+  });
+};

frontend/src/pages/cert-manager/CertificatesPage/components/CertificateCertModal.tsx

@@ -3,6 +3,12 @@ import { useGetCertBody } from "@app/hooks/api";
 import { UsePopUpState } from "@app/hooks/usePopUp";
 
 import { CertificateContent } from "./CertificateContent";
+import {
+  ProjectPermissionCertificateActions,
+  ProjectPermissionSub,
+  useProjectPermission
+} from "@app/context";
+import { useGetCertBundle } from "@app/hooks/api/certificates/queries";
 
 type Props = {
   popUp: UsePopUpState<["certificateCert"]>;
@@ -10,10 +16,20 @@ type Props = {
 };
 
 export const CertificateCertModal = ({ popUp, handlePopUpToggle }: Props) => {
-  const { data } = useGetCertBody(
+  const { permission } = useProjectPermission();
-    (popUp?.certificateCert?.data as { serialNumber: string })?.serialNumber || ""
+
+  const serialNumber =
+    (popUp?.certificateCert?.data as { serialNumber: string })?.serialNumber || "";
+
+  const canReadPrivateKey = permission.can(
+    ProjectPermissionCertificateActions.ReadPrivateKey,
+    ProjectPermissionSub.Certificates
   );
 
+  const { data } = canReadPrivateKey
+    ? useGetCertBundle(serialNumber)
+    : useGetCertBody(serialNumber);
+
   return (
     <Modal
       isOpen={popUp?.certificateCert?.isOpen}
@@ -27,6 +43,8 @@ export const CertificateCertModal = ({ popUp, handlePopUpToggle }: Props) => {
             serialNumber={data.serialNumber}
             certificate={data.certificate}
             certificateChain={data.certificateChain}
+            // A hacky fix for typescript error
+            privateKey={(data as { privateKey?: string }).privateKey}
           />
         ) : (
           <div />