Merge pull request #4792 from Infisical/pki/enableSubscribers

Enable creation of PKI Subscribers and Templates using the UI

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

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;

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

@@ -172,10 +172,14 @@ export const CertificateTemplateModal = ({ popUp, handlePopUpToggle, caId }: Pro
           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()))
         });
 
         createNotification({
@@ -193,10 +197,14 @@ export const CertificateTemplateModal = ({ popUp, handlePopUpToggle, caId }: Pro
           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()))
         });
 
         createNotification({

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",

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 ?? "");
 

frontend/src/pages/cert-manager/PkiSubscribersPage/components/PkiSubscriberModal.tsx

@@ -351,8 +351,14 @@ export const PkiSubscriberModal = ({ popUp, handlePopUpToggle }: Props) => {
           commonName,
           subjectAlternativeNames: subjectAlternativeNamesList,
           ttl,
-          keyUsages: keyUsagesList,
-          extendedKeyUsages: extendedKeyUsagesList,
+          keyUsages: keyUsagesList.map((key) =>
+            key === CertKeyUsage.CRL_SIGN
+              ? "cRLSign"
+              : 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 +371,14 @@ export const PkiSubscriberModal = ({ popUp, handlePopUpToggle }: Props) => {
           commonName,
           subjectAlternativeNames: subjectAlternativeNamesList,
           ttl,
-          keyUsages: keyUsagesList,
-          extendedKeyUsages: extendedKeyUsagesList,
+          keyUsages: keyUsagesList.map((key) =>
+            key === CertKeyUsage.CRL_SIGN
+              ? "cRLSign"
+              : 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

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

frontend/src/pages/cert-manager/PkiTemplateListPage/PkiTemplateListPage.tsx

@@ -114,30 +114,29 @@ export const PkiTemplateListPage = () => {
             />
           </div>
           <div className="container mx-auto mb-6 max-w-8xl rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
-            {subscription?.pkiLegacyTemplates && (
-              <div className="mb-4 flex justify-between">
-                <p className="text-xl font-medium text-mineshaft-100">Templates</p>
-                <div className="flex w-full justify-end">
-                  <ProjectPermissionCan
-                    I={ProjectPermissionPkiTemplateActions.Create}
-                    a={ProjectPermissionSub.CertificateTemplates}
-                  >
-                    {(isAllowed) => (
-                      <Button
-                        colorSchema="primary"
-                        type="submit"
-                        leftIcon={<FontAwesomeIcon icon={faPlus} />}
-                        onClick={() => handlePopUpOpen("certificateTemplate")}
-                        isDisabled={!isAllowed}
-                        className="ml-4"
-                      >
-                        Add Template
-                      </Button>
-                    )}
-                  </ProjectPermissionCan>
-                </div>
+            {/* TODO: Use subscription.pkiLegacyTemplates to block legacy templates creation */}
+            <div className="mb-4 flex justify-between">
+              <p className="text-xl font-medium text-mineshaft-100">Templates</p>
+              <div className="flex w-full justify-end">
+                <ProjectPermissionCan
+                  I={ProjectPermissionPkiTemplateActions.Create}
+                  a={ProjectPermissionSub.CertificateTemplates}
+                >
+                  {(isAllowed) => (
+                    <Button
+                      colorSchema="primary"
+                      type="submit"
+                      leftIcon={<FontAwesomeIcon icon={faPlus} />}
+                      onClick={() => handlePopUpOpen("certificateTemplate")}
+                      isDisabled={!isAllowed}
+                      className="ml-4"
+                    >
+                      Add Template
+                    </Button>
+                  )}
+                </ProjectPermissionCan>
               </div>
-            )}
+            </div>
             <TableContainer>
               <Table>
                 <THead>

frontend/src/pages/cert-manager/PkiTemplateListPage/components/PkiTemplateForm.tsx

@@ -140,10 +140,14 @@ export const PkiTemplateForm = ({ certTemplate, handlePopUpToggle }: Props) => {
           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()))
         });
 
         createNotification({
@@ -160,10 +164,14 @@ export const PkiTemplateForm = ({ certTemplate, handlePopUpToggle }: Props) => {
           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()))
         });
 
         createNotification({