PKI Syncs improvements

frontend/src/pages/cert-manager/CertificateAuthoritiesPage/components/ExternalCaModal.tsx

@@ -124,7 +124,7 @@ type Props = {
 
 const caTypes = [
   { label: "ACME", value: CaType.ACME },
-  { label: "Azure AD Certificate Service", value: CaType.AZURE_AD_CS }
+  { label: "Active Directory Certificate Services (AD CS)", value: CaType.AZURE_AD_CS }
 ];
 
 export const ExternalCaModal = ({ popUp, handlePopUpToggle }: Props) => {

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

@@ -1,5 +1,6 @@
 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 {
@@ -18,12 +19,15 @@ import {
   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: {
@@ -46,6 +50,7 @@ export const CertificateManagePkiSyncsModal = ({ popUp, handlePopUpToggle }: Pro
   const [searchTerm, setSearchTerm] = useState("");
 
   const { currentProject } = useProject();
+  const navigate = useNavigate();
   const { certificateId, commonName } = popUp.data || {};
 
   const { data: pkiSyncs = [], isPending } = useListPkiSyncsWithCertificate(
@@ -81,6 +86,32 @@ export const CertificateManagePkiSyncsModal = ({ popUp, handlePopUpToggle }: Pro
     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;
 
@@ -161,7 +192,7 @@ export const CertificateManagePkiSyncsModal = ({ popUp, handlePopUpToggle }: Pro
             placeholder="Search PKI syncs by name..."
           />
         </div>
-        <div className="max-h-96 overflow-y-auto">
+        <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>
@@ -169,12 +200,24 @@ export const CertificateManagePkiSyncsModal = ({ popUp, handlePopUpToggle }: Pro
           )}
           {!isPending && pkiSyncs.length === 0 && (
             <EmptyState title="No PKI syncs available" icon={faPlus}>
-              Create a PKI sync first to manage certificate syncing.
+              <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}>
-              No PKI syncs match your search criteria. Try a different search term.
+              <div className="mt-1">
+                No PKI syncs match your search criteria. Try a different search term.
+              </div>
             </EmptyState>
           )}
           {!isPending && filteredSyncs.length > 0 && (
@@ -209,9 +252,9 @@ export const CertificateManagePkiSyncsModal = ({ popUp, handlePopUpToggle }: Pro
                       <Td className="w-1/2 max-w-0">
                         <div
                           className="truncate capitalize"
-                          title={sync.destination.replace(/-/g, " ")}
+                          title={getDestinationDisplayName(sync.destination)}
                         >
-                          {sync.destination.replace(/-/g, " ")}
+                          {getDestinationDisplayName(sync.destination)}
                         </div>
                       </Td>
                     </Tr>

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

@@ -478,7 +478,7 @@ export const CertificatesTable = ({ handlePopUpOpen }: Props) => {
                                 disabled={!isAllowed}
                                 icon={<FontAwesomeIcon icon={faLink} />}
                               >
-                                PKI Syncs
+                                Manage PKI Syncs
                               </DropdownMenuItem>
                             )}
                           </ProjectPermissionCan>

frontend/src/pages/cert-manager/IntegrationsListPage/components/PkiSyncsTab/PkiSyncsTab.tsx

@@ -12,13 +12,14 @@ import { ProjectPermissionSub, useProject } from "@app/context";
 import { ProjectPermissionPkiSyncActions } from "@app/context/ProjectPermissionContext/types";
 import { usePopUp } from "@app/hooks";
 import { useListPkiSyncs } from "@app/hooks/api/pkiSyncs";
+import { IntegrationsListPageTabs } from "@app/types/integrations";
 
 import { PkiSyncsTable } from "./PkiSyncTable";
 
 export const PkiSyncsTab = () => {
   const { popUp, handlePopUpOpen, handlePopUpToggle } = usePopUp(["addSync"] as const);
 
-  const { addSync, ...search } = useSearch({
+  const { addSync, connectionId, connectionName, ...search } = useSearch({
     from: ROUTE_PATHS.CertManager.IntegrationsListPage.id
   });
 
@@ -45,6 +46,42 @@ export const PkiSyncsTab = () => {
     navigateToBase();
   }, [addSync, handlePopUpOpen, navigateToBase]);
 
+  useEffect(() => {
+    const storedFormData = localStorage.getItem("pkiSyncFormData");
+    if (storedFormData && !popUp.addSync.isOpen) {
+      try {
+        const parsedData = JSON.parse(storedFormData);
+        if (connectionId && connectionName) {
+          const initialData = {
+            ...parsedData,
+            connection: { id: connectionId, name: connectionName }
+          };
+          handlePopUpOpen("addSync", { destination: parsedData.destination, initialData });
+          navigate({
+            to: ROUTE_PATHS.CertManager.IntegrationsListPage.path,
+            params: { projectId: currentProject?.id },
+            search: { selectedTab: IntegrationsListPageTabs.PkiSyncs },
+            replace: true
+          });
+        } else {
+          handlePopUpOpen("addSync", { destination: parsedData.destination });
+        }
+        localStorage.removeItem("pkiSyncFormData");
+      } catch (error) {
+        console.error("Failed to parse stored PKI sync form data:", error);
+        localStorage.removeItem("pkiSyncFormData");
+        handlePopUpOpen("addSync");
+      }
+    }
+  }, [
+    handlePopUpOpen,
+    popUp.addSync.isOpen,
+    connectionId,
+    connectionName,
+    navigate,
+    currentProject?.id
+  ]);
+
   const { data: pkiSyncs = [], isPending: isPkiSyncsPending } = useListPkiSyncs(
     currentProject?.id || "",
     {
@@ -94,7 +131,8 @@ export const PkiSyncsTab = () => {
         <PkiSyncsTable pkiSyncs={pkiSyncs} />
       </div>
       <CreatePkiSyncModal
-        selectSync={popUp.addSync.data}
+        selectSync={popUp.addSync.data?.destination || popUp.addSync.data}
+        initialData={popUp.addSync.data?.initialData}
         isOpen={popUp.addSync.isOpen}
         onOpenChange={(isOpen) => handlePopUpToggle("addSync", isOpen)}
       />

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

@@ -9,7 +9,9 @@ import { IntegrationsListPage } from "./IntegrationsListPage";
 
 const IntegrationsListPageQuerySchema = z.object({
   selectedTab: z.nativeEnum(IntegrationsListPageTabs).optional(),
-  addSync: z.nativeEnum(PkiSync).optional()
+  addSync: z.nativeEnum(PkiSync).optional(),
+  connectionId: z.string().optional(),
+  connectionName: z.string().optional()
 });
 
 export const Route = createFileRoute(

frontend/src/pages/cert-manager/PoliciesPage/components/CertificateProfilesTab/CreateProfileModal.tsx

@@ -418,7 +418,7 @@ export const CreateProfileModal = ({ isOpen, onClose, profile, mode = "create" }
             name="enrollmentType"
             render={({ field: { onChange, ...field }, fieldState: { error } }) => (
               <FormControl
-                label="Enrollment Type"
+                label="Enrollment Method"
                 isRequired
                 isError={Boolean(error)}
                 errorText={error?.message}

frontend/src/pages/organization/AppConnections/OauthCallbackPage/OauthCallbackPage.tsx

@@ -633,7 +633,9 @@ export const OAuthCallbackPage = () => {
                 connectionName: data.connection.name,
                 ...(data.returnUrl.includes("integrations")
                   ? {
-                      selectedTab: IntegrationsListPageTabs.SecretSyncs
+                      selectedTab: localStorage.getItem("pkiSyncFormData")
+                        ? IntegrationsListPageTabs.PkiSyncs
+                        : IntegrationsListPageTabs.SecretSyncs
                     }
                   : {})
               }