Begin developing pki subscriber

2026-10-14 13:22:08 +00:00 · 2025-05-06 09:44:57 -07:00
parent d1122886fd
commit cf4f2ea6b1
44 changed files with 1996 additions and 6 deletions
@@ -8,5 +8,6 @@ export {
  ProjectPermissionIdentityActions,
  ProjectPermissionKmipActions,
  ProjectPermissionMemberActions,
+  ProjectPermissionPkiSubscriberActions,
  ProjectPermissionSub
 } from "./types";
@@ -87,6 +87,14 @@ export enum ProjectPermissionSshHostActions {
  IssueHostCert = "issue-host-cert"
 }

+export enum ProjectPermissionPkiSubscriberActions {
+  Read = "read",
+  Create = "create",
+  Edit = "edit",
+  Delete = "delete",
+  IssueCert = "issue-cert"
+}
+
 export enum ProjectPermissionSecretRotationActions {
  Read = "read",
  ReadGeneratedCredentials = "read-generated-credentials",
@@ -178,6 +186,7 @@ export enum ProjectPermissionSub {
  SshHostGroups = "ssh-host-groups",
  PkiAlerts = "pki-alerts",
  PkiCollections = "pki-collections",
+  PkiSubscribers = "pki-subscribers",
  Kms = "kms",
  Cmek = "cmek",
  SecretSyncs = "secret-syncs",
@@ -277,6 +286,7 @@ export type ProjectPermissionSet =
  | [ProjectPermissionSshHostActions, ProjectPermissionSub.SshHosts]
  | [ProjectPermissionActions, ProjectPermissionSub.PkiAlerts]
  | [ProjectPermissionActions, ProjectPermissionSub.PkiCollections]
+  | [ProjectPermissionPkiSubscriberActions, ProjectPermissionSub.PkiSubscribers]
  | [ProjectPermissionSecretSyncActions, ProjectPermissionSub.SecretSyncs]
  | [ProjectPermissionActions.Delete, ProjectPermissionSub.Project]
  | [ProjectPermissionActions.Edit, ProjectPermissionSub.Project]
@@ -16,6 +16,7 @@ export {
  ProjectPermissionIdentityActions,
  ProjectPermissionKmipActions,
  ProjectPermissionMemberActions,
+  ProjectPermissionPkiSubscriberActions,
  ProjectPermissionSub,
  useProjectPermission
 } from "./ProjectPermissionContext";
@@ -27,6 +27,7 @@ export * from "./orgAdmin";
 export * from "./organization";
 export * from "./pkiAlerts";
 export * from "./pkiCollections";
+export * from "./pkiSubscriber";
 export * from "./projectUserAdditionalPrivilege";
 export * from "./rateLimit";
 export * from "./roles";
@@ -0,0 +1,6 @@
+export {
+  useCreatePkiSubscriber,
+  useDeletePkiSubscriber,
+  useUpdatePkiSubscriber
+} from "./mutations";
+export { useGetPkiSubscriberById } from "./queries";
@@ -0,0 +1,61 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+
+import { apiRequest } from "@app/config/request";
+
+import { workspaceKeys } from "../workspace/query-keys";
+import {
+  TCreatePkiSubscriberDTO,
+  TDeletePkiSubscriberDTO,
+  TPkiSubscriber,
+  TUpdatePkiSubscriberDTO
+} from "./types";
+
+export const useCreatePkiSubscriber = () => {
+  const queryClient = useQueryClient();
+  return useMutation<TPkiSubscriber, object, TCreatePkiSubscriberDTO>({
+    mutationFn: async (body) => {
+      const { data: subscriber } = await apiRequest.post("/api/v1/pki/subscribers", body);
+      return subscriber;
+    },
+    onSuccess: ({ projectId }) => {
+      queryClient.invalidateQueries({
+        queryKey: workspaceKeys.getWorkspacePkiSubscribers(projectId)
+      });
+    }
+  });
+};
+
+export const useUpdatePkiSubscriber = () => {
+  const queryClient = useQueryClient();
+  return useMutation<TPkiSubscriber, object, TUpdatePkiSubscriberDTO>({
+    mutationFn: async ({ subscriberId, ...body }) => {
+      const { data: subscriber } = await apiRequest.patch(
+        `/api/v1/pki/subscribers/${subscriberId}`,
+        body
+      );
+      return subscriber;
+    },
+    onSuccess: ({ projectId }) => {
+      queryClient.invalidateQueries({
+        queryKey: workspaceKeys.getWorkspacePkiSubscribers(projectId)
+      });
+    }
+  });
+};
+
+export const useDeletePkiSubscriber = () => {
+  const queryClient = useQueryClient();
+  return useMutation<TPkiSubscriber, object, TDeletePkiSubscriberDTO>({
+    mutationFn: async ({ subscriberId }) => {
+      const { data: subscriber } = await apiRequest.delete(
+        `/api/v1/pki/subscribers/${subscriberId}`
+      );
+      return subscriber;
+    },
+    onSuccess: ({ projectId }) => {
+      queryClient.invalidateQueries({
+        queryKey: workspaceKeys.getWorkspacePkiSubscribers(projectId)
+      });
+    }
+  });
+};
@@ -0,0 +1,22 @@
+import { useQuery } from "@tanstack/react-query";
+
+import { apiRequest } from "@app/config/request";
+
+import { TPkiSubscriber } from "./types";
+
+export const pkiSubscriberKeys = {
+  getPkiSubscriberById: (subscriberId: string) => [{ subscriberId }, "pki-subscriber"] as const
+};
+
+export const useGetPkiSubscriberById = (subscriberId: string) => {
+  return useQuery({
+    queryKey: pkiSubscriberKeys.getPkiSubscriberById(subscriberId),
+    queryFn: async () => {
+      const { data: pkiSubscriber } = await apiRequest.get<TPkiSubscriber>(
+        `/api/v1/pki/subscribers/${subscriberId}`
+      );
+      return pkiSubscriber;
+    },
+    enabled: Boolean(subscriberId)
+  });
+};
@@ -0,0 +1,39 @@
+import { CertExtendedKeyUsage, CertKeyUsage } from "../certificates/enums";
+
+export type TPkiSubscriber = {
+  id: string;
+  projectId: string;
+  caId: string;
+  name: string;
+  commonName: string;
+  ttl: string;
+  subjectAlternativeNames: string[];
+  keyUsages: CertKeyUsage[];
+  extendedKeyUsages: CertExtendedKeyUsage[];
+};
+
+export type TCreatePkiSubscriberDTO = {
+  projectId: string;
+  caId: string;
+  name: string;
+  commonName: string;
+  ttl: string;
+  subjectAlternativeNames: string[];
+  keyUsages: CertKeyUsage[];
+  extendedKeyUsages: CertExtendedKeyUsage[];
+};
+
+export type TUpdatePkiSubscriberDTO = {
+  subscriberId: string;
+  caId?: string;
+  name?: string;
+  commonName?: string;
+  ttl?: string;
+  subjectAlternativeNames?: string[];
+  keyUsages?: CertKeyUsage[];
+  extendedKeyUsages?: CertExtendedKeyUsage[];
+};
+
+export type TDeletePkiSubscriberDTO = {
+  subscriberId: string;
+};
@@ -20,6 +20,7 @@ export type TSshHost = {
  hostCertTtl: string;
  loginMappings: TLoginMapping[];
 };
+
 export type TCreateSshHostDTO = {
  projectId: string;
  hostname: string;
@@ -35,6 +35,7 @@ export {
  useListWorkspaceGroups,
  useListWorkspacePkiAlerts,
  useListWorkspacePkiCollections,
+  useListWorkspacePkiSubscribers,
  useListWorkspaceSshCas,
  useListWorkspaceSshCertificates,
  useListWorkspaceSshCertificateTemplates,
@@ -14,6 +14,7 @@ import { IntegrationAuth } from "../integrationAuth/types";
 import { TIntegration } from "../integrations/types";
 import { TPkiAlert } from "../pkiAlerts/types";
 import { TPkiCollection } from "../pkiCollections/types";
+import { TPkiSubscriber } from "../pkiSubscriber/types";
 import { EncryptedSecret } from "../secrets/types";
 import { TSshCertificate, TSshCertificateAuthority } from "../sshCa/types";
 import { TSshCertificateTemplate } from "../sshCertificateTemplates/types";
@@ -874,6 +875,21 @@ export const useListWorkspaceSshHosts = (projectId: string) => {
  });
 };

+export const useListWorkspacePkiSubscribers = (projectId: string) => {
+  return useQuery({
+    queryKey: workspaceKeys.getWorkspacePkiSubscribers(projectId),
+    queryFn: async () => {
+      const {
+        data: { subscribers }
+      } = await apiRequest.get<{ subscribers: TPkiSubscriber[] }>(
+        `/api/v2/workspace/${projectId}/pki-subscribers`
+      );
+      return subscribers;
+    },
+    enabled: Boolean(projectId)
+  });
+};
+
 export const useListWorkspaceSshHostGroups = (projectId: string) => {
  return useQuery({
    queryKey: workspaceKeys.getWorkspaceSshHostGroups(projectId),
@@ -51,6 +51,8 @@ export const workspaceKeys = {
  }) => [...workspaceKeys.forWorkspaceCertificates(slug), { offset, limit }] as const,
  getWorkspacePkiAlerts: (workspaceId: string) =>
    [{ workspaceId }, "workspace-pki-alerts"] as const,
+  getWorkspacePkiSubscribers: (projectId: string) =>
+    [{ projectId }, "workspace-pki-subscribers"] as const,
  getWorkspacePkiCollections: (workspaceId: string) =>
    [{ workspaceId }, "workspace-pki-collections"] as const,
  getWorkspaceCertificateTemplates: (workspaceId: string) =>
@@ -103,6 +103,20 @@ export const ProjectLayout = () => {
                      )}
                      {isCertManager && (
                        <>
+                          <Link
+                            to={
+                              `/${ProjectType.CertificateManager}/$projectId/subscribers` as const
+                            }
+                            params={{
+                              projectId: currentWorkspace.id
+                            }}
+                          >
+                            {({ isActive }) => (
+                              <MenuItem isSelected={isActive} icon="certificate-authority">
+                                Subscribers
+                              </MenuItem>
+                            )}
+                          </Link>
                          <Link
                            to={`/${ProjectType.CertificateManager}/$projectId/overview` as const}
                            params={{
@@ -0,0 +1,25 @@
+import { Helmet } from "react-helmet";
+import { useTranslation } from "react-i18next";
+
+import { PageHeader } from "@app/components/v2";
+
+import { PkiSubscriberSection } from "./components";
+
+export const PkiSubscribersPage = () => {
+  const { t } = useTranslation();
+  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 bg-bunker-800 text-white">
+          <div className="mx-auto mb-6 w-full max-w-7xl">
+            <PageHeader title="Subscribers" description="Manage your PKI subscribers." />
+            <PkiSubscriberSection />
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};
@@ -0,0 +1,435 @@
+import { useEffect } from "react";
+import { Controller, useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+
+import { createNotification } from "@app/components/notifications";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+  Button,
+  Checkbox,
+  FormControl,
+  Input,
+  Modal,
+  ModalContent,
+  Select,
+  SelectItem
+} from "@app/components/v2";
+import { useWorkspace } from "@app/context";
+import {
+  CaStatus,
+  useCreatePkiSubscriber,
+  useGetPkiSubscriberById,
+  useListWorkspaceCas,
+  useListWorkspacePkiSubscribers,
+  useUpdatePkiSubscriber
+} 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 { UsePopUpState } from "@app/hooks/usePopUp";
+
+type Props = {
+  popUp: UsePopUpState<["pkiSubscriber"]>;
+  handlePopUpToggle: (popUpName: keyof UsePopUpState<["pkiSubscriber"]>, state?: boolean) => void;
+};
+
+const schema = z
+  .object({
+    name: z.string().trim().min(1, "Name is required"),
+    caId: z.string().min(1, "Issuing CA is required"),
+    commonName: z.string().trim().min(1, "Common Name is required"),
+    subjectAlternativeNames: z.string(),
+    ttl: z.string().trim(),
+    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()
+    })
+  })
+  .required();
+
+export type FormData = z.infer<typeof schema>;
+
+export const PkiSubscriberModal = ({ popUp, handlePopUpToggle }: Props) => {
+  const { currentWorkspace } = useWorkspace();
+  const projectId = currentWorkspace?.id || "";
+  const { data: subscribers } = useListWorkspacePkiSubscribers(projectId);
+  const { data: cas } = useListWorkspaceCas({
+    projectSlug: currentWorkspace?.slug ?? "",
+    status: CaStatus.ACTIVE
+  });
+
+  const { data: pkiSubscriber } = useGetPkiSubscriberById(
+    (popUp?.pkiSubscriber?.data as { subscriberId: string })?.subscriberId || ""
+  );
+
+  const { mutateAsync: createMutateAsync } = useCreatePkiSubscriber();
+  const { mutateAsync: updateMutateAsync } = useUpdatePkiSubscriber();
+
+  const {
+    control,
+    handleSubmit,
+    reset,
+    setValue,
+    formState: { isSubmitting }
+  } = useForm<FormData>({
+    resolver: zodResolver(schema),
+    defaultValues: {
+      name: "",
+      caId: "",
+      commonName: "",
+      subjectAlternativeNames: "",
+      ttl: "",
+      keyUsages: {
+        [CertKeyUsage.DIGITAL_SIGNATURE]: true,
+        [CertKeyUsage.KEY_ENCIPHERMENT]: true
+      },
+      extendedKeyUsages: {}
+    }
+  });
+
+  useEffect(() => {
+    if (pkiSubscriber) {
+      reset({
+        name: pkiSubscriber.name,
+        caId: pkiSubscriber.caId || "",
+        commonName: pkiSubscriber.commonName,
+        subjectAlternativeNames: pkiSubscriber.subjectAlternativeNames.join(", ") || "",
+        ttl: pkiSubscriber.ttl || "",
+        keyUsages: Object.fromEntries((pkiSubscriber.keyUsages || []).map((name) => [name, true])),
+        extendedKeyUsages: Object.fromEntries(
+          (pkiSubscriber.extendedKeyUsages || []).map((name) => [name, true])
+        )
+      });
+    } else {
+      reset({
+        name: "",
+        caId: "",
+        commonName: "",
+        subjectAlternativeNames: "",
+        ttl: "",
+        keyUsages: {
+          [CertKeyUsage.DIGITAL_SIGNATURE]: true,
+          [CertKeyUsage.KEY_ENCIPHERMENT]: true
+        },
+        extendedKeyUsages: {}
+      });
+    }
+  }, [pkiSubscriber, reset]);
+
+  useEffect(() => {
+    if (cas?.length) {
+      setValue("caId", cas[0].id);
+    }
+  }, [cas, setValue]);
+
+  const onFormSubmit = async ({
+    name,
+    caId,
+    commonName,
+    subjectAlternativeNames,
+    ttl,
+    keyUsages,
+    extendedKeyUsages
+  }: FormData) => {
+    try {
+      if (!projectId) return;
+
+      if (!caId) {
+        createNotification({
+          text: "Please select an Issuing CA",
+          type: "error"
+        });
+        return;
+      }
+
+      console.log("onFormSubmitArgs: ", {
+        name,
+        caId,
+        commonName,
+        subjectAlternativeNames,
+        ttl,
+        keyUsages,
+        extendedKeyUsages
+      });
+
+      // Check if there is already a different subscriber with the same name
+      const existingNames =
+        subscribers?.filter((s) => s.id !== pkiSubscriber?.id).map((s) => s.name) || [];
+
+      if (existingNames.includes(name.trim())) {
+        createNotification({
+          text: "A subscriber with this name already exists.",
+          type: "error"
+        });
+        return;
+      }
+
+      const keyUsagesList = Object.entries(keyUsages)
+        .filter(([, value]) => value)
+        .map(([key]) => key as CertKeyUsage);
+
+      const extendedKeyUsagesList = Object.entries(extendedKeyUsages)
+        .filter(([, value]) => value)
+        .map(([key]) => key as CertExtendedKeyUsage);
+
+      const subjectAlternativeNamesList = subjectAlternativeNames
+        .split(",")
+        .map((san) => san.trim())
+        .filter(Boolean);
+
+      if (pkiSubscriber) {
+        await updateMutateAsync({
+          subscriberId: pkiSubscriber.id,
+          name,
+          caId,
+          commonName,
+          subjectAlternativeNames: subjectAlternativeNamesList,
+          ttl,
+          keyUsages: keyUsagesList,
+          extendedKeyUsages: extendedKeyUsagesList
+        });
+      } else {
+        await createMutateAsync({
+          projectId,
+          name,
+          caId,
+          commonName,
+          subjectAlternativeNames: subjectAlternativeNamesList,
+          ttl,
+          keyUsages: keyUsagesList,
+          extendedKeyUsages: extendedKeyUsagesList
+        });
+      }
+
+      reset();
+      handlePopUpToggle("pkiSubscriber", false);
+
+      createNotification({
+        text: `Successfully ${pkiSubscriber ? "updated" : "added"} PKI subscriber`,
+        type: "success"
+      });
+    } catch (err) {
+      console.error(err);
+      createNotification({
+        text: `Failed to ${pkiSubscriber ? "update" : "add"} PKI subscriber`,
+        type: "error"
+      });
+    }
+  };
+
+  return (
+    <Modal
+      isOpen={popUp?.pkiSubscriber?.isOpen}
+      onOpenChange={(isOpen) => {
+        reset();
+        handlePopUpToggle("pkiSubscriber", isOpen);
+      }}
+    >
+      <ModalContent title={`${pkiSubscriber ? "Update" : "Add"} PKI Subscriber`}>
+        <form onSubmit={handleSubmit(onFormSubmit)}>
+          {pkiSubscriber && (
+            <FormControl label="Subscriber ID">
+              <Input value={pkiSubscriber.id} isDisabled className="bg-white/[0.07]" />
+            </FormControl>
+          )}
+          <Controller
+            control={control}
+            name="name"
+            render={({ field, fieldState: { error } }) => (
+              <FormControl
+                label="Name"
+                isError={Boolean(error)}
+                errorText={error?.message}
+                isRequired
+              >
+                <Input {...field} placeholder="web-service" />
+              </FormControl>
+            )}
+          />
+          <Controller
+            control={control}
+            name="caId"
+            render={({ field: { onChange, ...field }, fieldState: { error } }) => (
+              <FormControl
+                label="Issuing CA"
+                errorText={error?.message}
+                isError={Boolean(error)}
+                isRequired
+              >
+                <Select
+                  defaultValue={field.value}
+                  {...field}
+                  onValueChange={(e) => onChange(e)}
+                  className="w-full"
+                >
+                  {(cas || []).map(({ id, dn }) => (
+                    <SelectItem value={id} key={`ca-${id}`}>
+                      {dn}
+                    </SelectItem>
+                  ))}
+                </Select>
+              </FormControl>
+            )}
+          />
+          <Controller
+            control={control}
+            name="commonName"
+            render={({ field, fieldState: { error } }) => (
+              <FormControl
+                label="Common Name"
+                isError={Boolean(error)}
+                errorText={error?.message}
+                isRequired
+              >
+                <Input {...field} placeholder="web.example.com" />
+              </FormControl>
+            )}
+          />
+          <Controller
+            control={control}
+            name="subjectAlternativeNames"
+            render={({ field, fieldState: { error } }) => (
+              <FormControl
+                label="Subject Alternative Names (SANs)"
+                isError={Boolean(error)}
+                errorText={error?.message}
+              >
+                <Input {...field} placeholder="app1.example.com, app2.example.com, ..." />
+              </FormControl>
+            )}
+          />
+          <Controller
+            control={control}
+            name="ttl"
+            render={({ field, fieldState: { error } }) => (
+              <FormControl
+                label="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}
+            >
+              {pkiSubscriber ? "Update" : "Add"}
+            </Button>
+            <Button
+              colorSchema="secondary"
+              variant="plain"
+              onClick={() => handlePopUpToggle("pkiSubscriber", false)}
+            >
+              Cancel
+            </Button>
+          </div>
+        </form>
+      </ModalContent>
+    </Modal>
+  );
+};
@@ -0,0 +1,93 @@
+import { faArrowUpRightFromSquare, faPlus } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import { createNotification } from "@app/components/notifications";
+import { ProjectPermissionCan } from "@app/components/permissions";
+import { Button, DeleteActionModal } from "@app/components/v2";
+import { ProjectPermissionPkiSubscriberActions, ProjectPermissionSub } from "@app/context";
+import { useDeletePkiSubscriber } from "@app/hooks/api";
+import { usePopUp } from "@app/hooks/usePopUp";
+
+import { PkiSubscriberModal } from "./PkiSubscriberModal";
+import { PkiSubscribersTable } from "./PkiSubscribersTable";
+
+export const PkiSubscriberSection = () => {
+  const { mutateAsync: deletePkiSubscriber } = useDeletePkiSubscriber();
+
+  const { popUp, handlePopUpOpen, handlePopUpClose, handlePopUpToggle } = usePopUp([
+    "pkiSubscriber",
+    "deletePkiSubscriber"
+  ] as const);
+
+  const onRemovePkiSubscriberSubmit = async (subscriberId: string) => {
+    try {
+      const subscriber = await deletePkiSubscriber({ subscriberId });
+
+      createNotification({
+        text: `Successfully deleted PKI subscriber: ${subscriber.name}`,
+        type: "success"
+      });
+
+      handlePopUpClose("deletePkiSubscriber");
+    } catch (err) {
+      console.error(err);
+      createNotification({
+        text: "Failed to delete PKI subscriber",
+        type: "error"
+      });
+    }
+  };
+
+  return (
+    <div className="mb-6 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">Subscribers</p>
+        <div className="flex w-full justify-end">
+          <a
+            target="_blank"
+            rel="noopener noreferrer"
+            href="https://infisical.com/docs/documentation/platform/pki"
+          >
+            <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={ProjectPermissionPkiSubscriberActions.Create}
+            a={ProjectPermissionSub.PkiSubscribers}
+          >
+            {(isAllowed) => (
+              <Button
+                colorSchema="primary"
+                type="submit"
+                leftIcon={<FontAwesomeIcon icon={faPlus} />}
+                onClick={() => handlePopUpOpen("pkiSubscriber")}
+                isDisabled={!isAllowed}
+                className="ml-4"
+              >
+                Add Subscriber
+              </Button>
+            )}
+          </ProjectPermissionCan>
+        </div>
+      </div>
+      <PkiSubscribersTable handlePopUpOpen={handlePopUpOpen} />
+      <PkiSubscriberModal popUp={popUp} handlePopUpToggle={handlePopUpToggle} />
+      <DeleteActionModal
+        isOpen={popUp.deletePkiSubscriber.isOpen}
+        title="Are you sure you want to remove the PKI subscriber?"
+        onChange={(isOpen) => handlePopUpToggle("deletePkiSubscriber", isOpen)}
+        deleteKey="confirm"
+        onDeleteApproved={() =>
+          onRemovePkiSubscriberSubmit(
+            (popUp?.deletePkiSubscriber?.data as { subscriberId: string })?.subscriberId
+          )
+        }
+      />
+    </div>
+  );
+};
@@ -0,0 +1,129 @@
+import { faEllipsis, faPencil, faServer, faTrash } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { twMerge } from "tailwind-merge";
+
+import { ProjectPermissionCan } from "@app/components/permissions";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+  EmptyState,
+  Table,
+  TableContainer,
+  TableSkeleton,
+  TBody,
+  Td,
+  Th,
+  THead,
+  Tooltip,
+  Tr
+} from "@app/components/v2";
+import {
+  ProjectPermissionPkiSubscriberActions,
+  ProjectPermissionSub,
+  useWorkspace
+} from "@app/context";
+import { useListWorkspacePkiSubscribers } from "@app/hooks/api";
+import { UsePopUpState } from "@app/hooks/usePopUp";
+
+type Props = {
+  handlePopUpOpen: (
+    popUpName: keyof UsePopUpState<["deletePkiSubscriber", "pkiSubscriber"]>,
+    data?: object
+  ) => void;
+};
+
+export const PkiSubscribersTable = ({ handlePopUpOpen }: Props) => {
+  const { currentWorkspace } = useWorkspace();
+  const { data, isPending } = useListWorkspacePkiSubscribers(currentWorkspace?.id || "");
+  return (
+    <div>
+      <TableContainer>
+        <Table className="w-full table-fixed">
+          <THead>
+            <Tr>
+              <Th>Name</Th>
+              <Th>Common Name</Th>
+              <Th />
+            </Tr>
+          </THead>
+          <TBody>
+            {isPending && <TableSkeleton columns={3} innerKey="pki-subscribers" />}
+            {!isPending &&
+              data &&
+              data.length > 0 &&
+              data.map((subscriber) => {
+                return (
+                  <Tr className="h-10" key={`pki-subscriber-${subscriber.id}`}>
+                    <Td>{subscriber.name}</Td>
+                    <Td>{subscriber.commonName}</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={ProjectPermissionPkiSubscriberActions.Edit}
+                            a={ProjectPermissionSub.PkiSubscribers}
+                          >
+                            {(isAllowed) => (
+                              <DropdownMenuItem
+                                className={twMerge(
+                                  !isAllowed && "pointer-events-none cursor-not-allowed opacity-50"
+                                )}
+                                onClick={(e) => {
+                                  e.stopPropagation();
+                                  handlePopUpOpen("pkiSubscriber", {
+                                    subscriberId: subscriber.id
+                                  });
+                                }}
+                                disabled={!isAllowed}
+                                icon={<FontAwesomeIcon icon={faPencil} />}
+                              >
+                                Edit Subscriber
+                              </DropdownMenuItem>
+                            )}
+                          </ProjectPermissionCan>
+                          <ProjectPermissionCan
+                            I={ProjectPermissionPkiSubscriberActions.Delete}
+                            a={ProjectPermissionSub.PkiSubscribers}
+                          >
+                            {(isAllowed) => (
+                              <DropdownMenuItem
+                                className={twMerge(
+                                  !isAllowed && "pointer-events-none cursor-not-allowed opacity-50"
+                                )}
+                                onClick={(e) => {
+                                  e.stopPropagation();
+                                  handlePopUpOpen("deletePkiSubscriber", {
+                                    subscriberId: subscriber.id
+                                  });
+                                }}
+                                disabled={!isAllowed}
+                                icon={<FontAwesomeIcon icon={faTrash} />}
+                              >
+                                Delete Subscriber
+                              </DropdownMenuItem>
+                            )}
+                          </ProjectPermissionCan>
+                        </DropdownMenuContent>
+                      </DropdownMenu>
+                    </Td>
+                  </Tr>
+                );
+              })}
+          </TBody>
+        </Table>
+        {!isPending && data?.length === 0 && (
+          <EmptyState title="No PKI subscribers have been added" icon={faServer} />
+        )}
+      </TableContainer>
+    </div>
+  );
+};
@@ -0,0 +1 @@
+export { PkiSubscriberSection } from "./PkiSubscriberSection";
@@ -0,0 +1,18 @@
+import { createFileRoute } from "@tanstack/react-router";
+
+import { PkiSubscribersPage } from "./PkiSubscribersPage";
+
+export const Route = createFileRoute(
+  "/_authenticate/_inject-org-details/_org-layout/cert-manager/$projectId/_cert-manager-layout/subscribers"
+)({
+  component: PkiSubscribersPage
+});
+
+function RouteComponent() {
+  return (
+    <div>
+      Hello
+      "/_authenticate/_inject-org-details/_org-layout/cert-manager/$projectId/_cert-manager-layout/subscribers"!
+    </div>
+  );
+}
@@ -91,6 +91,7 @@ import { Route as organizationSettingsPageOauthCallbackPageRouteImport } from '.
 import { Route as kmsSettingsPageRouteImport } from './pages/kms/SettingsPage/route'
 import { Route as kmsOverviewPageRouteImport } from './pages/kms/OverviewPage/route'
 import { Route as kmsKmipPageRouteImport } from './pages/kms/KmipPage/route'
+import { Route as certManagerPkiSubscribersPageRouteImport } from './pages/cert-manager/PkiSubscribersPage/route'
 import { Route as certManagerSettingsPageRouteImport } from './pages/cert-manager/SettingsPage/route'
 import { Route as certManagerCertificatesPageRouteImport } from './pages/cert-manager/CertificatesPage/route'
 import { Route as certManagerCertificateAuthoritiesPageRouteImport } from './pages/cert-manager/CertificateAuthoritiesPage/route'
@@ -904,6 +905,13 @@ const kmsKmipPageRouteRoute = kmsKmipPageRouteImport.update({
  getParentRoute: () => kmsLayoutRoute,
 } as any)

+const certManagerPkiSubscribersPageRouteRoute =
+  certManagerPkiSubscribersPageRouteImport.update({
+    id: '/subscribers',
+    path: '/subscribers',
+    getParentRoute: () => certManagerLayoutRoute,
+  } as any)
+
 const certManagerSettingsPageRouteRoute =
  certManagerSettingsPageRouteImport.update({
    id: '/settings',
@@ -2184,6 +2192,13 @@ declare module '@tanstack/react-router' {
      preLoaderRoute: typeof certManagerSettingsPageRouteImport
      parentRoute: typeof certManagerLayoutImport
    }
+    '/_authenticate/_inject-org-details/_org-layout/cert-manager/$projectId/_cert-manager-layout/subscribers': {
+      id: '/_authenticate/_inject-org-details/_org-layout/cert-manager/$projectId/_cert-manager-layout/subscribers'
+      path: '/subscribers'
+      fullPath: '/cert-manager/$projectId/subscribers'
+      preLoaderRoute: typeof certManagerPkiSubscribersPageRouteImport
+      parentRoute: typeof certManagerLayoutImport
+    }
    '/_authenticate/_inject-org-details/_org-layout/kms/$projectId/_kms-layout/kmip': {
      id: '/_authenticate/_inject-org-details/_org-layout/kms/$projectId/_kms-layout/kmip'
      path: '/kmip'
@@ -3221,6 +3236,7 @@ interface certManagerLayoutRouteChildren {
  certManagerCertificateAuthoritiesPageRouteRoute: typeof certManagerCertificateAuthoritiesPageRouteRoute
  certManagerCertificatesPageRouteRoute: typeof certManagerCertificatesPageRouteRoute
  certManagerSettingsPageRouteRoute: typeof certManagerSettingsPageRouteRoute
+  certManagerPkiSubscribersPageRouteRoute: typeof certManagerPkiSubscribersPageRouteRoute
  projectAccessControlPageRouteCertManagerRoute: typeof projectAccessControlPageRouteCertManagerRoute
  certManagerCertAuthDetailsByIDPageRouteRoute: typeof certManagerCertAuthDetailsByIDPageRouteRoute
  projectIdentityDetailsByIDPageRouteCertManagerRoute: typeof projectIdentityDetailsByIDPageRouteCertManagerRoute
@@ -3235,6 +3251,8 @@ const certManagerLayoutRouteChildren: certManagerLayoutRouteChildren = {
    certManagerCertificateAuthoritiesPageRouteRoute,
  certManagerCertificatesPageRouteRoute: certManagerCertificatesPageRouteRoute,
  certManagerSettingsPageRouteRoute: certManagerSettingsPageRouteRoute,
+  certManagerPkiSubscribersPageRouteRoute:
+    certManagerPkiSubscribersPageRouteRoute,
  projectAccessControlPageRouteCertManagerRoute:
    projectAccessControlPageRouteCertManagerRoute,
  certManagerCertAuthDetailsByIDPageRouteRoute:
@@ -3905,6 +3923,7 @@ export interface FileRoutesByFullPath {
  '/cert-manager/$projectId/certificate-authorities': typeof certManagerCertificateAuthoritiesPageRouteRoute
  '/cert-manager/$projectId/overview': typeof certManagerCertificatesPageRouteRoute
  '/cert-manager/$projectId/settings': typeof certManagerSettingsPageRouteRoute
+  '/cert-manager/$projectId/subscribers': typeof certManagerPkiSubscribersPageRouteRoute
  '/kms/$projectId/kmip': typeof kmsKmipPageRouteRoute
  '/kms/$projectId/overview': typeof kmsOverviewPageRouteRoute
  '/kms/$projectId/settings': typeof kmsSettingsPageRouteRoute
@@ -4084,6 +4103,7 @@ export interface FileRoutesByTo {
  '/cert-manager/$projectId/certificate-authorities': typeof certManagerCertificateAuthoritiesPageRouteRoute
  '/cert-manager/$projectId/overview': typeof certManagerCertificatesPageRouteRoute
  '/cert-manager/$projectId/settings': typeof certManagerSettingsPageRouteRoute
+  '/cert-manager/$projectId/subscribers': typeof certManagerPkiSubscribersPageRouteRoute
  '/kms/$projectId/kmip': typeof kmsKmipPageRouteRoute
  '/kms/$projectId/overview': typeof kmsOverviewPageRouteRoute
  '/kms/$projectId/settings': typeof kmsSettingsPageRouteRoute
@@ -4280,6 +4300,7 @@ export interface FileRoutesById {
  '/_authenticate/_inject-org-details/_org-layout/cert-manager/$projectId/_cert-manager-layout/certificate-authorities': typeof certManagerCertificateAuthoritiesPageRouteRoute
  '/_authenticate/_inject-org-details/_org-layout/cert-manager/$projectId/_cert-manager-layout/overview': typeof certManagerCertificatesPageRouteRoute
  '/_authenticate/_inject-org-details/_org-layout/cert-manager/$projectId/_cert-manager-layout/settings': typeof certManagerSettingsPageRouteRoute
+  '/_authenticate/_inject-org-details/_org-layout/cert-manager/$projectId/_cert-manager-layout/subscribers': typeof certManagerPkiSubscribersPageRouteRoute
  '/_authenticate/_inject-org-details/_org-layout/kms/$projectId/_kms-layout/kmip': typeof kmsKmipPageRouteRoute
  '/_authenticate/_inject-org-details/_org-layout/kms/$projectId/_kms-layout/overview': typeof kmsOverviewPageRouteRoute
  '/_authenticate/_inject-org-details/_org-layout/kms/$projectId/_kms-layout/settings': typeof kmsSettingsPageRouteRoute
@@ -4469,6 +4490,7 @@ export interface FileRouteTypes {
    | '/cert-manager/$projectId/certificate-authorities'
    | '/cert-manager/$projectId/overview'
    | '/cert-manager/$projectId/settings'
+    | '/cert-manager/$projectId/subscribers'
    | '/kms/$projectId/kmip'
    | '/kms/$projectId/overview'
    | '/kms/$projectId/settings'
@@ -4647,6 +4669,7 @@ export interface FileRouteTypes {
    | '/cert-manager/$projectId/certificate-authorities'
    | '/cert-manager/$projectId/overview'
    | '/cert-manager/$projectId/settings'
+    | '/cert-manager/$projectId/subscribers'
    | '/kms/$projectId/kmip'
    | '/kms/$projectId/overview'
    | '/kms/$projectId/settings'
@@ -4841,6 +4864,7 @@ export interface FileRouteTypes {
    | '/_authenticate/_inject-org-details/_org-layout/cert-manager/$projectId/_cert-manager-layout/certificate-authorities'
    | '/_authenticate/_inject-org-details/_org-layout/cert-manager/$projectId/_cert-manager-layout/overview'
    | '/_authenticate/_inject-org-details/_org-layout/cert-manager/$projectId/_cert-manager-layout/settings'
+    | '/_authenticate/_inject-org-details/_org-layout/cert-manager/$projectId/_cert-manager-layout/subscribers'
    | '/_authenticate/_inject-org-details/_org-layout/kms/$projectId/_kms-layout/kmip'
    | '/_authenticate/_inject-org-details/_org-layout/kms/$projectId/_kms-layout/overview'
    | '/_authenticate/_inject-org-details/_org-layout/kms/$projectId/_kms-layout/settings'
@@ -5368,6 +5392,7 @@ export const routeTree = rootRoute
        "/_authenticate/_inject-org-details/_org-layout/cert-manager/$projectId/_cert-manager-layout/certificate-authorities",
        "/_authenticate/_inject-org-details/_org-layout/cert-manager/$projectId/_cert-manager-layout/overview",
        "/_authenticate/_inject-org-details/_org-layout/cert-manager/$projectId/_cert-manager-layout/settings",
+        "/_authenticate/_inject-org-details/_org-layout/cert-manager/$projectId/_cert-manager-layout/subscribers",
        "/_authenticate/_inject-org-details/_org-layout/cert-manager/$projectId/_cert-manager-layout/access-management",
        "/_authenticate/_inject-org-details/_org-layout/cert-manager/$projectId/_cert-manager-layout/ca/$caId",
        "/_authenticate/_inject-org-details/_org-layout/cert-manager/$projectId/_cert-manager-layout/identities/$identityId",
@@ -5438,6 +5463,10 @@ export const routeTree = rootRoute
      "filePath": "cert-manager/SettingsPage/route.tsx",
      "parent": "/_authenticate/_inject-org-details/_org-layout/cert-manager/$projectId/_cert-manager-layout"
    },
+    "/_authenticate/_inject-org-details/_org-layout/cert-manager/$projectId/_cert-manager-layout/subscribers": {
+      "filePath": "cert-manager/PkiSubscribersPage/route.tsx",
+      "parent": "/_authenticate/_inject-org-details/_org-layout/cert-manager/$projectId/_cert-manager-layout"
+    },
    "/_authenticate/_inject-org-details/_org-layout/kms/$projectId/_kms-layout/kmip": {
      "filePath": "kms/KmipPage/route.tsx",
      "parent": "/_authenticate/_inject-org-details/_org-layout/kms/$projectId/_kms-layout"
@@ -284,6 +284,7 @@ const secretManagerIntegrationsRedirect = route("/integrations", [

 const certManagerRoutes = route("/cert-manager/$projectId", [
  layout("cert-manager-layout", "cert-manager/layout.tsx", [
+    route("/subscribers", "cert-manager/PkiSubscribersPage/route.tsx"),
    route("/overview", "cert-manager/CertificatesPage/route.tsx"),
    route("/certificate-authorities", "cert-manager/CertificateAuthoritiesPage/route.tsx"),
    route("/alerting", "cert-manager/AlertingPage/route.tsx"),
				`@@ -0,0 +1 @@`
				`export { PkiSubscriberSection } from "./PkiSubscriberSection";`