merge main

frontend/src/components/projects/ProjectSettings/components/ProjectTemplatesTab/components/ProjectTemplatesTable.tsx

@@ -25,6 +25,7 @@ import {
 import { OrgPermissionActions, OrgPermissionSubjects, useSubscription } from "@app/context";
 import { useGetProjectTypeFromRoute, usePopUp } from "@app/hooks";
 import { TProjectTemplate, useListProjectTemplates } from "@app/hooks/api/projectTemplates";
+import { ProjectType } from "@app/hooks/api/workspace/types";
 
 import { DeleteProjectTemplateModal } from "./DeleteProjectTemplateModal";
 
@@ -40,6 +41,7 @@ export const ProjectTemplatesTable = ({ onEdit }: Props) => {
   const { isPending, data: projectTemplates = [] } = useListProjectTemplates(projectType, {
     enabled: subscription?.projectTemplates && Boolean(projectType)
   });
+
   const [search, setSearch] = useState("");
 
   const { popUp, handlePopUpOpen, handlePopUpToggle } = usePopUp(["deleteTemplate"] as const);
@@ -52,7 +54,9 @@ export const ProjectTemplatesTable = ({ onEdit }: Props) => {
     [search, projectTemplates]
   );
 
-  const isSecretManagerTemplates = projectType === "secret-manager";
+  const isSecretManagerTemplates = projectType === ProjectType.SecretManager;
+
+  const colSpan = isSecretManagerTemplates ? 4 : 3;
 
   return (
     <div>
@@ -73,10 +77,10 @@ export const ProjectTemplatesTable = ({ onEdit }: Props) => {
             </Tr>
           </THead>
           <TBody>
-            {isPending && (
+            {subscription?.projectTemplates && isPending && (
               <TableSkeleton
                 innerKey="project-templates-table"
-                columns={4}
+                columns={colSpan}
                 key="project-templates"
               />
             )}
@@ -170,9 +174,10 @@ export const ProjectTemplatesTable = ({ onEdit }: Props) => {
                 </Tr>
               );
             })}
-            {!isPending && filteredTemplates?.length === 0 && (
+            {(!subscription?.projectTemplates ||
+              (!isPending && filteredTemplates?.length === 0)) && (
               <Tr>
-                <Td colSpan={5}>
+                <Td colSpan={colSpan}>
                   <EmptyState
                     title={
                       search.trim()

frontend/src/components/secret-syncs/SecretSyncStatusBadge.tsx

@@ -40,7 +40,14 @@ export const SecretSyncStatusBadge = ({ status }: Props) => {
 
   return (
     <Badge className="flex h-5 w-min items-center gap-1.5 whitespace-nowrap" variant={variant}>
-      <FontAwesomeIcon icon={icon} />
+      <FontAwesomeIcon
+        icon={icon}
+        className={
+          [SecretSyncStatus.Pending, SecretSyncStatus.Running].includes(status)
+            ? "animate-spin"
+            : ""
+        }
+      />
       <span>{text}</span>
     </Badge>
   );

frontend/src/components/secret-syncs/forms/SecretSyncDestinationFields/OCIVaultSyncFields.tsx

@@ -0,0 +1,175 @@
+import { Controller, useFormContext, useWatch } from "react-hook-form";
+import { SingleValue } from "react-select";
+import { faCircleInfo } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import { SecretSyncConnectionField } from "@app/components/secret-syncs/forms/SecretSyncConnectionField";
+import { FilterableSelect, FormControl, Tooltip } from "@app/components/v2";
+import {
+  useOCIConnectionListCompartments,
+  useOCIConnectionListVaultKeys,
+  useOCIConnectionListVaults
+} from "@app/hooks/api/appConnections/oci";
+import { SecretSync } from "@app/hooks/api/secretSyncs";
+
+import { TSecretSyncForm } from "../schemas";
+
+export const OCIVaultSyncFields = () => {
+  const { control, setValue } = useFormContext<
+    TSecretSyncForm & { destination: SecretSync.OCIVault }
+  >();
+
+  const connectionId = useWatch({ name: "connection.id", control });
+
+  // Compartments
+  const { data: compartments, isLoading: isCompartmentsLoading } = useOCIConnectionListCompartments(
+    connectionId,
+    {
+      enabled: Boolean(connectionId)
+    }
+  );
+
+  // Vaults
+  const selectedCompartment = useWatch({ name: "destinationConfig.compartmentOcid", control });
+  const { data: vaults, isLoading: isVaultsLoading } = useOCIConnectionListVaults(
+    { connectionId, compartmentOcid: selectedCompartment },
+    {
+      enabled: Boolean(connectionId && selectedCompartment)
+    }
+  );
+
+  // Keys
+  const selectedVault = useWatch({ name: "destinationConfig.vaultOcid", control });
+  const { data: keys, isLoading: isKeysLoading } = useOCIConnectionListVaultKeys(
+    { connectionId, compartmentOcid: selectedCompartment, vaultOcid: selectedVault },
+    {
+      enabled: Boolean(connectionId && selectedCompartment && selectedVault)
+    }
+  );
+
+  return (
+    <>
+      <SecretSyncConnectionField
+        onChange={() => {
+          setValue("destinationConfig.compartmentOcid", "");
+          setValue("destinationConfig.vaultOcid", "");
+          setValue("destinationConfig.keyOcid", "");
+        }}
+      />
+
+      <Controller
+        name="destinationConfig.compartmentOcid"
+        control={control}
+        render={({ field: { value, onChange }, fieldState: { error } }) => (
+          <FormControl
+            isError={Boolean(error)}
+            errorText={error?.message}
+            label="Compartment"
+            helperText={
+              <Tooltip
+                className="max-w-md"
+                content="Ensure the compartment exists and that the connection has permission to view it."
+              >
+                <div>
+                  <span>Don&#39;t see the compartment you&#39;re looking for?</span>{" "}
+                  <FontAwesomeIcon icon={faCircleInfo} className="text-mineshaft-400" />
+                </div>
+              </Tooltip>
+            }
+          >
+            <FilterableSelect
+              menuPlacement="top"
+              isLoading={isCompartmentsLoading && Boolean(connectionId)}
+              isDisabled={!connectionId}
+              value={compartments?.find((c) => c.id === value) ?? null}
+              onChange={(option) => {
+                onChange((option as SingleValue<{ id: string }>)?.id ?? null);
+                setValue("destinationConfig.vaultOcid", "");
+                setValue("destinationConfig.keyOcid", "");
+              }}
+              options={compartments}
+              placeholder="Select a compartment..."
+              getOptionLabel={(option) => option.name}
+              getOptionValue={(option) => option.id}
+            />
+          </FormControl>
+        )}
+      />
+
+      <Controller
+        name="destinationConfig.vaultOcid"
+        control={control}
+        render={({ field: { value, onChange }, fieldState: { error } }) => (
+          <FormControl
+            isError={Boolean(error)}
+            errorText={error?.message}
+            label="Vault"
+            helperText={
+              <Tooltip
+                className="max-w-md"
+                content="Ensure the vault exists in the selected compartment and that the connection has permission to view it."
+              >
+                <div>
+                  <span>Don&#39;t see the vault you&#39;re looking for?</span>{" "}
+                  <FontAwesomeIcon icon={faCircleInfo} className="text-mineshaft-400" />
+                </div>
+              </Tooltip>
+            }
+          >
+            <FilterableSelect
+              menuPlacement="top"
+              isLoading={isVaultsLoading && Boolean(connectionId)}
+              isDisabled={!connectionId || !selectedCompartment}
+              value={vaults?.find((v) => v.id === value) ?? null}
+              onChange={(option) => {
+                onChange((option as SingleValue<{ id: string }>)?.id ?? null);
+                setValue("destinationConfig.keyOcid", "");
+              }}
+              options={vaults}
+              placeholder="Select a vault..."
+              getOptionLabel={(option) => option.displayName}
+              getOptionValue={(option) => option.id}
+            />
+          </FormControl>
+        )}
+      />
+
+      <Controller
+        name="destinationConfig.keyOcid"
+        control={control}
+        render={({ field: { value, onChange }, fieldState: { error } }) => (
+          <FormControl
+            isError={Boolean(error)}
+            errorText={error?.message}
+            label="Encryption Key"
+            helperText={
+              <Tooltip
+                className="max-w-md"
+                content="Ensure the key exists in the selected vault and that the connection has permission to view it."
+              >
+                <div>
+                  <span>Don&#39;t see the key you&#39;re looking for?</span>{" "}
+                  <FontAwesomeIcon icon={faCircleInfo} className="text-mineshaft-400" />
+                </div>
+              </Tooltip>
+            }
+          >
+            <FilterableSelect
+              menuPlacement="top"
+              isLoading={isKeysLoading && Boolean(connectionId)}
+              isDisabled={!connectionId || !selectedCompartment || !selectedVault}
+              value={keys?.find((v) => v.id === value) ?? null}
+              onChange={(option) => {
+                onChange((option as SingleValue<{ id: string }>)?.id ?? null);
+              }}
+              options={keys}
+              placeholder="Select a key..."
+              getOptionLabel={(option) => option.displayName}
+              getOptionValue={(option) => option.id}
+            />
+          </FormControl>
+        )}
+      />
+    </>
+  );
+};

frontend/src/components/secret-syncs/forms/SecretSyncDestinationFields/SecretSyncDestinationFields.tsx

@@ -13,6 +13,7 @@ import { GcpSyncFields } from "./GcpSyncFields";
 import { GitHubSyncFields } from "./GitHubSyncFields";
 import { HCVaultSyncFields } from "./HCVaultSyncFields";
 import { HumanitecSyncFields } from "./HumanitecSyncFields";
+import { OCIVaultSyncFields } from "./OCIVaultSyncFields";
 import { TeamCitySyncFields } from "./TeamCitySyncFields";
 import { TerraformCloudSyncFields } from "./TerraformCloudSyncFields";
 import { VercelSyncFields } from "./VercelSyncFields";
@@ -52,6 +53,8 @@ export const SecretSyncDestinationFields = () => {
       return <HCVaultSyncFields />;
     case SecretSync.TeamCity:
       return <TeamCitySyncFields />;
+    case SecretSync.OCIVault:
+      return <OCIVaultSyncFields />;
     default:
       throw new Error(`Unhandled Destination Config Field: ${destination}`);
   }

frontend/src/components/secret-syncs/forms/SecretSyncOptionsFields/SecretSyncOptionsFields.tsx

@@ -45,6 +45,7 @@ export const SecretSyncOptionsFields = ({ hideInitialSync }: Props) => {
     case SecretSync.Windmill:
     case SecretSync.HCVault:
     case SecretSync.TeamCity:
+    case SecretSync.OCIVault:
       AdditionalSyncOptionsFieldsComponent = null;
       break;
     default:

frontend/src/components/secret-syncs/forms/SecretSyncReviewFields/OCIVaultSyncReviewFields.tsx

@@ -0,0 +1,26 @@
+import { useFormContext } from "react-hook-form";
+
+import { TSecretSyncForm } from "@app/components/secret-syncs/forms/schemas";
+import { GenericFieldLabel } from "@app/components/v2";
+import { SecretSync } from "@app/hooks/api/secretSyncs";
+
+export const OCIVaultSyncReviewFields = () => {
+  const { watch } = useFormContext<TSecretSyncForm & { destination: SecretSync.OCIVault }>();
+  const compartmentOcid = watch("destinationConfig.compartmentOcid");
+  const vaultOcid = watch("destinationConfig.vaultOcid");
+  const keyOcid = watch("destinationConfig.keyOcid");
+
+  return (
+    <>
+      <GenericFieldLabel label="Compartment OCID" truncate>
+        {compartmentOcid}
+      </GenericFieldLabel>
+      <GenericFieldLabel label="Vault OCID" truncate>
+        {vaultOcid}
+      </GenericFieldLabel>
+      <GenericFieldLabel label="Key OCID" truncate>
+        {keyOcid}
+      </GenericFieldLabel>
+    </>
+  );
+};

frontend/src/components/secret-syncs/forms/SecretSyncReviewFields/SecretSyncReviewFields.tsx

@@ -23,6 +23,7 @@ import { GcpSyncReviewFields } from "./GcpSyncReviewFields";
 import { GitHubSyncReviewFields } from "./GitHubSyncReviewFields";
 import { HCVaultSyncReviewFields } from "./HCVaultSyncReviewFields";
 import { HumanitecSyncReviewFields } from "./HumanitecSyncReviewFields";
+import { OCIVaultSyncReviewFields } from "./OCIVaultSyncReviewFields";
 import { TeamCitySyncReviewFields } from "./TeamCitySyncReviewFields";
 import { TerraformCloudSyncReviewFields } from "./TerraformCloudSyncReviewFields";
 import { VercelSyncReviewFields } from "./VercelSyncReviewFields";
@@ -96,6 +97,9 @@ export const SecretSyncReviewFields = () => {
     case SecretSync.TeamCity:
       DestinationFieldsComponent = <TeamCitySyncReviewFields />;
       break;
+    case SecretSync.OCIVault:
+      DestinationFieldsComponent = <OCIVaultSyncReviewFields />;
+      break;
     default:
       throw new Error(`Unhandled Destination Review Fields: ${destination}`);
   }

frontend/src/components/secret-syncs/forms/schemas/oci-vault-sync-destination-schema.ts

@@ -0,0 +1,33 @@
+import { z } from "zod";
+
+import { BaseSecretSyncSchema } from "@app/components/secret-syncs/forms/schemas/base-secret-sync-schema";
+import { SecretSync } from "@app/hooks/api/secretSyncs";
+
+export const OCIVaultSyncDestinationSchema = BaseSecretSyncSchema().merge(
+  z.object({
+    destination: z.literal(SecretSync.OCIVault),
+    destinationConfig: z.object({
+      compartmentOcid: z
+        .string()
+        .trim()
+        .min(1, "Compartment OCID required")
+        .regex(
+          /^ocid1\.(tenancy|compartment)\.oc1\..+$/,
+          "Invalid Compartment OCID format. Must start with ocid1.tenancy.oc1. or ocid1.compartment.oc1."
+        ),
+      vaultOcid: z
+        .string()
+        .trim()
+        .min(1, "Vault OCID required")
+        .regex(
+          /^ocid1\.vault\.oc1\..+$/,
+          "Invalid Vault OCID format. Must start with ocid1.vault.oc1."
+        ),
+      keyOcid: z
+        .string()
+        .trim()
+        .min(1, "Key OCID required")
+        .regex(/^ocid1\.key\.oc1\..+$/, "Invalid Key OCID format. Must start with ocid1.key.oc1.")
+    })
+  })
+);

frontend/src/components/secret-syncs/forms/schemas/secret-sync-schema.ts

@@ -10,6 +10,7 @@ import { GcpSyncDestinationSchema } from "./gcp-sync-destination-schema";
 import { GitHubSyncDestinationSchema } from "./github-sync-destination-schema";
 import { HCVaultSyncDestinationSchema } from "./hc-vault-sync-destination-schema";
 import { HumanitecSyncDestinationSchema } from "./humanitec-sync-destination-schema";
+import { OCIVaultSyncDestinationSchema } from "./oci-vault-sync-destination-schema";
 import { TeamCitySyncDestinationSchema } from "./teamcity-sync-destination-schema";
 import { TerraformCloudSyncDestinationSchema } from "./terraform-cloud-destination-schema";
 import { VercelSyncDestinationSchema } from "./vercel-sync-destination-schema";
@@ -29,7 +30,8 @@ const SecretSyncUnionSchema = z.discriminatedUnion("destination", [
   VercelSyncDestinationSchema,
   WindmillSyncDestinationSchema,
   HCVaultSyncDestinationSchema,
-  TeamCitySyncDestinationSchema
+  TeamCitySyncDestinationSchema,
+  OCIVaultSyncDestinationSchema
 ]);
 
 export const SecretSyncFormSchema = SecretSyncUnionSchema;

frontend/src/components/v2/GenericFieldLabel/GenericFieldLabel.tsx

@@ -6,14 +6,21 @@ type Props = {
   children?: ReactNode;
   className?: string;
   labelClassName?: string;
+  truncate?: boolean;
 };
 
-export const GenericFieldLabel = ({ label, children, className, labelClassName }: Props) => {
+export const GenericFieldLabel = ({
+  label,
+  children,
+  className,
+  labelClassName,
+  truncate
+}: Props) => {
   return (
-    <div className={className}>
+    <div className={twMerge("min-w-0", className)}>
       <p className={twMerge("text-xs font-medium text-mineshaft-400", labelClassName)}>{label}</p>
       {children ? (
-        <p className="text-sm text-mineshaft-100">{children}</p>
+        <p className={twMerge("text-sm text-mineshaft-100", truncate && "truncate")}>{children}</p>
       ) : (
         <p className="text-sm italic text-mineshaft-400/50">None</p>
       )}

frontend/src/components/v2/NoticeBannerV2/NoticeBannerV2.tsx

@@ -7,9 +7,10 @@ type Props = {
   title: string;
   children: ReactNode;
   className?: string;
+  titleClassName?: string;
 };
 
-export const NoticeBannerV2 = ({ title, children, className }: Props) => {
+export const NoticeBannerV2 = ({ title, children, className, titleClassName }: Props) => {
   return (
     <div
       className={twMerge(
@@ -17,7 +18,7 @@ export const NoticeBannerV2 = ({ title, children, className }: Props) => {
         className
       )}
     >
-      <div className="mb-1 flex items-center text-sm">
+      <div className={twMerge("mb-1 flex items-center text-sm", titleClassName)}>
         <FontAwesomeIcon icon={faInfoCircle} size="sm" className="mr-1.5 text-primary" />
         {title}
       </div>

frontend/src/const/routes.ts

@@ -23,6 +23,10 @@ export const ROUTE_PATHS = Object.freeze({
         "/_authenticate/_inject-org-details/_org-layout/organization/settings/oauth/callback"
       )
     },
+    SsoPage: setRoute(
+      "/organization/sso",
+      "/_authenticate/_inject-org-details/_org-layout/organization/sso"
+    ),
     SecretScanning: setRoute(
       "/organization/secret-scanning",
       "/_authenticate/_inject-org-details/_org-layout/organization/secret-scanning"
@@ -283,9 +287,13 @@ export const ROUTE_PATHS = Object.freeze({
       "/cert-manager/$projectId/ca/$caId",
       "/_authenticate/_inject-org-details/_org-layout/cert-manager/$projectId/_cert-manager-layout/ca/$caId"
     ),
-    OverviewPage: setRoute(
-      "/cert-manager/$projectId/overview",
-      "/_authenticate/_inject-org-details/_org-layout/cert-manager/$projectId/_cert-manager-layout/overview"
+    SubscribersPage: setRoute(
+      "/cert-manager/$projectId/subscribers",
+      "/_authenticate/_inject-org-details/_org-layout/cert-manager/$projectId/_cert-manager-layout/subscribers"
+    ),
+    CertificatesPage: setRoute(
+      "/cert-manager/$projectId/certificates",
+      "/_authenticate/_inject-org-details/_org-layout/cert-manager/$projectId/_cert-manager-layout/certificates"
     ),
     CertificateAuthoritiesPage: setRoute(
       "/cert-manager/$projectId/certificate-authorities",
@@ -298,6 +306,10 @@ export const ROUTE_PATHS = Object.freeze({
     PkiCollectionDetailsByIDPage: setRoute(
       "/cert-manager/$projectId/pki-collections/$collectionId",
       "/_authenticate/_inject-org-details/_org-layout/cert-manager/$projectId/_cert-manager-layout/pki-collections/$collectionId"
+    ),
+    PkiSubscriberDetailsByIDPage: setRoute(
+      "/cert-manager/$projectId/subscribers/$subscriberName",
+      "/_authenticate/_inject-org-details/_org-layout/cert-manager/$projectId/_cert-manager-layout/subscribers/$subscriberName"
     )
   },
   Ssh: {

frontend/src/context/ProjectPermissionContext/index.tsx

@@ -9,5 +9,7 @@ export {
   ProjectPermissionIdentityActions,
   ProjectPermissionKmipActions,
   ProjectPermissionMemberActions,
+  ProjectPermissionPkiSubscriberActions,
+  ProjectPermissionSshHostActions,
   ProjectPermissionSub
 } from "./types";

frontend/src/context/ProjectPermissionContext/types.ts

@@ -95,6 +95,15 @@ export enum ProjectPermissionSshHostActions {
   IssueHostCert = "issue-host-cert"
 }
 
+export enum ProjectPermissionPkiSubscriberActions {
+  Read = "read",
+  Create = "create",
+  Edit = "edit",
+  Delete = "delete",
+  IssueCert = "issue-cert",
+  ListCerts = "list-certs"
+}
+
 export enum ProjectPermissionSecretRotationActions {
   Read = "read",
   ReadGeneratedCredentials = "read-generated-credentials",
@@ -186,6 +195,7 @@ export enum ProjectPermissionSub {
   SshHostGroups = "ssh-host-groups",
   PkiAlerts = "pki-alerts",
   PkiCollections = "pki-collections",
+  PkiSubscribers = "pki-subscribers",
   Kms = "kms",
   Cmek = "cmek",
   SecretSyncs = "secret-syncs",
@@ -220,6 +230,14 @@ export type SecretRotationSubjectFields = {
   secretPath: string;
 };
 
+export type SshHostSubjectFields = {
+  hostname: string;
+};
+
+export type PkiSubscriberSubjectFields = {
+  name: string;
+};
+
 export type ProjectPermissionSet =
   | [
       ProjectPermissionSecretActions,
@@ -282,7 +300,20 @@ export type ProjectPermissionSet =
   | [ProjectPermissionActions, ProjectPermissionSub.SshCertificateTemplates]
   | [ProjectPermissionActions, ProjectPermissionSub.SshCertificates]
   | [ProjectPermissionActions, ProjectPermissionSub.SshHostGroups]
-  | [ProjectPermissionSshHostActions, ProjectPermissionSub.SshHosts]
+  | [
+      ProjectPermissionSshHostActions,
+      (
+        | ProjectPermissionSub.SshHosts
+        | (ForcedSubject<ProjectPermissionSub.SshHosts> & SshHostSubjectFields)
+      )
+    ]
+  | [
+      ProjectPermissionPkiSubscriberActions,
+      (
+        | ProjectPermissionSub.PkiSubscribers
+        | (ForcedSubject<ProjectPermissionSub.PkiSubscribers> & PkiSubscriberSubjectFields)
+      )
+    ]
   | [ProjectPermissionActions, ProjectPermissionSub.PkiAlerts]
   | [ProjectPermissionActions, ProjectPermissionSub.PkiCollections]
   | [ProjectPermissionSecretSyncActions, ProjectPermissionSub.SecretSyncs]

frontend/src/context/index.tsx

@@ -17,6 +17,8 @@ export {
   ProjectPermissionIdentityActions,
   ProjectPermissionKmipActions,
   ProjectPermissionMemberActions,
+  ProjectPermissionPkiSubscriberActions,
+  ProjectPermissionSshHostActions,
   ProjectPermissionSub,
   useProjectPermission
 } from "./ProjectPermissionContext";

frontend/src/helpers/appConnections.ts

@@ -30,6 +30,7 @@ import {
   VercelConnectionMethod,
   WindmillConnectionMethod
 } from "@app/hooks/api/appConnections/types";
+import { OCIConnectionMethod } from "@app/hooks/api/appConnections/types/oci-connection";
 
 export const APP_CONNECTION_MAP: Record<
   AppConnection,
@@ -61,7 +62,8 @@ export const APP_CONNECTION_MAP: Record<
   [AppConnection.Auth0]: { name: "Auth0", image: "Auth0.png", size: 40 },
   [AppConnection.HCVault]: { name: "Hashicorp Vault", image: "Vault.png", size: 65 },
   [AppConnection.LDAP]: { name: "LDAP", image: "LDAP.png", size: 65 },
-  [AppConnection.TeamCity]: { name: "TeamCity", image: "TeamCity.png" }
+  [AppConnection.TeamCity]: { name: "TeamCity", image: "TeamCity.png" },
+  [AppConnection.OCI]: { name: "OCI", image: "Oracle.png" }
 };
 
 export const getAppConnectionMethodDetails = (method: TAppConnection["method"]) => {
@@ -74,6 +76,7 @@ export const getAppConnectionMethodDetails = (method: TAppConnection["method"])
     case GitHubConnectionMethod.OAuth:
       return { name: "OAuth", icon: faPassport };
     case AwsConnectionMethod.AccessKey:
+    case OCIConnectionMethod.AccessKey:
       return { name: "Access Key", icon: faKey };
     case AwsConnectionMethod.AssumeRole:
       return { name: "Assume Role", icon: faUser };

frontend/src/helpers/project.ts

@@ -61,6 +61,9 @@ export const initProjectHelper = async ({ projectName }: { projectName: string }
   return project;
 };
 export const getProjectHomePage = (workspace: Workspace) => {
+  if (workspace.type === ProjectType.CertificateManager) {
+    return `/${workspace.type}/$projectId/subscribers` as const;
+  }
   return `/${workspace.type}/$projectId/overview` as const;
 };
 

frontend/src/helpers/secretSyncs.ts

@@ -47,6 +47,10 @@ export const SECRET_SYNC_MAP: Record<SecretSync, { name: string; image: string }
   [SecretSync.TeamCity]: {
     name: "TeamCity",
     image: "TeamCity.png"
+  },
+  [SecretSync.OCIVault]: {
+    name: "OCI Vault",
+    image: "Oracle.png"
   }
 };
 
@@ -64,7 +68,8 @@ export const SECRET_SYNC_CONNECTION_MAP: Record<SecretSync, AppConnection> = {
   [SecretSync.Vercel]: AppConnection.Vercel,
   [SecretSync.Windmill]: AppConnection.Windmill,
   [SecretSync.HCVault]: AppConnection.HCVault,
-  [SecretSync.TeamCity]: AppConnection.TeamCity
+  [SecretSync.TeamCity]: AppConnection.TeamCity,
+  [SecretSync.OCIVault]: AppConnection.OCI
 };
 
 export const SECRET_SYNC_INITIAL_SYNC_BEHAVIOR_MAP: Record<

frontend/src/hooks/api/appConnections/enums.ts

@@ -16,5 +16,6 @@ export enum AppConnection {
   Auth0 = "auth0",
   HCVault = "hashicorp-vault",
   LDAP = "ldap",
-  TeamCity = "teamcity"
+  TeamCity = "teamcity",
+  OCI = "oci"
 }

frontend/src/hooks/api/appConnections/oci/index.ts

@@ -0,0 +1,2 @@
+export * from "./queries";
+export * from "./types";

frontend/src/hooks/api/appConnections/oci/queries.tsx

@@ -0,0 +1,108 @@
+import { useQuery, UseQueryOptions } from "@tanstack/react-query";
+
+import { apiRequest } from "@app/config/request";
+
+import { appConnectionKeys } from "../queries";
+import {
+  TListOCIVaultKeys,
+  TListOCIVaults,
+  TOCICompartment,
+  TOCIVault,
+  TOCIVaultKey
+} from "./types";
+
+const ociConnectionKeys = {
+  all: [...appConnectionKeys.all, "oci"] as const,
+  listCompartments: (connectionId: string) =>
+    [...ociConnectionKeys.all, "compartments", connectionId] as const,
+  listVaults: (connectionId: string, compartmentOcid: string) =>
+    [...ociConnectionKeys.all, "vaults", connectionId, compartmentOcid] as const,
+  listVaultKeys: (connectionId: string, compartmentOcid: string, vaultOcid: string) =>
+    [...ociConnectionKeys.all, "keys", connectionId, compartmentOcid, vaultOcid] as const
+};
+
+export const useOCIConnectionListCompartments = (
+  connectionId: string,
+  options?: Omit<
+    UseQueryOptions<
+      TOCICompartment[],
+      unknown,
+      TOCICompartment[],
+      ReturnType<typeof ociConnectionKeys.listCompartments>
+    >,
+    "queryKey" | "queryFn"
+  >
+) => {
+  return useQuery({
+    queryKey: ociConnectionKeys.listCompartments(connectionId),
+    queryFn: async () => {
+      const { data } = await apiRequest.get<TOCICompartment[]>(
+        `/api/v1/app-connections/oci/${connectionId}/compartments`
+      );
+
+      return data;
+    },
+    ...options
+  });
+};
+
+export const useOCIConnectionListVaults = (
+  { connectionId, compartmentOcid }: TListOCIVaults,
+  options?: Omit<
+    UseQueryOptions<
+      TOCIVault[],
+      unknown,
+      TOCIVault[],
+      ReturnType<typeof ociConnectionKeys.listVaults>
+    >,
+    "queryKey" | "queryFn"
+  >
+) => {
+  return useQuery({
+    queryKey: ociConnectionKeys.listVaults(connectionId, compartmentOcid),
+    queryFn: async () => {
+      const { data } = await apiRequest.get<TOCIVault[]>(
+        `/api/v1/app-connections/oci/${connectionId}/vaults`,
+        {
+          params: {
+            compartmentOcid
+          }
+        }
+      );
+
+      return data;
+    },
+    ...options
+  });
+};
+
+export const useOCIConnectionListVaultKeys = (
+  { connectionId, compartmentOcid, vaultOcid }: TListOCIVaultKeys,
+  options?: Omit<
+    UseQueryOptions<
+      TOCIVaultKey[],
+      unknown,
+      TOCIVaultKey[],
+      ReturnType<typeof ociConnectionKeys.listVaultKeys>
+    >,
+    "queryKey" | "queryFn"
+  >
+) => {
+  return useQuery({
+    queryKey: ociConnectionKeys.listVaultKeys(connectionId, compartmentOcid, vaultOcid),
+    queryFn: async () => {
+      const { data } = await apiRequest.get<TOCIVaultKey[]>(
+        `/api/v1/app-connections/oci/${connectionId}/vault-keys`,
+        {
+          params: {
+            compartmentOcid,
+            vaultOcid
+          }
+        }
+      );
+
+      return data;
+    },
+    ...options
+  });
+};

frontend/src/hooks/api/appConnections/oci/types.ts

@@ -0,0 +1,27 @@
+// Response types
+export type TOCICompartment = {
+  id: string;
+  name: string;
+};
+
+export type TOCIVault = {
+  id: string;
+  displayName: string;
+};
+
+export type TOCIVaultKey = {
+  id: string;
+  displayName: string;
+};
+
+// Param types
+export type TListOCIVaults = {
+  connectionId: string;
+  compartmentOcid: string;
+};
+
+export type TListOCIVaultKeys = {
+  connectionId: string;
+  compartmentOcid: string;
+  vaultOcid: string;
+};

frontend/src/hooks/api/appConnections/types/app-options.ts

@@ -84,6 +84,10 @@ export type TTeamCityConnectionOption = TAppConnectionOptionBase & {
   app: AppConnection.TeamCity;
 };
 
+export type TOCIConnectionOption = TAppConnectionOptionBase & {
+  app: AppConnection.OCI;
+};
+
 export type TAppConnectionOption =
   | TAwsConnectionOption
   | TGitHubConnectionOption
@@ -101,7 +105,8 @@ export type TAppConnectionOption =
   | TWindmillConnectionOption
   | TAuth0ConnectionOption
   | THCVaultConnectionOption
-  | TTeamCityConnectionOption;
+  | TTeamCityConnectionOption
+  | TOCIConnectionOption;
 
 export type TAppConnectionOptionMap = {
   [AppConnection.AWS]: TAwsConnectionOption;
@@ -122,4 +127,5 @@ export type TAppConnectionOptionMap = {
   [AppConnection.HCVault]: THCVaultConnectionOption;
   [AppConnection.LDAP]: TLdapConnectionOption;
   [AppConnection.TeamCity]: TTeamCityConnectionOption;
+  [AppConnection.OCI]: TOCIConnectionOption;
 };

frontend/src/hooks/api/appConnections/types/index.ts

@@ -13,6 +13,7 @@ import { THCVaultConnection } from "./hc-vault-connection";
 import { THumanitecConnection } from "./humanitec-connection";
 import { TLdapConnection } from "./ldap-connection";
 import { TMsSqlConnection } from "./mssql-connection";
+import { TOCIConnection } from "./oci-connection";
 import { TPostgresConnection } from "./postgres-connection";
 import { TTeamCityConnection } from "./teamcity-connection";
 import { TTerraformCloudConnection } from "./terraform-cloud-connection";
@@ -32,6 +33,7 @@ export * from "./hc-vault-connection";
 export * from "./humanitec-connection";
 export * from "./ldap-connection";
 export * from "./mssql-connection";
+export * from "./oci-connection";
 export * from "./postgres-connection";
 export * from "./teamcity-connection";
 export * from "./terraform-cloud-connection";
@@ -56,7 +58,8 @@ export type TAppConnection =
   | TAuth0Connection
   | THCVaultConnection
   | TLdapConnection
-  | TTeamCityConnection;
+  | TTeamCityConnection
+  | TOCIConnection;
 
 export type TAvailableAppConnection = Pick<TAppConnection, "name" | "id">;
 
@@ -102,4 +105,5 @@ export type TAppConnectionMap = {
   [AppConnection.HCVault]: THCVaultConnection;
   [AppConnection.LDAP]: TLdapConnection;
   [AppConnection.TeamCity]: TTeamCityConnection;
+  [AppConnection.OCI]: TOCIConnection;
 };

frontend/src/hooks/api/appConnections/types/oci-connection.ts

@@ -0,0 +1,17 @@
+import { AppConnection } from "@app/hooks/api/appConnections/enums";
+import { TRootAppConnection } from "@app/hooks/api/appConnections/types/root-connection";
+
+export enum OCIConnectionMethod {
+  AccessKey = "access-key"
+}
+
+export type TOCIConnection = TRootAppConnection & { app: AppConnection.OCI } & {
+  method: OCIConnectionMethod.AccessKey;
+  credentials: {
+    userOcid: string;
+    tenancyOcid: string;
+    region: string;
+    fingerprint: string;
+    privateKey: string;
+  };
+};

frontend/src/hooks/api/auditLogs/constants.tsx

@@ -182,10 +182,17 @@ export const eventToNameMap: { [K in EventType]: string } = {
     "Microsoft Teams Workflow Integration Check Installation Status",
   [EventType.MICROSOFT_TEAMS_WORKFLOW_INTEGRATION_GET_TEAMS]: "Get Microsoft Teams tenant teams",
   [EventType.MICROSOFT_TEAMS_WORKFLOW_INTEGRATION_GET]: "Get Microsoft Teams Workflow Integration",
-  [EventType.MICROSOFT_TEAMS_WORKFLOW_INTEGRATION_LIST]: "List Microsoft Teams Workflow Integration"
+  [EventType.MICROSOFT_TEAMS_WORKFLOW_INTEGRATION_LIST]:
+    "List Microsoft Teams Workflow Integration",
+
+  [EventType.LOGIN_IDENTITY_LDAP_AUTH]: "Identity login via LDAP Auth",
+  [EventType.ADD_IDENTITY_LDAP_AUTH]: "Attached LDAP Auth to identity",
+  [EventType.UPDATE_IDENTITY_LDAP_AUTH]: "Updated LDAP Auth for identity",
+  [EventType.GET_IDENTITY_LDAP_AUTH]: "Retrieved LDAP Auth for identity",
+  [EventType.REVOKE_IDENTITY_LDAP_AUTH]: "Revoked LDAP Auth for identity"
 };
 
-export const userAgentTTypeoNameMap: { [K in UserAgentType]: string } = {
+export const userAgentTypeToNameMap: { [K in UserAgentType]: string } = {
   [UserAgentType.WEB]: "Web",
   [UserAgentType.CLI]: "CLI",
   [UserAgentType.K8_OPERATOR]: "K8s operator",

frontend/src/hooks/api/auditLogs/enums.tsx

@@ -47,6 +47,13 @@ export enum EventType {
   CREATE_IDENTITY_UNIVERSAL_AUTH_CLIENT_SECRET = "create-identity-universal-auth-client-secret",
   REVOKE_IDENTITY_UNIVERSAL_AUTH_CLIENT_SECRET = "revoke-identity-universal-auth-client-secret",
   GET_IDENTITY_UNIVERSAL_AUTH_CLIENT_SECRETS = "get-identity-universal-auth-client-secret",
+
+  LOGIN_IDENTITY_LDAP_AUTH = "login-identity-ldap-auth",
+  ADD_IDENTITY_LDAP_AUTH = "add-identity-ldap-auth",
+  UPDATE_IDENTITY_LDAP_AUTH = "update-identity-ldap-auth",
+  GET_IDENTITY_LDAP_AUTH = "get-identity-ldap-auth",
+  REVOKE_IDENTITY_LDAP_AUTH = "revoke-identity-ldap-auth",
+
   CREATE_ENVIRONMENT = "create-environment",
   UPDATE_ENVIRONMENT = "update-environment",
   DELETE_ENVIRONMENT = "delete-environment",

frontend/src/hooks/api/certificates/mutations.tsx

@@ -2,6 +2,7 @@ import { useMutation, useQueryClient } from "@tanstack/react-query";
 
 import { apiRequest } from "@app/config/request";
 
+import { pkiSubscriberKeys } from "../pkiSubscriber/queries";
 import { workspaceKeys } from "../workspace";
 import { TCertificate, TDeleteCertDTO, TRevokeCertDTO } from "./types";
 
@@ -42,6 +43,9 @@ export const useRevokeCert = () => {
       queryClient.invalidateQueries({
         queryKey: workspaceKeys.forWorkspaceCertificates(projectSlug)
       });
+      queryClient.invalidateQueries({
+        queryKey: pkiSubscriberKeys.allPkiSubscriberCertificates()
+      });
     }
   });
 };

frontend/src/hooks/api/identities/constants.tsx

@@ -8,5 +8,6 @@ export const identityAuthToNameMap: { [I in IdentityAuthMethod]: string } = {
   [IdentityAuthMethod.AWS_AUTH]: "AWS Auth",
   [IdentityAuthMethod.AZURE_AUTH]: "Azure Auth",
   [IdentityAuthMethod.OIDC_AUTH]: "OIDC Auth",
+  [IdentityAuthMethod.LDAP_AUTH]: "LDAP Auth",
   [IdentityAuthMethod.JWT_AUTH]: "JWT Auth"
 };

frontend/src/hooks/api/identities/enums.tsx

@@ -6,6 +6,7 @@ export enum IdentityAuthMethod {
   AWS_AUTH = "aws-auth",
   AZURE_AUTH = "azure-auth",
   OIDC_AUTH = "oidc-auth",
+  LDAP_AUTH = "ldap-auth",
   JWT_AUTH = "jwt-auth"
 }
 

frontend/src/hooks/api/identities/index.tsx

@@ -1,51 +1,4 @@
 export { identityAuthToNameMap } from "./constants";
 export { IdentityAuthMethod } from "./enums";
-export {
-  useAddIdentityAwsAuth,
-  useAddIdentityAzureAuth,
-  useAddIdentityGcpAuth,
-  useAddIdentityJwtAuth,
-  useAddIdentityKubernetesAuth,
-  useAddIdentityOidcAuth,
-  useAddIdentityTokenAuth,
-  useAddIdentityUniversalAuth,
-  useCreateIdentity,
-  useCreateIdentityUniversalAuthClientSecret,
-  useCreateTokenIdentityTokenAuth,
-  useDeleteIdentity,
-  useDeleteIdentityAwsAuth,
-  useDeleteIdentityAzureAuth,
-  useDeleteIdentityGcpAuth,
-  useDeleteIdentityJwtAuth,
-  useDeleteIdentityKubernetesAuth,
-  useDeleteIdentityOidcAuth,
-  useDeleteIdentityTokenAuth,
-  useDeleteIdentityUniversalAuth,
-  useRevokeIdentityTokenAuthToken,
-  useRevokeIdentityUniversalAuthClientSecret,
-  useUpdateIdentity,
-  useUpdateIdentityAwsAuth,
-  useUpdateIdentityAzureAuth,
-  useUpdateIdentityGcpAuth,
-  useUpdateIdentityJwtAuth,
-  useUpdateIdentityKubernetesAuth,
-  useUpdateIdentityOidcAuth,
-  useUpdateIdentityTokenAuth,
-  useUpdateIdentityTokenAuthToken,
-  useUpdateIdentityUniversalAuth
-} from "./mutations";
-export {
-  useGetIdentityAwsAuth,
-  useGetIdentityAzureAuth,
-  useGetIdentityById,
-  useGetIdentityGcpAuth,
-  useGetIdentityJwtAuth,
-  useGetIdentityKubernetesAuth,
-  useGetIdentityOidcAuth,
-  useGetIdentityProjectMemberships,
-  useGetIdentityTokenAuth,
-  useGetIdentityTokensTokenAuth,
-  useGetIdentityUniversalAuth,
-  useGetIdentityUniversalAuthClientSecrets,
-  useSearchIdentities
-} from "./queries";
+export * from "./mutations";
+export * from "./queries";

frontend/src/hooks/api/identities/mutations.tsx

@@ -10,6 +10,7 @@ import {
   AddIdentityGcpAuthDTO,
   AddIdentityJwtAuthDTO,
   AddIdentityKubernetesAuthDTO,
+  AddIdentityLdapAuthDTO,
   AddIdentityOidcAuthDTO,
   AddIdentityTokenAuthDTO,
   AddIdentityUniversalAuthDTO,
@@ -25,6 +26,7 @@ import {
   DeleteIdentityGcpAuthDTO,
   DeleteIdentityJwtAuthDTO,
   DeleteIdentityKubernetesAuthDTO,
+  DeleteIdentityLdapAuthDTO,
   DeleteIdentityOidcAuthDTO,
   DeleteIdentityTokenAuthDTO,
   DeleteIdentityUniversalAuthClientSecretDTO,
@@ -36,6 +38,7 @@ import {
   IdentityGcpAuth,
   IdentityJwtAuth,
   IdentityKubernetesAuth,
+  IdentityLdapAuth,
   IdentityOidcAuth,
   IdentityTokenAuth,
   IdentityUniversalAuth,
@@ -47,6 +50,7 @@ import {
   UpdateIdentityGcpAuthDTO,
   UpdateIdentityJwtAuthDTO,
   UpdateIdentityKubernetesAuthDTO,
+  UpdateIdentityLdapAuthDTO,
   UpdateIdentityOidcAuthDTO,
   UpdateIdentityTokenAuthDTO,
   UpdateIdentityUniversalAuthDTO,
@@ -1049,3 +1053,116 @@ export const useRevokeIdentityTokenAuthToken = () => {
     }
   });
 };
+
+export const useAddIdentityLdapAuth = () => {
+  const queryClient = useQueryClient();
+  return useMutation<IdentityLdapAuth, object, AddIdentityLdapAuthDTO>({
+    mutationFn: async ({
+      identityId,
+      url,
+      bindDN,
+      bindPass,
+      searchBase,
+      searchFilter,
+      ldapCaCertificate,
+      allowedFields,
+      accessTokenTTL,
+      accessTokenMaxTTL,
+      accessTokenNumUsesLimit,
+      accessTokenTrustedIps
+    }) => {
+      const { data } = await apiRequest.post<{ identityLdapAuth: IdentityLdapAuth }>(
+        `/api/v1/auth/ldap-auth/identities/${identityId}`,
+        {
+          url,
+          bindDN,
+          bindPass,
+          searchBase,
+          searchFilter,
+          ldapCaCertificate,
+          allowedFields,
+          accessTokenTTL,
+          accessTokenMaxTTL,
+          accessTokenNumUsesLimit,
+          accessTokenTrustedIps
+        }
+      );
+      return data.identityLdapAuth;
+    },
+    onSuccess: (_, { identityId, organizationId }) => {
+      queryClient.invalidateQueries({
+        queryKey: organizationKeys.getOrgIdentityMemberships(organizationId)
+      });
+      queryClient.invalidateQueries({ queryKey: identitiesKeys.getIdentityById(identityId) });
+      queryClient.invalidateQueries({
+        queryKey: identitiesKeys.getIdentityLdapAuth(identityId)
+      });
+    }
+  });
+};
+
+export const useUpdateIdentityLdapAuth = () => {
+  const queryClient = useQueryClient();
+  return useMutation<IdentityLdapAuth, object, UpdateIdentityLdapAuthDTO>({
+    mutationFn: async ({
+      identityId,
+      url,
+      bindDN,
+      bindPass,
+      searchBase,
+      searchFilter,
+      ldapCaCertificate,
+      allowedFields,
+      accessTokenTTL,
+      accessTokenMaxTTL,
+      accessTokenNumUsesLimit,
+      accessTokenTrustedIps
+    }) => {
+      const { data } = await apiRequest.patch<{ identityLdapAuth: IdentityLdapAuth }>(
+        `/api/v1/auth/ldap-auth/identities/${identityId}`,
+        {
+          url,
+          bindDN,
+          bindPass,
+          searchBase,
+          searchFilter,
+          ldapCaCertificate,
+          allowedFields,
+          accessTokenTTL,
+          accessTokenMaxTTL,
+          accessTokenNumUsesLimit,
+          accessTokenTrustedIps
+        }
+      );
+      return data.identityLdapAuth;
+    },
+    onSuccess: (_, { identityId, organizationId }) => {
+      queryClient.invalidateQueries({
+        queryKey: organizationKeys.getOrgIdentityMemberships(organizationId)
+      });
+      queryClient.invalidateQueries({ queryKey: identitiesKeys.getIdentityById(identityId) });
+      queryClient.invalidateQueries({
+        queryKey: identitiesKeys.getIdentityLdapAuth(identityId)
+      });
+    }
+  });
+};
+
+export const useDeleteIdentityLdapAuth = () => {
+  const queryClient = useQueryClient();
+  return useMutation<IdentityLdapAuth, object, DeleteIdentityLdapAuthDTO>({
+    mutationFn: async ({ identityId }) => {
+      const { data } = await apiRequest.delete(`/api/v1/auth/ldap-auth/identities/${identityId}`);
+      return data.identityLdapAuth;
+    },
+    onSuccess: (_, { organizationId, identityId }) => {
+      queryClient.invalidateQueries({
+        queryKey: organizationKeys.getOrgIdentityMemberships(organizationId)
+      });
+      queryClient.invalidateQueries({ queryKey: identitiesKeys.getIdentityById(identityId) });
+      queryClient.invalidateQueries({
+        queryKey: identitiesKeys.getIdentityLdapAuth(identityId)
+      });
+    }
+  });
+};

frontend/src/hooks/api/identities/queries.tsx

@@ -11,6 +11,7 @@ import {
   IdentityGcpAuth,
   IdentityJwtAuth,
   IdentityKubernetesAuth,
+  IdentityLdapAuth,
   IdentityMembership,
   IdentityMembershipOrg,
   IdentityOidcAuth,
@@ -34,6 +35,7 @@ export const identitiesKeys = {
   getIdentityAzureAuth: (identityId: string) => [{ identityId }, "identity-azure-auth"] as const,
   getIdentityTokenAuth: (identityId: string) => [{ identityId }, "identity-token-auth"] as const,
   getIdentityJwtAuth: (identityId: string) => [{ identityId }, "identity-jwt-auth"] as const,
+  getIdentityLdapAuth: (identityId: string) => [{ identityId }, "identity-ldap-auth"] as const,
   getIdentityTokensTokenAuth: (identityId: string) =>
     [{ identityId }, "identity-tokens-token-auth"] as const,
   getIdentityProjectMemberships: (identityId: string) =>
@@ -231,6 +233,27 @@ export const useGetIdentityTokenAuth = (
   });
 };
 
+export const useGetIdentityLdapAuth = (
+  identityId: string,
+  options?: TReactQueryOptions["options"]
+) => {
+  return useQuery({
+    queryKey: identitiesKeys.getIdentityLdapAuth(identityId),
+    queryFn: async () => {
+      const {
+        data: { identityLdapAuth }
+      } = await apiRequest.get<{ identityLdapAuth: IdentityLdapAuth }>(
+        `/api/v1/auth/ldap-auth/identities/${identityId}`
+      );
+      return identityLdapAuth;
+    },
+    staleTime: 0,
+    gcTime: 0,
+    ...options,
+    enabled: Boolean(identityId) && (options?.enabled ?? true)
+  });
+};
+
 export const useGetIdentityTokensTokenAuth = (identityId: string) => {
   return useQuery({
     enabled: Boolean(identityId),

frontend/src/hooks/api/identities/types.ts

@@ -425,6 +425,72 @@ export type IdentityTokenAuth = {
   accessTokenTrustedIps: IdentityTrustedIp[];
 };
 
+export type AddIdentityLdapAuthDTO = {
+  organizationId: string;
+  identityId: string;
+  url: string;
+  bindDN: string;
+  bindPass: string;
+  searchBase: string;
+  searchFilter: string;
+  ldapCaCertificate?: string;
+  allowedFields?: {
+    key: string;
+    value: string;
+  }[];
+  accessTokenTTL: number;
+  accessTokenMaxTTL: number;
+  accessTokenNumUsesLimit: number;
+  accessTokenTrustedIps: {
+    ipAddress: string;
+  }[];
+};
+
+export type UpdateIdentityLdapAuthDTO = {
+  identityId: string;
+  organizationId: string;
+  url?: string;
+  bindDN?: string;
+  bindPass?: string;
+  searchBase?: string;
+  searchFilter?: string;
+  ldapCaCertificate?: string;
+  allowedFields?: {
+    key: string;
+    value: string;
+  }[];
+  accessTokenTTL?: number;
+  accessTokenMaxTTL?: number;
+  accessTokenNumUsesLimit?: number;
+  accessTokenTrustedIps?: {
+    ipAddress: string;
+  }[];
+};
+
+export type DeleteIdentityLdapAuthDTO = {
+  organizationId: string;
+  identityId: string;
+};
+
+export type IdentityLdapAuth = {
+  url: string;
+  bindDN: string;
+  bindPass: string;
+  searchBase: string;
+  searchFilter: string;
+  ldapCaCertificate?: string;
+  allowedFields?: {
+    key: string;
+    value: string;
+  }[];
+
+  identityId: string;
+  accessTokenTTL: number;
+  accessTokenMaxTTL: number;
+  accessTokenNumUsesLimit: number;
+  accessTokenTrustedIps: IdentityTrustedIp[];
+};
+
 export type AddIdentityTokenAuthDTO = {
   organizationId: string;
   identityId: string;

frontend/src/hooks/api/index.tsx

@@ -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";

frontend/src/hooks/api/pkiSubscriber/constants.tsx

@@ -0,0 +1,20 @@
+export enum PkiSubscriberStatus {
+  ACTIVE = "active",
+  DISABLED = "disabled"
+}
+
+export const pkiSubscriberStatusToNameMap: { [K in PkiSubscriberStatus]: string } = {
+  [PkiSubscriberStatus.ACTIVE]: "Active",
+  [PkiSubscriberStatus.DISABLED]: "Disabled"
+};
+
+export const getPkiSubscriberStatusBadgeVariant = (status: PkiSubscriberStatus) => {
+  switch (status) {
+    case PkiSubscriberStatus.ACTIVE:
+      return "success";
+    case PkiSubscriberStatus.DISABLED:
+      return "danger";
+    default:
+      return "primary";
+  }
+};

frontend/src/hooks/api/pkiSubscriber/index.tsx

@@ -0,0 +1,7 @@
+export {
+  useCreatePkiSubscriber,
+  useDeletePkiSubscriber,
+  useIssuePkiSubscriberCert,
+  useUpdatePkiSubscriber
+} from "./mutations";
+export { useGetPkiSubscriber, useGetPkiSubscriberCertificates } from "./queries";

frontend/src/hooks/api/pkiSubscriber/mutations.tsx

@@ -0,0 +1,110 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+
+import { apiRequest } from "@app/config/request";
+
+import { TCreateCertificateResponse } from "../ca/types";
+import { workspaceKeys } from "../workspace/query-keys";
+import { pkiSubscriberKeys } from "./queries";
+import {
+  TCreatePkiSubscriberDTO,
+  TDeletePkiSubscriberDTO,
+  TIssuePkiSubscriberCertDTO,
+  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, name }) => {
+      queryClient.invalidateQueries({
+        queryKey: workspaceKeys.getWorkspacePkiSubscribers(projectId)
+      });
+      queryClient.invalidateQueries({
+        queryKey: pkiSubscriberKeys.getPkiSubscriber({
+          subscriberName: name,
+          projectId
+        })
+      });
+    }
+  });
+};
+
+export const useUpdatePkiSubscriber = () => {
+  const queryClient = useQueryClient();
+  return useMutation<TPkiSubscriber, object, TUpdatePkiSubscriberDTO>({
+    mutationFn: async ({ subscriberName, ...body }) => {
+      const { data: subscriber } = await apiRequest.patch(
+        `/api/v1/pki/subscribers/${subscriberName}`,
+        body
+      );
+      return subscriber;
+    },
+    onSuccess: ({ projectId, name }) => {
+      queryClient.invalidateQueries({
+        queryKey: workspaceKeys.getWorkspacePkiSubscribers(projectId)
+      });
+      queryClient.invalidateQueries({
+        queryKey: pkiSubscriberKeys.getPkiSubscriber({
+          subscriberName: name,
+          projectId
+        })
+      });
+    }
+  });
+};
+
+export const useDeletePkiSubscriber = () => {
+  const queryClient = useQueryClient();
+  return useMutation<TPkiSubscriber, object, TDeletePkiSubscriberDTO>({
+    mutationFn: async ({ subscriberName, projectId }) => {
+      const { data: subscriber } = await apiRequest.delete(
+        `/api/v1/pki/subscribers/${subscriberName}`,
+        {
+          data: {
+            projectId
+          }
+        }
+      );
+      return subscriber;
+    },
+    onSuccess: ({ name, projectId }) => {
+      queryClient.invalidateQueries({
+        queryKey: workspaceKeys.getWorkspacePkiSubscribers(projectId)
+      });
+      queryClient.invalidateQueries({
+        queryKey: pkiSubscriberKeys.getPkiSubscriber({
+          subscriberName: name,
+          projectId
+        })
+      });
+    }
+  });
+};
+
+export const useIssuePkiSubscriberCert = () => {
+  const queryClient = useQueryClient();
+  return useMutation<TCreateCertificateResponse, object, TIssuePkiSubscriberCertDTO>({
+    mutationFn: async ({ subscriberName, projectId }) => {
+      const { data } = await apiRequest.post(
+        `/api/v1/pki/subscribers/${subscriberName}/issue-certificate`,
+        {
+          projectId
+        }
+      );
+      return data;
+    },
+    onSuccess: (_, { subscriberName, projectId }) => {
+      queryClient.invalidateQueries({
+        queryKey: pkiSubscriberKeys.forPkiSubscriberCertificates({
+          subscriberName,
+          projectId
+        })
+      });
+    }
+  });
+};

frontend/src/hooks/api/pkiSubscriber/queries.tsx

@@ -0,0 +1,102 @@
+import { useQuery } from "@tanstack/react-query";
+
+import { apiRequest } from "@app/config/request";
+
+import { TCertificate } from "../certificates/types";
+import { TPkiSubscriber } from "./types";
+
+export const pkiSubscriberKeys = {
+  getPkiSubscriber: ({
+    subscriberName,
+    projectId
+  }: {
+    subscriberName: string;
+    projectId: string;
+  }) => [{ subscriberName, projectId }, "pki-subscriber"] as const,
+  allPkiSubscriberCertificates: () => ["pki-subscriber-certificates"] as const,
+  forPkiSubscriberCertificates: ({
+    subscriberName,
+    projectId
+  }: {
+    subscriberName: string;
+    projectId: string;
+  }) => [...pkiSubscriberKeys.allPkiSubscriberCertificates(), subscriberName, projectId] as const,
+  specificPkiSubscriberCertificates: ({
+    subscriberName,
+    projectId,
+    offset,
+    limit
+  }: {
+    subscriberName: string;
+    projectId: string;
+    offset: number;
+    limit: number;
+  }) =>
+    [
+      ...pkiSubscriberKeys.forPkiSubscriberCertificates({ subscriberName, projectId }),
+      { offset, limit, projectId }
+    ] as const
+};
+
+export const useGetPkiSubscriber = ({
+  subscriberName,
+  projectId
+}: {
+  subscriberName: string;
+  projectId: string;
+}) => {
+  return useQuery({
+    queryKey: pkiSubscriberKeys.getPkiSubscriber({ subscriberName, projectId }),
+    queryFn: async () => {
+      const { data: pkiSubscriber } = await apiRequest.get<TPkiSubscriber>(
+        `/api/v1/pki/subscribers/${subscriberName}`,
+        {
+          params: {
+            projectId
+          }
+        }
+      );
+      return pkiSubscriber;
+    },
+    enabled: Boolean(subscriberName) && Boolean(projectId)
+  });
+};
+
+export const useGetPkiSubscriberCertificates = ({
+  subscriberName,
+  projectId,
+  offset,
+  limit
+}: {
+  subscriberName: string;
+  projectId: string;
+  offset: number;
+  limit: number;
+}) => {
+  return useQuery({
+    queryKey: pkiSubscriberKeys.specificPkiSubscriberCertificates({
+      subscriberName,
+      projectId,
+      offset,
+      limit
+    }),
+    queryFn: async () => {
+      const params = new URLSearchParams({
+        offset: String(offset),
+        limit: String(limit),
+        projectId
+      });
+
+      const {
+        data: { certificates, totalCount }
+      } = await apiRequest.get<{ certificates: TCertificate[]; totalCount: number }>(
+        `/api/v1/pki/subscribers/${subscriberName}/certificates`,
+        {
+          params
+        }
+      );
+      return { certificates, totalCount };
+    },
+    enabled: Boolean(subscriberName) && Boolean(projectId)
+  });
+};

frontend/src/hooks/api/pkiSubscriber/types.ts

@@ -0,0 +1,53 @@
+import { CertExtendedKeyUsage, CertKeyUsage } from "../certificates/enums";
+
+export enum PkiSubscriberStatus {
+  ACTIVE = "active",
+  DISABLED = "disabled"
+}
+
+export type TPkiSubscriber = {
+  id: string;
+  projectId: string;
+  caId: string;
+  name: string;
+  commonName: string;
+  status: PkiSubscriberStatus;
+  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 = {
+  subscriberName: string;
+  projectId: string;
+  caId?: string;
+  name?: string;
+  commonName?: string;
+  status?: PkiSubscriberStatus;
+  ttl?: string;
+  subjectAlternativeNames?: string[];
+  keyUsages?: CertKeyUsage[];
+  extendedKeyUsages?: CertExtendedKeyUsage[];
+};
+
+export type TDeletePkiSubscriberDTO = {
+  subscriberName: string;
+  projectId: string;
+};
+
+export type TIssuePkiSubscriberCertDTO = {
+  subscriberName: string;
+  projectId: string;
+};

frontend/src/hooks/api/secretSyncs/enums.ts

@@ -12,7 +12,8 @@ export enum SecretSync {
   Vercel = "vercel",
   Windmill = "windmill",
   HCVault = "hashicorp-vault",
-  TeamCity = "teamcity"
+  TeamCity = "teamcity",
+  OCIVault = "oci-vault"
 }
 
 export enum SecretSyncStatus {

frontend/src/hooks/api/secretSyncs/types/index.ts

@@ -11,6 +11,7 @@ import { TGcpSync } from "./gcp-sync";
 import { TGitHubSync } from "./github-sync";
 import { THCVaultSync } from "./hc-vault-sync";
 import { THumanitecSync } from "./humanitec-sync";
+import { TOCIVaultSync } from "./oci-vault-sync";
 import { TTeamCitySync } from "./teamcity-sync";
 import { TTerraformCloudSync } from "./terraform-cloud-sync";
 import { TVercelSync } from "./vercel-sync";
@@ -36,7 +37,8 @@ export type TSecretSync =
   | TVercelSync
   | TWindmillSync
   | THCVaultSync
-  | TTeamCitySync;
+  | TTeamCitySync
+  | TOCIVaultSync;
 
 export type TListSecretSyncs = { secretSyncs: TSecretSync[] };
 

frontend/src/hooks/api/secretSyncs/types/oci-vault-sync.ts

@@ -0,0 +1,17 @@
+import { AppConnection } from "@app/hooks/api/appConnections/enums";
+import { SecretSync } from "@app/hooks/api/secretSyncs";
+import { TRootSecretSync } from "@app/hooks/api/secretSyncs/types/root-sync";
+
+export type TOCIVaultSync = TRootSecretSync & {
+  destination: SecretSync.OCIVault;
+  destinationConfig: {
+    compartmentOcid: string;
+    vaultOcid: string;
+    keyOcid: string;
+  };
+  connection: {
+    app: AppConnection.OCI;
+    name: string;
+    id: string;
+  };
+};

frontend/src/hooks/api/sshHost/types.ts

@@ -6,7 +6,8 @@ export enum LoginMappingSource {
 export type TLoginMapping = {
   loginUser: string;
   allowedPrincipals: {
-    usernames: string[];
+    usernames?: string[];
+    groups?: string[];
   };
   source: LoginMappingSource;
 };
@@ -20,6 +21,7 @@ export type TSshHost = {
   hostCertTtl: string;
   loginMappings: TLoginMapping[];
 };
+
 export type TCreateSshHostDTO = {
   projectId: string;
   hostname: string;

frontend/src/hooks/api/workspace/index.tsx

@@ -35,6 +35,7 @@ export {
   useListWorkspaceGroups,
   useListWorkspacePkiAlerts,
   useListWorkspacePkiCollections,
+  useListWorkspacePkiSubscribers,
   useListWorkspaceSshCas,
   useListWorkspaceSshCertificates,
   useListWorkspaceSshCertificateTemplates,

frontend/src/hooks/api/workspace/queries.tsx

@@ -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),

frontend/src/hooks/api/workspace/query-keys.tsx

@@ -16,8 +16,11 @@ export const workspaceKeys = {
     type ? ["workspaces", { type }] : (["workspaces"] as const),
   getWorkspaceAuditLogs: (workspaceId: string) =>
     [{ workspaceId }, "workspace-audit-logs"] as const,
-  getWorkspaceUsers: (workspaceId: string, includeGroupMembers?: boolean, roles?: string[]) =>
-    [{ workspaceId, includeGroupMembers, roles }, "workspace-users"] as const,
+  getWorkspaceUsers: (
+    workspaceId: string,
+    includeGroupMembers: boolean = false,
+    roles: string[] = []
+  ) => [{ workspaceId, includeGroupMembers, roles }, "workspace-users"] as const,
   getWorkspaceUserDetails: (workspaceId: string, membershipId: string) =>
     [{ workspaceId, membershipId }, "workspace-user-details"] as const,
   getWorkspaceIdentityMemberships: (workspaceId: string) =>
@@ -51,6 +54,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) =>

frontend/src/layouts/OrganizationLayout/ProductsSideBar/DefaultSideBar.tsx

@@ -5,22 +5,6 @@ import { Menu, MenuGroup, MenuItem } from "@app/components/v2";
 export const DefaultSideBar = () => (
   <Menu>
     <MenuGroup title="Organization Control">
-      <Link to="/organization/audit-logs">
-        {({ isActive }) => (
-          <MenuItem isSelected={isActive} icon="moving-block">
-            Audit Logs
-          </MenuItem>
-        )}
-      </Link>
-      <Link to="/organization/billing">
-        {({ isActive }) => (
-          <MenuItem isSelected={isActive} icon="spinning-coin">
-            Usage & Billing
-          </MenuItem>
-        )}
-      </Link>
-    </MenuGroup>
-    <MenuGroup title="Other">
       <Link to="/organization/access-management">
         {({ isActive }) => (
           <MenuItem isSelected={isActive} icon="groups">
@@ -42,6 +26,29 @@ export const DefaultSideBar = () => (
           </MenuItem>
         )}
       </Link>
+      <Link to="/organization/sso">
+        {({ isActive }) => (
+          <MenuItem isSelected={isActive} icon="check">
+            Single Sign-On (SSO)
+          </MenuItem>
+        )}
+      </Link>
+    </MenuGroup>
+    <MenuGroup title="Other">
+      <Link to="/organization/audit-logs">
+        {({ isActive }) => (
+          <MenuItem isSelected={isActive} icon="moving-block">
+            Audit Logs
+          </MenuItem>
+        )}
+      </Link>
+      <Link to="/organization/billing">
+        {({ isActive }) => (
+          <MenuItem isSelected={isActive} icon="spinning-coin">
+            Usage & Billing
+          </MenuItem>
+        )}
+      </Link>
       <Link to="/organization/settings">
         {({ isActive }) => (
           <MenuItem isSelected={isActive} icon="toggle-settings">

frontend/src/layouts/OrganizationLayout/components/MinimizedOrgSidebar/MinimizedOrgSidebar.tsx

@@ -4,6 +4,7 @@ import {
   faArrowUpRightFromSquare,
   faBook,
   faCheck,
+  faCheckCircle,
   faCog,
   faDoorClosed,
   faEnvelope,
@@ -118,6 +119,9 @@ export const MinimizedOrgSidebar = () => {
     [
       linkOptions({ to: "/organization/access-management" }).to,
       linkOptions({ to: "/organization/app-connections" }).to,
+      linkOptions({ to: "/organization/billing" }).to,
+      linkOptions({ to: "/organization/sso" }).to,
+      linkOptions({ to: "/organization/gateways" }).to,
       linkOptions({ to: "/organization/settings" }).to,
       linkOptions({ to: "/organization/audit-logs" }).to
     ] as string[]
@@ -387,6 +391,13 @@ export const MinimizedOrgSidebar = () => {
                       Audit Logs
                     </DropdownMenuItem>
                   </Link>
+                  <Link to="/organization/sso">
+                    <DropdownMenuItem
+                      icon={<FontAwesomeIcon className="w-3" icon={faCheckCircle} />}
+                    >
+                      SSO Settings
+                    </DropdownMenuItem>
+                  </Link>
                   <Link to="/organization/settings">
                     <DropdownMenuItem icon={<FontAwesomeIcon className="w-3" icon={faCog} />}>
                       Organization Settings

frontend/src/layouts/ProjectLayout/ProjectLayout.tsx

@@ -104,7 +104,23 @@ export const ProjectLayout = () => {
                       {isCertManager && (
                         <>
                           <Link
-                            to={`/${ProjectType.CertificateManager}/$projectId/overview` as const}
+                            to={
+                              `/${ProjectType.CertificateManager}/$projectId/subscribers` as const
+                            }
+                            params={{
+                              projectId: currentWorkspace.id
+                            }}
+                          >
+                            {({ isActive }) => (
+                              <MenuItem isSelected={isActive} icon="pki-subscriber">
+                                Subscribers
+                              </MenuItem>
+                            )}
+                          </Link>
+                          <Link
+                            to={
+                              `/${ProjectType.CertificateManager}/$projectId/certificates` as const
+                            }
                             params={{
                               projectId: currentWorkspace.id
                             }}

frontend/src/pages/admin/OverviewPage/components/MicrosoftTeamsIntegrationForm.tsx

@@ -52,7 +52,7 @@ export const MicrosoftTeamsIntegrationForm = ({ adminIntegrationsConfig }: Props
     });
 
     createNotification({
-      text: "Updated admin Microsoft Teams configuration",
+      text: "Updated admin Microsoft Teams configuration. It can take up to 5 minutes to take effect.",
       type: "success"
     });
   };

frontend/src/pages/cert-manager/AlertingPage/AlertingPage.tsx

@@ -15,7 +15,10 @@ export const AlertingPage = () => {
         <title>{t("common.head-title", { title: "Alerting" })}</title>
       </Helmet>
       <div className="mx-auto mb-6 w-full max-w-7xl">
-        <PageHeader title="Alerting" />
+        <PageHeader
+          title="Alerting"
+          description="Configure alerts for expiring certificates and CAs to maintain security and compliance."
+        />
         <ProjectPermissionCan
           renderGuardBanner
           I={ProjectPermissionActions.Read}

frontend/src/pages/cert-manager/CertAuthDetailsByIDPage/CertAuthDetailsByIDPage.tsx

@@ -63,7 +63,7 @@ const Page = () => {
 
       handlePopUpClose("deleteCa");
       navigate({
-        to: `/${ProjectType.CertificateManager}/$projectId/overview` as const,
+        to: `/${ProjectType.CertificateManager}/$projectId/certificates` as const,
         params: {
           projectId
         }

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

@@ -15,7 +15,10 @@ export const CertificateAuthoritiesPage = () => {
         <title>{t("common.head-title", { title: "Certificate Authorities" })}</title>
       </Helmet>
       <div className="mx-auto mb-6 w-full max-w-7xl">
-        <PageHeader title="Certificate Authorities" />
+        <PageHeader
+          title="Certificate Authorities"
+          description="Manage internal private certificate authorities for issuing and signing certificates, including root and intermediate CAs."
+        />
         <ProjectPermissionCan
           renderGuardBanner
           I={ProjectPermissionActions.Read}

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

@@ -32,7 +32,10 @@ export const CertificatesPage = () => {
         <title>{t("common.head-title", { title: "Certificates" })}</title>
       </Helmet>
       <div className="mx-auto mb-6 w-full max-w-7xl">
-        <PageHeader title="Certificates" />
+        <PageHeader
+          title="Certificates"
+          description="View and track issued certificates, monitor expiration dates, and manage certificate lifecycles."
+        />
         {/* If both are false, the section does not render. This is to prevent duplicate banners. */}
         {(canAccessCerts || canAccessPkiColl) && (
           <ProjectPermissionCan

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

@@ -71,7 +71,7 @@ export const CertificatesTable = ({ handlePopUpOpen }: Props) => {
       <Table>
         <THead>
           <Tr>
-            <Th>Friendly Name</Th>
+            <Th>Common Name</Th>
             <Th>Status</Th>
             <Th>Not Before</Th>
             <Th>Not After</Th>
@@ -85,7 +85,7 @@ export const CertificatesTable = ({ handlePopUpOpen }: Props) => {
               const { variant, label } = getCertValidUntilBadgeDetails(certificate.notAfter);
               return (
                 <Tr className="h-10" key={`certificate-${certificate.id}`}>
-                  <Td>{certificate.friendlyName}</Td>
+                  <Td>{certificate.commonName}</Td>
                   <Td>
                     {certificate.status === CertStatus.REVOKED ? (
                       <Badge variant="danger">Revoked</Badge>

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

@@ -3,7 +3,7 @@ import { createFileRoute } from "@tanstack/react-router";
 import { CertificatesPage } from "./CertificatesPage";
 
 export const Route = createFileRoute(
-  "/_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/certificates"
 )({
   component: CertificatesPage
 });

frontend/src/pages/cert-manager/PkiCollectionDetailsByIDPage/PkiCollectionDetailsByIDPage.tsx

@@ -57,7 +57,7 @@ export const PkiCollectionPage = () => {
       });
       handlePopUpClose("deletePkiCollection");
       navigate({
-        to: `/${ProjectType.CertificateManager}/$projectId/overview` as const,
+        to: `/${ProjectType.CertificateManager}/$projectId/certificates` as const,
         params: {
           projectId
         }

frontend/src/pages/cert-manager/PkiCollectionDetailsByIDPage/routes.tsx

@@ -13,7 +13,7 @@ export const Route = createFileRoute(
         {
           label: "Certificate Collections",
           link: linkOptions({
-            to: "/cert-manager/$projectId/overview",
+            to: "/cert-manager/$projectId/certificates",
             params: {
               projectId: params.projectId
             }

frontend/src/pages/cert-manager/PkiSubscriberDetailsByIDPage/PkiSubscriberDetailsByIDPage.tsx

@@ -0,0 +1,165 @@
+import { Helmet } from "react-helmet";
+import { useTranslation } from "react-i18next";
+import { useNavigate, useParams } from "@tanstack/react-router";
+import { twMerge } from "tailwind-merge";
+
+import { createNotification } from "@app/components/notifications";
+import { ProjectPermissionCan } from "@app/components/permissions";
+import {
+  Button,
+  DeleteActionModal,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+  PageHeader,
+  Tooltip
+} from "@app/components/v2";
+import { ROUTE_PATHS } from "@app/const/routes";
+import {
+  ProjectPermissionPkiSubscriberActions,
+  ProjectPermissionSub,
+  useWorkspace
+} from "@app/context";
+import { useDeletePkiSubscriber, useGetPkiSubscriber } from "@app/hooks/api";
+import { ProjectType } from "@app/hooks/api/workspace/types";
+import { usePopUp } from "@app/hooks/usePopUp";
+
+import { PkiSubscriberModal } from "../PkiSubscribersPage/components/PkiSubscriberModal";
+import { PkiSubscriberCertificatesSection, PkiSubscriberDetailsSection } from "./components";
+
+const Page = () => {
+  const navigate = useNavigate();
+  const { currentWorkspace } = useWorkspace();
+  const projectId = currentWorkspace.id;
+  const subscriberName = useParams({
+    from: ROUTE_PATHS.CertManager.PkiSubscriberDetailsByIDPage.id,
+    select: (el) => el.subscriberName
+  });
+  const { data } = useGetPkiSubscriber({
+    subscriberName,
+    projectId
+  });
+
+  const { mutateAsync: deletePkiSubscriber } = useDeletePkiSubscriber();
+
+  const { popUp, handlePopUpOpen, handlePopUpClose, handlePopUpToggle } = usePopUp([
+    "pkiSubscriber",
+    "deletePkiSubscriber"
+  ] as const);
+
+  const onRemoveSubscriberSubmit = async (subscriberNameToDelete: string) => {
+    try {
+      if (!projectId) return;
+
+      await deletePkiSubscriber({ subscriberName: subscriberNameToDelete, projectId });
+
+      createNotification({
+        text: "Successfully deleted subscriber",
+        type: "success"
+      });
+
+      handlePopUpClose("deletePkiSubscriber");
+      navigate({
+        to: `/${ProjectType.CertificateManager}/$projectId/subscribers` as const,
+        params: {
+          projectId
+        }
+      });
+    } catch (err) {
+      console.error(err);
+      createNotification({
+        text: "Failed to delete subscriber",
+        type: "error"
+      });
+    }
+  };
+
+  return (
+    <div className="container mx-auto flex flex-col justify-between bg-bunker-800 text-white">
+      {data && (
+        <div className="mx-auto mb-6 w-full max-w-7xl">
+          <PageHeader title={data.name}>
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild className="rounded-lg">
+                <div className="hover:text-primary-400 data-[state=open]:text-primary-400">
+                  <Tooltip content="More options">
+                    <Button variant="outline_bg">More</Button>
+                  </Tooltip>
+                </div>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end" className="p-1">
+                <ProjectPermissionCan
+                  I={ProjectPermissionPkiSubscriberActions.Delete}
+                  a={ProjectPermissionSub.PkiSubscribers}
+                >
+                  {(isAllowed) => (
+                    <DropdownMenuItem
+                      className={twMerge(
+                        isAllowed
+                          ? "hover:!bg-red-500 hover:!text-white"
+                          : "pointer-events-none cursor-not-allowed opacity-50"
+                      )}
+                      onClick={() =>
+                        handlePopUpOpen("deletePkiSubscriber", {
+                          subscriberName: data.name
+                        })
+                      }
+                      disabled={!isAllowed}
+                    >
+                      Delete PKI Subscriber
+                    </DropdownMenuItem>
+                  )}
+                </ProjectPermissionCan>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </PageHeader>
+          <div className="flex">
+            <div className="mr-4 w-96">
+              <PkiSubscriberDetailsSection
+                subscriberName={data.name}
+                handlePopUpOpen={handlePopUpOpen}
+              />
+            </div>
+            <div className="w-full">
+              <PkiSubscriberCertificatesSection subscriberName={data.name} />
+            </div>
+          </div>
+        </div>
+      )}
+      <PkiSubscriberModal popUp={popUp} handlePopUpToggle={handlePopUpToggle} />
+      <DeleteActionModal
+        isOpen={popUp.deletePkiSubscriber.isOpen}
+        title={`Are you sure you want to remove the PKI subscriber: ${
+          (popUp?.deletePkiSubscriber?.data as { name: string })?.name || ""
+        }?`}
+        onChange={(isOpen) => handlePopUpToggle("deletePkiSubscriber", isOpen)}
+        deleteKey="confirm"
+        onDeleteApproved={() =>
+          onRemoveSubscriberSubmit(
+            (popUp?.deletePkiSubscriber?.data as { subscriberName: string })?.subscriberName
+          )
+        }
+      />
+    </div>
+  );
+};
+
+export const PkiSubscriberDetailsByIDPage = () => {
+  const { t } = useTranslation();
+  return (
+    <>
+      <Helmet>
+        <title>{t("common.head-title", { title: "PKI Subscriber" })}</title>
+      </Helmet>
+      <ProjectPermissionCan
+        I={ProjectPermissionPkiSubscriberActions.Read}
+        a={ProjectPermissionSub.PkiSubscribers}
+        passThrough={false}
+        renderGuardBanner
+      >
+        <Page />
+      </ProjectPermissionCan>
+    </>
+  );
+};

frontend/src/pages/cert-manager/PkiSubscriberDetailsByIDPage/components/PkiSubscriberCertificatesSection.tsx

@@ -0,0 +1,27 @@
+import { usePopUp } from "@app/hooks";
+import { CertificateRevocationModal } from "@app/pages/cert-manager/CertificatesPage/components/CertificateRevocationModal";
+
+import { PkiSubscriberCertificatesTable } from "./PkiSubscriberCertificatesTable";
+
+type Props = {
+  subscriberName: string;
+};
+
+export const PkiSubscriberCertificatesSection = ({ subscriberName }: Props) => {
+  const { popUp, handlePopUpOpen, handlePopUpToggle } = usePopUp(["revokeCertificate"] as const);
+
+  return (
+    <div className="h-full rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+      <div className="flex items-center justify-between border-b border-mineshaft-400 pb-4">
+        <h3 className="text-lg font-semibold text-mineshaft-100">Certificates</h3>
+      </div>
+      <div className="py-4">
+        <PkiSubscriberCertificatesTable
+          subscriberName={subscriberName}
+          handlePopUpOpen={handlePopUpOpen}
+        />
+      </div>
+      <CertificateRevocationModal popUp={popUp} handlePopUpToggle={handlePopUpToggle} />
+    </div>
+  );
+};

frontend/src/pages/cert-manager/PkiSubscriberDetailsByIDPage/components/PkiSubscriberCertificatesTable.tsx

@@ -0,0 +1,176 @@
+import { useState } from "react";
+import { subject } from "@casl/ability";
+import { faCertificate, faEllipsis, faTrash } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { format } from "date-fns";
+import { twMerge } from "tailwind-merge";
+
+import { ProjectPermissionCan } from "@app/components/permissions";
+import {
+  Badge,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+  EmptyState,
+  Pagination,
+  Table,
+  TableContainer,
+  TableSkeleton,
+  TBody,
+  Td,
+  Th,
+  THead,
+  Tooltip,
+  Tr
+} from "@app/components/v2";
+import {
+  ProjectPermissionPkiSubscriberActions,
+  ProjectPermissionSub,
+  useProjectPermission,
+  useWorkspace
+} from "@app/context";
+import { useGetPkiSubscriberCertificates } from "@app/hooks/api";
+import { CertStatus } from "@app/hooks/api/certificates/enums";
+import { UsePopUpState } from "@app/hooks/usePopUp";
+
+type Props = {
+  subscriberName: string;
+  handlePopUpOpen?: (popUpName: keyof UsePopUpState<["revokeCertificate"]>, data?: object) => void;
+};
+
+const PER_PAGE_INIT = 25;
+
+export const PkiSubscriberCertificatesTable = ({ subscriberName, handlePopUpOpen }: Props) => {
+  const { currentWorkspace } = useWorkspace();
+  const projectId = currentWorkspace.id;
+  const { permission } = useProjectPermission();
+  const [page, setPage] = useState(1);
+  const [perPage, setPerPage] = useState(PER_PAGE_INIT);
+
+  const { data, isPending } = useGetPkiSubscriberCertificates({
+    subscriberName,
+    projectId,
+    offset: (page - 1) * perPage,
+    limit: perPage
+  });
+
+  const getCertStatusBadge = (status: string, notAfter: string) => {
+    if (status === CertStatus.REVOKED) {
+      return <Badge variant="danger">Revoked</Badge>;
+    }
+
+    const expiryDate = new Date(notAfter);
+    const now = new Date();
+    const daysUntilExpiry = Math.floor(
+      (expiryDate.getTime() - now.getTime()) / (1000 * 60 * 60 * 24)
+    );
+
+    if (daysUntilExpiry < 0) {
+      return <Badge variant="danger">Expired</Badge>;
+    }
+
+    if (daysUntilExpiry < 30) {
+      return <Badge variant="primary">Expiring Soon</Badge>;
+    }
+
+    return <Badge variant="success">Valid</Badge>;
+  };
+
+  const canListPkiSubscriberCerts = permission.can(
+    ProjectPermissionPkiSubscriberActions.ListCerts,
+    subject(ProjectPermissionSub.PkiSubscribers, {
+      name: subscriberName
+    })
+  );
+
+  return (
+    <div>
+      <TableContainer>
+        <Table>
+          <THead>
+            <Tr>
+              <Th>Common Name</Th>
+              <Th>Status</Th>
+              <Th>Not Before</Th>
+              <Th>Not After</Th>
+              <Th />
+            </Tr>
+          </THead>
+          <TBody>
+            {isPending && <TableSkeleton columns={5} innerKey="pki-subscriber-certificates" />}
+            {!isPending &&
+              data?.certificates?.map((certificate) => {
+                return (
+                  <Tr className="h-10" key={`certificate-${certificate.id}`}>
+                    <Td>{certificate.commonName}</Td>
+                    <Td>{getCertStatusBadge(certificate.status, certificate.notAfter)}</Td>
+                    <Td>
+                      {certificate.notBefore
+                        ? format(new Date(certificate.notBefore), "yyyy-MM-dd")
+                        : "-"}
+                    </Td>
+                    <Td>
+                      {certificate.notAfter
+                        ? format(new Date(certificate.notAfter), "yyyy-MM-dd")
+                        : "-"}
+                    </Td>
+                    <Td className="flex justify-end">
+                      <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.Delete}
+                            a={ProjectPermissionSub.PkiSubscribers}
+                          >
+                            {(isAllowed) => (
+                              <DropdownMenuItem
+                                className={twMerge(
+                                  !isAllowed && "pointer-events-none cursor-not-allowed opacity-50"
+                                )}
+                                onClick={() =>
+                                  handlePopUpOpen &&
+                                  handlePopUpOpen("revokeCertificate", {
+                                    serialNumber: certificate.serialNumber
+                                  })
+                                }
+                                disabled={!isAllowed}
+                                icon={<FontAwesomeIcon icon={faTrash} />}
+                              >
+                                Revoke Certificate
+                              </DropdownMenuItem>
+                            )}
+                          </ProjectPermissionCan>
+                        </DropdownMenuContent>
+                      </DropdownMenu>
+                    </Td>
+                  </Tr>
+                );
+              })}
+          </TBody>
+        </Table>
+        {!isPending && data?.totalCount !== undefined && data.totalCount >= PER_PAGE_INIT && (
+          <Pagination
+            count={data.totalCount}
+            page={page}
+            perPage={perPage}
+            onChangePage={(newPage) => setPage(newPage)}
+            onChangePerPage={(newPerPage) => setPerPage(newPerPage)}
+          />
+        )}
+        {!isPending && !data?.certificates?.length && (
+          <EmptyState
+            title={`${canListPkiSubscriberCerts ? "No certificates have been issued for this subscriber" : "You do not have permission to view this subscriber's certificates"}`}
+            icon={faCertificate}
+          />
+        )}
+      </TableContainer>
+    </div>
+  );
+};

frontend/src/pages/cert-manager/PkiSubscriberDetailsByIDPage/components/PkiSubscriberDetailsSection.tsx

@@ -0,0 +1,190 @@
+import { useState } from "react";
+import { subject } from "@casl/ability";
+import { faCheck, faCopy, faPencil } 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, IconButton, Modal, ModalContent, Tooltip } from "@app/components/v2";
+import {
+  ProjectPermissionPkiSubscriberActions,
+  ProjectPermissionSub,
+  useProjectPermission,
+  useWorkspace
+} from "@app/context";
+import { useTimedReset } from "@app/hooks";
+import { useGetPkiSubscriber, useIssuePkiSubscriberCert } from "@app/hooks/api";
+import { pkiSubscriberStatusToNameMap } from "@app/hooks/api/pkiSubscriber/constants";
+import { UsePopUpState } from "@app/hooks/usePopUp";
+
+import { CertificateContent } from "../../CertificatesPage/components/CertificateContent";
+
+type Props = {
+  subscriberName: string;
+  handlePopUpOpen: (popUpName: keyof UsePopUpState<["pkiSubscriber"]>, data?: object) => void;
+};
+
+type TCertificateDetails = {
+  serialNumber: string;
+  certificate: string;
+  certificateChain: string;
+  privateKey: string;
+};
+
+export const PkiSubscriberDetailsSection = ({ subscriberName, handlePopUpOpen }: Props) => {
+  const { currentWorkspace } = useWorkspace();
+  const projectId = currentWorkspace.id;
+  const { permission } = useProjectPermission();
+  const [certificateDetails, setCertificateDetails] = useState<TCertificateDetails | null>(null);
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [copyTextId, isCopyingId, setCopyTextId] = useTimedReset<string>({
+    initialState: "Copy ID to clipboard"
+  });
+
+  const { data: pkiSubscriber } = useGetPkiSubscriber({
+    subscriberName,
+    projectId
+  });
+
+  const { mutateAsync: issuePkiSubscriberCert, isPending: isIssuingCert } =
+    useIssuePkiSubscriberCert();
+
+  const onIssuePkiSubscriberCert = async () => {
+    try {
+      const response = await issuePkiSubscriberCert({ subscriberName, projectId });
+
+      setCertificateDetails({
+        serialNumber: response.serialNumber,
+        certificate: response.certificate,
+        certificateChain: response.certificateChain,
+        privateKey: response.privateKey
+      });
+
+      setIsModalOpen(true);
+
+      createNotification({
+        text: "Successfully issued certificate",
+        type: "success"
+      });
+    } catch (err) {
+      console.error(err);
+      createNotification({
+        text: "Failed to issue certificate",
+        type: "error"
+      });
+    }
+  };
+
+  const canIssuePkiSubscriberCert = permission.can(
+    ProjectPermissionPkiSubscriberActions.IssueCert,
+    subject(ProjectPermissionSub.PkiSubscribers, {
+      name: pkiSubscriber?.name ?? ""
+    })
+  );
+
+  return pkiSubscriber ? (
+    <div className="rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+      <div className="flex items-center justify-between border-b border-mineshaft-400 pb-4">
+        <h3 className="text-lg font-semibold text-mineshaft-100">PKI Subscriber Details</h3>
+        <ProjectPermissionCan
+          I={ProjectPermissionPkiSubscriberActions.Edit}
+          a={ProjectPermissionSub.PkiSubscribers}
+        >
+          {(isAllowed) => {
+            return (
+              <Tooltip content="Edit PKI Subscriber">
+                <IconButton
+                  isDisabled={!isAllowed}
+                  ariaLabel="edit icon"
+                  variant="plain"
+                  className="group relative"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    handlePopUpOpen("pkiSubscriber", {
+                      subscriberName: pkiSubscriber.name
+                    });
+                  }}
+                >
+                  <FontAwesomeIcon icon={faPencil} />
+                </IconButton>
+              </Tooltip>
+            );
+          }}
+        </ProjectPermissionCan>
+      </div>
+      <div className="pt-4">
+        <div className="mb-4">
+          <p className="text-sm font-semibold text-mineshaft-300">PKI Subscriber ID</p>
+          <div className="group flex align-top">
+            <p className="text-sm text-mineshaft-300">{pkiSubscriber.id}</p>
+            <div className="opacity-0 transition-opacity duration-300 group-hover:opacity-100">
+              <Tooltip content={copyTextId}>
+                <IconButton
+                  ariaLabel="copy icon"
+                  variant="plain"
+                  className="group relative ml-2"
+                  onClick={() => {
+                    navigator.clipboard.writeText(pkiSubscriber.id);
+                    setCopyTextId("Copied");
+                  }}
+                >
+                  <FontAwesomeIcon icon={isCopyingId ? faCheck : faCopy} />
+                </IconButton>
+              </Tooltip>
+            </div>
+          </div>
+        </div>
+        <div className="mb-4">
+          <p className="text-sm font-semibold text-mineshaft-300">Name</p>
+          <p className="text-sm text-mineshaft-300">{pkiSubscriber.name}</p>
+        </div>
+        <div className="mb-4">
+          <p className="text-sm font-semibold text-mineshaft-300">Status</p>
+          <p className="text-sm text-mineshaft-300">
+            {pkiSubscriberStatusToNameMap[pkiSubscriber.status]}
+          </p>
+        </div>
+        <div className="mb-4">
+          <p className="text-sm font-semibold text-mineshaft-300">Common Name</p>
+          <p className="text-sm text-mineshaft-300">{pkiSubscriber.commonName}</p>
+        </div>
+        {canIssuePkiSubscriberCert && (
+          <Button
+            className="mt-4 w-full"
+            colorSchema="primary"
+            type="button"
+            isLoading={isIssuingCert}
+            onClick={() => {
+              onIssuePkiSubscriberCert();
+            }}
+          >
+            Issue Certificate
+          </Button>
+        )}
+      </div>
+
+      <Modal
+        isOpen={isModalOpen}
+        onOpenChange={(isOpen) => {
+          setIsModalOpen(isOpen);
+          if (!isOpen) {
+            setCertificateDetails(null);
+          }
+        }}
+      >
+        <ModalContent title="Certificate Details">
+          {certificateDetails && (
+            <CertificateContent
+              serialNumber={certificateDetails.serialNumber}
+              certificate={certificateDetails.certificate}
+              certificateChain={certificateDetails.certificateChain}
+              privateKey={certificateDetails.privateKey}
+            />
+          )}
+        </ModalContent>
+      </Modal>
+    </div>
+  ) : (
+    <div />
+  );
+};

frontend/src/pages/cert-manager/PkiSubscriberDetailsByIDPage/components/index.tsx

@@ -0,0 +1,2 @@
+export { PkiSubscriberCertificatesSection } from "./PkiSubscriberCertificatesSection";
+export { PkiSubscriberDetailsSection } from "./PkiSubscriberDetailsSection";

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

@@ -0,0 +1,25 @@
+import { createFileRoute, linkOptions } from "@tanstack/react-router";
+
+import { PkiSubscriberDetailsByIDPage } from "./PkiSubscriberDetailsByIDPage";
+
+export const Route = createFileRoute(
+  "/_authenticate/_inject-org-details/_org-layout/cert-manager/$projectId/_cert-manager-layout/subscribers/$subscriberName"
+)({
+  component: PkiSubscriberDetailsByIDPage,
+  beforeLoad: ({ context, params }) => {
+    return {
+      breadcrumbs: [
+        ...context.breadcrumbs,
+        {
+          label: "Subscribers",
+          link: linkOptions({
+            to: "/cert-manager/$projectId/subscribers",
+            params: {
+              projectId: params.projectId
+            }
+          })
+        }
+      ]
+    };
+  }
+});

frontend/src/pages/cert-manager/PkiSubscribersPage/PkiSubscribersPage.tsx

@@ -0,0 +1,28 @@
+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 text-white">
+          <div className="mx-auto mb-6 w-full max-w-7xl">
+            <PageHeader
+              title="Subscribers"
+              description="Manage subscribers that request and receive certificates, including user devices, servers, and services."
+            />
+            <PkiSubscriberSection />
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};

frontend/src/pages/cert-manager/PkiSubscribersPage/components/PkiSubscriberModal.tsx

@@ -0,0 +1,428 @@
+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,
+  useGetPkiSubscriber,
+  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 } = useGetPkiSubscriber({
+    subscriberName:
+      (popUp?.pkiSubscriber?.data as { subscriberName: string })?.subscriberName || "",
+    projectId
+  });
+
+  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;
+      }
+
+      // 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({
+          subscriberName: pkiSubscriber.name,
+          projectId,
+          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="Subscriber 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>
+  );
+};

frontend/src/pages/cert-manager/PkiSubscribersPage/components/PkiSubscriberSection.tsx

@@ -0,0 +1,151 @@
+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,
+  useWorkspace
+} from "@app/context";
+import { useDeletePkiSubscriber, useUpdatePkiSubscriber } from "@app/hooks/api";
+import { PkiSubscriberStatus } from "@app/hooks/api/pkiSubscriber/types";
+import { usePopUp } from "@app/hooks/usePopUp";
+
+import { PkiSubscriberModal } from "./PkiSubscriberModal";
+import { PkiSubscribersTable } from "./PkiSubscribersTable";
+
+export const PkiSubscriberSection = () => {
+  const { currentWorkspace } = useWorkspace();
+  const projectId = currentWorkspace.id;
+  const { mutateAsync: deletePkiSubscriber } = useDeletePkiSubscriber();
+  const { mutateAsync: updatePkiSubscriber } = useUpdatePkiSubscriber();
+
+  const { popUp, handlePopUpOpen, handlePopUpClose, handlePopUpToggle } = usePopUp([
+    "pkiSubscriber",
+    "pkiSubscriberStatus", // enable / disable
+    "deletePkiSubscriber"
+  ] as const);
+
+  const onRemovePkiSubscriberSubmit = async (subscriberName: string) => {
+    try {
+      const subscriber = await deletePkiSubscriber({ subscriberName, projectId });
+
+      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"
+      });
+    }
+  };
+
+  const onUpdatePkiSubscriberStatus = async ({
+    subscriberName,
+    status
+  }: {
+    subscriberName: string;
+    status: PkiSubscriberStatus;
+  }) => {
+    try {
+      if (!currentWorkspace?.slug) return;
+
+      await updatePkiSubscriber({ subscriberName, projectId, status });
+
+      createNotification({
+        text: `Successfully ${status === PkiSubscriberStatus.ACTIVE ? "enabled" : "disabled"} subscriber`,
+        type: "success"
+      });
+
+      handlePopUpClose("pkiSubscriberStatus");
+    } catch (err) {
+      console.error(err);
+      createNotification({
+        text: `Failed to ${status === PkiSubscriberStatus.ACTIVE ? "enable" : "disable"} subscriber`,
+        type: "error"
+      });
+    }
+  };
+
+  const subscriberStatusData = popUp?.pkiSubscriberStatus?.data as {
+    status: PkiSubscriberStatus;
+    subscriberName: string;
+  };
+
+  const isEnabling = subscriberStatusData?.status === PkiSubscriberStatus.ACTIVE;
+  const subscriberName = subscriberStatusData?.subscriberName || "";
+
+  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/subscribers"
+          >
+            <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.pkiSubscriberStatus.isOpen}
+        title={`Are you sure you want to ${isEnabling ? "enable" : "disable"} the subscriber ${subscriberName}?`}
+        subTitle={
+          isEnabling
+            ? "This action will allow issuing certificates for this subscriber again."
+            : "This action will prevent issuing certificates for this subscriber."
+        }
+        onChange={(isOpen) => handlePopUpToggle("pkiSubscriberStatus", isOpen)}
+        deleteKey="confirm"
+        buttonColorSchema={isEnabling ? "primary" : "danger"}
+        buttonText={isEnabling ? "Enable" : "Disable"}
+        onDeleteApproved={() => onUpdatePkiSubscriberStatus(subscriberStatusData)}
+      />
+      <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 { subscriberName: string })?.subscriberName
+          )
+        }
+      />
+    </div>
+  );
+};

frontend/src/pages/cert-manager/PkiSubscribersPage/components/PkiSubscribersTable.tsx

@@ -0,0 +1,188 @@
+import {
+  faBan,
+  faEllipsis,
+  faPencil,
+  faTrash,
+  faUserShield
+} from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { useNavigate } from "@tanstack/react-router";
+import { twMerge } from "tailwind-merge";
+
+import { ProjectPermissionCan } from "@app/components/permissions";
+import {
+  Badge,
+  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 {
+  getPkiSubscriberStatusBadgeVariant,
+  PkiSubscriberStatus,
+  pkiSubscriberStatusToNameMap
+} from "@app/hooks/api/pkiSubscriber/constants";
+import { ProjectType } from "@app/hooks/api/workspace/types";
+import { UsePopUpState } from "@app/hooks/usePopUp";
+
+type Props = {
+  handlePopUpOpen: (
+    popUpName: keyof UsePopUpState<["deletePkiSubscriber", "pkiSubscriber", "pkiSubscriberStatus"]>,
+    data?: object
+  ) => void;
+};
+
+export const PkiSubscribersTable = ({ handlePopUpOpen }: Props) => {
+  const navigate = useNavigate();
+  const { currentWorkspace } = useWorkspace();
+  const { data, isPending } = useListWorkspacePkiSubscribers(currentWorkspace?.id || "");
+  return (
+    <div>
+      <TableContainer>
+        <Table className="w-full table-fixed">
+          <THead>
+            <Tr>
+              <Th>Name</Th>
+              <Th>Status</Th>
+              <Th>Common Name</Th>
+              <Th />
+            </Tr>
+          </THead>
+          <TBody>
+            {isPending && <TableSkeleton columns={4} innerKey="pki-subscribers" />}
+            {!isPending &&
+              data &&
+              data.length > 0 &&
+              data.map((subscriber) => {
+                return (
+                  <Tr
+                    className="h-10 cursor-pointer transition-colors duration-100 hover:bg-mineshaft-700"
+                    key={`pki-subscriber-${subscriber.id}`}
+                    onClick={() =>
+                      navigate({
+                        to: `/${ProjectType.CertificateManager}/$projectId/subscribers/$subscriberName` as const,
+                        params: {
+                          projectId: currentWorkspace.id,
+                          subscriberName: subscriber.name
+                        }
+                      })
+                    }
+                  >
+                    <Td>{subscriber.name}</Td>
+                    <Td>
+                      <Badge variant={getPkiSubscriberStatusBadgeVariant(subscriber.status)}>
+                        {pkiSubscriberStatusToNameMap[subscriber.status]}
+                      </Badge>
+                    </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", {
+                                    subscriberName: subscriber.name
+                                  });
+                                }}
+                                disabled={!isAllowed}
+                                icon={<FontAwesomeIcon icon={faPencil} />}
+                              >
+                                Edit Subscriber
+                              </DropdownMenuItem>
+                            )}
+                          </ProjectPermissionCan>
+                          <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("pkiSubscriberStatus", {
+                                    subscriberName: subscriber.name,
+                                    status:
+                                      subscriber.status === PkiSubscriberStatus.ACTIVE
+                                        ? PkiSubscriberStatus.DISABLED
+                                        : PkiSubscriberStatus.ACTIVE
+                                  });
+                                }}
+                                disabled={!isAllowed}
+                                icon={<FontAwesomeIcon icon={faBan} />}
+                              >
+                                {`${subscriber.status === PkiSubscriberStatus.ACTIVE ? "Disable" : "Enable"} 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", {
+                                    subscriberName: subscriber.name
+                                  });
+                                }}
+                                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={faUserShield} />
+        )}
+      </TableContainer>
+    </div>
+  );
+};

frontend/src/pages/cert-manager/PkiSubscribersPage/components/index.tsx

@@ -0,0 +1 @@
+export { PkiSubscriberSection } from "./PkiSubscriberSection";

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

@@ -0,0 +1,9 @@
+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
+});

frontend/src/pages/cert-manager/layout.tsx

@@ -31,7 +31,7 @@ export const Route = createFileRoute(
         {
           label: project.name,
           link: linkOptions({
-            to: "/cert-manager/$projectId/overview",
+            to: "/cert-manager/$projectId/subscribers",
             params: { projectId: project.id }
           })
         }

frontend/src/pages/organization/AccessManagementPage/components/OrgIdentityTab/components/IdentitySection/IdentityAuthMethodModalContent.tsx

@@ -13,6 +13,7 @@ import { IdentityAzureAuthForm } from "./IdentityAzureAuthForm";
 import { IdentityGcpAuthForm } from "./IdentityGcpAuthForm";
 import { IdentityJwtAuthForm } from "./IdentityJwtAuthForm";
 import { IdentityKubernetesAuthForm } from "./IdentityKubernetesAuthForm";
+import { IdentityLdapAuthForm } from "./IdentityLdapAuthForm";
 import { IdentityOidcAuthForm } from "./IdentityOidcAuthForm";
 import { IdentityTokenAuthForm } from "./IdentityTokenAuthForm";
 import { IdentityUniversalAuthForm } from "./IdentityUniversalAuthForm";
@@ -46,6 +47,7 @@ const identityAuthMethods = [
   { label: "AWS Auth", value: IdentityAuthMethod.AWS_AUTH },
   { label: "Azure Auth", value: IdentityAuthMethod.AZURE_AUTH },
   { label: "OIDC Auth", value: IdentityAuthMethod.OIDC_AUTH },
+  { label: "LDAP Auth", value: IdentityAuthMethod.LDAP_AUTH },
   {
     label: "JWT Auth",
     value: IdentityAuthMethod.JWT_AUTH
@@ -186,6 +188,16 @@ export const IdentityAuthMethodModalContent = ({
           handlePopUpToggle={handlePopUpToggle}
         />
       )
+    },
+
+    [IdentityAuthMethod.LDAP_AUTH]: {
+      render: () => (
+        <IdentityLdapAuthForm
+          identityId={identityAuthMethodData.identityId}
+          handlePopUpOpen={handlePopUpOpen}
+          handlePopUpToggle={handlePopUpToggle}
+        />
+      )
     }
   };
 

frontend/src/pages/organization/AccessManagementPage/components/OrgIdentityTab/components/IdentitySection/IdentityLdapAuthForm.tsx

@@ -0,0 +1,608 @@
+import { useEffect, useState } from "react";
+import { Controller, useFieldArray, useForm } from "react-hook-form";
+import { faPlus, faQuestionCircle, faXmark } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+
+import { createNotification } from "@app/components/notifications";
+import {
+  Button,
+  FormControl,
+  IconButton,
+  Input,
+  Tab,
+  TabList,
+  TabPanel,
+  Tabs,
+  TextArea,
+  Tooltip
+} from "@app/components/v2";
+import { useOrganization, useSubscription } from "@app/context";
+import {
+  useAddIdentityLdapAuth,
+  useGetIdentityLdapAuth,
+  useUpdateIdentityLdapAuth
+} from "@app/hooks/api";
+import { IdentityTrustedIp } from "@app/hooks/api/identities/types";
+import { UsePopUpState } from "@app/hooks/usePopUp";
+
+import { IdentityFormTab } from "./types";
+
+const schema = z
+  .object({
+    url: z.string().min(1),
+    bindDN: z.string(),
+    bindPass: z.string(),
+    searchBase: z.string(),
+    searchFilter: z.string(), // defaults to (uid={{username}})
+    ldapCaCertificate: z
+      .string()
+      .optional()
+      .transform((val) => val || undefined),
+    allowedFields: z
+      .object({
+        key: z.string().trim(),
+        value: z
+          .string()
+          .trim()
+          .transform((val) => val.replace(/\s/g, ""))
+      })
+      .array()
+      .optional(),
+
+    accessTokenTTL: z.string().refine((val) => Number(val) <= 315360000, {
+      message: "Access Token TTL cannot be greater than 315360000"
+    }),
+    accessTokenMaxTTL: z.string().refine((val) => Number(val) <= 315360000, {
+      message: "Access Token Max TTL cannot be greater than 315360000"
+    }),
+    accessTokenNumUsesLimit: z.string(),
+    accessTokenTrustedIps: z
+      .array(
+        z.object({
+          ipAddress: z.string().max(50)
+        })
+      )
+      .min(1)
+  })
+  .required();
+
+export type FormData = z.infer<typeof schema>;
+
+type Props = {
+  handlePopUpOpen: (popUpName: keyof UsePopUpState<["upgradePlan"]>) => void;
+  handlePopUpToggle: (
+    popUpName: keyof UsePopUpState<["identityAuthMethod"]>,
+    state?: boolean
+  ) => void;
+  identityId?: string;
+  isUpdate?: boolean;
+};
+
+export const IdentityLdapAuthForm = ({
+  handlePopUpOpen,
+  handlePopUpToggle,
+  identityId,
+  isUpdate
+}: Props) => {
+  const { currentOrg } = useOrganization();
+  const orgId = currentOrg?.id || "";
+  const { subscription } = useSubscription();
+
+  const { mutateAsync: addMutateAsync } = useAddIdentityLdapAuth();
+  const { mutateAsync: updateMutateAsync } = useUpdateIdentityLdapAuth();
+  const [tabValue, setTabValue] = useState<IdentityFormTab>(IdentityFormTab.Configuration);
+
+  const { data } = useGetIdentityLdapAuth(identityId ?? "", {
+    enabled: isUpdate
+  });
+
+  const {
+    control,
+    handleSubmit,
+    reset,
+
+    formState: { isSubmitting }
+  } = useForm<FormData>({
+    resolver: zodResolver(schema),
+    defaultValues: {
+      url: "",
+      bindDN: "",
+      bindPass: "",
+      searchBase: "",
+      searchFilter: "(uid={{username}})",
+      accessTokenTTL: "2592000",
+      accessTokenMaxTTL: "2592000",
+      accessTokenNumUsesLimit: "0",
+      accessTokenTrustedIps: [{ ipAddress: "0.0.0.0/0" }, { ipAddress: "::/0" }]
+    }
+  });
+
+  const {
+    fields: accessTokenTrustedIpsFields,
+    append: appendAccessTokenTrustedIp,
+    remove: removeAccessTokenTrustedIp
+  } = useFieldArray({ control, name: "accessTokenTrustedIps" });
+
+  const {
+    fields: allowedFieldsFields,
+    append: appendAllowedField,
+    remove: removeAllowedField
+  } = useFieldArray({ control, name: "allowedFields" });
+
+  useEffect(() => {
+    if (data) {
+      reset({
+        url: data.url,
+        bindDN: data.bindDN,
+        bindPass: data.bindPass,
+        searchBase: data.searchBase,
+        searchFilter: data.searchFilter,
+        ldapCaCertificate: data.ldapCaCertificate || undefined,
+        allowedFields: data.allowedFields,
+        accessTokenTTL: String(data.accessTokenTTL),
+        accessTokenMaxTTL: String(data.accessTokenMaxTTL),
+        accessTokenNumUsesLimit: String(data.accessTokenNumUsesLimit),
+        accessTokenTrustedIps: data.accessTokenTrustedIps.map(
+          ({ ipAddress, prefix }: IdentityTrustedIp) => {
+            return {
+              ipAddress: `${ipAddress}${prefix !== undefined ? `/${prefix}` : ""}`
+            };
+          }
+        )
+      });
+    } else {
+      reset({
+        url: "",
+        bindDN: "",
+        bindPass: "",
+        searchBase: "",
+        searchFilter: "(uid={{username}})",
+        ldapCaCertificate: undefined,
+        allowedFields: [],
+        accessTokenTTL: "2592000",
+        accessTokenMaxTTL: "2592000",
+        accessTokenNumUsesLimit: "0",
+        accessTokenTrustedIps: [{ ipAddress: "0.0.0.0/0" }, { ipAddress: "::/0" }]
+      });
+    }
+  }, [data]);
+
+  useEffect(() => {
+    if (!subscription?.ldap) {
+      handlePopUpOpen("upgradePlan");
+      handlePopUpToggle("identityAuthMethod", false);
+    }
+  }, [subscription]);
+
+  const onFormSubmit = async ({
+    url,
+    bindDN,
+    bindPass,
+    searchBase,
+    searchFilter,
+    ldapCaCertificate,
+    allowedFields,
+    accessTokenTTL,
+    accessTokenMaxTTL,
+    accessTokenNumUsesLimit,
+    accessTokenTrustedIps
+  }: FormData) => {
+    try {
+      if (!identityId) return;
+
+      if (data) {
+        await updateMutateAsync({
+          organizationId: orgId,
+          identityId,
+          url,
+          bindDN,
+          bindPass,
+          searchBase,
+          searchFilter,
+          ldapCaCertificate,
+          allowedFields,
+          accessTokenTTL: Number(accessTokenTTL),
+          accessTokenMaxTTL: Number(accessTokenMaxTTL),
+          accessTokenNumUsesLimit: Number(accessTokenNumUsesLimit),
+          accessTokenTrustedIps
+        });
+      } else {
+        await addMutateAsync({
+          organizationId: orgId,
+          identityId,
+          url,
+          bindDN,
+          bindPass,
+          searchBase,
+          searchFilter,
+          ldapCaCertificate,
+          allowedFields,
+          accessTokenTTL: Number(accessTokenTTL),
+          accessTokenMaxTTL: Number(accessTokenMaxTTL),
+          accessTokenNumUsesLimit: Number(accessTokenNumUsesLimit),
+          accessTokenTrustedIps
+        });
+      }
+
+      handlePopUpToggle("identityAuthMethod", false);
+
+      createNotification({
+        text: `Successfully ${isUpdate ? "updated" : "configured"} auth method`,
+        type: "success"
+      });
+
+      reset();
+    } catch {
+      createNotification({
+        text: `Failed to ${isUpdate ? "update" : "configure"} identity`,
+        type: "error"
+      });
+    }
+  };
+
+  return (
+    <form
+      onSubmit={handleSubmit(onFormSubmit, (fields) => {
+        setTabValue(
+          [
+            "url",
+            "bindDN",
+            "bindPass",
+            "searchBase",
+            "searchFilter",
+            "accessTokenTTL",
+            "allowedFields",
+            "accessTokenMaxTTL",
+            "accessTokenNumUsesLimit"
+          ].includes(Object.keys(fields)[0])
+            ? IdentityFormTab.Configuration
+            : IdentityFormTab.Advanced
+        );
+      })}
+    >
+      <Tabs value={tabValue} onValueChange={(value) => setTabValue(value as IdentityFormTab)}>
+        <TabList>
+          <Tab value={IdentityFormTab.Configuration}>Configuration</Tab>
+          <Tab value={IdentityFormTab.Advanced}>Advanced</Tab>
+        </TabList>
+        <TabPanel value={IdentityFormTab.Configuration}>
+          <Controller
+            control={control}
+            defaultValue="2592000"
+            name="url"
+            render={({ field, fieldState: { error } }) => (
+              <FormControl
+                label="LDAP URL"
+                isError={Boolean(error)}
+                errorText={error?.message}
+                isRequired
+              >
+                <Input {...field} placeholder="ldaps://domain-or-ip:636" type="text" />
+              </FormControl>
+            )}
+          />
+          <Controller
+            control={control}
+            name="bindDN"
+            render={({ field, fieldState: { error } }) => (
+              <FormControl
+                isRequired
+                label="Bind DN"
+                isError={Boolean(error)}
+                errorText={error?.message}
+              >
+                <Input {...field} placeholder="cn=infisical,ou=Users,dc=example,dc=com" />
+              </FormControl>
+            )}
+          />
+          <Controller
+            control={control}
+            defaultValue=""
+            name="bindPass"
+            render={({ field, fieldState: { error } }) => (
+              <FormControl
+                isRequired
+                label="Bind Pass"
+                isError={Boolean(error)}
+                errorText={error?.message}
+              >
+                <Input {...field} placeholder="********" type="password" />
+              </FormControl>
+            )}
+          />
+          <Controller
+            control={control}
+            name="searchBase"
+            render={({ field, fieldState: { error } }) => (
+              <FormControl
+                isRequired
+                label="Search Base / DN"
+                isError={Boolean(error)}
+                errorText={error?.message}
+              >
+                <Input {...field} placeholder="ou=machines,dc=acme,dc=com" />
+              </FormControl>
+            )}
+          />
+
+          <Controller
+            control={control}
+            name="searchFilter"
+            render={({ field, fieldState: { error } }) => (
+              <FormControl
+                isRequired
+                label="Search Filter"
+                isError={Boolean(error)}
+                errorText={error?.message}
+              >
+                <Input {...field} placeholder="(uid={{username}})" />
+              </FormControl>
+            )}
+          />
+
+          {allowedFieldsFields.map(({ id }, index) => (
+            <div className="mb-3 flex items-end space-x-2" key={id}>
+              <Controller
+                control={control}
+                name={`allowedFields.${index}.key`}
+                render={({ field, fieldState: { error } }) => {
+                  const isFirstField = index === 0;
+
+                  return (
+                    <FormControl
+                      className="mb-0 flex-grow"
+                      label={isFirstField ? "Required Attributes" : undefined}
+                      icon={
+                        isFirstField ? (
+                          <Tooltip
+                            className="max-w-[420px]"
+                            content={
+                              <div className="max-h-[300px] space-y-4 overflow-y-auto text-sm">
+                                <p>
+                                  Specify the fields that the user must contain in their LDAP entry
+                                  in order to authenticate with this identity. If nothing is
+                                  specified, all users in the configured LDAP directory will be able
+                                  to authenticate.
+                                  <p className="mt-2">
+                                    You can specify multiple required attributes by separating them
+                                    with a comma.
+                                  </p>
+                                </p>
+                                <div className="space-y-2">
+                                  <p>Example:</p>
+                                  <p className="text-xs text-gray-400">
+                                    &apos;uid&apos; → &apos;user1,user2,user3&apos;
+                                    <br />
+                                    &apos;mail&apos; → &apos;user@example.com&apos;
+                                  </p>
+                                </div>
+
+                                <p>
+                                  The above example would allow users with the UID user1, user2, or
+                                  user3 to authenticate but only if their emails also match
+                                  user@example.com
+                                </p>
+                              </div>
+                            }
+                          >
+                            <FontAwesomeIcon icon={faQuestionCircle} size="sm" />
+                          </Tooltip>
+                        ) : undefined
+                      }
+                      isError={Boolean(error)}
+                      errorText={error?.message}
+                    >
+                      <Input
+                        value={field.value}
+                        onChange={(e) => field.onChange(e)}
+                        placeholder="uid"
+                      />
+                    </FormControl>
+                  );
+                }}
+              />
+              <Controller
+                control={control}
+                name={`allowedFields.${index}.value`}
+                render={({ field, fieldState: { error } }) => {
+                  return (
+                    <FormControl
+                      className="mb-0 flex-grow"
+                      isError={Boolean(error)}
+                      errorText={error?.message}
+                    >
+                      <Input
+                        value={field.value}
+                        onChange={(e) => field.onChange(e)}
+                        placeholder="userid1,userid2,userid3"
+                      />
+                    </FormControl>
+                  );
+                }}
+              />
+              <IconButton
+                onClick={() => removeAllowedField(index)}
+                size="lg"
+                colorSchema="danger"
+                variant="plain"
+                ariaLabel="update"
+                className="p-3"
+              >
+                <FontAwesomeIcon icon={faXmark} />
+              </IconButton>
+            </div>
+          ))}
+          <div className="my-4 ml-1">
+            <Button
+              variant="outline_bg"
+              onClick={() =>
+                appendAllowedField({
+                  key: "",
+                  value: ""
+                })
+              }
+              leftIcon={<FontAwesomeIcon icon={faPlus} />}
+              size="xs"
+            >
+              Add Required Attribute
+            </Button>
+          </div>
+
+          <Controller
+            control={control}
+            defaultValue="2592000"
+            name="accessTokenTTL"
+            render={({ field, fieldState: { error } }) => (
+              <FormControl
+                label="Access Token TTL (seconds)"
+                tooltipText="The lifetime for an acccess token in seconds. This value will be referenced at renewal time."
+                isError={Boolean(error)}
+                errorText={error?.message}
+              >
+                <Input {...field} placeholder="2592000" type="number" min="0" step="1" />
+              </FormControl>
+            )}
+          />
+          <Controller
+            control={control}
+            defaultValue="2592000"
+            name="accessTokenMaxTTL"
+            render={({ field, fieldState: { error } }) => (
+              <FormControl
+                label="Access Token Max TTL (seconds)"
+                isError={Boolean(error)}
+                errorText={error?.message}
+                tooltipText="The maximum lifetime for an access token in seconds. This value will be referenced at renewal time."
+              >
+                <Input {...field} placeholder="2592000" type="number" min="0" step="1" />
+              </FormControl>
+            )}
+          />
+          <Controller
+            control={control}
+            defaultValue="0"
+            name="accessTokenNumUsesLimit"
+            render={({ field, fieldState: { error } }) => (
+              <FormControl
+                label="Access Token Max Number of Uses"
+                isError={Boolean(error)}
+                errorText={error?.message}
+                tooltipText="The maximum number of times that an access token can be used; a value of 0 implies infinite number of uses."
+              >
+                <Input {...field} placeholder="0" type="number" min="0" step="1" />
+              </FormControl>
+            )}
+          />
+        </TabPanel>
+        <TabPanel value={IdentityFormTab.Advanced}>
+          <Controller
+            control={control}
+            name="ldapCaCertificate"
+            render={({ field, fieldState: { error } }) => (
+              <FormControl
+                label="CA Certificate"
+                isOptional
+                errorText={error?.message}
+                isError={Boolean(error)}
+                tooltipText="An optional PEM-encoded CA cert for the LDAP server. This is used by the TLS client for secure communication with the LDAP server."
+              >
+                <TextArea {...field} placeholder="-----BEGIN CERTIFICATE----- ..." />
+              </FormControl>
+            )}
+          />
+
+          {accessTokenTrustedIpsFields.map(({ id }, index) => (
+            <div className="mb-3 flex items-end space-x-2" key={id}>
+              <Controller
+                control={control}
+                name={`accessTokenTrustedIps.${index}.ipAddress`}
+                defaultValue="0.0.0.0/0"
+                render={({ field, fieldState: { error } }) => {
+                  return (
+                    <FormControl
+                      className="mb-0 flex-grow"
+                      label={index === 0 ? "Access Token Trusted IPs" : undefined}
+                      isError={Boolean(error)}
+                      errorText={error?.message}
+                      tooltipText="The IPs or CIDR ranges that access tokens can be used from. By default, each token is given the 0.0.0.0/0, allowing usage from any network address."
+                    >
+                      <Input
+                        value={field.value}
+                        onChange={(e) => {
+                          if (subscription?.ipAllowlisting) {
+                            field.onChange(e);
+                            return;
+                          }
+
+                          handlePopUpOpen("upgradePlan");
+                        }}
+                        placeholder="123.456.789.0"
+                      />
+                    </FormControl>
+                  );
+                }}
+              />
+              <IconButton
+                onClick={() => {
+                  if (subscription?.ipAllowlisting) {
+                    removeAccessTokenTrustedIp(index);
+                    return;
+                  }
+
+                  handlePopUpOpen("upgradePlan");
+                }}
+                size="lg"
+                colorSchema="danger"
+                variant="plain"
+                ariaLabel="update"
+                className="p-3"
+              >
+                <FontAwesomeIcon icon={faXmark} />
+              </IconButton>
+            </div>
+          ))}
+          <div className="my-4 ml-1">
+            <Button
+              variant="outline_bg"
+              onClick={() => {
+                if (subscription?.ipAllowlisting) {
+                  appendAccessTokenTrustedIp({
+                    ipAddress: "0.0.0.0/0"
+                  });
+                  return;
+                }
+
+                handlePopUpOpen("upgradePlan");
+              }}
+              leftIcon={<FontAwesomeIcon icon={faPlus} />}
+              size="xs"
+            >
+              Add IP Address
+            </Button>
+          </div>
+        </TabPanel>
+      </Tabs>
+      <div className="flex items-center">
+        <Button
+          className="mr-4"
+          size="sm"
+          type="submit"
+          isLoading={isSubmitting}
+          isDisabled={isSubmitting}
+        >
+          {isUpdate ? "Update" : "Add"}
+        </Button>
+
+        <Button
+          colorSchema="secondary"
+          variant="plain"
+          onClick={() => handlePopUpToggle("identityAuthMethod", false)}
+        >
+          Cancel
+        </Button>
+      </div>
+    </form>
+  );
+};

frontend/src/pages/organization/AccessManagementPage/route.tsx

@@ -30,7 +30,7 @@ export const Route = createFileRoute(
         link: linkOptions({ to: "/" })
       },
       {
-        label: "access control"
+        label: "Access Control"
       }
     ]
   })

frontend/src/pages/organization/AdminPage/components/OrgAdminProjects/OrgAdminProjects.tsx

@@ -58,6 +58,15 @@ export const OrgAdminProjects = withPermission(
         await orgAdminAccessProject.mutateAsync({
           projectId
         });
+        if (type === ProjectType.CertificateManager) {
+          await navigate({
+            to: "/cert-manager/$projectId/subscribers" as const,
+            params: {
+              projectId
+            }
+          });
+          return;
+        }
         await navigate({
           to: `/${type}/$projectId/overview` as const,
           params: {

frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/AppConnectionForm.tsx

@@ -22,6 +22,7 @@ import { HCVaultConnectionForm } from "./HCVaultConnectionForm";
 import { HumanitecConnectionForm } from "./HumanitecConnectionForm";
 import { LdapConnectionForm } from "./LdapConnectionForm";
 import { MsSqlConnectionForm } from "./MsSqlConnectionForm";
+import { OCIConnectionForm } from "./OCIConnectionForm";
 import { PostgresConnectionForm } from "./PostgresConnectionForm";
 import { TeamCityConnectionForm } from "./TeamCityConnectionForm";
 import { TerraformCloudConnectionForm } from "./TerraformCloudConnectionForm";
@@ -101,6 +102,8 @@ const CreateForm = ({ app, onComplete }: CreateFormProps) => {
       return <LdapConnectionForm onSubmit={onSubmit} />;
     case AppConnection.TeamCity:
       return <TeamCityConnectionForm onSubmit={onSubmit} />;
+    case AppConnection.OCI:
+      return <OCIConnectionForm onSubmit={onSubmit} />;
     default:
       throw new Error(`Unhandled App ${app}`);
   }
@@ -173,6 +176,8 @@ const UpdateForm = ({ appConnection, onComplete }: UpdateFormProps) => {
       return <LdapConnectionForm onSubmit={onSubmit} appConnection={appConnection} />;
     case AppConnection.TeamCity:
       return <TeamCityConnectionForm onSubmit={onSubmit} appConnection={appConnection} />;
+    case AppConnection.OCI:
+      return <OCIConnectionForm onSubmit={onSubmit} appConnection={appConnection} />;
 
     default:
       throw new Error(`Unhandled App ${(appConnection as TAppConnection).app}`);

frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/OCIConnectionForm.tsx

@@ -0,0 +1,215 @@
+import { Controller, FormProvider, useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+
+import {
+  Button,
+  FormControl,
+  Input,
+  ModalClose,
+  SecretInput,
+  Select,
+  SelectItem
+} from "@app/components/v2";
+import { APP_CONNECTION_MAP, getAppConnectionMethodDetails } from "@app/helpers/appConnections";
+import { OCIConnectionMethod, TOCIConnection } from "@app/hooks/api/appConnections";
+import { AppConnection } from "@app/hooks/api/appConnections/enums";
+
+import {
+  genericAppConnectionFieldsSchema,
+  GenericAppConnectionsFields
+} from "./GenericAppConnectionFields";
+
+type Props = {
+  appConnection?: TOCIConnection;
+  onSubmit: (formData: FormData) => void;
+};
+
+const rootSchema = genericAppConnectionFieldsSchema.extend({
+  app: z.literal(AppConnection.OCI)
+});
+
+const formSchema = z.discriminatedUnion("method", [
+  rootSchema.extend({
+    method: z.literal(OCIConnectionMethod.AccessKey),
+    credentials: z.object({
+      userOcid: z
+        .string()
+        .trim()
+        .min(1, "User OCID required")
+        .regex(/^ocid1\.user\.oc1\.\..+$/, "Invalid User OCID format"),
+      tenancyOcid: z
+        .string()
+        .trim()
+        .min(1, "Tenancy OCID required")
+        .regex(/^ocid1\.tenancy\.oc1\.\..+$/, "Invalid Tenancy OCID format"),
+      region: z.string().trim().min(1, "Region required"),
+      fingerprint: z.string().trim().min(1, "Fingerprint required"),
+      privateKey: z.string().trim().min(1, "Private Key required")
+    })
+  })
+]);
+
+type FormData = z.infer<typeof formSchema>;
+
+export const OCIConnectionForm = ({ appConnection, onSubmit }: Props) => {
+  const isUpdate = Boolean(appConnection);
+
+  const form = useForm<FormData>({
+    resolver: zodResolver(formSchema),
+    defaultValues: appConnection ?? {
+      app: AppConnection.OCI,
+      method: OCIConnectionMethod.AccessKey
+    }
+  });
+
+  const {
+    handleSubmit,
+    control,
+    formState: { isSubmitting, isDirty }
+  } = form;
+
+  return (
+    <FormProvider {...form}>
+      <form onSubmit={handleSubmit(onSubmit)}>
+        {!isUpdate && <GenericAppConnectionsFields />}
+        <Controller
+          name="method"
+          control={control}
+          render={({ field: { value, onChange }, fieldState: { error } }) => (
+            <FormControl
+              tooltipText={`The method you would like to use to connect with ${
+                APP_CONNECTION_MAP[AppConnection.OCI].name
+              }. This field cannot be changed after creation.`}
+              errorText={error?.message}
+              isError={Boolean(error?.message)}
+              label="Method"
+            >
+              <Select
+                isDisabled={isUpdate}
+                value={value}
+                onValueChange={(val) => onChange(val)}
+                className="w-full border border-mineshaft-500"
+                position="popper"
+                dropdownContainerClassName="max-w-none"
+              >
+                {Object.values(OCIConnectionMethod).map((method) => {
+                  return (
+                    <SelectItem value={method} key={method}>
+                      {getAppConnectionMethodDetails(method).name}{" "}
+                    </SelectItem>
+                  );
+                })}
+              </Select>
+            </FormControl>
+          )}
+        />
+        <Controller
+          name="credentials.userOcid"
+          control={control}
+          shouldUnregister
+          render={({ field, fieldState: { error } }) => (
+            <FormControl
+              errorText={error?.message}
+              isError={Boolean(error?.message)}
+              label="User OCID"
+              tooltipClassName="max-w-sm"
+              tooltipText="The unique identifier (OCID) associated with your OCI user account. You can find this in your OCI console under Identity > Domains > [domain] > Users > [user]."
+            >
+              <Input
+                {...field}
+                placeholder="ocid1.user.oc1..************************************************************"
+              />
+            </FormControl>
+          )}
+        />
+        <Controller
+          name="credentials.tenancyOcid"
+          control={control}
+          shouldUnregister
+          render={({ field, fieldState: { error } }) => (
+            <FormControl
+              errorText={error?.message}
+              isError={Boolean(error?.message)}
+              label="Tenancy OCID"
+              tooltipClassName="max-w-sm"
+              tooltipText="The unique identifier (OCID) for your tenancy in Oracle Cloud. You can find this in your OCI console under Administration > Tenancy Details."
+            >
+              <Input
+                {...field}
+                placeholder="ocid1.tenancy.oc1..************************************************************"
+              />
+            </FormControl>
+          )}
+        />
+        <Controller
+          name="credentials.region"
+          control={control}
+          shouldUnregister
+          render={({ field, fieldState: { error } }) => (
+            <FormControl
+              errorText={error?.message}
+              isError={Boolean(error?.message)}
+              label="Region"
+              tooltipClassName="max-w-sm"
+              tooltipText="The OCI region where your resources are located (e.g., us-ashburn-1, eu-frankfurt-1)."
+            >
+              <Input {...field} placeholder="us-ashburn-1" />
+            </FormControl>
+          )}
+        />
+        <Controller
+          name="credentials.fingerprint"
+          control={control}
+          shouldUnregister
+          render={({ field, fieldState: { error } }) => (
+            <FormControl
+              errorText={error?.message}
+              isError={Boolean(error?.message)}
+              label="Fingerprint"
+              tooltipClassName="max-w-sm"
+              tooltipText="The fingerprint of the public key associated with your OCI API key. This is generated when you create an API key in your OCI user settings."
+            >
+              <Input {...field} placeholder="00:00:00:00:00:00:00:00:00:00:00:00:00:00:00:00" />
+            </FormControl>
+          )}
+        />
+        <Controller
+          name="credentials.privateKey"
+          control={control}
+          shouldUnregister
+          render={({ field: { value, onChange }, fieldState: { error } }) => (
+            <FormControl
+              errorText={error?.message}
+              isError={Boolean(error?.message)}
+              label="Private Key PEM"
+            >
+              <SecretInput
+                containerClassName="text-gray-400 group-focus-within:!border-primary-400/50 border border-mineshaft-500 bg-mineshaft-900 px-2.5 py-1.5"
+                value={value}
+                onChange={(e) => onChange(e.target.value)}
+              />
+            </FormControl>
+          )}
+        />
+        <div className="mt-8 flex items-center">
+          <Button
+            className="mr-4"
+            size="sm"
+            type="submit"
+            colorSchema="secondary"
+            isLoading={isSubmitting}
+            isDisabled={isSubmitting || !isDirty}
+          >
+            {isUpdate ? "Update Credentials" : "Connect to OCI"}
+          </Button>
+          <ModalClose asChild>
+            <Button colorSchema="secondary" variant="plain">
+              Cancel
+            </Button>
+          </ModalClose>
+        </div>
+      </form>
+    </FormProvider>
+  );
+};

frontend/src/pages/organization/AuditLogsPage/components/LogsFilter.tsx

@@ -38,7 +38,7 @@ import { useGetUserWorkspaces } from "@app/hooks/api";
 import {
   eventToNameMap,
   secretEvents,
-  userAgentTTypeoNameMap
+  userAgentTypeToNameMap
 } from "@app/hooks/api/auditLogs/constants";
 import { EventType } from "@app/hooks/api/auditLogs/enums";
 import { UserAgentType } from "@app/hooks/api/auth/types";
@@ -47,7 +47,7 @@ import { LogFilterItem } from "./LogFilterItem";
 import { AuditLogFilterFormData, Presets } from "./types";
 
 const eventTypes = Object.entries(eventToNameMap).map(([value, label]) => ({ label, value }));
-const userAgentTypes = Object.entries(userAgentTTypeoNameMap).map(([value, label]) => ({
+const userAgentTypes = Object.entries(userAgentTypeToNameMap).map(([value, label]) => ({
   label,
   value
 }));

frontend/src/pages/organization/IdentityDetailsByIDPage/components/ViewIdentityAuthModal/ViewIdentityAuthModal.tsx

@@ -11,6 +11,7 @@ import {
   useDeleteIdentityGcpAuth,
   useDeleteIdentityJwtAuth,
   useDeleteIdentityKubernetesAuth,
+  useDeleteIdentityLdapAuth,
   useDeleteIdentityOidcAuth,
   useDeleteIdentityTokenAuth,
   useDeleteIdentityUniversalAuth
@@ -22,6 +23,7 @@ import { ViewIdentityAzureAuthContent } from "./ViewIdentityAzureAuthContent";
 import { ViewIdentityGcpAuthContent } from "./ViewIdentityGcpAuthContent";
 import { ViewIdentityJwtAuthContent } from "./ViewIdentityJwtAuthContent";
 import { ViewIdentityKubernetesAuthContent } from "./ViewIdentityKubernetesAuthContent";
+import { ViewIdentityLdapAuthContent } from "./ViewIdentityLdapAuthContent";
 import { ViewIdentityOidcAuthContent } from "./ViewIdentityOidcAuthContent";
 import { ViewIdentityTokenAuthContent } from "./ViewIdentityTokenAuthContent";
 import { ViewIdentityUniversalAuthContent } from "./ViewIdentityUniversalAuthContent";
@@ -61,6 +63,7 @@ export const Content = ({
   const { mutateAsync: revokeAzureAuth } = useDeleteIdentityAzureAuth();
   const { mutateAsync: revokeOidcAuth } = useDeleteIdentityOidcAuth();
   const { mutateAsync: revokeJwtAuth } = useDeleteIdentityJwtAuth();
+  const { mutateAsync: revokeLdapAuth } = useDeleteIdentityLdapAuth();
 
   let Component: (props: ViewAuthMethodProps) => JSX.Element;
   let revokeMethod: (revokeOptions: TRevokeOptions) => Promise<any>;
@@ -100,6 +103,10 @@ export const Content = ({
       revokeMethod = revokeJwtAuth;
       Component = ViewIdentityJwtAuthContent;
       break;
+    case IdentityAuthMethod.LDAP_AUTH:
+      revokeMethod = revokeLdapAuth;
+      Component = ViewIdentityLdapAuthContent;
+      break;
     default:
       throw new Error(`Unhandled Auth Method: ${authMethod}`);
   }

frontend/src/pages/organization/IdentityDetailsByIDPage/components/ViewIdentityAuthModal/ViewIdentityAwsAuthContent.tsx

@@ -47,10 +47,10 @@ export const ViewIdentityAwsAuthContent = ({
       onEdit={() => handlePopUpOpen("identityAuthMethod")}
       onDelete={onDelete}
     >
-      <IdentityAuthFieldDisplay label="Access Token TLL (seconds)">
+      <IdentityAuthFieldDisplay label="Access Token TTL (seconds)">
         {data.accessTokenTTL}
       </IdentityAuthFieldDisplay>
-      <IdentityAuthFieldDisplay label="Access Token Max TLL (seconds)">
+      <IdentityAuthFieldDisplay label="Access Token Max TTL (seconds)">
         {data.accessTokenMaxTTL}
       </IdentityAuthFieldDisplay>
       <IdentityAuthFieldDisplay label="Access Token Max Number of Uses">

frontend/src/pages/organization/IdentityDetailsByIDPage/components/ViewIdentityAuthModal/ViewIdentityAzureAuthContent.tsx

@@ -47,10 +47,10 @@ export const ViewIdentityAzureAuthContent = ({
       onEdit={() => handlePopUpOpen("identityAuthMethod")}
       onDelete={onDelete}
     >
-      <IdentityAuthFieldDisplay label="Access Token TLL (seconds)">
+      <IdentityAuthFieldDisplay label="Access Token TTL (seconds)">
         {data.accessTokenTTL}
       </IdentityAuthFieldDisplay>
-      <IdentityAuthFieldDisplay label="Access Token Max TLL (seconds)">
+      <IdentityAuthFieldDisplay label="Access Token Max TTL (seconds)">
         {data.accessTokenMaxTTL}
       </IdentityAuthFieldDisplay>
       <IdentityAuthFieldDisplay label="Access Token Max Number of Uses">

frontend/src/pages/organization/IdentityDetailsByIDPage/components/ViewIdentityAuthModal/ViewIdentityGcpAuthContent.tsx

@@ -47,10 +47,10 @@ export const ViewIdentityGcpAuthContent = ({
       onEdit={() => handlePopUpOpen("identityAuthMethod")}
       onDelete={onDelete}
     >
-      <IdentityAuthFieldDisplay label="Access Token TLL (seconds)">
+      <IdentityAuthFieldDisplay label="Access Token TTL (seconds)">
         {data.accessTokenTTL}
       </IdentityAuthFieldDisplay>
-      <IdentityAuthFieldDisplay label="Access Token Max TLL (seconds)">
+      <IdentityAuthFieldDisplay label="Access Token Max TTL (seconds)">
         {data.accessTokenMaxTTL}
       </IdentityAuthFieldDisplay>
       <IdentityAuthFieldDisplay label="Access Token Max Number of Uses">

frontend/src/pages/organization/IdentityDetailsByIDPage/components/ViewIdentityAuthModal/ViewIdentityJwtAuthContent.tsx

@@ -49,10 +49,10 @@ export const ViewIdentityJwtAuthContent = ({
       onEdit={() => handlePopUpOpen("identityAuthMethod")}
       onDelete={onDelete}
     >
-      <IdentityAuthFieldDisplay label="Access Token TLL (seconds)">
+      <IdentityAuthFieldDisplay label="Access Token TTL (seconds)">
         {data.accessTokenTTL}
       </IdentityAuthFieldDisplay>
-      <IdentityAuthFieldDisplay label="Access Token Max TLL (seconds)">
+      <IdentityAuthFieldDisplay label="Access Token Max TTL (seconds)">
         {data.accessTokenMaxTTL}
       </IdentityAuthFieldDisplay>
       <IdentityAuthFieldDisplay label="Access Token Max Number of Uses">

frontend/src/pages/organization/IdentityDetailsByIDPage/components/ViewIdentityAuthModal/ViewIdentityKubernetesAuthContent.tsx

@@ -51,10 +51,10 @@ export const ViewIdentityKubernetesAuthContent = ({
       onEdit={() => handlePopUpOpen("identityAuthMethod")}
       onDelete={onDelete}
     >
-      <IdentityAuthFieldDisplay label="Access Token TLL (seconds)">
+      <IdentityAuthFieldDisplay label="Access Token TTL (seconds)">
         {data.accessTokenTTL}
       </IdentityAuthFieldDisplay>
-      <IdentityAuthFieldDisplay label="Access Token Max TLL (seconds)">
+      <IdentityAuthFieldDisplay label="Access Token Max TTL (seconds)">
         {data.accessTokenMaxTTL}
       </IdentityAuthFieldDisplay>
       <IdentityAuthFieldDisplay label="Access Token Max Number of Uses">

frontend/src/pages/organization/IdentityDetailsByIDPage/components/ViewIdentityAuthModal/ViewIdentityLdapAuthContent.tsx

@@ -0,0 +1,103 @@
+import { faBan, faEye } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import { Badge, EmptyState, Spinner, Tooltip } from "@app/components/v2";
+import { useGetIdentityLdapAuth } from "@app/hooks/api";
+import { IdentityLdapAuthForm } from "@app/pages/organization/AccessManagementPage/components/OrgIdentityTab/components/IdentitySection/IdentityLdapAuthForm";
+import { ViewIdentityContentWrapper } from "@app/pages/organization/IdentityDetailsByIDPage/components/ViewIdentityAuthModal/ViewIdentityContentWrapper";
+
+import { IdentityAuthFieldDisplay } from "./IdentityAuthFieldDisplay";
+import { ViewAuthMethodProps } from "./types";
+
+export const ViewIdentityLdapAuthContent = ({
+  identityId,
+  handlePopUpToggle,
+  handlePopUpOpen,
+  onDelete,
+  popUp
+}: ViewAuthMethodProps) => {
+  const { data, isPending } = useGetIdentityLdapAuth(identityId);
+
+  if (isPending) {
+    return (
+      <div className="flex w-full items-center justify-center">
+        <Spinner className="text-mineshaft-400" />
+      </div>
+    );
+  }
+
+  if (!data) {
+    return (
+      <EmptyState icon={faBan} title="Could not find LDAP Auth associated with this Identity." />
+    );
+  }
+
+  if (popUp.identityAuthMethod.isOpen) {
+    return (
+      <IdentityLdapAuthForm
+        identityId={identityId}
+        isUpdate
+        handlePopUpOpen={handlePopUpOpen}
+        handlePopUpToggle={handlePopUpToggle}
+      />
+    );
+  }
+
+  return (
+    <ViewIdentityContentWrapper
+      onEdit={() => handlePopUpOpen("identityAuthMethod")}
+      onDelete={onDelete}
+    >
+      <IdentityAuthFieldDisplay label="Access Token TTL (seconds)">
+        {data.accessTokenTTL}
+      </IdentityAuthFieldDisplay>
+      <IdentityAuthFieldDisplay label="Access Token Max TTL (seconds)">
+        {data.accessTokenMaxTTL}
+      </IdentityAuthFieldDisplay>
+      <IdentityAuthFieldDisplay label="Access Token Max Number of Uses">
+        {data.accessTokenNumUsesLimit}
+      </IdentityAuthFieldDisplay>
+      <IdentityAuthFieldDisplay label="Access Token Trusted IPs">
+        {data.accessTokenTrustedIps.map((ip) => ip.ipAddress).join(", ")}
+      </IdentityAuthFieldDisplay>
+      <IdentityAuthFieldDisplay label="LDAP URL">{data.url}</IdentityAuthFieldDisplay>
+      <IdentityAuthFieldDisplay label="Bind DN">{data.bindDN}</IdentityAuthFieldDisplay>
+      <IdentityAuthFieldDisplay label="Bind Pass">
+        <Tooltip
+          side="right"
+          className="max-w-xl p-2"
+          content={<p className="break-words rounded bg-mineshaft-600 p-2">{data.bindPass}</p>}
+        >
+          <div className="w-min">
+            <Badge className="flex h-5 w-min items-center gap-1.5 whitespace-nowrap bg-mineshaft-400/50 text-bunker-300">
+              <FontAwesomeIcon icon={faEye} />
+              <span>Reveal</span>
+            </Badge>
+          </div>
+        </Tooltip>
+      </IdentityAuthFieldDisplay>
+      <IdentityAuthFieldDisplay label="Search Base / DN">
+        {data.searchBase}
+      </IdentityAuthFieldDisplay>
+      <IdentityAuthFieldDisplay label="Search Filter">{data.searchFilter}</IdentityAuthFieldDisplay>
+      <IdentityAuthFieldDisplay label="CA Certificate">
+        {data.ldapCaCertificate && (
+          <Tooltip
+            side="right"
+            className="max-w-xl p-2"
+            content={
+              <p className="break-words rounded bg-mineshaft-600 p-2">{data.ldapCaCertificate}</p>
+            }
+          >
+            <div className="w-min">
+              <Badge className="flex h-5 w-min items-center gap-1.5 whitespace-nowrap bg-mineshaft-400/50 text-bunker-300">
+                <FontAwesomeIcon icon={faEye} />
+                <span>Reveal</span>
+              </Badge>
+            </div>
+          </Tooltip>
+        )}
+      </IdentityAuthFieldDisplay>
+    </ViewIdentityContentWrapper>
+  );
+};

frontend/src/pages/organization/IdentityDetailsByIDPage/components/ViewIdentityAuthModal/ViewIdentityOidcAuthContent.tsx

@@ -48,10 +48,10 @@ export const ViewIdentityOidcAuthContent = ({
       onEdit={() => handlePopUpOpen("identityAuthMethod")}
       onDelete={onDelete}
     >
-      <IdentityAuthFieldDisplay label="Access Token TLL (seconds)">
+      <IdentityAuthFieldDisplay label="Access Token TTL (seconds)">
         {data.accessTokenTTL}
       </IdentityAuthFieldDisplay>
-      <IdentityAuthFieldDisplay label="Access Token Max TLL (seconds)">
+      <IdentityAuthFieldDisplay label="Access Token Max TTL (seconds)">
         {data.accessTokenMaxTTL}
       </IdentityAuthFieldDisplay>
       <IdentityAuthFieldDisplay label="Access Token Max Number of Uses">

frontend/src/pages/organization/IdentityDetailsByIDPage/components/ViewIdentityAuthModal/ViewIdentityTokenAuthContent.tsx

@@ -50,10 +50,10 @@ export const ViewIdentityTokenAuthContent = ({
       onEdit={() => handlePopUpOpen("identityAuthMethod")}
       onDelete={onDelete}
     >
-      <IdentityAuthFieldDisplay label="Access Token TLL (seconds)">
+      <IdentityAuthFieldDisplay label="Access Token TTL (seconds)">
         {data.accessTokenTTL}
       </IdentityAuthFieldDisplay>
-      <IdentityAuthFieldDisplay label="Access Token Max TLL (seconds)">
+      <IdentityAuthFieldDisplay label="Access Token Max TTL (seconds)">
         {data.accessTokenMaxTTL}
       </IdentityAuthFieldDisplay>
       <IdentityAuthFieldDisplay label="Access Token Max Number of Uses">

frontend/src/pages/organization/IdentityDetailsByIDPage/components/ViewIdentityAuthModal/ViewIdentityUniversalAuthContent.tsx

@@ -62,10 +62,10 @@ export const ViewIdentityUniversalAuthContent = ({
       onEdit={() => handlePopUpOpen("identityAuthMethod")}
       onDelete={onDelete}
     >
-      <IdentityAuthFieldDisplay label="Access Token TLL (seconds)">
+      <IdentityAuthFieldDisplay label="Access Token TTL (seconds)">
         {data.accessTokenTTL}
       </IdentityAuthFieldDisplay>
-      <IdentityAuthFieldDisplay label="Access Token Max TLL (seconds)">
+      <IdentityAuthFieldDisplay label="Access Token Max TTL (seconds)">
         {data.accessTokenMaxTTL}
       </IdentityAuthFieldDisplay>
       <IdentityAuthFieldDisplay label="Access Token Max Number of Uses">

frontend/src/pages/organization/IdentityDetailsByIDPage/route.tsx

@@ -20,7 +20,7 @@ export const Route = createFileRoute(
         link: linkOptions({ to: "/organization/access-management" })
       },
       {
-        label: "identities"
+        label: "Identities"
       }
     ]
   })

frontend/src/pages/organization/SettingsPage/components/OrgAuthTab/index.tsx

@@ -1 +0,0 @@
-export { OrgAuthTab } from "./OrgAuthTab";

frontend/src/pages/organization/SettingsPage/components/OrgDeleteSection/OrgDeleteSection.tsx

@@ -4,8 +4,8 @@ import { createNotification } from "@app/components/notifications";
 import { Button, DeleteActionModal } from "@app/components/v2";
 import { useOrganization, useOrgPermission } from "@app/context";
 import { useDeleteOrgById } from "@app/hooks/api";
+import { clearSession } from "@app/hooks/api/users/queries";
 import { usePopUp } from "@app/hooks/usePopUp";
-import { navigateUserToOrg } from "@app/pages/auth/LoginPage/Login.utils";
 
 export const OrgDeleteSection = () => {
   const navigate = useNavigate();
@@ -13,9 +13,7 @@ export const OrgDeleteSection = () => {
 
   const { membership } = useOrgPermission();
 
-  const { popUp, handlePopUpOpen, handlePopUpClose, handlePopUpToggle } = usePopUp([
-    "deleteOrg"
-  ] as const);
+  const { popUp, handlePopUpOpen, handlePopUpToggle } = usePopUp(["deleteOrg"] as const);
 
   const { mutateAsync, isPending } = useDeleteOrgById();
 
@@ -32,9 +30,8 @@ export const OrgDeleteSection = () => {
         type: "success"
       });
 
-      await navigateUserToOrg(navigate);
-
-      handlePopUpClose("deleteOrg");
+      clearSession();
+      navigate({ to: "/login" });
     } catch (err) {
       console.error(err);
       createNotification({

frontend/src/pages/organization/SettingsPage/components/OrgSecurityTab/OrgSecurityTab.tsx

@@ -0,0 +1,35 @@
+import { Link } from "@tanstack/react-router";
+
+import { NoticeBannerV2 } from "@app/components/v2/NoticeBannerV2/NoticeBannerV2";
+import { OrgPermissionActions, OrgPermissionSubjects } from "@app/context";
+import { withPermission } from "@app/hoc";
+
+import { OrgGenericAuthSection } from "./OrgGenericAuthSection";
+import { OrgUserAccessTokenLimitSection } from "./OrgUserAccessTokenLimitSection";
+
+export const OrgSecurityTab = withPermission(
+  () => {
+    return (
+      <>
+        <NoticeBannerV2
+          className="mx-auto mb-4"
+          titleClassName="text-base"
+          title="Single Sign-On (SSO) Settings"
+        >
+          <p className="mt-1 text-mineshaft-300">
+            SSO Settings have been relocated:{" "}
+            <Link
+              className="text-mineshaft-200 underline underline-offset-2"
+              to="/organization/sso"
+            >
+              Click here to view SSO Settings
+            </Link>
+          </p>
+        </NoticeBannerV2>
+        <OrgGenericAuthSection />
+        <OrgUserAccessTokenLimitSection />
+      </>
+    );
+  },
+  { action: OrgPermissionActions.Read, subject: OrgPermissionSubjects.Sso }
+);

frontend/src/pages/organization/SettingsPage/components/OrgSecurityTab/OrgUserAccessTokenLimitSection.tsx

@@ -86,13 +86,12 @@ export const OrgUserAccessTokenLimitSection = () => {
   ];
 
   return (
-    <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+    <div className="mb-4 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
       <div className="flex w-full items-center justify-between">
-        <p className="text-xl font-semibold">User Token Expiration</p>
+        <p className="text-xl font-semibold">Session Length</p>
       </div>
       <p className="mb-4 mt-2 text-sm text-gray-400">
-        This defines the maximum time a user token will be valid. After this time, the user will
-        need to re-authenticate.
+        Specify the duration of each login session for users in this organization.
       </p>
       <OrgPermissionCan I={OrgPermissionActions.Edit} a={OrgPermissionSubjects.Settings}>
         {(isAllowed) => (

frontend/src/pages/organization/SettingsPage/components/OrgSecurityTab/index.tsx

@@ -0,0 +1 @@
+export * from "./OrgSecurityTab";

frontend/src/pages/organization/SettingsPage/components/OrgTabGroup/OrgTabGroup.tsx

@@ -1,16 +1,18 @@
 import { useState } from "react";
-import { useSearch } from "@tanstack/react-router";
+import { DotLottieReact } from "@lottiefiles/dotlottie-react";
+import { Link, useSearch } from "@tanstack/react-router";
 
 import { Tab, TabList, TabPanel, Tabs } from "@app/components/v2";
 import { NoticeBannerV2 } from "@app/components/v2/NoticeBannerV2/NoticeBannerV2";
 import { ROUTE_PATHS } from "@app/const/routes";
+import { ProjectType } from "@app/hooks/api/workspace/types";
 
 import { AuditLogStreamsTab } from "../AuditLogStreamTab";
 import { ImportTab } from "../ImportTab";
 import { KmipTab } from "../KmipTab/OrgKmipTab";
-import { OrgAuthTab } from "../OrgAuthTab";
 import { OrgEncryptionTab } from "../OrgEncryptionTab";
 import { OrgGeneralTab } from "../OrgGeneralTab";
+import { OrgSecurityTab } from "../OrgSecurityTab";
 import { OrgWorkflowIntegrationTab } from "../OrgWorkflowIntegrationTab/OrgWorkflowIntegrationTab";
 
 export const OrgTabGroup = () => {
@@ -19,7 +21,7 @@ export const OrgTabGroup = () => {
   });
   const tabs = [
     { name: "General", key: "tab-org-general", component: OrgGeneralTab },
-    { name: "Security", key: "tab-org-security", component: OrgAuthTab },
+    { name: "Security", key: "tab-org-security", component: OrgSecurityTab },
     { name: "Encryption", key: "tab-org-encryption", component: OrgEncryptionTab },
     {
       name: "Workflow Integrations",
@@ -36,22 +38,52 @@ export const OrgTabGroup = () => {
       component: () => (
         <div>
           <NoticeBannerV2
-            className="mx-auto mt-10 max-w-4xl"
-            title="Project Templates New Location"
+            className="mx-auto"
+            titleClassName="text-base"
+            title="Project Templates Relocated"
           >
-            <p className="text-sm text-bunker-200">
-              Project templates have been moved to the Feature Settings page, under the &#34;Project
-              Templates&#34; tab.
+            <p className="mt-1 text-mineshaft-300">
+              Project templates have been relocated and are now product specific:
             </p>
-            <p className="mt-2 text-sm text-bunker-200">
-              Project templates are now product-specific, and can be configured for each project
-              type.
-            </p>
-            <img
-              src="/images/project-templates/project-templates-new-location.png"
-              className="mt-4 w-full max-w-4xl rounded"
-              alt="Project Templates New Location"
-            />
+            <ul className="mb-1 flex gap-x-4 text-mineshaft-200">
+              {[
+                {
+                  type: ProjectType.SecretManager,
+                  label: "Secret Management",
+                  icon: "sliding-carousel"
+                },
+                {
+                  type: ProjectType.CertificateManager,
+                  label: "Certificate Management",
+                  icon: "note"
+                },
+                {
+                  type: ProjectType.KMS,
+                  label: "KMS",
+                  icon: "unlock"
+                },
+                {
+                  type: ProjectType.SSH,
+                  label: "SSH",
+                  icon: "verified"
+                }
+              ].map(({ label, type, icon }, index) => (
+                <li key={`project-template-${type}`}>
+                  <Link
+                    to={`/organization/${type}/settings`}
+                    className="mt-1 flex items-center gap-x-2 hover:text-mineshaft-100"
+                  >
+                    {index !== 0 && <span className="text-mineshaft-300">•</span>}
+                    <DotLottieReact
+                      src={`/lotties/${icon}.json`}
+                      loop
+                      className="mt-0.5 h-5 w-5"
+                    />{" "}
+                    <span className="underline underline-offset-2">{label}</span>
+                  </Link>
+                </li>
+              ))}
+            </ul>
           </NoticeBannerV2>
         </div>
       )

frontend/src/pages/organization/SsoPage/SsoPage.tsx

@@ -0,0 +1,21 @@
+import { Helmet } from "react-helmet";
+
+import { PageHeader } from "@app/components/v2";
+
+import { SsoTabGroup } from "./components/SsoTabGroup";
+
+export const SsoPage = () => {
+  return (
+    <>
+      <Helmet>
+        <title>Single Sign-On (SSO)</title>
+      </Helmet>
+      <div className="flex w-full justify-center bg-bunker-800 text-white">
+        <div className="w-full max-w-7xl">
+          <PageHeader title="Single Sign-On (SSO)" />
+          <SsoTabGroup />
+        </div>
+      </div>
+    </>
+  );
+};