Merge pull request #4777 from Infisical/feat/pki-sync-v2

PKI Syncs: Certificate Syncs and AWS ARN option
2026-10-21 19:28:16 +00:00 · 2025-11-03 11:55:47 -03:00
parent 41f8708e27 ea7bff7f34
commit 4818589c85
102 changed files with 4150 additions and 1183 deletions
@@ -122,11 +122,12 @@ export const CertificateIssuanceModal = ({ popUp, handlePopUpToggle, profileId }

  const { data: profilesData } = useListCertificateProfiles({
    projectId: currentProject?.id || "",
-    includeMetrics: false,
    enrollmentType: "api"
  });

-  const { mutateAsync: createCertificate } = useCreateCertificateV3();
+  const { mutateAsync: createCertificate } = useCreateCertificateV3({
+    projectId: currentProject?.id
+  });

  const formResolver = useMemo(() => {
    return zodResolver(createSchema(shouldShowSubjectSection));
@@ -0,0 +1,296 @@
+import { useEffect, useMemo, useState } from "react";
+import { faPlus, faSearch } from "@fortawesome/free-solid-svg-icons";
+import { useNavigate } from "@tanstack/react-router";
+
+import { createNotification } from "@app/components/notifications";
+import {
+  Button,
+  Checkbox,
+  EmptyState,
+  Input,
+  Modal,
+  ModalContent,
+  Pagination,
+  Table,
+  TableContainer,
+  TBody,
+  Td,
+  Th,
+  THead,
+  Tr
+} from "@app/components/v2";
+import { ROUTE_PATHS } from "@app/const/routes";
+import { useProject } from "@app/context";
+import {
+  PkiSync,
+  useAddCertificatesToPkiSync,
+  useListPkiSyncsWithCertificate,
+  useRemoveCertificatesFromPkiSync
+} from "@app/hooks/api/pkiSyncs";
+import { IntegrationsListPageTabs } from "@app/types/integrations";
+
+type Props = {
+  popUp: {
+    isOpen: boolean;
+    data?: {
+      certificateId?: string;
+      commonName?: string;
+    };
+  };
+  handlePopUpToggle: (popUpName: "managePkiSyncs", state?: boolean) => void;
+};
+
+const PER_PAGE = 10;
+
+export const CertificateManagePkiSyncsModal = ({ popUp, handlePopUpToggle }: Props) => {
+  const [selectedSyncIds, setSelectedSyncIds] = useState<Set<string>>(new Set());
+  const [initialSyncIds, setInitialSyncIds] = useState<Set<string>>(new Set());
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [currentPage, setCurrentPage] = useState(1);
+  const [searchTerm, setSearchTerm] = useState("");
+
+  const { currentProject } = useProject();
+  const navigate = useNavigate();
+  const { certificateId, commonName } = popUp.data || {};
+
+  const { data: pkiSyncs = [], isPending } = useListPkiSyncsWithCertificate(
+    currentProject?.id || "",
+    certificateId || "",
+    {
+      enabled: !!currentProject?.id && !!certificateId
+    }
+  );
+  const addCertificatesToSync = useAddCertificatesToPkiSync();
+  const removeCertificatesFromSync = useRemoveCertificatesFromPkiSync();
+
+  const filteredSyncs = useMemo(() => {
+    if (!searchTerm.trim()) return pkiSyncs;
+
+    const searchLower = searchTerm.toLowerCase();
+    return pkiSyncs.filter((sync) => sync.name.toLowerCase().includes(searchLower));
+  }, [pkiSyncs, searchTerm]);
+
+  const startIndex = (currentPage - 1) * PER_PAGE;
+  const endIndex = startIndex + PER_PAGE;
+  const paginatedSyncs = filteredSyncs.slice(startIndex, endIndex);
+
+  useEffect(() => {
+    setCurrentPage(1);
+  }, [searchTerm]);
+
+  const handleClose = () => {
+    handlePopUpToggle("managePkiSyncs", false);
+    setSelectedSyncIds(new Set());
+    setInitialSyncIds(new Set());
+    setSearchTerm("");
+    setCurrentPage(1);
+  };
+
+  const handleNavigateToPkiSyncs = () => {
+    if (!currentProject?.id) return;
+
+    navigate({
+      to: ROUTE_PATHS.CertManager.IntegrationsListPage.path,
+      params: {
+        projectId: currentProject.id
+      },
+      search: {
+        selectedTab: IntegrationsListPageTabs.PkiSyncs
+      }
+    });
+    handleClose();
+  };
+
+  const getDestinationDisplayName = (destination: string) => {
+    switch (destination) {
+      case PkiSync.AzureKeyVault:
+        return "Azure Key Vault";
+      case PkiSync.AwsCertificateManager:
+        return "AWS Certificate Manager";
+      default:
+        return destination;
+    }
+  };
+
+  useEffect(() => {
+    if (!certificateId || !pkiSyncs || pkiSyncs.length === 0) return;
+
+    const currentSyncIds = new Set(
+      pkiSyncs.filter((sync) => sync.hasCertificate).map((sync) => sync.id)
+    );
+    setSelectedSyncIds(currentSyncIds);
+    setInitialSyncIds(new Set(currentSyncIds));
+  }, [certificateId, pkiSyncs]);
+
+  const handleSyncToggle = (syncId: string) => {
+    setSelectedSyncIds((prev) => {
+      const newSet = new Set(prev);
+      if (newSet.has(syncId)) {
+        newSet.delete(syncId);
+      } else {
+        newSet.add(syncId);
+      }
+      return newSet;
+    });
+  };
+
+  const handleSaveChanges = async () => {
+    if (!certificateId) return;
+
+    try {
+      setIsSubmitting(true);
+
+      const syncsToAdd = Array.from(selectedSyncIds).filter((id) => !initialSyncIds.has(id));
+      const syncsToRemove = Array.from(initialSyncIds).filter((id) => !selectedSyncIds.has(id));
+
+      await Promise.all(
+        syncsToAdd.map((syncId) =>
+          addCertificatesToSync.mutateAsync({
+            pkiSyncId: syncId,
+            certificateIds: [certificateId]
+          })
+        )
+      );
+
+      await Promise.all(
+        syncsToRemove.map((syncId) =>
+          removeCertificatesFromSync.mutateAsync({
+            pkiSyncId: syncId,
+            certificateIds: [certificateId]
+          })
+        )
+      );
+
+      createNotification({
+        text: `PKI sync settings updated for certificate "${commonName}"`,
+        type: "success"
+      });
+
+      handleClose();
+    } catch (error) {
+      console.error(error);
+      createNotification({
+        text: "Failed to update PKI sync settings",
+        type: "error"
+      });
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  return (
+    <Modal isOpen={popUp.isOpen} onOpenChange={handleClose}>
+      <ModalContent
+        title="Manage PKI Syncs"
+        subTitle={`Select which PKI syncs "${commonName}" should be part of`}
+        className="max-w-3xl"
+      >
+        <div className="mb-4">
+          <Input
+            value={searchTerm}
+            onChange={(e) => setSearchTerm(e.target.value)}
+            placeholder="Search PKI syncs by name..."
+          />
+        </div>
+        <div className="mt-4 max-h-96 overflow-y-auto">
+          {isPending && (
+            <div className="flex h-32 items-center justify-center">
+              <div className="text-bunker-300">Loading PKI syncs...</div>
+            </div>
+          )}
+          {!isPending && pkiSyncs.length === 0 && (
+            <EmptyState title="No PKI syncs available" icon={faPlus}>
+              <div className="mt-1">
+                Create a{" "}
+                <button
+                  type="button"
+                  onClick={handleNavigateToPkiSyncs}
+                  className="cursor-pointer underline hover:text-mineshaft-300"
+                >
+                  PKI sync
+                </button>{" "}
+                first to manage certificate syncing.
+              </div>
+            </EmptyState>
+          )}
+          {!isPending && pkiSyncs.length > 0 && filteredSyncs.length === 0 && searchTerm && (
+            <EmptyState title="No PKI syncs found" icon={faSearch}>
+              <div className="mt-1">
+                No PKI syncs match your search criteria. Try a different search term.
+              </div>
+            </EmptyState>
+          )}
+          {!isPending && filteredSyncs.length > 0 && (
+            <TableContainer>
+              <Table>
+                <THead>
+                  <Tr>
+                    <Th className="w-12" />
+                    <Th className="w-1/2">Name</Th>
+                    <Th className="w-1/2">Destination</Th>
+                  </Tr>
+                </THead>
+                <TBody>
+                  {paginatedSyncs.map((sync) => (
+                    <Tr
+                      key={sync.id}
+                      className="cursor-pointer hover:bg-mineshaft-700"
+                      onClick={() => handleSyncToggle(sync.id)}
+                    >
+                      <Td>
+                        <Checkbox
+                          isChecked={selectedSyncIds.has(sync.id)}
+                          onCheckedChange={() => handleSyncToggle(sync.id)}
+                          id={`sync-${sync.id}`}
+                        />
+                      </Td>
+                      <Td className="w-1/2 max-w-0">
+                        <div className="truncate" title={sync.name}>
+                          {sync.name}
+                        </div>
+                      </Td>
+                      <Td className="w-1/2 max-w-0">
+                        <div
+                          className="truncate capitalize"
+                          title={getDestinationDisplayName(sync.destination)}
+                        >
+                          {getDestinationDisplayName(sync.destination)}
+                        </div>
+                      </Td>
+                    </Tr>
+                  ))}
+                </TBody>
+              </Table>
+            </TableContainer>
+          )}
+          {!isPending && filteredSyncs.length > PER_PAGE && (
+            <div className="mt-4">
+              <Pagination
+                count={filteredSyncs.length}
+                page={currentPage}
+                perPage={PER_PAGE}
+                onChangePage={setCurrentPage}
+                onChangePerPage={() => {}}
+              />
+            </div>
+          )}
+        </div>
+
+        <div className="mt-6 flex justify-end gap-3">
+          <Button variant="outline_bg" onClick={handleClose} isDisabled={isSubmitting}>
+            Cancel
+          </Button>
+          <Button
+            variant="solid"
+            colorSchema="primary"
+            onClick={handleSaveChanges}
+            isDisabled={isSubmitting}
+            isLoading={isSubmitting}
+          >
+            Save Changes
+          </Button>
+        </div>
+      </ModalContent>
+    </Modal>
+  );
+};
@@ -15,6 +15,7 @@ import { usePopUp } from "@app/hooks/usePopUp";
 import { CertificateCertModal } from "./CertificateCertModal";
 import { CertificateImportModal } from "./CertificateImportModal";
 import { CertificateIssuanceModal } from "./CertificateIssuanceModal";
+import { CertificateManagePkiSyncsModal } from "./CertificateManagePkiSyncsModal";
 import { CertificateManageRenewalModal } from "./CertificateManageRenewalModal";
 import { CertificateModal } from "./CertificateModal";
 import { CertificateRenewalModal } from "./CertificateRenewalModal";
@@ -36,7 +37,8 @@ export const CertificatesSection = () => {
    "deleteCertificate",
    "revokeCertificate",
    "manageRenewal",
-    "renewCertificate"
+    "renewCertificate",
+    "managePkiSyncs"
  ] as const);

  const onRemoveCertificateSubmit = async (serialNumber: string) => {
@@ -104,6 +106,10 @@ export const CertificatesSection = () => {
      <CertificateManageRenewalModal popUp={popUp} handlePopUpToggle={handlePopUpToggle} />
      <CertificateRenewalModal popUp={popUp} handlePopUpToggle={handlePopUpToggle} />
      <CertificateRevocationModal popUp={popUp} handlePopUpToggle={handlePopUpToggle} />
+      <CertificateManagePkiSyncsModal
+        popUp={popUp.managePkiSyncs}
+        handlePopUpToggle={handlePopUpToggle}
+      />
      <DeleteActionModal
        isOpen={popUp.deleteCertificate.isOpen}
        title={`Are you sure you want to remove the certificate ${
@@ -2,19 +2,24 @@ import { useMemo, useState } from "react";
 import {
  faBan,
  faCertificate,
+  faClockRotateLeft,
  faEllipsis,
  faEye,
  faFileExport,
+  faLink,
  faRedo,
  faTrash
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { format } from "date-fns";
-import { CircleQuestionMarkIcon } from "lucide-react";
 import { twMerge } from "tailwind-merge";

 import { createNotification } from "@app/components/notifications";
 import { ProjectPermissionCan } from "@app/components/permissions";
+import {
+  CertificateDisplayName,
+  getCertificateDisplayName
+} from "@app/components/utilities/certificateDisplayUtils";
 import {
  DropdownMenu,
  DropdownMenuContent,
@@ -38,12 +43,12 @@ import {
  ProjectPermissionSub,
  useProject
 } from "@app/context";
-import { useListWorkspaceCertificates, useUpdateRenewalConfig } from "@app/hooks/api";
+import { useUpdateRenewalConfig } from "@app/hooks/api";
 import { caSupportsCapability } from "@app/hooks/api/ca/constants";
 import { CaCapability, CaType } from "@app/hooks/api/ca/enums";
 import { useListCasByProjectId } from "@app/hooks/api/ca/queries";
 import { CertStatus } from "@app/hooks/api/certificates/enums";
-import { TCertificate } from "@app/hooks/api/certificates/types";
+import { useListWorkspaceCertificates } from "@app/hooks/api/projects";
 import { UsePopUpState } from "@app/hooks/usePopUp";

 import { getCertValidUntilBadgeDetails } from "./CertificatesTable.utils";
@@ -55,93 +60,6 @@ const isExpiringWithinOneDay = (notAfter: string): boolean => {
  return expiryDate <= oneDayFromNow;
 };

-const getAutoRenewalInfo = (certificate: TCertificate) => {
-  if (certificate.renewedByCertificateId) {
-    return { text: "Renewed", variant: "neutral" as const };
-  }
-
-  const isRevoked = certificate.status === CertStatus.REVOKED;
-  const isExpired = new Date(certificate.notAfter) < new Date();
-  const hasNoProfile = !certificate.profileId;
-  const isExpiringWithinDay = isExpiringWithinOneDay(certificate.notAfter);
-
-  if (isRevoked) {
-    return {
-      text: "Not Available",
-      variant: "neutral" as const,
-      tooltip: "Renewal is not available for revoked certificates"
-    };
-  }
-
-  if (isExpired) {
-    return {
-      text: "Not Available",
-      variant: "neutral" as const,
-      tooltip: "Renewal is not available for expired certificates"
-    };
-  }
-
-  if (hasNoProfile) {
-    return {
-      text: "Not Available",
-      variant: "neutral" as const,
-      tooltip: "Renewal requires a certificate profile"
-    };
-  }
-
-  if (certificate.hasPrivateKey === false) {
-    return {
-      text: "Not Available",
-      variant: "neutral" as const,
-      tooltip: "Renewal is not available for certificates with externally generated private keys"
-    };
-  }
-
-  if (isExpiringWithinDay) {
-    return {
-      text: "Not Available",
-      variant: "neutral" as const,
-      tooltip: "Auto-renewal is not available for certificates expiring within 24 hours"
-    };
-  }
-
-  if (certificate.renewalError) {
-    return {
-      text: "Failed",
-      variant: "danger" as const,
-      tooltip: certificate.renewalError
-    };
-  }
-
-  if (!certificate.renewBeforeDays) {
-    return { text: "Auto-Renewal Disabled", variant: "warning" as const };
-  }
-
-  const notAfterDate = new Date(certificate.notAfter);
-  const renewalDate = new Date(
-    notAfterDate.getTime() - certificate.renewBeforeDays * 24 * 60 * 60 * 1000
-  );
-  const now = new Date();
-
-  if (renewalDate <= now) {
-    return { text: "Due Now", variant: "danger" as const };
-  }
-
-  const daysUntilRenewal = Math.floor(
-    (renewalDate.getTime() - now.getTime()) / (24 * 60 * 60 * 1000)
-  );
-
-  if (daysUntilRenewal === 0) {
-    return { text: "Renews today", variant: "warning" as const };
-  }
-
-  if (daysUntilRenewal <= 7) {
-    return { text: `Renews in ${daysUntilRenewal}d`, variant: "warning" as const };
-  }
-
-  return { text: `Renews in ${daysUntilRenewal}d`, variant: "success" as const };
-};
-
 type Props = {
  handlePopUpOpen: (
    popUpName: keyof UsePopUpState<
@@ -151,7 +69,8 @@ type Props = {
        "revokeCertificate",
        "certificateCert",
        "manageRenewal",
-        "renewCertificate"
+        "renewCertificate",
+        "managePkiSyncs"
      ]
    >,
    data?: {
@@ -232,20 +151,18 @@ export const CertificatesTable = ({ handlePopUpOpen }: Props) => {
      <Table>
        <THead>
          <Tr>
-            <Th>Common Name</Th>
-            <Th>Status</Th>
-            <Th>Not Before</Th>
-            <Th>Not After</Th>
-            <Th>Renewal Status</Th>
-            <Th />
+            <Th className="w-1/2">SAN / CN</Th>
+            <Th className="w-1/6">Status</Th>
+            <Th className="w-1/6">Not Before</Th>
+            <Th className="w-1/6">Not After</Th>
+            <Th className="w-12" />
          </Tr>
        </THead>
        <TBody>
-          {isPending && <TableSkeleton columns={5} innerKey="project-cas" />}
+          {isPending && <TableSkeleton columns={4} innerKey="project-cas" />}
          {!isPending &&
            data?.certificates.map((certificate) => {
              const { variant, label } = getCertValidUntilBadgeDetails(certificate.notAfter);
-              const autoRenewalInfo = getAutoRenewalInfo(certificate);

              const isRevoked = certificate.status === CertStatus.REVOKED;
              const isExpired = new Date(certificate.notAfter) < new Date();
@@ -254,9 +171,24 @@ export const CertificatesTable = ({ handlePopUpOpen }: Props) => {
              const isAutoRenewalEnabled = Boolean(
                certificate.renewBeforeDays && certificate.renewBeforeDays > 0
              );
+
+              const canShowAutoRenewalIcon = Boolean(
+                certificate.profileId &&
+                  certificate.hasPrivateKey !== false &&
+                  !certificate.renewedByCertificateId &&
+                  !isRevoked &&
+                  !isExpired &&
+                  !isExpiringWithinDay
+              );
+
+              // Still need originalDisplayName for other uses in the component
+              const { originalDisplayName } = getCertificateDisplayName(certificate, 64, "—");
+
              return (
-                <Tr className="h-10" key={`certificate-${certificate.id}`}>
-                  <Td>{certificate.commonName}</Td>
+                <Tr className="group h-10" key={`certificate-${certificate.id}`}>
+                  <Td className="max-w-0">
+                    <CertificateDisplayName cert={certificate} maxLength={64} fallback="—" />
+                  </Td>
                  <Td>
                    {certificate.status === CertStatus.REVOKED ? (
                      <Badge variant="danger">Revoked</Badge>
@@ -274,22 +206,64 @@ export const CertificatesTable = ({ handlePopUpOpen }: Props) => {
                      ? format(new Date(certificate.notAfter), "yyyy-MM-dd")
                      : "-"}
                  </Td>
-                  <Td>
-                    {autoRenewalInfo &&
-                      (autoRenewalInfo.tooltip ? (
-                        <div className="flex items-center gap-2">
-                          <Tooltip content={autoRenewalInfo.tooltip}>
-                            <Badge variant={autoRenewalInfo.variant}>
-                              {autoRenewalInfo.text}
-                              <CircleQuestionMarkIcon />
-                            </Badge>
-                          </Tooltip>
-                        </div>
-                      ) : (
-                        <Badge variant={autoRenewalInfo.variant}>{autoRenewalInfo.text}</Badge>
-                      ))}
-                  </Td>
-                  <Td className="flex justify-end">
+                  <Td className="flex items-center justify-end gap-2">
+                    <div
+                      className={`transition-opacity ${(() => {
+                        if (!canShowAutoRenewalIcon) return "";
+                        if (isAutoRenewalEnabled) return "opacity-100";
+                        return "opacity-0 group-hover:opacity-100";
+                      })()}`}
+                    >
+                      {canShowAutoRenewalIcon && (
+                        <Tooltip
+                          content={(() => {
+                            if (hasFailed && certificate.renewalError) {
+                              return `Auto-renewal failed: ${certificate.renewalError}`;
+                            }
+                            if (isAutoRenewalEnabled) {
+                              const expiryDate = new Date(certificate.notAfter);
+                              const now = new Date();
+                              const daysUntilExpiry = Math.ceil(
+                                (expiryDate.getTime() - now.getTime()) / (24 * 60 * 60 * 1000)
+                              );
+                              const daysUntilRenewal = Math.max(
+                                0,
+                                daysUntilExpiry - (certificate.renewBeforeDays || 0)
+                              );
+                              return `Auto-renews in ${daysUntilRenewal}d`;
+                            }
+                            return "Set auto renewal";
+                          })()}
+                        >
+                          <button
+                            type="button"
+                            className={(() => {
+                              if (hasFailed) return "pr-1 text-red-500 hover:text-red-400";
+                              return "pr-1 text-primary-500 hover:text-primary-400";
+                            })()}
+                            aria-label="Certificate auto-renewal"
+                            onClick={(e) => {
+                              e.stopPropagation();
+                              if (hasFailed) return;
+
+                              handlePopUpOpen("manageRenewal", {
+                                certificateId: certificate.id,
+                                commonName: originalDisplayName,
+                                profileId: certificate.profileId || "",
+                                renewBeforeDays: certificate.renewBeforeDays || 7,
+                                ttlDays: Math.ceil(
+                                  (new Date(certificate.notAfter).getTime() -
+                                    new Date(certificate.notBefore).getTime()) /
+                                    (24 * 60 * 60 * 1000)
+                                )
+                              });
+                            }}
+                          >
+                            <FontAwesomeIcon icon={faClockRotateLeft} />
+                          </button>
+                        </Tooltip>
+                      )}
+                    </div>
                    <DropdownMenu>
                      <DropdownMenuTrigger asChild className="rounded-lg">
                        <div className="hover:text-primary-400 data-[state=open]:text-primary-400">
@@ -483,6 +457,33 @@ export const CertificatesTable = ({ handlePopUpOpen }: Props) => {
                            </ProjectPermissionCan>
                          );
                        })()}
+                        {/* PKI Sync management - only for active certificates that are not renewed */}
+                        {certificate.status === CertStatus.ACTIVE &&
+                          !certificate.renewedByCertificateId && (
+                            <ProjectPermissionCan
+                              I={ProjectPermissionCertificateActions.Edit}
+                              a={ProjectPermissionSub.Certificates}
+                            >
+                              {(isAllowed) => (
+                                <DropdownMenuItem
+                                  className={twMerge(
+                                    !isAllowed &&
+                                      "pointer-events-none cursor-not-allowed opacity-50"
+                                  )}
+                                  onClick={async () =>
+                                    handlePopUpOpen("managePkiSyncs", {
+                                      certificateId: certificate.id,
+                                      commonName: certificate.commonName
+                                    })
+                                  }
+                                  disabled={!isAllowed}
+                                  icon={<FontAwesomeIcon icon={faLink} />}
+                                >
+                                  Manage PKI Syncs
+                                </DropdownMenuItem>
+                              )}
+                            </ProjectPermissionCan>
+                          )}
                        {/* Only show revoke button if CA supports revocation */}
                        {(() => {
                          const caType = caCapabilityMap[certificate.caId];