From 800056eba747606025f160e2db28661570c321f8 Mon Sep 17 00:00:00 2001
From: Carlos Monastyrski <charly.monastyrski@gmail.com>
Date: Wed, 17 Dec 2025 00:12:54 -0300
Subject: [PATCH 1/3] Add PKI links to docs

---
 .../cert-manager/AlertingPage/AlertingPage.tsx   |  8 +++++++-
 .../components/CaSection.tsx                     | 16 +++++++++-------
 .../components/ExternalCaSection.tsx             |  6 +++++-
 .../components/CertificatesSection.tsx           | 11 +++++++----
 .../CertificateProfilesTab.tsx                   |  6 +++++-
 .../CertificateTemplatesV2Tab.tsx                |  6 +++++-
 6 files changed, 38 insertions(+), 15 deletions(-)

diff --git a/frontend/src/pages/cert-manager/AlertingPage/AlertingPage.tsx b/frontend/src/pages/cert-manager/AlertingPage/AlertingPage.tsx
index 6cc0a208a7..e2115d37b1 100644
--- a/frontend/src/pages/cert-manager/AlertingPage/AlertingPage.tsx
+++ b/frontend/src/pages/cert-manager/AlertingPage/AlertingPage.tsx
@@ -4,6 +4,7 @@ import { useTranslation } from "react-i18next";
 
 import { ProjectPermissionCan } from "@app/components/permissions";
 import { PageHeader, Tab, TabList, TabPanel, Tabs } from "@app/components/v2";
+import { DocumentationLinkBadge } from "@app/components/v3";
 import { ProjectPermissionActions, ProjectPermissionSub, useProject } from "@app/context";
 import { useListWorkspacePkiAlerts } from "@app/hooks/api";
 import { ProjectType } from "@app/hooks/api/projects/types";
@@ -30,7 +31,12 @@ export const AlertingPage = () => {
       <div className="mx-auto mb-6 w-full max-w-8xl">
         <PageHeader
           scope={ProjectType.CertificateManager}
-          title="Alerting"
+          title={
+            <div className="flex items-center gap-x-2">
+              Alerting
+              <DocumentationLinkBadge href="https://infisical.com/docs/documentation/platform/pki/alerting" />
+            </div>
+          }
           description="Configure alerts for expiring certificates and CAs to maintain security and compliance."
         />
         <ProjectPermissionCan
diff --git a/frontend/src/pages/cert-manager/CertificateAuthoritiesPage/components/CaSection.tsx b/frontend/src/pages/cert-manager/CertificateAuthoritiesPage/components/CaSection.tsx
index 2870f390d4..4464e43def 100644
--- a/frontend/src/pages/cert-manager/CertificateAuthoritiesPage/components/CaSection.tsx
+++ b/frontend/src/pages/cert-manager/CertificateAuthoritiesPage/components/CaSection.tsx
@@ -4,6 +4,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { createNotification } from "@app/components/notifications";
 import { ProjectPermissionCan } from "@app/components/permissions";
 import { Button, DeleteActionModal } from "@app/components/v2";
+import { DocumentationLinkBadge } from "@app/components/v3";
 import {
   ProjectPermissionCertificateAuthorityActions,
   ProjectPermissionSub,
@@ -59,7 +60,10 @@ export const CaSection = () => {
   return (
     <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
       <div className="mb-4 flex justify-between">
-        <p className="text-xl font-medium text-mineshaft-100">Internal Certificate Authorities</p>
+        <div className="flex items-center gap-x-2">
+          <p className="text-xl font-medium text-mineshaft-100">Internal Certificate Authorities</p>
+          <DocumentationLinkBadge href="https://infisical.com/docs/documentation/platform/pki/private-ca" />
+        </div>
         <ProjectPermissionCan
           I={ProjectPermissionCertificateAuthorityActions.Create}
           a={ProjectPermissionSub.CertificateAuthorities}
@@ -83,9 +87,8 @@ export const CaSection = () => {
       <CaTable handlePopUpOpen={handlePopUpOpen} />
       <DeleteActionModal
         isOpen={popUp.deleteCa.isOpen}
-        title={`Are you sure you want to remove the CA ${
-          (popUp?.deleteCa?.data as { dn: string })?.dn || ""
-        } from the project?`}
+        title={`Are you sure you want to remove the CA ${(popUp?.deleteCa?.data as { dn: string })?.dn || ""
+          } from the project?`}
         subTitle="This action will delete other CAs and certificates below it in your CA hierarchy."
         onChange={(isOpen) => handlePopUpToggle("deleteCa", isOpen)}
         deleteKey="confirm"
@@ -93,11 +96,10 @@ export const CaSection = () => {
       />
       <DeleteActionModal
         isOpen={popUp.caStatus.isOpen}
-        title={`Are you sure you want to ${
-          (popUp?.caStatus?.data as { status: string })?.status === CaStatus.ACTIVE
+        title={`Are you sure you want to ${(popUp?.caStatus?.data as { status: string })?.status === CaStatus.ACTIVE
             ? "enable"
             : "disable"
-        } the CA ${(popUp?.caStatus?.data as { dn: string })?.dn || ""} from the project?`}
+          } the CA ${(popUp?.caStatus?.data as { dn: string })?.dn || ""} from the project?`}
         subTitle={
           (popUp?.caStatus?.data as { status: string })?.status === CaStatus.ACTIVE
             ? "This action will allow the CA to start issuing certificates again."
diff --git a/frontend/src/pages/cert-manager/CertificateAuthoritiesPage/components/ExternalCaSection.tsx b/frontend/src/pages/cert-manager/CertificateAuthoritiesPage/components/ExternalCaSection.tsx
index b0f963206f..ca9e695ba2 100644
--- a/frontend/src/pages/cert-manager/CertificateAuthoritiesPage/components/ExternalCaSection.tsx
+++ b/frontend/src/pages/cert-manager/CertificateAuthoritiesPage/components/ExternalCaSection.tsx
@@ -4,6 +4,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { createNotification } from "@app/components/notifications";
 import { ProjectPermissionCan } from "@app/components/permissions";
 import { Button, DeleteActionModal } from "@app/components/v2";
+import { DocumentationLinkBadge } from "@app/components/v3";
 import {
   ProjectPermissionCertificateAuthorityActions,
   ProjectPermissionSub,
@@ -63,7 +64,10 @@ export const ExternalCaSection = () => {
   return (
     <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
       <div className="mb-4 flex justify-between">
-        <p className="text-xl font-medium text-mineshaft-100">External Certificate Authorities</p>
+        <div className="flex items-center gap-x-2">
+          <p className="text-xl font-medium text-mineshaft-100">External Certificate Authorities</p>
+          <DocumentationLinkBadge href="https://infisical.com/docs/documentation/platform/pki/ca/external-ca" />
+        </div>
         <ProjectPermissionCan
           I={ProjectPermissionCertificateAuthorityActions.Create}
           a={ProjectPermissionSub.CertificateAuthorities}
diff --git a/frontend/src/pages/cert-manager/CertificatesPage/components/CertificatesSection.tsx b/frontend/src/pages/cert-manager/CertificatesPage/components/CertificatesSection.tsx
index 2c3b00bc23..ab13337840 100644
--- a/frontend/src/pages/cert-manager/CertificatesPage/components/CertificatesSection.tsx
+++ b/frontend/src/pages/cert-manager/CertificatesPage/components/CertificatesSection.tsx
@@ -4,6 +4,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { createNotification } from "@app/components/notifications";
 import { ProjectPermissionCan } from "@app/components/permissions";
 import { Button, DeleteActionModal } from "@app/components/v2";
+import { DocumentationLinkBadge } from "@app/components/v3";
 import {
   ProjectPermissionCertificateActions,
   ProjectPermissionCertificateProfileActions,
@@ -104,7 +105,10 @@ export const CertificatesSection = () => {
   return (
     <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
       <div className="mb-4 flex justify-between">
-        <p className="text-xl font-medium text-mineshaft-100">Certificates</p>
+        <div className="flex items-center gap-x-2">
+          <p className="text-xl font-medium text-mineshaft-100">Certificates</p>
+          <DocumentationLinkBadge href="https://infisical.com/docs/documentation/platform/pki/certificates/overview" />
+        </div>
         <div className="flex gap-2">
           <ProjectPermissionCan
             I={ProjectPermissionCertificateActions.Import}
@@ -157,9 +161,8 @@ export const CertificatesSection = () => {
       />
       <DeleteActionModal
         isOpen={popUp.deleteCertificate.isOpen}
-        title={`Are you sure you want to remove the certificate ${
-          (popUp?.deleteCertificate?.data as { commonName: string })?.commonName || ""
-        } from the project?`}
+        title={`Are you sure you want to remove the certificate ${(popUp?.deleteCertificate?.data as { commonName: string })?.commonName || ""
+          } from the project?`}
         onChange={(isOpen) => handlePopUpToggle("deleteCertificate", isOpen)}
         deleteKey="confirm"
         onDeleteApproved={() =>
diff --git a/frontend/src/pages/cert-manager/PoliciesPage/components/CertificateProfilesTab/CertificateProfilesTab.tsx b/frontend/src/pages/cert-manager/PoliciesPage/components/CertificateProfilesTab/CertificateProfilesTab.tsx
index 9807cb98fe..1045f809ab 100644
--- a/frontend/src/pages/cert-manager/PoliciesPage/components/CertificateProfilesTab/CertificateProfilesTab.tsx
+++ b/frontend/src/pages/cert-manager/PoliciesPage/components/CertificateProfilesTab/CertificateProfilesTab.tsx
@@ -6,6 +6,7 @@ import { UpgradePlanModal } from "@app/components/license/UpgradePlanModal";
 import { createNotification } from "@app/components/notifications";
 import { ProjectPermissionCan } from "@app/components/permissions";
 import { Button, DeleteActionModal } from "@app/components/v2";
+import { DocumentationLinkBadge } from "@app/components/v3";
 import {
   ProjectPermissionCertificateProfileActions,
   ProjectPermissionSub
@@ -70,7 +71,10 @@ export const CertificateProfilesTab = () => {
     <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
       <div className="mb-4 flex items-center justify-between">
         <div>
-          <h2 className="text-xl font-semibold text-mineshaft-100">Certificate Profiles</h2>
+          <div className="flex items-center gap-x-2">
+            <h2 className="text-xl font-semibold text-mineshaft-100">Certificate Profiles</h2>
+            <DocumentationLinkBadge href="https://infisical.com/docs/documentation/platform/pki/certificates/profiles" />
+          </div>
           <p className="text-sm text-bunker-300">
             Unified certificate issuance configurations combining CA, template, and enrollment
             method
diff --git a/frontend/src/pages/cert-manager/PoliciesPage/components/CertificateTemplatesV2Tab/CertificateTemplatesV2Tab.tsx b/frontend/src/pages/cert-manager/PoliciesPage/components/CertificateTemplatesV2Tab/CertificateTemplatesV2Tab.tsx
index c2cad7b9bb..ebc957c1fa 100644
--- a/frontend/src/pages/cert-manager/PoliciesPage/components/CertificateTemplatesV2Tab/CertificateTemplatesV2Tab.tsx
+++ b/frontend/src/pages/cert-manager/PoliciesPage/components/CertificateTemplatesV2Tab/CertificateTemplatesV2Tab.tsx
@@ -5,6 +5,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { createNotification } from "@app/components/notifications";
 import { ProjectPermissionCan } from "@app/components/permissions";
 import { Button, DeleteActionModal } from "@app/components/v2";
+import { DocumentationLinkBadge } from "@app/components/v3";
 import {
   ProjectPermissionPkiTemplateActions,
   ProjectPermissionSub
@@ -56,7 +57,10 @@ export const CertificateTemplatesV2Tab = () => {
     <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
       <div className="mb-4 flex items-center justify-between">
         <div>
-          <h2 className="text-xl font-semibold text-mineshaft-100">Certificate Templates</h2>
+          <div className="flex items-center gap-x-2">
+            <h2 className="text-xl font-semibold text-mineshaft-100">Certificate Templates</h2>
+            <DocumentationLinkBadge href="https://infisical.com/docs/documentation/platform/pki/certificates/templates" />
+          </div>
           <p className="text-sm text-bunker-300">
             Define certificate policies, validation rules, and attribute constraints for certificate
             issuance

From bfb702571a3b6cd6b45a654d78676dfd03fb8154 Mon Sep 17 00:00:00 2001
From: Carlos Monastyrski <charly.monastyrski@gmail.com>
Date: Wed, 17 Dec 2025 00:33:46 -0300
Subject: [PATCH 2/3] Lint fix

---
 .../components/CaSection.tsx                           | 10 ++++++----
 .../components/CertificatesSection.tsx                 |  5 +++--
 2 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/frontend/src/pages/cert-manager/CertificateAuthoritiesPage/components/CaSection.tsx b/frontend/src/pages/cert-manager/CertificateAuthoritiesPage/components/CaSection.tsx
index 4464e43def..4b5e38bdf8 100644
--- a/frontend/src/pages/cert-manager/CertificateAuthoritiesPage/components/CaSection.tsx
+++ b/frontend/src/pages/cert-manager/CertificateAuthoritiesPage/components/CaSection.tsx
@@ -87,8 +87,9 @@ export const CaSection = () => {
       <CaTable handlePopUpOpen={handlePopUpOpen} />
       <DeleteActionModal
         isOpen={popUp.deleteCa.isOpen}
-        title={`Are you sure you want to remove the CA ${(popUp?.deleteCa?.data as { dn: string })?.dn || ""
-          } from the project?`}
+        title={`Are you sure you want to remove the CA ${
+          (popUp?.deleteCa?.data as { dn: string })?.dn || ""
+        } from the project?`}
         subTitle="This action will delete other CAs and certificates below it in your CA hierarchy."
         onChange={(isOpen) => handlePopUpToggle("deleteCa", isOpen)}
         deleteKey="confirm"
@@ -96,10 +97,11 @@ export const CaSection = () => {
       />
       <DeleteActionModal
         isOpen={popUp.caStatus.isOpen}
-        title={`Are you sure you want to ${(popUp?.caStatus?.data as { status: string })?.status === CaStatus.ACTIVE
+        title={`Are you sure you want to ${
+          (popUp?.caStatus?.data as { status: string })?.status === CaStatus.ACTIVE
             ? "enable"
             : "disable"
-          } the CA ${(popUp?.caStatus?.data as { dn: string })?.dn || ""} from the project?`}
+        } the CA ${(popUp?.caStatus?.data as { dn: string })?.dn || ""} from the project?`}
         subTitle={
           (popUp?.caStatus?.data as { status: string })?.status === CaStatus.ACTIVE
             ? "This action will allow the CA to start issuing certificates again."
diff --git a/frontend/src/pages/cert-manager/CertificatesPage/components/CertificatesSection.tsx b/frontend/src/pages/cert-manager/CertificatesPage/components/CertificatesSection.tsx
index ab13337840..fd82c1f40e 100644
--- a/frontend/src/pages/cert-manager/CertificatesPage/components/CertificatesSection.tsx
+++ b/frontend/src/pages/cert-manager/CertificatesPage/components/CertificatesSection.tsx
@@ -161,8 +161,9 @@ export const CertificatesSection = () => {
       />
       <DeleteActionModal
         isOpen={popUp.deleteCertificate.isOpen}
-        title={`Are you sure you want to remove the certificate ${(popUp?.deleteCertificate?.data as { commonName: string })?.commonName || ""
-          } from the project?`}
+        title={`Are you sure you want to remove the certificate ${
+          (popUp?.deleteCertificate?.data as { commonName: string })?.commonName || ""
+        } from the project?`}
         onChange={(isOpen) => handlePopUpToggle("deleteCertificate", isOpen)}
         deleteKey="confirm"
         onDeleteApproved={() =>

From 84970f3b9439674fe3af83825e77990ff6f75bea Mon Sep 17 00:00:00 2001
From: Carlos Monastyrski <charly.monastyrski@gmail.com>
Date: Wed, 17 Dec 2025 18:20:20 -0300
Subject: [PATCH 3/3] Fix small UI title alignment

---
 .../src/pages/cert-manager/AlertingPage/AlertingPage.tsx  | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/frontend/src/pages/cert-manager/AlertingPage/AlertingPage.tsx b/frontend/src/pages/cert-manager/AlertingPage/AlertingPage.tsx
index e2115d37b1..695746b23d 100644
--- a/frontend/src/pages/cert-manager/AlertingPage/AlertingPage.tsx
+++ b/frontend/src/pages/cert-manager/AlertingPage/AlertingPage.tsx
@@ -32,10 +32,12 @@ export const AlertingPage = () => {
         <PageHeader
           scope={ProjectType.CertificateManager}
           title={
-            <div className="flex items-center gap-x-2">
+            <span className="inline-flex items-center gap-x-2">
               Alerting
-              <DocumentationLinkBadge href="https://infisical.com/docs/documentation/platform/pki/alerting" />
-            </div>
+              <span className="mt-0.5">
+                <DocumentationLinkBadge href="https://infisical.com/docs/documentation/platform/pki/alerting" />
+              </span>
+            </span>
           }
           description="Configure alerts for expiring certificates and CAs to maintain security and compliance."
         />