From 48cf7654a690af6b1a7067ec64617a84da530bb2 Mon Sep 17 00:00:00 2001 From: Carlos Monastyrski Date: Fri, 31 Oct 2025 20:35:04 -0300 Subject: [PATCH] Enable creation of PKI Subscribers and Templates using the UI --- .../hooks/api/certificateTemplates/types.ts | 16 +++---- frontend/src/hooks/api/pkiSubscriber/types.ts | 8 ++-- .../components/CertificateTemplateModal.tsx | 8 ++-- .../components/CertificatesSection.tsx | 7 ++- .../components/CertificatesTable.tsx | 7 ++- .../components/PkiSubscriberModal.tsx | 16 +++++-- .../components/PkiSubscriberSection.tsx | 7 ++- .../PkiTemplateListPage.tsx | 45 +++++++++---------- .../components/PkiTemplateForm.tsx | 8 ++-- 9 files changed, 63 insertions(+), 59 deletions(-) diff --git a/frontend/src/hooks/api/certificateTemplates/types.ts b/frontend/src/hooks/api/certificateTemplates/types.ts index 373bbef2a..a6653cbec 100644 --- a/frontend/src/hooks/api/certificateTemplates/types.ts +++ b/frontend/src/hooks/api/certificateTemplates/types.ts @@ -42,8 +42,8 @@ export type TCreateCertificateTemplateDTO = { subjectAlternativeName: string; ttl: string; projectId: string; - keyUsages: CertKeyUsage[]; - extendedKeyUsages: CertExtendedKeyUsage[]; + keyUsages: string[]; + extendedKeyUsages: string[]; }; export type TUpdateCertificateTemplateDTO = { @@ -55,8 +55,8 @@ export type TUpdateCertificateTemplateDTO = { subjectAlternativeName?: string; ttl?: string; projectId: string; - keyUsages?: CertKeyUsage[]; - extendedKeyUsages?: CertExtendedKeyUsage[]; + keyUsages?: string[]; + extendedKeyUsages?: string[]; }; export type TDeleteCertificateTemplateDTO = { @@ -71,8 +71,8 @@ export type TCreateCertificateTemplateV2DTO = { subjectAlternativeName: string; ttl: string; projectId: string; - keyUsages: CertKeyUsage[]; - extendedKeyUsages: CertExtendedKeyUsage[]; + keyUsages: string[]; + extendedKeyUsages: string[]; }; export type TUpdateCertificateTemplateV2DTO = { @@ -83,8 +83,8 @@ export type TUpdateCertificateTemplateV2DTO = { subjectAlternativeName?: string; ttl?: string; projectId: string; - keyUsages?: CertKeyUsage[]; - extendedKeyUsages?: CertExtendedKeyUsage[]; + keyUsages?: string[]; + extendedKeyUsages?: string[]; }; export type TDeleteCertificateTemplateV2DTO = { diff --git a/frontend/src/hooks/api/pkiSubscriber/types.ts b/frontend/src/hooks/api/pkiSubscriber/types.ts index 23ca6baf3..239d56148 100644 --- a/frontend/src/hooks/api/pkiSubscriber/types.ts +++ b/frontend/src/hooks/api/pkiSubscriber/types.ts @@ -47,8 +47,8 @@ export type TCreatePkiSubscriberDTO = { commonName: string; ttl?: string; subjectAlternativeNames: string[]; - keyUsages: CertKeyUsage[]; - extendedKeyUsages: CertExtendedKeyUsage[]; + keyUsages: string[]; + extendedKeyUsages: string[]; enableAutoRenewal?: boolean; autoRenewalPeriodInDays?: number; properties?: TPkiSubscriberProperties; @@ -63,8 +63,8 @@ export type TUpdatePkiSubscriberDTO = { status?: PkiSubscriberStatus; ttl?: string; subjectAlternativeNames?: string[]; - keyUsages?: CertKeyUsage[]; - extendedKeyUsages?: CertExtendedKeyUsage[]; + keyUsages?: string[]; + extendedKeyUsages?: string[]; enableAutoRenewal?: boolean; autoRenewalPeriodInDays?: number; properties?: TPkiSubscriberProperties; diff --git a/frontend/src/pages/cert-manager/CertificatesPage/components/CertificateTemplateModal.tsx b/frontend/src/pages/cert-manager/CertificatesPage/components/CertificateTemplateModal.tsx index 9d5d9355f..477aa0356 100644 --- a/frontend/src/pages/cert-manager/CertificatesPage/components/CertificateTemplateModal.tsx +++ b/frontend/src/pages/cert-manager/CertificatesPage/components/CertificateTemplateModal.tsx @@ -172,10 +172,10 @@ export const CertificateTemplateModal = ({ popUp, handlePopUpToggle, caId }: Pro ttl, keyUsages: Object.entries(keyUsages) .filter(([, value]) => value) - .map(([key]) => key as CertKeyUsage), + .map(([key]) => key.replace(/_([a-z])/g, (_, letter) => letter.toUpperCase())), extendedKeyUsages: Object.entries(extendedKeyUsages) .filter(([, value]) => value) - .map(([key]) => key as CertExtendedKeyUsage) + .map(([key]) => key.replace(/_([a-z])/g, (_, letter) => letter.toUpperCase())) }); createNotification({ @@ -193,10 +193,10 @@ export const CertificateTemplateModal = ({ popUp, handlePopUpToggle, caId }: Pro ttl, keyUsages: Object.entries(keyUsages) .filter(([, value]) => value) - .map(([key]) => key as CertKeyUsage), + .map(([key]) => key.replace(/_([a-z])/g, (_, letter) => letter.toUpperCase())), extendedKeyUsages: Object.entries(extendedKeyUsages) .filter(([, value]) => value) - .map(([key]) => key as CertExtendedKeyUsage) + .map(([key]) => key.replace(/_([a-z])/g, (_, letter) => letter.toUpperCase())) }); createNotification({ diff --git a/frontend/src/pages/cert-manager/CertificatesPage/components/CertificatesSection.tsx b/frontend/src/pages/cert-manager/CertificatesPage/components/CertificatesSection.tsx index 4102d8ea5..e60dea077 100644 --- a/frontend/src/pages/cert-manager/CertificatesPage/components/CertificatesSection.tsx +++ b/frontend/src/pages/cert-manager/CertificatesPage/components/CertificatesSection.tsx @@ -7,8 +7,7 @@ import { Button, DeleteActionModal } from "@app/components/v2"; import { ProjectPermissionCertificateActions, ProjectPermissionSub, - useProject, - useSubscription + useProject } from "@app/context"; import { useDeleteCert } from "@app/hooks/api"; import { usePopUp } from "@app/hooks/usePopUp"; @@ -24,10 +23,10 @@ import { CertificatesTable } from "./CertificatesTable"; export const CertificatesSection = () => { const { currentProject } = useProject(); - const { subscription } = useSubscription(); const { mutateAsync: deleteCert } = useDeleteCert(); - const isLegacyTemplatesEnabled = subscription.pkiLegacyTemplates; + // TODO: Use subscription.pkiLegacyTemplates to block legacy templates creation + const isLegacyTemplatesEnabled = true; const { popUp, handlePopUpOpen, handlePopUpClose, handlePopUpToggle } = usePopUp([ "certificateIssuance", diff --git a/frontend/src/pages/cert-manager/CertificatesPage/components/CertificatesTable.tsx b/frontend/src/pages/cert-manager/CertificatesPage/components/CertificatesTable.tsx index 500286d67..4f26f851c 100644 --- a/frontend/src/pages/cert-manager/CertificatesPage/components/CertificatesTable.tsx +++ b/frontend/src/pages/cert-manager/CertificatesPage/components/CertificatesTable.tsx @@ -36,8 +36,7 @@ import { Badge } from "@app/components/v3"; import { ProjectPermissionCertificateActions, ProjectPermissionSub, - useProject, - useSubscription + useProject } from "@app/context"; import { useListWorkspaceCertificates, useUpdateRenewalConfig } from "@app/hooks/api"; import { caSupportsCapability } from "@app/hooks/api/ca/constants"; @@ -175,7 +174,6 @@ const PER_PAGE_INIT = 25; export const CertificatesTable = ({ handlePopUpOpen }: Props) => { const [page, setPage] = useState(1); const [perPage, setPerPage] = useState(PER_PAGE_INIT); - const { subscription } = useSubscription(); const { currentProject } = useProject(); const { data, isPending } = useListWorkspaceCertificates({ @@ -185,7 +183,8 @@ export const CertificatesTable = ({ handlePopUpOpen }: Props) => { }); const { mutateAsync: updateRenewalConfig } = useUpdateRenewalConfig(); - const isLegacyTemplatesEnabled = subscription.pkiLegacyTemplates; + // TODO: Use subscription.pkiLegacyTemplates to block legacy templates creation + const isLegacyTemplatesEnabled = true; const { data: caData } = useListCasByProjectId(currentProject?.id ?? ""); diff --git a/frontend/src/pages/cert-manager/PkiSubscribersPage/components/PkiSubscriberModal.tsx b/frontend/src/pages/cert-manager/PkiSubscribersPage/components/PkiSubscriberModal.tsx index 4bc427e48..020bf5c6c 100644 --- a/frontend/src/pages/cert-manager/PkiSubscribersPage/components/PkiSubscriberModal.tsx +++ b/frontend/src/pages/cert-manager/PkiSubscribersPage/components/PkiSubscriberModal.tsx @@ -351,8 +351,12 @@ export const PkiSubscriberModal = ({ popUp, handlePopUpToggle }: Props) => { commonName, subjectAlternativeNames: subjectAlternativeNamesList, ttl, - keyUsages: keyUsagesList, - extendedKeyUsages: extendedKeyUsagesList, + keyUsages: keyUsagesList.map((key) => + key.replace(/_([a-z])/g, (_, letter) => letter.toUpperCase()) + ), + extendedKeyUsages: extendedKeyUsagesList.map((key) => + key.replace(/_([a-z])/g, (_, letter) => letter.toUpperCase()) + ), enableAutoRenewal, autoRenewalPeriodInDays, properties: Object.keys(properties).length > 0 ? properties : undefined @@ -365,8 +369,12 @@ export const PkiSubscriberModal = ({ popUp, handlePopUpToggle }: Props) => { commonName, subjectAlternativeNames: subjectAlternativeNamesList, ttl, - keyUsages: keyUsagesList, - extendedKeyUsages: extendedKeyUsagesList, + keyUsages: keyUsagesList.map((key) => + key.replace(/_([a-z])/g, (_, letter) => letter.toUpperCase()) + ), + extendedKeyUsages: extendedKeyUsagesList.map((key) => + key.replace(/_([a-z])/g, (_, letter) => letter.toUpperCase()) + ), enableAutoRenewal, autoRenewalPeriodInDays, properties: Object.keys(properties).length > 0 ? properties : undefined diff --git a/frontend/src/pages/cert-manager/PkiSubscribersPage/components/PkiSubscriberSection.tsx b/frontend/src/pages/cert-manager/PkiSubscribersPage/components/PkiSubscriberSection.tsx index cb4b9ef39..8c9196dc9 100644 --- a/frontend/src/pages/cert-manager/PkiSubscribersPage/components/PkiSubscriberSection.tsx +++ b/frontend/src/pages/cert-manager/PkiSubscribersPage/components/PkiSubscriberSection.tsx @@ -7,8 +7,7 @@ import { Button, DeleteActionModal } from "@app/components/v2"; import { ProjectPermissionPkiSubscriberActions, ProjectPermissionSub, - useProject, - useSubscription + useProject } from "@app/context"; import { useDeletePkiSubscriber, useUpdatePkiSubscriber } from "@app/hooks/api"; import { PkiSubscriberStatus } from "@app/hooks/api/pkiSubscriber/types"; @@ -19,10 +18,10 @@ import { PkiSubscribersTable } from "./PkiSubscribersTable"; export const PkiSubscriberSection = () => { const { currentProject } = useProject(); - const { subscription } = useSubscription(); const projectId = currentProject.id; - const canCreateLegacySubscribers = subscription.pkiLegacyTemplates; + // TODO: Use subscription.pkiLegacyTemplates to block legacy templates creation + const canCreateLegacySubscribers = true; const { mutateAsync: deletePkiSubscriber } = useDeletePkiSubscriber(); const { mutateAsync: updatePkiSubscriber } = useUpdatePkiSubscriber(); diff --git a/frontend/src/pages/cert-manager/PkiTemplateListPage/PkiTemplateListPage.tsx b/frontend/src/pages/cert-manager/PkiTemplateListPage/PkiTemplateListPage.tsx index b395d0ec2..79a956373 100644 --- a/frontend/src/pages/cert-manager/PkiTemplateListPage/PkiTemplateListPage.tsx +++ b/frontend/src/pages/cert-manager/PkiTemplateListPage/PkiTemplateListPage.tsx @@ -114,30 +114,29 @@ export const PkiTemplateListPage = () => { />
- {subscription?.pkiLegacyTemplates && ( -
-

Templates

-
- - {(isAllowed) => ( - - )} - -
+ {/* TODO: Use subscription.pkiLegacyTemplates to block legacy templates creation */} +
+

Templates

+
+ + {(isAllowed) => ( + + )} +
- )} +
diff --git a/frontend/src/pages/cert-manager/PkiTemplateListPage/components/PkiTemplateForm.tsx b/frontend/src/pages/cert-manager/PkiTemplateListPage/components/PkiTemplateForm.tsx index 093a2fcc1..36a729b73 100644 --- a/frontend/src/pages/cert-manager/PkiTemplateListPage/components/PkiTemplateForm.tsx +++ b/frontend/src/pages/cert-manager/PkiTemplateListPage/components/PkiTemplateForm.tsx @@ -140,10 +140,10 @@ export const PkiTemplateForm = ({ certTemplate, handlePopUpToggle }: Props) => { ttl, keyUsages: Object.entries(keyUsages) .filter(([, value]) => value) - .map(([key]) => key as CertKeyUsage), + .map(([key]) => key.replace(/_([a-z])/g, (_, letter) => letter.toUpperCase())), extendedKeyUsages: Object.entries(extendedKeyUsages) .filter(([, value]) => value) - .map(([key]) => key as CertExtendedKeyUsage) + .map(([key]) => key.replace(/_([a-z])/g, (_, letter) => letter.toUpperCase())) }); createNotification({ @@ -160,10 +160,10 @@ export const PkiTemplateForm = ({ certTemplate, handlePopUpToggle }: Props) => { ttl, keyUsages: Object.entries(keyUsages) .filter(([, value]) => value) - .map(([key]) => key as CertKeyUsage), + .map(([key]) => key.replace(/_([a-z])/g, (_, letter) => letter.toUpperCase())), extendedKeyUsages: Object.entries(extendedKeyUsages) .filter(([, value]) => value) - .map(([key]) => key as CertExtendedKeyUsage) + .map(([key]) => key.replace(/_([a-z])/g, (_, letter) => letter.toUpperCase())) }); createNotification({