ui fetch private key if permission allows it

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(
-    (popUp?.certificateCert?.data as { serialNumber: string })?.serialNumber || ""
+  const { permission } = useProjectPermission();
+
+  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 />