Small fix on templates v2 form

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 = {

frontend/src/pages/cert-manager/CertificatesPage/components/CertificateIssuanceModal.tsx

@@ -94,9 +94,9 @@ const createSchema = (shouldShowSubjectSection: boolean) => {
 export type FormData = z.infer<ReturnType<typeof createSchema>>;
 
 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 (
     <Modal
-      isOpen={popUp?.certificateIssuance?.isOpen}
+      isOpen={popUp?.issueCertificate?.isOpen}
       onOpenChange={(isOpen) => {
-        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

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();

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={<FontAwesomeIcon icon={faPlus} />}
-                onClick={() => handlePopUpOpen("certificateIssuance")}
+                onClick={() => handlePopUpOpen("issueCertificate")}
                 isDisabled={!isAllowed}
               >
                 Issue

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) =
               <DropdownMenuItem
                 onClick={(e) => {
                   e.stopPropagation();
-                  handlePopUpToggle("certificateIssuance");
+                  handlePopUpToggle("issueCertificate");
                 }}
                 icon={<FontAwesomeIcon icon={faPlus} />}
               >

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<FormData>({
     resolver: zodResolver(templateSchema),
-    defaultValues: getDefaultValues()
+    defaultValues: getDefaultValues(),
+    mode: "onChange",
+    reValidateMode: "onChange",
+    criteriaMode: "all"
   });
 
   useEffect(() => {