PKI Syncs revamp

2026-10-20 17:00:56 +00:00 · 2025-10-29 13:01:27 -03:00
parent 3e83ae95d1
commit 39eecb328d
64 changed files with 2799 additions and 350 deletions
@@ -0,0 +1,434 @@
+import React, { useEffect, useState } from "react";
+import { faSearch, faX } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import { createNotification } from "@app/components/notifications";
+import {
+  Badge,
+  Button,
+  Checkbox,
+  EmptyState,
+  Input,
+  Modal,
+  ModalContent,
+  Pagination,
+  Table,
+  TableContainer,
+  TBody,
+  Td,
+  Th,
+  THead,
+  Tr
+} from "@app/components/v2";
+import { useProject } from "@app/context";
+import {
+  CertStatus,
+  useAddCertificatesToPkiSync,
+  useListPkiSyncCertificates,
+  useRemoveCertificatesFromPkiSync
+} from "@app/hooks/api";
+import { TPkiSync } from "@app/hooks/api/pkiSyncs";
+import { useListWorkspaceCertificates } from "@app/hooks/api/projects";
+
+type Props = {
+  isOpen: boolean;
+  onClose: () => void;
+  pkiSync?: TPkiSync;
+  onCertificatesUpdated?: () => void;
+  selectedCertificateIds?: string[];
+  onCertificateSelectionChange?: (certificateIds: string[]) => void;
+  title?: string;
+  subtitle?: string;
+  saveButtonText?: string;
+};
+
+export const CertificateManagementModal = ({
+  isOpen,
+  onClose,
+  pkiSync,
+  onCertificatesUpdated,
+  selectedCertificateIds,
+  onCertificateSelectionChange,
+  title = "Manage Certificate Sync",
+  subtitle = "Select which certificates should be synced.",
+  saveButtonText = "Save Changes"
+}: Props) => {
+  const { currentProject } = useProject();
+  const [currentPage, setCurrentPage] = useState(1);
+  const [searchTerm, setSearchTerm] = useState("");
+  const [debouncedSearchTerm, setDebouncedSearchTerm] = useState("");
+  const pageSize = 10;
+
+  const isCreateMode = !pkiSync;
+
+  useEffect(() => {
+    const handler = setTimeout(() => {
+      setDebouncedSearchTerm(searchTerm);
+      setCurrentPage(1);
+    }, 300);
+
+    return () => {
+      clearTimeout(handler);
+    };
+  }, [searchTerm]);
+
+  const { data } = useListWorkspaceCertificates({
+    projectId: currentProject?.id || "",
+    offset: (currentPage - 1) * pageSize,
+    limit: pageSize,
+    commonName: debouncedSearchTerm || undefined,
+    friendlyName: debouncedSearchTerm || undefined,
+    forPkiSync: true
+  });
+
+  const allCertificates = data?.certificates || [];
+  const totalCount = data?.totalCount || 0;
+
+  const { data: syncData } = useListPkiSyncCertificates(pkiSync?.id || "");
+  const syncCertificates = syncData?.certificates || [];
+  const addCertificatesToSync = useAddCertificatesToPkiSync();
+  const removeCertificatesFromSync = useRemoveCertificatesFromPkiSync();
+
+  const syncedCertificateIds = isCreateMode
+    ? selectedCertificateIds || []
+    : syncCertificates.map((sc) => sc.certificateId);
+
+  const totalPages = Math.ceil(totalCount / pageSize);
+
+  const [selectedIds, setSelectedIds] = useState<string[]>([]);
+
+  React.useEffect(() => {
+    setSelectedIds(syncedCertificateIds);
+  }, [JSON.stringify(syncedCertificateIds)]);
+
+  const handleToggleSelection = (certId: string) => {
+    setSelectedIds((prev) =>
+      prev.includes(certId) ? prev.filter((id) => id !== certId) : [...prev, certId]
+    );
+  };
+
+  const handleSelectAll = () => {
+    const currentPageIds = allCertificates.map((cert) => cert.id);
+    const allCurrentPageSelected = currentPageIds.every((id) => selectedIds.includes(id));
+
+    if (allCurrentPageSelected) {
+      setSelectedIds((prev) => prev.filter((id) => !currentPageIds.includes(id)));
+    } else {
+      setSelectedIds((prev) => [...new Set([...prev, ...currentPageIds])]);
+    }
+  };
+
+  const clearSearch = () => {
+    setSearchTerm("");
+    setCurrentPage(1);
+  };
+
+  React.useEffect(() => {
+    if (isOpen) {
+      setCurrentPage(1);
+      setSearchTerm("");
+    }
+  }, [isOpen]);
+
+  const handleSaveCertificates = async () => {
+    try {
+      if (isCreateMode) {
+        if (onCertificateSelectionChange) {
+          onCertificateSelectionChange(selectedIds);
+          onClose();
+        }
+        return;
+      }
+
+      if (!pkiSync) return;
+
+      const certificatesToAdd = selectedIds.filter((id) => !syncedCertificateIds.includes(id));
+      const certificatesToRemove = syncedCertificateIds.filter((id) => !selectedIds.includes(id));
+
+      const invalidCertificates = certificatesToAdd
+        .map((id) => allCertificates.find((cert) => cert.id === id))
+        .filter((cert) => {
+          if (!cert) return false;
+          const isExpired = new Date(cert.notAfter) < new Date();
+          const isRevoked = cert.status === CertStatus.REVOKED;
+          return isExpired || isRevoked;
+        });
+
+      if (invalidCertificates.length > 0) {
+        const invalidNames = invalidCertificates.map((cert) => cert?.commonName).join(", ");
+        createNotification({
+          text: `Cannot add expired or revoked certificates: ${invalidNames}`,
+          type: "error"
+        });
+        return;
+      }
+
+      const operations = [];
+
+      if (certificatesToAdd.length > 0) {
+        operations.push(
+          addCertificatesToSync
+            .mutateAsync({
+              pkiSyncId: pkiSync.id,
+              certificateIds: certificatesToAdd
+            })
+            .then(() => ({
+              type: "add",
+              count: certificatesToAdd.length,
+              success: true
+            }))
+            .catch((error) => ({
+              type: "add",
+              count: certificatesToAdd.length,
+              success: false,
+              error
+            }))
+        );
+      }
+
+      if (certificatesToRemove.length > 0) {
+        operations.push(
+          removeCertificatesFromSync
+            .mutateAsync({
+              pkiSyncId: pkiSync.id,
+              certificateIds: certificatesToRemove
+            })
+            .then(() => ({
+              type: "remove",
+              count: certificatesToRemove.length,
+              success: true
+            }))
+            .catch((error) => ({
+              type: "remove",
+              count: certificatesToRemove.length,
+              success: false,
+              error
+            }))
+        );
+      }
+
+      if (operations.length === 0) {
+        createNotification({
+          text: "No changes to save",
+          type: "info"
+        });
+        onClose();
+        return;
+      }
+
+      const results = await Promise.all(operations);
+      const failures = results.filter((r) => !r.success);
+      const successes = results.filter((r) => r.success);
+
+      if (failures.length === 0) {
+        const addCount = successes.find((r) => r.type === "add")?.count || 0;
+        const removeCount = successes.find((r) => r.type === "remove")?.count || 0;
+
+        let message = "Certificate selection updated successfully";
+        if (addCount > 0 && removeCount > 0) {
+          message = `Added ${addCount} and removed ${removeCount} certificate(s)`;
+        } else if (addCount > 0) {
+          message = `Added ${addCount} certificate(s)`;
+        } else if (removeCount > 0) {
+          message = `Removed ${removeCount} certificate(s)`;
+        }
+
+        createNotification({
+          text: message,
+          type: "success"
+        });
+
+        if (onCertificatesUpdated) {
+          onCertificatesUpdated();
+        }
+        onClose();
+      } else {
+        const partialSuccess = successes.length > 0;
+        console.error("Certificate sync operation failures:", failures);
+
+        createNotification({
+          text: partialSuccess
+            ? "Some certificate changes failed. Check console for details."
+            : "Failed to update certificate selection",
+          type: partialSuccess ? "warning" : "error"
+        });
+
+        if (partialSuccess && onCertificatesUpdated) {
+          onCertificatesUpdated();
+        }
+      }
+    } catch (error) {
+      console.error("Unexpected error during certificate sync operation:", error);
+      createNotification({
+        text: "An unexpected error occurred while updating certificates",
+        type: "error"
+      });
+    }
+  };
+
+  const isLoading = addCertificatesToSync.isPending || removeCertificatesFromSync.isPending;
+
+  return (
+    <Modal isOpen={isOpen} onOpenChange={(open) => !open && onClose()}>
+      <ModalContent title={title} subTitle={subtitle} className="max-w-4xl">
+        <div className="space-y-4">
+          <div className="space-y-3">
+            <div className="relative">
+              <Input
+                placeholder="Search by common name, serial number, or SAN..."
+                value={searchTerm}
+                onChange={(e) => {
+                  setSearchTerm(e.target.value);
+                  setCurrentPage(1);
+                }}
+                className="pl-9"
+              />
+              <FontAwesomeIcon
+                icon={faSearch}
+                className="absolute top-1/2 left-3 h-3 w-3 -translate-y-1/2 transform text-bunker-300"
+              />
+              {searchTerm && (
+                <button
+                  type="button"
+                  onClick={clearSearch}
+                  className="absolute top-1/2 right-3 -translate-y-1/2 transform text-bunker-300 hover:text-bunker-100"
+                >
+                  <FontAwesomeIcon icon={faX} className="h-3 w-3" />
+                </button>
+              )}
+            </div>
+          </div>
+
+          {allCertificates.length === 0 ? (
+            <EmptyState title="No certificates found">
+              {searchTerm
+                ? "No certificates match your search criteria."
+                : "No certificates available for sync."}
+            </EmptyState>
+          ) : (
+            <>
+              <TableContainer>
+                <Table>
+                  <THead>
+                    <Tr>
+                      <Th className="w-12">
+                        <Checkbox
+                          id="select-all-certificates"
+                          isChecked={
+                            allCertificates.length > 0 &&
+                            allCertificates.every((cert) => selectedIds.includes(cert.id))
+                          }
+                          onCheckedChange={handleSelectAll}
+                        />
+                      </Th>
+                      <Th className="w-1/3">Common Name</Th>
+                      <Th className="w-1/3">Serial Number</Th>
+                      <Th className="w-1/6">Status</Th>
+                      <Th className="w-2/6">Expires</Th>
+                    </Tr>
+                  </THead>
+                  <TBody>
+                    {allCertificates.map((cert) => {
+                      const isExpired = new Date(cert.notAfter) < new Date();
+                      const isRevoked = cert.status === CertStatus.REVOKED;
+                      const cannotBeAdded = isExpired || isRevoked;
+                      const isAlreadySynced = syncedCertificateIds.includes(cert.id);
+
+                      return (
+                        <Tr
+                          key={cert.id}
+                          className={`cursor-pointer hover:bg-mineshaft-700 ${
+                            cannotBeAdded && !isAlreadySynced ? "opacity-50" : ""
+                          }`}
+                          onClick={() => {
+                            if (!cannotBeAdded || isAlreadySynced) {
+                              handleToggleSelection(cert.id);
+                            }
+                          }}
+                        >
+                          <Td className="max-w-0">
+                            <Checkbox
+                              id={cert.id}
+                              isChecked={selectedIds.includes(cert.id)}
+                              onCheckedChange={() => {
+                                if (!cannotBeAdded || isAlreadySynced) {
+                                  handleToggleSelection(cert.id);
+                                }
+                              }}
+                              isDisabled={cannotBeAdded && !isAlreadySynced}
+                            />
+                          </Td>
+                          <Td className="max-w-0">
+                            <div className="truncate" title={cert.commonName}>
+                              {cert.commonName}
+                            </div>
+                          </Td>
+                          <Td className="max-w-0">
+                            <div
+                              className="truncate font-mono text-xs text-bunker-300"
+                              title={cert.serialNumber}
+                            >
+                              {cert.serialNumber}
+                            </div>
+                          </Td>
+                          <Td className="max-w-0">
+                            <Badge
+                              variant={
+                                cert.status === CertStatus.ACTIVE && !isExpired
+                                  ? "success"
+                                  : "danger"
+                              }
+                            >
+                              {(() => {
+                                if (isRevoked) return "Revoked";
+                                if (isExpired) return "Expired";
+                                return cert.status === CertStatus.ACTIVE ? "Active" : cert.status;
+                              })()}
+                            </Badge>
+                          </Td>
+                          <Td className="max-w-0">
+                            <span
+                              className={`text-sm ${isExpired ? "text-red-400" : "text-bunker-300"}`}
+                            >
+                              {new Date(cert.notAfter).toLocaleDateString()}
+                            </span>
+                          </Td>
+                        </Tr>
+                      );
+                    })}
+                  </TBody>
+                </Table>
+              </TableContainer>
+
+              {totalPages > 1 && (
+                <div className="mt-4 flex justify-center">
+                  <Pagination
+                    count={totalCount}
+                    page={currentPage}
+                    perPage={pageSize}
+                    onChangePage={(page: number) => setCurrentPage(page)}
+                    onChangePerPage={() => {}}
+                  />
+                </div>
+              )}
+            </>
+          )}
+        </div>
+
+        <div className="mt-6 flex justify-end gap-2">
+          <Button variant="outline_bg" onClick={onClose}>
+            Cancel
+          </Button>
+          <Button
+            variant="solid"
+            colorSchema="primary"
+            onClick={handleSaveCertificates}
+            isLoading={isLoading}
+          >
+            {saveButtonText}
+          </Button>
+        </div>
+      </ModalContent>
+    </Modal>
+  );
+};
@@ -13,11 +13,11 @@ import { PKI_SYNC_MAP } from "@app/helpers/pkiSyncs";
 import { PkiSync, TPkiSync, useCreatePkiSync, usePkiSyncOption } from "@app/hooks/api/pkiSyncs";

 import { PkiSyncFormSchema, TPkiSyncForm } from "./schemas/pki-sync-schema";
+import { PkiSyncCertificatesFields } from "./PkiSyncCertificatesFields";
 import { PkiSyncDestinationFields } from "./PkiSyncDestinationFields";
 import { PkiSyncDetailsFields } from "./PkiSyncDetailsFields";
 import { PkiSyncOptionsFields } from "./PkiSyncOptionsFields";
 import { PkiSyncReviewFields } from "./PkiSyncReviewFields";
-import { PkiSyncSourceFields } from "./PkiSyncSourceFields";

 type Props = {
  onComplete: (pkiSync: TPkiSync) => void;
@@ -26,10 +26,10 @@ type Props = {
 };

 const FORM_TABS: { name: string; key: string; fields: (keyof TPkiSyncForm)[] }[] = [
-  { name: "Source", key: "source", fields: ["subscriberId"] },
  { name: "Destination", key: "destination", fields: ["connection", "destinationConfig"] },
  { name: "Sync Options", key: "options", fields: ["syncOptions"] },
  { name: "Details", key: "details", fields: ["name", "description"] },
+  { name: "Certificates", key: "certificates", fields: ["certificateIds"] },
  { name: "Review", key: "review", fields: [] }
 ];

@@ -49,34 +49,46 @@ export const CreatePkiSyncForm = ({ destination, onComplete, onCancel }: Props)
    defaultValues: {
      destination,
      isAutoSyncEnabled: false,
+      certificateIds: [],
      syncOptions: {
        canImportCertificates: false,
        canRemoveCertificates: false,
+        preserveArn: true,
        certificateNameSchema: syncOption?.defaultCertificateNameSchema
      }
    } as Partial<TPkiSyncForm>,
    reValidateMode: "onChange"
  });

-  const onSubmit = async ({ connection, destinationConfig, ...formData }: TPkiSyncForm) => {
+  const onSubmit = async ({
+    connection,
+    destinationConfig,
+    certificateIds,
+    ...formData
+  }: TPkiSyncForm) => {
    try {
      const pkiSync = await createPkiSync.mutateAsync({
        ...formData,
        connectionId: connection.id,
        projectId: currentProject.id,
-        destinationConfig
+        destinationConfig,
+        certificateIds: certificateIds || []
      });

      createNotification({
-        text: `Successfully added ${destinationName} Certificate Sync`,
+        text: `Successfully created ${destinationName} Certificate Sync${
+          certificateIds && certificateIds.length > 0
+            ? ` with ${certificateIds.length} certificate(s)`
+            : ""
+        }`,
        type: "success"
      });
      onComplete(pkiSync);
    } catch (err: Error | unknown) {
-      console.error(err);
+      console.error("PKI sync creation failed:", err);
      setShowConfirmation(false);
      createNotification({
-        title: `Failed to add ${destinationName} Certificate Sync`,
+        title: `Failed to create ${destinationName} Certificate Sync`,
        text: err instanceof Error ? err.message : "An unknown error occurred",
        type: "error"
      });
@@ -184,9 +196,6 @@ export const CreatePkiSyncForm = ({ destination, onComplete, onCancel }: Props)
            ))}
          </Tab.List>
          <Tab.Panels>
-            <Tab.Panel>
-              <PkiSyncSourceFields />
-            </Tab.Panel>
            <Tab.Panel>
              <PkiSyncDestinationFields />
            </Tab.Panel>
@@ -200,8 +209,8 @@ export const CreatePkiSyncForm = ({ destination, onComplete, onCancel }: Props)
                    <FormControl
                      helperText={
                        value
-                          ? "Certificates will automatically be synced when changes occur in the source subscriber."
-                          : "Certificates will not automatically be synced when changes occur in the source subscriber. You can still trigger syncs manually."
+                          ? "Certificates will automatically be synced when changes occur in the selected certificates."
+                          : "Certificates will not automatically be synced when changes occur. You can still trigger syncs manually."
                      }
                      isError={Boolean(error)}
                      errorText={error?.message}
@@ -223,6 +232,9 @@ export const CreatePkiSyncForm = ({ destination, onComplete, onCancel }: Props)
            <Tab.Panel>
              <PkiSyncDetailsFields />
            </Tab.Panel>
+            <Tab.Panel>
+              <PkiSyncCertificatesFields />
+            </Tab.Panel>
            <Tab.Panel>
              <PkiSyncReviewFields />
            </Tab.Panel>
@@ -0,0 +1,139 @@
+import { useMemo, useState } from "react";
+import { Controller, useFormContext } from "react-hook-form";
+import { faEdit, faPlus, faTrash } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import {
+  Button,
+  EmptyState,
+  FormControl,
+  Table,
+  TableContainer,
+  TBody,
+  Td,
+  Th,
+  THead,
+  Tr
+} from "@app/components/v2";
+import { useProject } from "@app/context";
+import { CertStatus } from "@app/hooks/api";
+import { useListWorkspaceCertificates } from "@app/hooks/api/projects";
+
+import { CertificateManagementModal } from "../CertificateManagementModal";
+import { TPkiSyncForm } from "./schemas/pki-sync-schema";
+
+export const PkiSyncCertificatesFields = () => {
+  const { control, watch, setValue } = useFormContext<TPkiSyncForm>();
+  const { currentProject } = useProject();
+  const [isSelectionModalOpen, setIsSelectionModalOpen] = useState(false);
+
+  const certificateIds = watch("certificateIds") || [];
+
+  const { data, isLoading } = useListWorkspaceCertificates({
+    projectId: currentProject?.id || "",
+    offset: 0,
+    limit: 100,
+    forPkiSync: true
+  });
+
+  const certificates = data?.certificates || [];
+
+  const activeCertificates = useMemo(
+    () => certificates.filter((cert) => cert.status === CertStatus.ACTIVE),
+    [certificates]
+  );
+
+  const selectedCertificates = useMemo(
+    () => activeCertificates.filter((cert) => certificateIds.includes(cert.id)),
+    [activeCertificates, certificateIds]
+  );
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center py-8">
+        <div className="text-sm text-bunker-300">Loading certificates...</div>
+      </div>
+    );
+  }
+
+  return (
+    <>
+      <p className="mb-4 text-sm text-bunker-300">
+        Select certificates to sync with this integration. Only active certificates can be synced.
+        You can modify this selection after creating the sync.
+      </p>
+
+      <Controller
+        control={control}
+        name="certificateIds"
+        render={({ field: { value = [], onChange }, fieldState: { error } }) => (
+          <FormControl isError={Boolean(error)} errorText={error?.message}>
+            <div className="space-y-4">
+              <Button
+                variant="outline_bg"
+                leftIcon={<FontAwesomeIcon icon={faEdit} />}
+                onClick={() => setIsSelectionModalOpen(true)}
+              >
+                Add Certificates
+              </Button>
+              {selectedCertificates.length === 0 ? (
+                <EmptyState title="No certificates selected" icon={faPlus} />
+              ) : (
+                <div className="max-h-64 overflow-y-auto">
+                  <TableContainer>
+                    <Table>
+                      <THead>
+                        <Tr>
+                          <Th className="w-2/5">Common Name</Th>
+                          <Th className="w-2/5">Serial Number</Th>
+                          <Th className="w-1/5">Remove</Th>
+                        </Tr>
+                      </THead>
+                      <TBody>
+                        {selectedCertificates.map((cert) => (
+                          <Tr key={cert.id}>
+                            <Td className="max-w-xs truncate">{cert.commonName}</Td>
+                            <Td className="font-mono text-xs text-bunker-300">
+                              {cert.serialNumber}
+                            </Td>
+                            <Td>
+                              <Button
+                                size="xs"
+                                variant="plain"
+                                colorSchema="secondary"
+                                className="pl-5"
+                                aria-label="Remove certificate"
+                                onClick={() => {
+                                  const newIds = value.filter((id: string) => id !== cert.id);
+                                  onChange(newIds);
+                                }}
+                              >
+                                <FontAwesomeIcon icon={faTrash} />
+                              </Button>
+                            </Td>
+                          </Tr>
+                        ))}
+                      </TBody>
+                    </Table>
+                  </TableContainer>
+                </div>
+              )}
+            </div>
+          </FormControl>
+        )}
+      />
+
+      <CertificateManagementModal
+        isOpen={isSelectionModalOpen}
+        onClose={() => setIsSelectionModalOpen(false)}
+        selectedCertificateIds={certificateIds}
+        onCertificateSelectionChange={(newCertificateIds) => {
+          setValue("certificateIds", newCertificateIds);
+        }}
+        title="Select Certificates for Sync"
+        subtitle="Choose which certificates you want to include in this sync. You can modify this selection after creating the sync."
+        saveButtonText="Update Selection"
+      />
+    </>
+  );
+};
@@ -95,6 +95,49 @@ export const PkiSyncOptionsFields = ({ destination }: Props) => {
        )}
      />

+      {currentDestination === PkiSync.AwsCertificateManager && (
+        <Controller
+          control={control}
+          name="syncOptions.preserveArn"
+          render={({ field: { value, onChange }, fieldState: { error } }) => (
+            <FormControl isError={Boolean(error)} errorText={error?.message}>
+              <Switch
+                className="bg-mineshaft-400/80 shadow-inner data-[state=checked]:bg-green/80"
+                id="preserve-arn"
+                thumbClassName="bg-mineshaft-800"
+                onCheckedChange={onChange}
+                isChecked={value}
+              >
+                <p>
+                  Preserve ARN on Renewal{" "}
+                  <Tooltip
+                    className="max-w-md"
+                    content={
+                      <>
+                        <p>
+                          When enabled, Infisical will replace the contents of existing certificates
+                          while preserving the same ARN during certificate renewal syncs.
+                        </p>
+                        <p className="mt-4">
+                          This allows consuming services like load balancers to continue using the
+                          same ARN without requiring manual updates.
+                        </p>
+                        <p className="mt-4">
+                          When disabled, new certificates will be created with new ARNs, and old
+                          certificates will be removed.
+                        </p>
+                      </>
+                    }
+                  >
+                    <FontAwesomeIcon icon={faQuestionCircle} size="sm" className="ml-1" />
+                  </Tooltip>
+                </p>
+              </Switch>
+            </FormControl>
+          )}
+        />
+      )}
+
      <Controller
        control={control}
        name="syncOptions.certificateNameSchema"
@@ -3,7 +3,7 @@ import { useFormContext } from "react-hook-form";
 import { Badge, GenericFieldLabel } from "@app/components/v2";
 import { useProject } from "@app/context";
 import { PKI_SYNC_MAP } from "@app/helpers/pkiSyncs";
-import { useListWorkspacePkiSubscribers } from "@app/hooks/api";
+import { useListWorkspaceCertificates } from "@app/hooks/api/projects";

 import { TPkiSyncForm } from "./schemas/pki-sync-schema";

@@ -11,18 +11,24 @@ export const PkiSyncReviewFields = () => {
  const { watch } = useFormContext<TPkiSyncForm>();
  const { currentProject } = useProject();

-  const { data: pkiSubscribers = [] } = useListWorkspacePkiSubscribers(currentProject?.id || "");
+  const { data } = useListWorkspaceCertificates({
+    projectId: currentProject?.id || "",
+    offset: 0,
+    limit: 100
+  });

-  const getSubscriberName = (subscriberId?: string) => {
-    const subscriber = pkiSubscribers.find((sub) => sub.id === subscriberId);
-    return subscriber?.name || "Unknown";
+  const certificates = data?.certificates || [];
+
+  const getSelectedCertificates = (certificateIds?: string[]) => {
+    if (!certificateIds || certificateIds.length === 0) return [];
+    return certificates.filter((cert) => certificateIds.includes(cert.id));
  };

  const {
    name,
    description,
    connection,
-    subscriberId,
+    certificateIds,
    syncOptions,
    destination,
    destinationConfig,
@@ -30,17 +36,28 @@ export const PkiSyncReviewFields = () => {
  } = watch();

  const destinationName = PKI_SYNC_MAP[destination].name;
+  const selectedCertificates = getSelectedCertificates(certificateIds);

  return (
    <div className="mb-4 flex flex-col gap-6">
      <div className="flex flex-col gap-3">
        <div className="w-full border-b border-mineshaft-600">
-          <span className="text-sm text-mineshaft-300">Source</span>
+          <span className="text-sm text-mineshaft-300">Certificates</span>
        </div>
        <div className="flex flex-wrap gap-x-8 gap-y-2">
-          <GenericFieldLabel label="PKI Subscriber">
-            {getSubscriberName(subscriberId)}
-          </GenericFieldLabel>
+          <div>
+            {selectedCertificates.length === 0 ? (
+              <span className="text-bunker-400">No certificates selected</span>
+            ) : (
+              <div className="space-y-1">
+                {selectedCertificates.map((cert) => (
+                  <div key={cert.id} className="text-sm">
+                    {cert.commonName}
+                  </div>
+                ))}
+              </div>
+            )}
+          </div>
        </div>
      </div>
      <div className="flex flex-col gap-3">
@@ -7,6 +7,7 @@ import { BasePkiSyncSchema } from "./base-pki-sync-schema";
 const AwsCertificateManagerSyncOptionsSchema = z.object({
  canImportCertificates: z.boolean().default(false),
  canRemoveCertificates: z.boolean().default(false),
+  preserveArn: z.boolean().default(true),
  certificateNameSchema: z
    .string()
    .optional()
@@ -53,7 +53,8 @@ export const BasePkiSyncSchema = <T extends AnyZodObject | undefined = undefined
      .max(255, "Name must be less than 255 characters"),
    description: z.string().optional(),
    isAutoSyncEnabled: z.boolean().default(true),
-    subscriberId: z.string().min(1, "PKI Subscriber is required"),
+    subscriberId: z.string().nullable().optional(),
+    certificateIds: z.array(z.string()).optional(),
    connection: z.object({
      id: z.string().uuid("Invalid connection ID format"),
      name: z.string().max(255, "Connection name must be less than 255 characters")