Revise PR based on review

frontend/src/pages/cert-manager/CertificatesPage/route.tsx

@@ -3,7 +3,7 @@ import { createFileRoute } from "@tanstack/react-router";
 import { CertificatesPage } from "./CertificatesPage";
 
 export const Route = createFileRoute(
-  "/_authenticate/_inject-org-details/_org-layout/cert-manager/$projectId/_cert-manager-layout/overview"
+  "/_authenticate/_inject-org-details/_org-layout/cert-manager/$projectId/_cert-manager-layout/certificates"
 )({
   component: CertificatesPage
 });

frontend/src/pages/cert-manager/PkiSubscriberDetailsByIDPage/components/PkiSubscriberCertificatesTable.tsx

@@ -1,4 +1,5 @@
 import { useState } from "react";
+import { subject } from "@casl/ability";
 import { faCertificate, faEllipsis, faTrash } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { format } from "date-fns";
@@ -26,6 +27,7 @@ import {
 import {
   ProjectPermissionPkiSubscriberActions,
   ProjectPermissionSub,
+  useProjectPermission,
   useWorkspace
 } from "@app/context";
 import { useGetPkiSubscriberCertificates } from "@app/hooks/api";
@@ -42,6 +44,7 @@ const PER_PAGE_INIT = 25;
 export const PkiSubscriberCertificatesTable = ({ subscriberName, handlePopUpOpen }: Props) => {
   const { currentWorkspace } = useWorkspace();
   const projectId = currentWorkspace.id;
+  const { permission } = useProjectPermission();
   const [page, setPage] = useState(1);
   const [perPage, setPerPage] = useState(PER_PAGE_INIT);
 
@@ -74,6 +77,13 @@ export const PkiSubscriberCertificatesTable = ({ subscriberName, handlePopUpOpen
     return <Badge variant="success">Valid</Badge>;
   };
 
+  const canListPkiSubscriberCerts = permission.can(
+    ProjectPermissionPkiSubscriberActions.ListCerts,
+    subject(ProjectPermissionSub.PkiSubscribers, {
+      name: subscriberName
+    })
+  );
+
   return (
     <div>
       <TableContainer>
@@ -156,7 +166,7 @@ export const PkiSubscriberCertificatesTable = ({ subscriberName, handlePopUpOpen
         )}
         {!isPending && !data?.certificates?.length && (
           <EmptyState
-            title="No certificates have been issued for this subscriber"
+            title={`${canListPkiSubscriberCerts ? "No certificates have been issued for this subscriber" : "You do not have permission to view this subscriber's certificates"}`}
             icon={faCertificate}
           />
         )}

frontend/src/pages/cert-manager/PkiSubscriberDetailsByIDPage/components/PkiSubscriberDetailsSection.tsx

@@ -14,6 +14,7 @@ import {
 } from "@app/context";
 import { useTimedReset } from "@app/hooks";
 import { useGetPkiSubscriber, useIssuePkiSubscriberCert } from "@app/hooks/api";
+import { pkiSubscriberStatusToNameMap } from "@app/hooks/api/pkiSubscriber/constants";
 import { UsePopUpState } from "@app/hooks/usePopUp";
 
 import { CertificateContent } from "../../CertificatesPage/components/CertificateContent";
@@ -44,6 +45,7 @@ export const PkiSubscriberDetailsSection = ({ subscriberName, handlePopUpOpen }:
     subscriberName,
     projectId
   });
+
   const { mutateAsync: issuePkiSubscriberCert, isPending: isIssuingCert } =
     useIssuePkiSubscriberCert();
 
@@ -136,6 +138,12 @@ export const PkiSubscriberDetailsSection = ({ subscriberName, handlePopUpOpen }:
           <p className="text-sm font-semibold text-mineshaft-300">Name</p>
           <p className="text-sm text-mineshaft-300">{pkiSubscriber.name}</p>
         </div>
+        <div className="mb-4">
+          <p className="text-sm font-semibold text-mineshaft-300">Status</p>
+          <p className="text-sm text-mineshaft-300">
+            {pkiSubscriberStatusToNameMap[pkiSubscriber.status]}
+          </p>
+        </div>
         <div className="mb-4">
           <p className="text-sm font-semibold text-mineshaft-300">Common Name</p>
           <p className="text-sm text-mineshaft-300">{pkiSubscriber.commonName}</p>