feat: completed frontend changes for new pki templates

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

@@ -9,7 +9,11 @@ import { UpgradePlanModal } from "@app/components/license/UpgradePlanModal";
 import { createNotification } from "@app/components/notifications";
 import { ProjectPermissionCan } from "@app/components/permissions";
 import { DeleteActionModal, IconButton } from "@app/components/v2";
-import { ProjectPermissionActions, ProjectPermissionSub, useWorkspace } from "@app/context";
+import {
+  ProjectPermissionPkiTemplateActions,
+  ProjectPermissionSub,
+  useWorkspace
+} from "@app/context";
 import { usePopUp } from "@app/hooks";
 import { useDeleteCertTemplate } from "@app/hooks/api";
 
@@ -63,7 +67,7 @@ export const CertificateTemplatesSection = ({ caId }: Props) => {
       <div className="flex items-center justify-between border-b border-mineshaft-400 pb-4">
         <h3 className="text-lg font-semibold text-mineshaft-100">Certificate Templates</h3>
         <ProjectPermissionCan
-          I={ProjectPermissionActions.Create}
+          I={ProjectPermissionPkiTemplateActions.Create}
           a={ProjectPermissionSub.CertificateTemplates}
         >
           {(isAllowed) => (

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

@@ -19,7 +19,11 @@ import {
   Tooltip,
   Tr
 } from "@app/components/v2";
-import { ProjectPermissionActions, ProjectPermissionSub, useSubscription } from "@app/context";
+import {
+  ProjectPermissionPkiTemplateActions,
+  ProjectPermissionSub,
+  useSubscription
+} from "@app/context";
 import { useGetCaCertTemplates } from "@app/hooks/api";
 import { UsePopUpState } from "@app/hooks/usePopUp";
 
@@ -79,7 +83,7 @@ export const CertificateTemplatesTable = ({ handlePopUpOpen, caId }: Props) => {
                             Manage Policies
                           </DropdownMenuItem>
                           <ProjectPermissionCan
-                            I={ProjectPermissionActions.Edit}
+                            I={ProjectPermissionPkiTemplateActions.Edit}
                             a={ProjectPermissionSub.CertificateTemplates}
                           >
                             {(isAllowed) => (
@@ -105,7 +109,7 @@ export const CertificateTemplatesTable = ({ handlePopUpOpen, caId }: Props) => {
                             )}
                           </ProjectPermissionCan>
                           <ProjectPermissionCan
-                            I={ProjectPermissionActions.Delete}
+                            I={ProjectPermissionPkiTemplateActions.Delete}
                             a={ProjectPermissionSub.CertificateTemplates}
                           >
                             {(isAllowed) => (

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

@@ -0,0 +1,267 @@
+import { useState } from "react";
+import { Helmet } from "react-helmet";
+import { useTranslation } from "react-i18next";
+import {
+  faArrowUpRightFromSquare,
+  faCertificate,
+  faEllipsis,
+  faPencil,
+  faPlus,
+  faTrash
+} from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { format } from "date-fns";
+import { twMerge } from "tailwind-merge";
+
+import { createNotification } from "@app/components/notifications";
+import { ProjectPermissionCan } from "@app/components/permissions";
+import {
+  Button,
+  DeleteActionModal,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+  EmptyState,
+  Modal,
+  ModalContent,
+  PageHeader,
+  Pagination,
+  Table,
+  TableContainer,
+  TableSkeleton,
+  Tag,
+  TBody,
+  Td,
+  Th,
+  THead,
+  Tooltip,
+  Tr
+} from "@app/components/v2";
+import {
+  ProjectPermissionPkiTemplateActions,
+  ProjectPermissionSub,
+  useWorkspace
+} from "@app/context";
+import { usePopUp } from "@app/hooks";
+import { useDeleteCertTemplateV2 } from "@app/hooks/api";
+import { useListCertificateTemplates } from "@app/hooks/api/certificateTemplates/queries";
+
+import { PkiTemplateForm } from "./components/PkiTemplateForm";
+
+const PER_PAGE_INIT = 25;
+export const PkiTemplateListPage = () => {
+  const { t } = useTranslation();
+  const { currentWorkspace } = useWorkspace();
+  const [page, setPage] = useState(1);
+  const [perPage, setPerPage] = useState(PER_PAGE_INIT);
+  const { handlePopUpToggle, popUp, handlePopUpOpen, handlePopUpClose } = usePopUp([
+    "certificateTemplate",
+    "deleteTemplate"
+  ] as const);
+
+  const { data, isPending } = useListCertificateTemplates({
+    projectId: currentWorkspace.id,
+    offset: (page - 1) * perPage,
+    limit: perPage
+  });
+
+  const deleteCertTemplate = useDeleteCertTemplateV2();
+
+  const onRemovePkiSubscriberSubmit = async () => {
+    try {
+      const pkiTemplate = await deleteCertTemplate.mutateAsync({
+        projectId: currentWorkspace.id,
+        templateName: popUp?.deleteTemplate?.data?.name
+      });
+
+      createNotification({
+        text: `Successfully deleted PKI template: ${pkiTemplate.name}`,
+        type: "success"
+      });
+
+      handlePopUpClose("deleteTemplate");
+    } catch (err) {
+      console.error(err);
+      createNotification({
+        text: "Failed to delete PKI subscriber",
+        type: "error"
+      });
+    }
+  };
+
+  return (
+    <>
+      <Helmet>
+        <title>{t("common.head-title", { title: "PKI Subscribers" })}</title>
+      </Helmet>
+      <div className="h-full bg-bunker-800">
+        <div className="container mx-auto flex flex-col justify-between text-white">
+          <div className="mx-auto mb-6 w-full max-w-7xl">
+            <PageHeader
+              title="Certificate Templates"
+              description="Manage certificate template to request and issue dynamic certificates following a strict format."
+            />
+          </div>
+          <div className="container mx-auto mb-6 max-w-7xl rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+            <div className="mb-4 flex justify-between">
+              <p className="text-xl font-semibold text-mineshaft-100">Templates</p>
+              <div className="flex w-full justify-end">
+                <a target="_blank" rel="noopener noreferrer">
+                  <span className="flex w-max cursor-pointer items-center rounded-md border border-mineshaft-500 bg-mineshaft-600 px-4 py-2 text-mineshaft-200 duration-200 hover:border-primary/40 hover:bg-primary/10 hover:text-white">
+                    Documentation{" "}
+                    <FontAwesomeIcon
+                      icon={faArrowUpRightFromSquare}
+                      className="mb-[0.06rem] ml-1 text-xs"
+                    />
+                  </span>
+                </a>
+                <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>
+                  <Tr>
+                    <Th>Name</Th>
+                    <Th>CA</Th>
+                    <Th className="w-64">Last Updated At</Th>
+                    <Th />
+                  </Tr>
+                </THead>
+                <TBody>
+                  {isPending && <TableSkeleton columns={4} innerKey="project-cert-templates" />}
+                  {!isPending &&
+                    data?.certificateTemplates?.map((template) => {
+                      return (
+                        <Tr className="h-10" key={`certificate-template-${template.id}`}>
+                          <Td>{template.name}</Td>
+                          <Td>
+                            <Tag size="xs">{template.ca.name}</Tag>
+                          </Td>
+                          <Td>{format(new Date(template.updatedAt), "yyyy-MM-dd | HH:mm:ss")}</Td>
+                          <Td className="text-right align-middle">
+                            <DropdownMenu>
+                              <DropdownMenuTrigger asChild className="rounded-lg">
+                                <div className="hover:text-primary-400 data-[state=open]:text-primary-400">
+                                  <Tooltip content="More options">
+                                    <FontAwesomeIcon size="lg" icon={faEllipsis} />
+                                  </Tooltip>
+                                </div>
+                              </DropdownMenuTrigger>
+                              <DropdownMenuContent align="start" className="p-1">
+                                <ProjectPermissionCan
+                                  I={ProjectPermissionPkiTemplateActions.Edit}
+                                  a={ProjectPermissionSub.CertificateTemplates}
+                                >
+                                  {(isAllowed) => (
+                                    <DropdownMenuItem
+                                      className={twMerge(
+                                        !isAllowed &&
+                                          "pointer-events-none cursor-not-allowed opacity-50"
+                                      )}
+                                      onClick={(e) => {
+                                        e.stopPropagation();
+                                        handlePopUpOpen("certificateTemplate", template);
+                                      }}
+                                      disabled={!isAllowed}
+                                      icon={<FontAwesomeIcon icon={faPencil} />}
+                                    >
+                                      Edit Template
+                                    </DropdownMenuItem>
+                                  )}
+                                </ProjectPermissionCan>
+
+                                <ProjectPermissionCan
+                                  I={ProjectPermissionPkiTemplateActions.Delete}
+                                  a={ProjectPermissionSub.CertificateTemplates}
+                                >
+                                  {(isAllowed) => (
+                                    <DropdownMenuItem
+                                      className={twMerge(
+                                        !isAllowed &&
+                                          "pointer-events-none cursor-not-allowed opacity-50"
+                                      )}
+                                      onClick={(e) => {
+                                        e.stopPropagation();
+                                        handlePopUpOpen("deleteTemplate", template);
+                                      }}
+                                      disabled={!isAllowed}
+                                      icon={<FontAwesomeIcon icon={faTrash} />}
+                                    >
+                                      Delete Template
+                                    </DropdownMenuItem>
+                                  )}
+                                </ProjectPermissionCan>
+                              </DropdownMenuContent>
+                            </DropdownMenu>
+                          </Td>
+                        </Tr>
+                      );
+                    })}
+                  {!isPending && !data?.certificateTemplates?.length && (
+                    <Tr>
+                      <Td colSpan={4}>
+                        <EmptyState title="No certificate templates found" icon={faCertificate} />
+                      </Td>
+                    </Tr>
+                  )}
+                </TBody>
+              </Table>
+              {!isPending && data?.totalCount !== undefined && data.totalCount >= PER_PAGE_INIT && (
+                <Pagination
+                  count={data.totalCount}
+                  page={page}
+                  perPage={perPage}
+                  onChangePage={(newPage) => setPage(newPage)}
+                  onChangePerPage={(newPerPage) => setPerPage(newPerPage)}
+                />
+              )}
+            </TableContainer>
+            <DeleteActionModal
+              isOpen={popUp.deleteTemplate.isOpen}
+              title="Are you sure you want to remove the PKI Template?"
+              onChange={(isOpen) => handlePopUpToggle("deleteTemplate", isOpen)}
+              deleteKey="confirm"
+              onDeleteApproved={() => onRemovePkiSubscriberSubmit()}
+            />
+          </div>
+          <div className="container mx-auto max-w-7xl" />
+        </div>
+        <Modal
+          isOpen={popUp?.certificateTemplate?.isOpen}
+          onOpenChange={(isOpen) => handlePopUpToggle("certificateTemplate", isOpen)}
+        >
+          <ModalContent
+            title={
+              popUp.certificateTemplate?.data
+                ? "Certificate Template"
+                : "Create Certificate Template"
+            }
+          >
+            <PkiTemplateForm
+              certTemplate={popUp?.certificateTemplate?.data}
+              handlePopUpToggle={(isOpen) => handlePopUpToggle("certificateTemplate", isOpen)}
+            />
+          </ModalContent>
+        </Modal>
+      </div>
+    </>
+  );
+};

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

@@ -0,0 +1,407 @@
+import { Controller, useForm } from "react-hook-form";
+import { faQuestionCircle } from "@fortawesome/free-regular-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+
+import { createNotification } from "@app/components/notifications";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+  Button,
+  Checkbox,
+  FilterableSelect,
+  FormControl,
+  FormLabel,
+  Input,
+  Tooltip
+} from "@app/components/v2";
+import { useWorkspace } from "@app/context";
+import {
+  useCreateCertTemplateV2,
+  useListCasByProjectId,
+  useUpdateCertTemplateV2
+} from "@app/hooks/api";
+import {
+  EXTENDED_KEY_USAGES_OPTIONS,
+  KEY_USAGES_OPTIONS
+} from "@app/hooks/api/certificates/constants";
+import { CertExtendedKeyUsage, CertKeyUsage } from "@app/hooks/api/certificates/enums";
+import { TCertificateTemplateV2 } from "@app/hooks/api/certificateTemplates/types";
+import { slugSchema } from "@app/lib/schemas";
+
+const validateTemplateRegexField = z.string().trim().min(1).max(100);
+
+const schema = z.object({
+  ca: z.object({
+    name: z.string(),
+    id: z.string()
+  }),
+  name: slugSchema(),
+  commonName: validateTemplateRegexField,
+  subjectAlternativeName: validateTemplateRegexField,
+  ttl: z.string().trim().min(1),
+  keyUsages: z.object({
+    [CertKeyUsage.DIGITAL_SIGNATURE]: z.boolean().optional(),
+    [CertKeyUsage.KEY_ENCIPHERMENT]: z.boolean().optional(),
+    [CertKeyUsage.NON_REPUDIATION]: z.boolean().optional(),
+    [CertKeyUsage.DATA_ENCIPHERMENT]: z.boolean().optional(),
+    [CertKeyUsage.KEY_AGREEMENT]: z.boolean().optional(),
+    [CertKeyUsage.KEY_CERT_SIGN]: z.boolean().optional(),
+    [CertKeyUsage.CRL_SIGN]: z.boolean().optional(),
+    [CertKeyUsage.ENCIPHER_ONLY]: z.boolean().optional(),
+    [CertKeyUsage.DECIPHER_ONLY]: z.boolean().optional()
+  }),
+  extendedKeyUsages: z.object({
+    [CertExtendedKeyUsage.CLIENT_AUTH]: z.boolean().optional(),
+    [CertExtendedKeyUsage.CODE_SIGNING]: z.boolean().optional(),
+    [CertExtendedKeyUsage.EMAIL_PROTECTION]: z.boolean().optional(),
+    [CertExtendedKeyUsage.OCSP_SIGNING]: z.boolean().optional(),
+    [CertExtendedKeyUsage.SERVER_AUTH]: z.boolean().optional(),
+    [CertExtendedKeyUsage.TIMESTAMPING]: z.boolean().optional()
+  })
+});
+
+export type FormData = z.infer<typeof schema>;
+
+type Props = {
+  certTemplate?: TCertificateTemplateV2;
+  handlePopUpToggle: (state?: boolean) => void;
+};
+
+export const PkiTemplateForm = ({ certTemplate, handlePopUpToggle }: Props) => {
+  const { currentWorkspace } = useWorkspace();
+
+  const { data: cas, isPending: isCaLoading } = useListCasByProjectId(currentWorkspace.id);
+
+  const { mutateAsync: createCertTemplate } = useCreateCertTemplateV2();
+  const { mutateAsync: updateCertTemplate } = useUpdateCertTemplateV2();
+
+  const {
+    control,
+    handleSubmit,
+    reset,
+    formState: { isSubmitting }
+  } = useForm<FormData>({
+    resolver: zodResolver(schema),
+    defaultValues: async () => {
+      if (certTemplate) {
+        return {
+          ca: certTemplate.ca,
+          name: certTemplate.name,
+          commonName: certTemplate.commonName,
+          subjectAlternativeName: certTemplate.subjectAlternativeName,
+          ttl: certTemplate.ttl,
+          keyUsages: Object.fromEntries(certTemplate.keyUsages.map((name) => [name, true]) ?? []),
+          extendedKeyUsages: Object.fromEntries(
+            certTemplate.extendedKeyUsages.map((name) => [name, true]) ?? []
+          )
+        };
+      }
+      return {
+        ca: { name: "", id: "" },
+        name: "",
+        subjectAlternativeName: "",
+        commonName: "",
+        ttl: "",
+        keyUsages: {
+          [CertKeyUsage.DIGITAL_SIGNATURE]: true,
+          [CertKeyUsage.KEY_ENCIPHERMENT]: true
+        },
+        extendedKeyUsages: {}
+      };
+    }
+  });
+
+  const onFormSubmit = async ({
+    name,
+    commonName,
+    subjectAlternativeName,
+    ttl,
+    keyUsages,
+    extendedKeyUsages,
+    ca
+  }: FormData) => {
+    if (!currentWorkspace?.id) {
+      return;
+    }
+
+    try {
+      if (certTemplate) {
+        await updateCertTemplate({
+          templateName: certTemplate.name,
+          projectId: currentWorkspace.id,
+          caId: ca.id,
+          name,
+          commonName,
+          subjectAlternativeName,
+          ttl,
+          keyUsages: Object.entries(keyUsages)
+            .filter(([, value]) => value)
+            .map(([key]) => key as CertKeyUsage),
+          extendedKeyUsages: Object.entries(extendedKeyUsages)
+            .filter(([, value]) => value)
+            .map(([key]) => key as CertExtendedKeyUsage)
+        });
+
+        createNotification({
+          text: "Successfully updated certificate template",
+          type: "success"
+        });
+      } else {
+        await createCertTemplate({
+          projectId: currentWorkspace.id,
+          caId: ca.id,
+          name,
+          commonName,
+          subjectAlternativeName,
+          ttl,
+          keyUsages: Object.entries(keyUsages)
+            .filter(([, value]) => value)
+            .map(([key]) => key as CertKeyUsage),
+          extendedKeyUsages: Object.entries(extendedKeyUsages)
+            .filter(([, value]) => value)
+            .map(([key]) => key as CertExtendedKeyUsage)
+        });
+
+        createNotification({
+          text: "Successfully created certificate template",
+          type: "success"
+        });
+      }
+
+      reset();
+      handlePopUpToggle(false);
+    } catch (err) {
+      console.error(err);
+      createNotification({
+        text: "Failed to save changes",
+        type: "error"
+      });
+    }
+  };
+
+  return (
+    <form onSubmit={handleSubmit(onFormSubmit)}>
+      {certTemplate && (
+        <FormControl label="Certificate Template ID">
+          <Input value={certTemplate.id} isDisabled className="bg-white/[0.07]" />
+        </FormControl>
+      )}
+      <Controller
+        control={control}
+        defaultValue=""
+        name="name"
+        render={({ field, fieldState: { error } }) => (
+          <FormControl
+            label="Template Name"
+            isError={Boolean(error)}
+            errorText={error?.message}
+            isRequired
+          >
+            <Input {...field} placeholder="my-template" />
+          </FormControl>
+        )}
+      />
+      <Controller
+        render={({ field: { value, onChange }, fieldState: { error } }) => (
+          <FormControl
+            label="Issuing CA"
+            errorText={error?.message}
+            isError={Boolean(error)}
+            isRequired
+          >
+            <FilterableSelect
+              options={cas || []}
+              isLoading={isCaLoading}
+              placeholder="Select CA..."
+              onChange={onChange}
+              value={value}
+              getOptionValue={(option) => option.id}
+              getOptionLabel={(option) => option.name}
+            />
+          </FormControl>
+        )}
+        control={control}
+        name="ca"
+      />
+      <Controller
+        control={control}
+        defaultValue=""
+        name="commonName"
+        render={({ field, fieldState: { error } }) => (
+          <FormControl
+            label={
+              <div>
+                <FormLabel
+                  isRequired
+                  label="Common Name (CN)"
+                  icon={
+                    <Tooltip
+                      className="text-center"
+                      content={
+                        <span>
+                          This field accepts limited regular expressions: spaces, *, ., @, -, \ (for
+                          escaping), and alphanumeric characters only
+                        </span>
+                      }
+                    >
+                      <FontAwesomeIcon icon={faQuestionCircle} size="sm" />
+                    </Tooltip>
+                  }
+                />
+              </div>
+            }
+            isError={Boolean(error)}
+            errorText={error?.message}
+            isRequired
+          >
+            <Input {...field} placeholder=".*\.acme.com" />
+          </FormControl>
+        )}
+      />
+      <Controller
+        control={control}
+        defaultValue=""
+        name="subjectAlternativeName"
+        render={({ field, fieldState: { error } }) => (
+          <FormControl
+            label={
+              <div>
+                <FormLabel
+                  isRequired
+                  label="Alternative Names (SAN)"
+                  icon={
+                    <Tooltip
+                      className="text-center"
+                      content={
+                        <span>
+                          This field accepts limited regular expressions: spaces, *, ., @, -, \ (for
+                          escaping), and alphanumeric characters only
+                        </span>
+                      }
+                    >
+                      <FontAwesomeIcon icon={faQuestionCircle} size="sm" />
+                    </Tooltip>
+                  }
+                />
+              </div>
+            }
+            isError={Boolean(error)}
+            errorText={error?.message}
+            isRequired
+          >
+            <Input {...field} placeholder="service\.acme.\..*" />
+          </FormControl>
+        )}
+      />
+      <Controller
+        control={control}
+        name="ttl"
+        render={({ field, fieldState: { error } }) => (
+          <FormControl
+            label="Max TTL"
+            isError={Boolean(error)}
+            errorText={error?.message}
+            isRequired
+          >
+            <Input {...field} placeholder="2 days, 1d, 2h, 1y, ..." />
+          </FormControl>
+        )}
+      />
+      <Accordion type="single" collapsible className="w-full">
+        <AccordionItem value="key-usages" className="data-[state=open]:border-none">
+          <AccordionTrigger className="h-fit flex-none pl-1 text-sm">
+            <div className="order-1 ml-3">Key Usage</div>
+          </AccordionTrigger>
+          <AccordionContent>
+            <Controller
+              control={control}
+              name="keyUsages"
+              render={({ field: { onChange, value }, fieldState: { error } }) => {
+                return (
+                  <FormControl
+                    label="Key Usage"
+                    errorText={error?.message}
+                    isError={Boolean(error)}
+                  >
+                    <div className="mb-7 mt-2 grid grid-cols-2 gap-2">
+                      {KEY_USAGES_OPTIONS.map(({ label, value: optionValue }) => {
+                        return (
+                          <Checkbox
+                            id={optionValue}
+                            key={optionValue}
+                            className="data-[state=checked]:bg-primary"
+                            isChecked={value[optionValue]}
+                            onCheckedChange={(state) => {
+                              onChange({
+                                ...value,
+                                [optionValue]: state
+                              });
+                            }}
+                          >
+                            {label}
+                          </Checkbox>
+                        );
+                      })}
+                    </div>
+                  </FormControl>
+                );
+              }}
+            />
+            <Controller
+              control={control}
+              name="extendedKeyUsages"
+              render={({ field: { onChange, value }, fieldState: { error } }) => {
+                return (
+                  <FormControl
+                    label="Extended Key Usage"
+                    errorText={error?.message}
+                    isError={Boolean(error)}
+                  >
+                    <div className="mb-7 mt-2 grid grid-cols-2 gap-2">
+                      {EXTENDED_KEY_USAGES_OPTIONS.map(({ label, value: optionValue }) => {
+                        return (
+                          <Checkbox
+                            id={optionValue}
+                            key={optionValue}
+                            className="data-[state=checked]:bg-primary"
+                            isChecked={value[optionValue]}
+                            onCheckedChange={(state) => {
+                              onChange({
+                                ...value,
+                                [optionValue]: state
+                              });
+                            }}
+                          >
+                            {label}
+                          </Checkbox>
+                        );
+                      })}
+                    </div>
+                  </FormControl>
+                );
+              }}
+            />
+          </AccordionContent>
+        </AccordionItem>
+      </Accordion>
+      <div className="mt-4 flex items-center">
+        <Button
+          className="mr-4"
+          size="sm"
+          type="submit"
+          isLoading={isSubmitting}
+          isDisabled={isSubmitting}
+        >
+          Save
+        </Button>
+        <Button colorSchema="secondary" variant="plain" onClick={() => handlePopUpToggle(false)}>
+          Cancel
+        </Button>
+      </div>
+    </form>
+  );
+};

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

@@ -0,0 +1,9 @@
+import { createFileRoute } from "@tanstack/react-router";
+
+import { PkiTemplateListPage } from "./PkiTemplateListPage";
+
+export const Route = createFileRoute(
+  "/_authenticate/_inject-org-details/_org-layout/cert-manager/$projectId/_cert-manager-layout/certificate-templates/"
+)({
+  component: PkiTemplateListPage
+});

frontend/src/pages/project/RoleDetailsBySlugPage/components/PkiTemplatePermissionConditions.tsx

@@ -0,0 +1,173 @@
+import { Controller, useFieldArray, useFormContext } from "react-hook-form";
+import { faInfoCircle, faPlus, faTrash, faWarning } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import {
+  Button,
+  FormControl,
+  IconButton,
+  Input,
+  Select,
+  SelectItem,
+  Tooltip
+} from "@app/components/v2";
+import {
+  PermissionConditionOperators,
+  ProjectPermissionSub
+} from "@app/context/ProjectPermissionContext/types";
+
+import { getConditionOperatorHelperInfo } from "./PermissionConditionHelpers";
+import { TFormSchema } from "./ProjectRoleModifySection.utils";
+
+type Props = {
+  position?: number;
+  isDisabled?: boolean;
+};
+
+export const PkiTemplatePermissionConditions = ({ position = 0, isDisabled }: Props) => {
+  const {
+    control,
+    watch,
+    formState: { errors }
+  } = useFormContext<TFormSchema>();
+
+  const permissionSubject = ProjectPermissionSub.CertificateTemplates;
+  const items = useFieldArray({
+    control,
+    name: `permissions.${permissionSubject}.${position}.conditions`
+  });
+
+  return (
+    <div className="mt-6 border-t border-t-mineshaft-600 bg-mineshaft-800 pt-2">
+      <p className="mt-2 text-gray-300">Conditions</p>
+      <p className="text-sm text-mineshaft-400">
+        Conditions determine when a policy will be applied (always if no conditions are present).
+      </p>
+      <p className="mb-3 text-sm leading-4 text-mineshaft-400">
+        All conditions must evaluate to true for the policy to take effect.
+      </p>
+      <div className="mt-2 flex flex-col space-y-2">
+        {items.fields.map((el, index) => {
+          const condition =
+            (watch(`permissions.${permissionSubject}.${position}.conditions.${index}`) as {
+              lhs: string;
+              rhs: string;
+              operator: string;
+            }) || {};
+
+          return (
+            <div
+              key={el.id}
+              className="flex gap-2 bg-mineshaft-800 first:rounded-t-md last:rounded-b-md"
+            >
+              <div className="w-1/4">
+                <Controller
+                  control={control}
+                  name={`permissions.${permissionSubject}.${position}.conditions.${index}.lhs`}
+                  render={({ field, fieldState: { error } }) => (
+                    <FormControl
+                      isError={Boolean(error?.message)}
+                      errorText={error?.message}
+                      className="mb-0"
+                    >
+                      <Select
+                        defaultValue={field.value}
+                        {...field}
+                        onValueChange={(e) => field.onChange(e)}
+                        className="w-full"
+                      >
+                        <SelectItem value="name">Name</SelectItem>
+                      </Select>
+                    </FormControl>
+                  )}
+                />
+              </div>
+              <div className="flex w-36 items-center space-x-2">
+                <Controller
+                  control={control}
+                  name={`permissions.${permissionSubject}.${position}.conditions.${index}.operator`}
+                  render={({ field, fieldState: { error } }) => (
+                    <FormControl
+                      isError={Boolean(error?.message)}
+                      errorText={error?.message}
+                      className="mb-0 flex-grow"
+                    >
+                      <Select
+                        defaultValue={field.value}
+                        {...field}
+                        onValueChange={(e) => field.onChange(e)}
+                        className="w-full"
+                      >
+                        <SelectItem value={PermissionConditionOperators.$EQ}>Equals</SelectItem>
+                        <SelectItem value={PermissionConditionOperators.$GLOB}>Glob</SelectItem>
+                        <SelectItem value={PermissionConditionOperators.$IN}>In</SelectItem>
+                      </Select>
+                    </FormControl>
+                  )}
+                />
+                <Tooltip
+                  asChild
+                  content={getConditionOperatorHelperInfo(
+                    condition?.operator as PermissionConditionOperators
+                  )}
+                  className="max-w-xs"
+                >
+                  <FontAwesomeIcon icon={faInfoCircle} size="xs" className="text-gray-400" />
+                </Tooltip>
+              </div>
+              <div className="flex-grow">
+                <Controller
+                  control={control}
+                  name={`permissions.${permissionSubject}.${position}.conditions.${index}.rhs`}
+                  render={({ field, fieldState: { error } }) => (
+                    <FormControl
+                      isError={Boolean(error?.message)}
+                      errorText={error?.message}
+                      className="mb-0 flex-grow"
+                    >
+                      <Input {...field} />
+                    </FormControl>
+                  )}
+                />
+              </div>
+              <div>
+                <IconButton
+                  ariaLabel="plus"
+                  variant="outline_bg"
+                  className="p-2.5"
+                  onClick={() => items.remove(index)}
+                >
+                  <FontAwesomeIcon icon={faTrash} />
+                </IconButton>
+              </div>
+            </div>
+          );
+        })}
+      </div>
+      {errors?.permissions?.[permissionSubject]?.[position]?.conditions?.message && (
+        <div className="flex items-center space-x-2 py-2 text-sm text-gray-400">
+          <FontAwesomeIcon icon={faWarning} className="text-red" />
+          <span>{errors?.permissions?.[permissionSubject]?.[position]?.conditions?.message}</span>
+        </div>
+      )}
+      <div>
+        <Button
+          leftIcon={<FontAwesomeIcon icon={faPlus} />}
+          variant="star"
+          size="xs"
+          className="mt-3"
+          isDisabled={isDisabled}
+          onClick={() =>
+            items.append({
+              lhs: "name",
+              operator: PermissionConditionOperators.$EQ,
+              rhs: ""
+            })
+          }
+        >
+          Add Condition
+        </Button>
+      </div>
+    </div>
+  );
+};

frontend/src/pages/project/RoleDetailsBySlugPage/components/ProjectRoleModifySection.utils.tsx

@@ -18,6 +18,7 @@ import {
   ProjectPermissionKmipActions,
   ProjectPermissionMemberActions,
   ProjectPermissionPkiSubscriberActions,
+  ProjectPermissionPkiTemplateActions,
   ProjectPermissionSecretActions,
   ProjectPermissionSecretRotationActions,
   ProjectPermissionSecretSyncActions,
@@ -148,6 +149,15 @@ const PkiSubscriberPolicyActionSchema = z.object({
   [ProjectPermissionPkiSubscriberActions.ListCerts]: z.boolean().optional()
 });
 
+const PkiTemplatePolicyActionSchema = z.object({
+  [ProjectPermissionPkiTemplateActions.Read]: z.boolean().optional(),
+  [ProjectPermissionPkiTemplateActions.Create]: z.boolean().optional(),
+  [ProjectPermissionPkiTemplateActions.Edit]: z.boolean().optional(),
+  [ProjectPermissionPkiTemplateActions.Delete]: z.boolean().optional(),
+  [ProjectPermissionPkiTemplateActions.IssueCert]: z.boolean().optional(),
+  [ProjectPermissionPkiTemplateActions.ListCerts]: z.boolean().optional()
+});
+
 const SecretRollbackPolicyActionSchema = z.object({
   read: z.boolean().optional(),
   create: z.boolean().optional()
@@ -255,7 +265,12 @@ export const projectRoleFormSchema = z.object({
         .default([]),
       [ProjectPermissionSub.PkiAlerts]: GeneralPolicyActionSchema.array().default([]),
       [ProjectPermissionSub.PkiCollections]: GeneralPolicyActionSchema.array().default([]),
-      [ProjectPermissionSub.CertificateTemplates]: GeneralPolicyActionSchema.array().default([]),
+      [ProjectPermissionSub.CertificateTemplates]: PkiTemplatePolicyActionSchema.extend({
+        inverted: z.boolean().optional(),
+        conditions: ConditionSchema
+      })
+        .array()
+        .default([]),
       [ProjectPermissionSub.SshCertificateAuthorities]: GeneralPolicyActionSchema.array().default(
         []
       ),
@@ -295,6 +310,7 @@ type TConditionalFields =
   | ProjectPermissionSub.SecretImports
   | ProjectPermissionSub.DynamicSecrets
   | ProjectPermissionSub.PkiSubscribers
+  | ProjectPermissionSub.CertificateTemplates
   | ProjectPermissionSub.SshHosts
   | ProjectPermissionSub.SecretRotation
   | ProjectPermissionSub.Identity;
@@ -309,7 +325,8 @@ export const isConditionalSubjects = (
   subject === ProjectPermissionSub.Identity ||
   subject === ProjectPermissionSub.SshHosts ||
   subject === ProjectPermissionSub.SecretRotation ||
-  subject === ProjectPermissionSub.PkiSubscribers;
+  subject === ProjectPermissionSub.PkiSubscribers ||
+  subject === ProjectPermissionSub.CertificateTemplates;
 
 const convertCaslConditionToFormOperator = (caslConditions: TPermissionCondition) => {
   const formConditions: z.infer<typeof ConditionSchema> = [];
@@ -408,7 +425,6 @@ export const rolePermission2Form = (permissions: TProjectPermission[] = []) => {
         ProjectPermissionSub.CertificateAuthorities,
         ProjectPermissionSub.PkiAlerts,
         ProjectPermissionSub.PkiCollections,
-        ProjectPermissionSub.CertificateTemplates,
         ProjectPermissionSub.Tags,
         ProjectPermissionSub.SecretRotation,
         ProjectPermissionSub.Kms,
@@ -781,6 +797,34 @@ export const rolePermission2Form = (permissions: TProjectPermission[] = []) => {
         conditions: conditions ? convertCaslConditionToFormOperator(conditions) : [],
         inverted
       });
+      return;
+    }
+
+    if (subject === ProjectPermissionSub.CertificateTemplates) {
+      if (!formVal[subject]) formVal[subject] = [];
+
+      formVal[subject]!.push({
+        [ProjectPermissionPkiTemplateActions.Edit]: action.includes(
+          ProjectPermissionPkiTemplateActions.Edit
+        ),
+        [ProjectPermissionPkiTemplateActions.Delete]: action.includes(
+          ProjectPermissionPkiTemplateActions.Delete
+        ),
+        [ProjectPermissionPkiTemplateActions.Create]: action.includes(
+          ProjectPermissionPkiTemplateActions.Create
+        ),
+        [ProjectPermissionPkiTemplateActions.Read]: action.includes(
+          ProjectPermissionPkiTemplateActions.Read
+        ),
+        [ProjectPermissionPkiTemplateActions.IssueCert]: action.includes(
+          ProjectPermissionPkiTemplateActions.IssueCert
+        ),
+        [ProjectPermissionPkiTemplateActions.ListCerts]: action.includes(
+          ProjectPermissionPkiTemplateActions.ListCerts
+        ),
+        conditions: conditions ? convertCaslConditionToFormOperator(conditions) : [],
+        inverted
+      });
     }
   });
 
@@ -1119,10 +1163,12 @@ export const PROJECT_PERMISSION_OBJECT: TProjectPermissionObject = {
   [ProjectPermissionSub.CertificateTemplates]: {
     title: "Certificate Templates",
     actions: [
-      { label: "Read", value: "read" },
-      { label: "Create", value: "create" },
-      { label: "Modify", value: "edit" },
-      { label: "Remove", value: "delete" }
+      { label: "Read", value: ProjectPermissionPkiTemplateActions.Read },
+      { label: "Create", value: ProjectPermissionPkiTemplateActions.Create },
+      { label: "Modify", value: ProjectPermissionPkiTemplateActions.Edit },
+      { label: "Remove", value: ProjectPermissionPkiTemplateActions.Delete },
+      { label: "Issue Certificates", value: ProjectPermissionPkiTemplateActions.IssueCert },
+      { label: "List Certificates", value: ProjectPermissionPkiTemplateActions.ListCerts }
     ]
   },
   [ProjectPermissionSub.SshCertificateAuthorities]: {

frontend/src/pages/project/RoleDetailsBySlugPage/components/RolePermissionsSection.tsx

@@ -23,6 +23,7 @@ import { GeneralPermissionPolicies } from "./GeneralPermissionPolicies";
 import { IdentityManagementPermissionConditions } from "./IdentityManagementPermissionConditions";
 import { PermissionEmptyState } from "./PermissionEmptyState";
 import { PkiSubscriberPermissionConditions } from "./PkiSubscriberPermissionConditions";
+import { PkiTemplatePermissionConditions } from "./PkiTemplatePermissionConditions";
 import {
   formRolePermission2API,
   isConditionalSubjects,
@@ -63,6 +64,10 @@ export const renderConditionalComponents = (
       return <PkiSubscriberPermissionConditions isDisabled={isDisabled} />;
     }
 
+    if (subject === ProjectPermissionSub.CertificateTemplates) {
+      return <PkiTemplatePermissionConditions isDisabled={isDisabled} />;
+    }
+
     return <GeneralPermissionConditions isDisabled={isDisabled} type={subject} />;
   }