From db4bba1dcd7976f1131e584b341798b14abfa5fa Mon Sep 17 00:00:00 2001 From: Carlos Monastyrski Date: Thu, 6 Nov 2025 21:29:19 -0300 Subject: [PATCH] Small fix on templates v2 form --- frontend/src/hooks/api/ca/types.ts | 4 ++-- .../components/CertificateIssuanceModal.tsx | 18 +++++++++--------- .../components/CertificateModal.tsx | 8 ++++++-- .../components/CertificatesSection.tsx | 4 ++-- .../CertificateProfilesTab/ProfileRow.tsx | 4 ++-- .../CreateTemplateModal.tsx | 5 ++++- 6 files changed, 25 insertions(+), 18 deletions(-) diff --git a/frontend/src/hooks/api/ca/types.ts b/frontend/src/hooks/api/ca/types.ts index 696e72494..31d35e904 100644 --- a/frontend/src/hooks/api/ca/types.ts +++ b/frontend/src/hooks/api/ca/types.ts @@ -159,8 +159,8 @@ export type TCreateCertificateDTO = { ttl: string; // string compatible with ms notBefore?: string; notAfter?: string; - keyUsages: CertKeyUsage[]; - extendedKeyUsages: CertExtendedKeyUsage[]; + keyUsages: string[]; + extendedKeyUsages: string[]; }; export type TCreateCertificateResponse = { diff --git a/frontend/src/pages/cert-manager/CertificatesPage/components/CertificateIssuanceModal.tsx b/frontend/src/pages/cert-manager/CertificatesPage/components/CertificateIssuanceModal.tsx index b854bc899..81bc5461f 100644 --- a/frontend/src/pages/cert-manager/CertificatesPage/components/CertificateIssuanceModal.tsx +++ b/frontend/src/pages/cert-manager/CertificatesPage/components/CertificateIssuanceModal.tsx @@ -94,9 +94,9 @@ const createSchema = (shouldShowSubjectSection: boolean) => { export type FormData = z.infer>; type Props = { - popUp: UsePopUpState<["certificateIssuance"]>; + popUp: UsePopUpState<["issueCertificate"]>; handlePopUpToggle: ( - popUpName: keyof UsePopUpState<["certificateIssuance"]>, + popUpName: keyof UsePopUpState<["issueCertificate"]>, state?: boolean ) => void; profileId?: string; @@ -115,7 +115,7 @@ export const CertificateIssuanceModal = ({ popUp, handlePopUpToggle, profileId } const { currentProject } = useProject(); const inputSerialNumber = - (popUp?.certificateIssuance?.data as { serialNumber: string })?.serialNumber || ""; + (popUp?.issueCertificate?.data as { serialNumber: string })?.serialNumber || ""; const sanitizedSerialNumber = inputSerialNumber.replace(/[^a-fA-F0-9:]/g, ""); const { data: cert } = useGetCert(sanitizedSerialNumber); @@ -181,7 +181,7 @@ export const CertificateIssuanceModal = ({ popUp, handlePopUpToggle, profileId } } = useCertificateTemplate( templateData, actualSelectedProfile, - popUp?.certificateIssuance?.isOpen || false, + popUp?.issueCertificate?.isOpen || false, setValue, watch ); @@ -227,10 +227,10 @@ export const CertificateIssuanceModal = ({ popUp, handlePopUpToggle, profileId } }, [cert, reset]); useEffect(() => { - if (popUp?.certificateIssuance?.isOpen && profileId && !cert) { + if (popUp?.issueCertificate?.isOpen && profileId && !cert) { setValue("profileId", profileId); } - }, [popUp?.certificateIssuance?.isOpen, profileId, cert, setValue]); + }, [popUp?.issueCertificate?.isOpen, profileId, cert, setValue]); const onFormSubmit = useCallback( async ({ @@ -332,9 +332,9 @@ export const CertificateIssuanceModal = ({ popUp, handlePopUpToggle, profileId } return ( { - handlePopUpToggle("certificateIssuance", isOpen); + handlePopUpToggle("issueCertificate", isOpen); if (!isOpen) { resetAllState(); } @@ -503,7 +503,7 @@ export const CertificateIssuanceModal = ({ popUp, handlePopUpToggle, profileId } colorSchema="secondary" variant="plain" onClick={() => { - handlePopUpToggle("certificateIssuance", false); + handlePopUpToggle("issueCertificate", false); }} > Cancel diff --git a/frontend/src/pages/cert-manager/CertificatesPage/components/CertificateModal.tsx b/frontend/src/pages/cert-manager/CertificatesPage/components/CertificateModal.tsx index 90aee7bd0..75ae0e848 100644 --- a/frontend/src/pages/cert-manager/CertificatesPage/components/CertificateModal.tsx +++ b/frontend/src/pages/cert-manager/CertificatesPage/components/CertificateModal.tsx @@ -201,10 +201,14 @@ export const CertificateModal = ({ popUp, handlePopUpToggle, preselectedTemplate ttl, keyUsages: Object.entries(keyUsages) .filter(([, value]) => value) - .map(([key]) => key as CertKeyUsage), + .map(([key]) => + key === CertKeyUsage.CRL_SIGN + ? "cRLSign" + : 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())) }); reset(); diff --git a/frontend/src/pages/cert-manager/CertificatesPage/components/CertificatesSection.tsx b/frontend/src/pages/cert-manager/CertificatesPage/components/CertificatesSection.tsx index 298bf18ad..6a5566d6a 100644 --- a/frontend/src/pages/cert-manager/CertificatesPage/components/CertificatesSection.tsx +++ b/frontend/src/pages/cert-manager/CertificatesPage/components/CertificatesSection.tsx @@ -26,7 +26,7 @@ export const CertificatesSection = () => { const { mutateAsync: deleteCert } = useDeleteCert(); const { popUp, handlePopUpOpen, handlePopUpClose, handlePopUpToggle } = usePopUp([ - "certificateIssuance", + "issueCertificate", "certificateImport", "certificateCert", "deleteCertificate", @@ -71,7 +71,7 @@ export const CertificatesSection = () => { colorSchema="primary" type="submit" leftIcon={} - onClick={() => handlePopUpOpen("certificateIssuance")} + onClick={() => handlePopUpOpen("issueCertificate")} isDisabled={!isAllowed} > Issue diff --git a/frontend/src/pages/cert-manager/PoliciesPage/components/CertificateProfilesTab/ProfileRow.tsx b/frontend/src/pages/cert-manager/PoliciesPage/components/CertificateProfilesTab/ProfileRow.tsx index e3bdea3c4..a9175c66c 100644 --- a/frontend/src/pages/cert-manager/PoliciesPage/components/CertificateProfilesTab/ProfileRow.tsx +++ b/frontend/src/pages/cert-manager/PoliciesPage/components/CertificateProfilesTab/ProfileRow.tsx @@ -44,7 +44,7 @@ export const ProfileRow = ({ profile, onEditProfile, onDeleteProfile }: Props) = const { data: caData } = useGetCaById(profile.caId); - const { popUp, handlePopUpToggle } = usePopUp(["certificateIssuance"] as const); + const { popUp, handlePopUpToggle } = usePopUp(["issueCertificate"] as const); const [isIdCopied, setIsIdCopied] = useToggle(false); @@ -147,7 +147,7 @@ export const ProfileRow = ({ profile, onEditProfile, onDeleteProfile }: Props) = { e.stopPropagation(); - handlePopUpToggle("certificateIssuance"); + handlePopUpToggle("issueCertificate"); }} icon={} > diff --git a/frontend/src/pages/cert-manager/PoliciesPage/components/CertificateTemplatesV2Tab/CreateTemplateModal.tsx b/frontend/src/pages/cert-manager/PoliciesPage/components/CertificateTemplatesV2Tab/CreateTemplateModal.tsx index 1387171fb..b929ce36e 100644 --- a/frontend/src/pages/cert-manager/PoliciesPage/components/CertificateTemplatesV2Tab/CreateTemplateModal.tsx +++ b/frontend/src/pages/cert-manager/PoliciesPage/components/CertificateTemplatesV2Tab/CreateTemplateModal.tsx @@ -251,7 +251,10 @@ export const CreateTemplateModal = ({ isOpen, onClose, template, mode = "create" const { control, handleSubmit, reset, watch, setValue, formState } = useForm({ resolver: zodResolver(templateSchema), - defaultValues: getDefaultValues() + defaultValues: getDefaultValues(), + mode: "onChange", + reValidateMode: "onChange", + criteriaMode: "all" }); useEffect(() => {