Add PKI Syncs docs and a few improvements on the router

2026-10-06 07:26:45 +00:00 · 2025-09-17 10:49:31 -03:00
parent bc04fc6113
commit 8130be5e2f
52 changed files with 1124 additions and 690 deletions
@@ -23,7 +23,8 @@ export const DeletePkiSyncModal = ({ isOpen, onOpenChange, pkiSync, onComplete }
    try {
      await deleteSync.mutateAsync({
        syncId,
-        projectId
+        projectId,
+        destination
      });

      createNotification({
@@ -24,7 +24,8 @@ const Content = ({ pkiSync, onComplete }: ContentProps) => {
    try {
      await triggerImportCertificates.mutateAsync({
        syncId,
-        projectId
+        projectId,
+        destination
      });

      createNotification({
@@ -24,7 +24,8 @@ const Content = ({ pkiSync, onComplete }: ContentProps) => {
    try {
      await triggerRemoveCertificates.mutateAsync({
        syncId,
-        projectId
+        projectId,
+        destination
      });

      createNotification({
@@ -10,13 +10,7 @@ import { createNotification } from "@app/components/notifications";
 import { Button, FormControl, Switch } from "@app/components/v2";
 import { useProject } from "@app/context";
 import { PKI_SYNC_MAP } from "@app/helpers/pkiSyncs";
-import {
-  PkiSync,
-  TCreatePkiSyncDTO,
-  TPkiSync,
-  useCreatePkiSync,
-  usePkiSyncOption
-} from "@app/hooks/api/pkiSyncs";
+import { PkiSync, TPkiSync, useCreatePkiSync, usePkiSyncOption } from "@app/hooks/api/pkiSyncs";

 import { PkiSyncDestinationFields } from "./PkiSyncDestinationFields";
 import { PkiSyncDetailsFields } from "./PkiSyncDetailsFields";
@@ -69,10 +63,7 @@ export const CreatePkiSyncForm = ({ destination, onComplete, onCancel }: Props)
        ...formData,
        connectionId: connection.id,
        projectId: currentProject.id,
-        destinationConfig: {
-          destination,
-          config: destinationConfig
-        } as unknown as TCreatePkiSyncDTO["destinationConfig"]
+        destinationConfig
      });

      createNotification({
@@ -43,7 +43,8 @@ export const EditPkiSyncForm = ({ pkiSync, fields, onComplete }: Props) => {
        syncId: pkiSync.id,
        ...formData,
        connectionId: connection.id,
-        projectId: pkiSync.projectId
+        projectId: pkiSync.projectId,
+        destination: pkiSync.destination
      });

      createNotification({
@@ -12,6 +12,8 @@ export const PkiSyncOptionsFields = () => {
  return (
    <>
      <p className="mb-4 text-sm text-bunker-300">Configure how certificates should be synced.</p>
+      {/*
+      TODO: Re-enable this when we have a way to import certificates
      <Controller
        control={control}
        name="syncOptions.canImportCertificates"
@@ -48,6 +50,7 @@ export const PkiSyncOptionsFields = () => {
          </FormControl>
        )}
      />
+      */}
      <Controller
        control={control}
        name="syncOptions.canRemoveCertificates"
@@ -70,6 +70,7 @@ export const PkiSyncReviewFields = () => {
          <GenericFieldLabel label="Upload Certificates">
            <Badge variant="success">Always Enabled</Badge>
          </GenericFieldLabel>
+          {/* Hidden for now - Import certificates functionality disabled
          {syncOptions?.canImportCertificates !== undefined && (
            <GenericFieldLabel label="Import Certificates">
              <Badge variant={syncOptions.canImportCertificates ? "success" : "danger"}>
@@ -77,6 +78,7 @@ export const PkiSyncReviewFields = () => {
              </Badge>
            </GenericFieldLabel>
          )}
+          */}
          {syncOptions?.canRemoveCertificates !== undefined && (
            <GenericFieldLabel label="Remove Certificates">
              <Badge variant={syncOptions.canRemoveCertificates ? "success" : "danger"}>
@@ -20,7 +20,7 @@ export const PkiSyncFormSchema = z.object({
    vaultBaseUrl: z.string().url("Valid URL is required")
  }),
  syncOptions: z.object({
-    canImportCertificates: z.boolean().default(true),
+    canImportCertificates: z.boolean().default(false),
    canRemoveCertificates: z.boolean().default(true)
  })
 });
@@ -15,8 +15,11 @@ import {
 export const useCreatePkiSync = () => {
  const queryClient = useQueryClient();
  return useMutation({
-    mutationFn: async (params: TCreatePkiSyncDTO) => {
-      const { data } = await apiRequest.post<TPkiSyncResponse>("/api/v1/pki-syncs", params);
+    mutationFn: async ({ destination, ...params }: TCreatePkiSyncDTO) => {
+      const { data } = await apiRequest.post<TPkiSyncResponse>(
+        `/api/v1/pki-syncs/${destination}`,
+        params
+      );

      return data.pkiSync;
    },
@@ -28,9 +31,9 @@ export const useCreatePkiSync = () => {
 export const useUpdatePkiSync = () => {
  const queryClient = useQueryClient();
  return useMutation({
-    mutationFn: async ({ syncId, projectId, ...params }: TUpdatePkiSyncDTO) => {
+    mutationFn: async ({ syncId, projectId, destination, ...params }: TUpdatePkiSyncDTO) => {
      const { data } = await apiRequest.patch<TPkiSyncResponse>(
-        `/api/v1/pki-syncs/${syncId}`,
+        `/api/v1/pki-syncs/${destination}/${syncId}`,
        params,
        { params: { projectId } }
      );
@@ -47,8 +50,8 @@ export const useUpdatePkiSync = () => {
 export const useDeletePkiSync = () => {
  const queryClient = useQueryClient();
  return useMutation({
-    mutationFn: async ({ syncId, projectId }: TDeletePkiSyncDTO) => {
-      const { data } = await apiRequest.delete(`/api/v1/pki-syncs/${syncId}`, {
+    mutationFn: async ({ syncId, projectId, destination }: TDeletePkiSyncDTO) => {
+      const { data } = await apiRequest.delete(`/api/v1/pki-syncs/${destination}/${syncId}`, {
        params: { projectId }
      });

@@ -64,9 +67,9 @@ export const useDeletePkiSync = () => {
 export const useTriggerPkiSyncSyncCertificates = () => {
  const queryClient = useQueryClient();
  return useMutation({
-    mutationFn: async ({ syncId, projectId }: TTriggerPkiSyncSyncCertificatesDTO) => {
+    mutationFn: async ({ syncId, projectId, destination }: TTriggerPkiSyncSyncCertificatesDTO) => {
      const { data } = await apiRequest.post(
-        `/api/v1/pki-syncs/${syncId}/sync`,
+        `/api/v1/pki-syncs/${destination}/${syncId}/sync`,
        {},
        {
          params: { projectId }
@@ -85,9 +88,13 @@ export const useTriggerPkiSyncSyncCertificates = () => {
 export const useTriggerPkiSyncImportCertificates = () => {
  const queryClient = useQueryClient();
  return useMutation({
-    mutationFn: async ({ syncId, projectId }: TTriggerPkiSyncImportCertificatesDTO) => {
+    mutationFn: async ({
+      syncId,
+      projectId,
+      destination
+    }: TTriggerPkiSyncImportCertificatesDTO) => {
      const { data } = await apiRequest.post(
-        `/api/v1/pki-syncs/${syncId}/import`,
+        `/api/v1/pki-syncs/${destination}/${syncId}/import`,
        {},
        {
          params: { projectId }
@@ -106,9 +113,13 @@ export const useTriggerPkiSyncImportCertificates = () => {
 export const useTriggerPkiSyncRemoveCertificates = () => {
  const queryClient = useQueryClient();
  return useMutation({
-    mutationFn: async ({ syncId, projectId }: TTriggerPkiSyncRemoveCertificatesDTO) => {
+    mutationFn: async ({
+      syncId,
+      projectId,
+      destination
+    }: TTriggerPkiSyncRemoveCertificatesDTO) => {
      const { data } = await apiRequest.post(
-        `/api/v1/pki-syncs/${syncId}/remove`,
+        `/api/v1/pki-syncs/${destination}/${syncId}/remove`,
        {},
        {
          params: { projectId }
@@ -29,29 +29,34 @@ export type TCreatePkiSyncDTO = DiscriminativePick<
  | "isAutoSyncEnabled"
 > & { subscriberId?: string; projectId: string };

-export type TUpdatePkiSyncDTO = Partial<Omit<TCreatePkiSyncDTO, "destination" | "projectId">> & {
+export type TUpdatePkiSyncDTO = Partial<Omit<TCreatePkiSyncDTO, "projectId">> & {
  syncId: string;
  projectId: string;
+  destination: PkiSync;
 };

 export type TDeletePkiSyncDTO = {
  syncId: string;
  projectId: string;
+  destination: PkiSync;
 };

 export type TTriggerPkiSyncSyncCertificatesDTO = {
  syncId: string;
  projectId: string;
+  destination: PkiSync;
 };

 export type TTriggerPkiSyncImportCertificatesDTO = {
  syncId: string;
  projectId: string;
+  destination: PkiSync;
 };

 export type TTriggerPkiSyncRemoveCertificatesDTO = {
  syncId: string;
  projectId: string;
+  destination: PkiSync;
 };

 export * from "./common";
@@ -44,7 +44,7 @@ import { ProjectPermissionSub } from "@app/context";
 import { ProjectPermissionPkiSyncActions } from "@app/context/ProjectPermissionContext/types";
 import { PKI_SYNC_MAP } from "@app/helpers/pkiSyncs";
 import { useToggle } from "@app/hooks";
-import { PkiSyncData, PkiSyncStatus, usePkiSyncOption } from "@app/hooks/api/pkiSyncs";
+import { PkiSyncData, PkiSyncStatus } from "@app/hooks/api/pkiSyncs";

 import { PkiSyncDestinationCol } from "./PkiSyncDestinationCol";
 import { PkiSyncTableCell } from "./PkiSyncTableCell";
@@ -80,8 +80,6 @@ export const PkiSyncRow = ({
    projectId
  } = pkiSync;

-  const { syncOption } = usePkiSyncOption(destination);
-
  const destinationName = PKI_SYNC_MAP[destination].name;

  const [isIdCopied, setIsIdCopied] = useToggle(false);
@@ -296,38 +294,36 @@ export const PkiSyncRow = ({
                  </DropdownMenuItem>
                )}
              </ProjectPermissionCan>
-              {syncOption?.canImportCertificates && (
-                <ProjectPermissionCan
-                  I={ProjectPermissionPkiSyncActions.ImportCertificates}
-                  a={permissionSubject}
-                >
-                  {(isAllowed: boolean) => (
-                    <DropdownMenuItem
-                      icon={<FontAwesomeIcon icon={faDownload} />}
-                      onClick={(e) => {
-                        e.stopPropagation();
-                        onTriggerImportCertificates(pkiSync);
-                      }}
-                      isDisabled={!isAllowed}
+              <ProjectPermissionCan
+                I={ProjectPermissionPkiSyncActions.ImportCertificates}
+                a={permissionSubject}
+              >
+                {(isAllowed: boolean) => (
+                  <DropdownMenuItem
+                    icon={<FontAwesomeIcon icon={faDownload} />}
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      onTriggerImportCertificates(pkiSync);
+                    }}
+                    isDisabled={!isAllowed}
+                  >
+                    <Tooltip
+                      position="left"
+                      sideOffset={42}
+                      content={`Import certificates from this ${destinationName} destination into Infisical.`}
                    >
-                      <Tooltip
-                        position="left"
-                        sideOffset={42}
-                        content={`Import certificates from this ${destinationName} destination into Infisical.`}
-                      >
-                        <div className="flex h-full w-full items-center justify-between gap-1">
-                          <span>Import Certificates</span>
-                          <FontAwesomeIcon
-                            className="text-bunker-300"
-                            size="sm"
-                            icon={faInfoCircle}
-                          />
-                        </div>
-                      </Tooltip>
-                    </DropdownMenuItem>
-                  )}
-                </ProjectPermissionCan>
-              )}
+                      <div className="flex h-full w-full items-center justify-between gap-1">
+                        <span>Import Certificates</span>
+                        <FontAwesomeIcon
+                          className="text-bunker-300"
+                          size="sm"
+                          icon={faInfoCircle}
+                        />
+                      </div>
+                    </Tooltip>
+                  </DropdownMenuItem>
+                )}
+              </ProjectPermissionCan>
              <ProjectPermissionCan
                I={ProjectPermissionPkiSyncActions.RemoveCertificates}
                a={permissionSubject}
@@ -230,6 +230,7 @@ export const PkiSyncsTable = ({ pkiSyncs }: Props) => {
      await updateSync.mutateAsync({
        syncId: pkiSync.id,
        projectId: pkiSync.projectId,
+        destination: pkiSync.destination,
        isAutoSyncEnabled
      });

@@ -251,7 +252,8 @@ export const PkiSyncsTable = ({ pkiSyncs }: Props) => {
    try {
      await triggerSync.mutateAsync({
        syncId: pkiSync.id,
-        projectId: pkiSync.projectId
+        projectId: pkiSync.projectId,
+        destination: pkiSync.destination
      });

      createNotification({
@@ -42,7 +42,6 @@ import { PKI_SYNC_MAP } from "@app/helpers/pkiSyncs";
 import { usePopUp, useToggle } from "@app/hooks";
 import {
  TPkiSync,
-  usePkiSyncOption,
  useTriggerPkiSyncSyncCertificates,
  useUpdatePkiSync
 } from "@app/hooks/api/pkiSyncs";
@@ -69,7 +68,6 @@ export const PkiSyncActionTriggers = ({ pkiSync }: Props) => {
  const updatePkiSyncMutation = useUpdatePkiSync();

  const destinationName = PKI_SYNC_MAP[destination].name;
-  const { syncOption } = usePkiSyncOption(destination);

  const handleCopyId = useCallback(() => {
    setIsIdCopied.on();
@@ -88,7 +86,8 @@ export const PkiSyncActionTriggers = ({ pkiSync }: Props) => {
    try {
      await triggerSyncMutation.mutateAsync({
        syncId: id,
-        projectId
+        projectId,
+        destination
      });
      createNotification({
        text: "PKI sync job queued successfully",
@@ -108,6 +107,7 @@ export const PkiSyncActionTriggers = ({ pkiSync }: Props) => {
      await updatePkiSyncMutation.mutateAsync({
        syncId: id,
        projectId,
+        destination,
        isAutoSyncEnabled: !pkiSync.isAutoSyncEnabled
      });
      createNotification({
@@ -192,65 +192,61 @@ export const PkiSyncActionTriggers = ({ pkiSync }: Props) => {
                Copy Sync ID
              </DropdownMenuItem>

-              {syncOption?.canImportCertificates && (
-                <ProjectPermissionCan
-                  I={ProjectPermissionPkiSyncActions.ImportCertificates}
-                  a={permissionSubject}
-                >
-                  {(isAllowed: boolean) => (
-                    <DropdownMenuItem
-                      icon={<FontAwesomeIcon icon={faDownload} />}
-                      onClick={() => handlePopUpOpen("importCertificates")}
-                      isDisabled={!isAllowed}
+              <ProjectPermissionCan
+                I={ProjectPermissionPkiSyncActions.ImportCertificates}
+                a={permissionSubject}
+              >
+                {(isAllowed: boolean) => (
+                  <DropdownMenuItem
+                    icon={<FontAwesomeIcon icon={faDownload} />}
+                    onClick={() => handlePopUpOpen("importCertificates")}
+                    isDisabled={!isAllowed}
+                  >
+                    <Tooltip
+                      position="left"
+                      sideOffset={42}
+                      content={`Import certificates from this ${destinationName} destination into Infisical.`}
                    >
-                      <Tooltip
-                        position="left"
-                        sideOffset={42}
-                        content={`Import certificates from this ${destinationName} destination into Infisical.`}
-                      >
-                        <div className="flex h-full w-full items-center justify-between gap-1">
-                          <span>Import Certificates</span>
-                          <FontAwesomeIcon
-                            className="text-bunker-300"
-                            size="sm"
-                            icon={faInfoCircle}
-                          />
-                        </div>
-                      </Tooltip>
-                    </DropdownMenuItem>
-                  )}
-                </ProjectPermissionCan>
-              )}
+                      <div className="flex h-full w-full items-center justify-between gap-1">
+                        <span>Import Certificates</span>
+                        <FontAwesomeIcon
+                          className="text-bunker-300"
+                          size="sm"
+                          icon={faInfoCircle}
+                        />
+                      </div>
+                    </Tooltip>
+                  </DropdownMenuItem>
+                )}
+              </ProjectPermissionCan>

-              {syncOption?.canRemoveCertificates && (
-                <ProjectPermissionCan
-                  I={ProjectPermissionPkiSyncActions.RemoveCertificates}
-                  a={permissionSubject}
-                >
-                  {(isAllowed: boolean) => (
-                    <DropdownMenuItem
-                      icon={<FontAwesomeIcon icon={faEraser} />}
-                      onClick={() => handlePopUpOpen("removeCertificates")}
-                      isDisabled={!isAllowed}
+              <ProjectPermissionCan
+                I={ProjectPermissionPkiSyncActions.RemoveCertificates}
+                a={permissionSubject}
+              >
+                {(isAllowed: boolean) => (
+                  <DropdownMenuItem
+                    icon={<FontAwesomeIcon icon={faEraser} />}
+                    onClick={() => handlePopUpOpen("removeCertificates")}
+                    isDisabled={!isAllowed}
+                  >
+                    <Tooltip
+                      position="left"
+                      sideOffset={42}
+                      content={`Remove certificates synced by Infisical from this ${destinationName} destination.`}
                    >
-                      <Tooltip
-                        position="left"
-                        sideOffset={42}
-                        content={`Remove certificates synced by Infisical from this ${destinationName} destination.`}
-                      >
-                        <div className="flex h-full w-full items-center justify-between gap-1">
-                          <span>Remove Certificates</span>
-                          <FontAwesomeIcon
-                            className="text-bunker-300"
-                            size="sm"
-                            icon={faInfoCircle}
-                          />
-                        </div>
-                      </Tooltip>
-                    </DropdownMenuItem>
-                  )}
-                </ProjectPermissionCan>
-              )}
+                      <div className="flex h-full w-full items-center justify-between gap-1">
+                        <span>Remove Certificates</span>
+                        <FontAwesomeIcon
+                          className="text-bunker-300"
+                          size="sm"
+                          icon={faInfoCircle}
+                        />
+                      </div>
+                    </Tooltip>
+                  </DropdownMenuItem>
+                )}
+              </ProjectPermissionCan>

              <ProjectPermissionCan I={ProjectPermissionPkiSyncActions.Edit} a={permissionSubject}>
                {(isAllowed: boolean) => (
@@ -16,7 +16,7 @@ type Props = {

 export const PkiSyncOptionsSection = ({ pkiSync, onEditOptions }: Props) => {
  const {
-    syncOptions: { canImportCertificates, canRemoveCertificates }
+    syncOptions: { canRemoveCertificates }
  } = pkiSync;

  const permissionSubject = subject(ProjectPermissionSub.PkiSyncs, {
@@ -44,11 +44,13 @@ export const PkiSyncOptionsSection = ({ pkiSync, onEditOptions }: Props) => {
        </div>
        <div>
          <div className="space-y-3">
+            {/* Hidden for now - Import certificates functionality disabled
            <GenericFieldLabel label="Certificate Import">
              <Badge variant={canImportCertificates ? "success" : "danger"}>
                {canImportCertificates ? "Enabled" : "Disabled"}
              </Badge>
            </GenericFieldLabel>
+            */}
            <GenericFieldLabel label="Certificate Removal">
              <Badge variant={canRemoveCertificates ? "success" : "danger"}>
                {canRemoveCertificates ? "Enabled" : "Disabled"}