diff --git a/docs/images/platform/pki/est/template-enroll-hover.png b/docs/images/platform/pki/est/template-enroll-hover.png index cc0f6f658..7bec8e3f6 100644 Binary files a/docs/images/platform/pki/est/template-enroll-hover.png and b/docs/images/platform/pki/est/template-enroll-hover.png differ diff --git a/docs/images/platform/pki/est/template-enrollment-est-label.png b/docs/images/platform/pki/est/template-enrollment-est-label.png index 8a13beec9..4ad7bbeb1 100644 Binary files a/docs/images/platform/pki/est/template-enrollment-est-label.png and b/docs/images/platform/pki/est/template-enrollment-est-label.png differ diff --git a/docs/images/platform/pki/est/template-enrollment-modal.png b/docs/images/platform/pki/est/template-enrollment-modal.png index 60ed273d7..4ce08cfe0 100644 Binary files a/docs/images/platform/pki/est/template-enrollment-modal.png and b/docs/images/platform/pki/est/template-enrollment-modal.png differ diff --git a/frontend/src/pages/cert-manager/CertificatesPage/components/CertificateTemplateEnrollmentModal.tsx b/frontend/src/pages/cert-manager/CertificatesPage/components/CertificateTemplateEnrollmentModal.tsx index 72be07e2a..7e3783a97 100644 --- a/frontend/src/pages/cert-manager/CertificatesPage/components/CertificateTemplateEnrollmentModal.tsx +++ b/frontend/src/pages/cert-manager/CertificatesPage/components/CertificateTemplateEnrollmentModal.tsx @@ -76,6 +76,7 @@ export const CertificateTemplateEnrollmentModal = ({ popUp, handlePopUpToggle }: useEffect(() => { if (data) { reset({ + method: EnrollmentMethod.EST, caChain: data.caChain, isEnabled: data.isEnabled, disableBootstrapCertValidation: data.disableBootstrapCertValidation diff --git a/frontend/src/pages/cert-manager/PkiTemplateListPage/PkiTemplateListPage.tsx b/frontend/src/pages/cert-manager/PkiTemplateListPage/PkiTemplateListPage.tsx index 895775360..4449e9a97 100644 --- a/frontend/src/pages/cert-manager/PkiTemplateListPage/PkiTemplateListPage.tsx +++ b/frontend/src/pages/cert-manager/PkiTemplateListPage/PkiTemplateListPage.tsx @@ -3,6 +3,7 @@ import { Helmet } from "react-helmet"; import { useTranslation } from "react-i18next"; import { faCertificate, + faCog, faEllipsis, faPencil, faPlus, @@ -12,6 +13,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { format } from "date-fns"; import { twMerge } from "tailwind-merge"; +import { UpgradePlanModal } from "@app/components/license/UpgradePlanModal"; import { createNotification } from "@app/components/notifications"; import { ProjectPermissionCan } from "@app/components/permissions"; import { @@ -40,12 +42,14 @@ import { import { ProjectPermissionPkiTemplateActions, ProjectPermissionSub, + useSubscription, useWorkspace } from "@app/context"; import { usePopUp } from "@app/hooks"; import { useDeleteCertTemplateV2 } from "@app/hooks/api"; import { useListCertificateTemplates } from "@app/hooks/api/certificateTemplates/queries"; +import { CertificateTemplateEnrollmentModal } from "../CertificatesPage/components/CertificateTemplateEnrollmentModal"; import { PkiTemplateForm } from "./components/PkiTemplateForm"; const PER_PAGE_INIT = 25; @@ -56,9 +60,13 @@ export const PkiTemplateListPage = () => { const [perPage, setPerPage] = useState(PER_PAGE_INIT); const { handlePopUpToggle, popUp, handlePopUpOpen, handlePopUpClose } = usePopUp([ "certificateTemplate", - "deleteTemplate" + "deleteTemplate", + "enrollmentOptions", + "estUpgradePlan" ] as const); + const { subscription } = useSubscription(); + const { data, isPending } = useListCertificateTemplates({ projectId: currentWorkspace.id, offset: (page - 1) * perPage, @@ -92,7 +100,7 @@ export const PkiTemplateListPage = () => { return ( <> - {t("common.head-title", { title: "PKI Subscribers" })} + {t("common.head-title", { title: "PKI Templates" })}
@@ -177,7 +185,33 @@ export const PkiTemplateListPage = () => { )} - + + {(isAllowed) => ( + { + e.stopPropagation(); + if (!subscription.pkiEst) { + handlePopUpOpen("estUpgradePlan"); + return; + } + handlePopUpOpen("enrollmentOptions", { + id: template.id + }); + }} + disabled={!isAllowed} + icon={} + > + Manage Enrollment + + )} + { /> +
+ handlePopUpToggle("estUpgradePlan", isOpen)} + text="You can only configure template enrollment methods if you switch to Infisical's Enterprise plan." + /> ); };