Fix merge conflicts

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/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/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/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/sshHost/types.ts

@@ -6,7 +6,8 @@ export enum LoginMappingSource {
 export type TLoginMapping = {
   loginUser: string;
   allowedPrincipals: {
-    usernames: string[];
+    usernames?: string[];
+    groups?: string[];
   };
   source: LoginMappingSource;
 };

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) =>

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/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/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/OrgTabGroup/OrgTabGroup.tsx

@@ -1,9 +1,11 @@
 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";
@@ -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/SettingsPage/route.tsx

@@ -1,33 +1,37 @@
-import { faHome } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { createFileRoute, linkOptions, stripSearchParams } from "@tanstack/react-router";
-import { zodValidator } from "@tanstack/zod-adapter";
-import { z } from "zod";
+import { faHome } from '@fortawesome/free-solid-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import {
+  createFileRoute,
+  linkOptions,
+  stripSearchParams,
+} from '@tanstack/react-router'
+import { zodValidator } from '@tanstack/zod-adapter'
+import { z } from 'zod'
 
-import { SettingsPage } from "./SettingsPage";
+import { SettingsPage } from './SettingsPage'
 
 const SettingsPageQueryParams = z.object({
-  selectedTab: z.string().catch("")
-});
+  selectedTab: z.string().catch(''),
+})
 
 export const Route = createFileRoute(
-  "/_authenticate/_inject-org-details/_org-layout/organization/settings/"
+  '/_authenticate/_inject-org-details/_org-layout/organization/settings/',
 )({
   component: SettingsPage,
   validateSearch: zodValidator(SettingsPageQueryParams),
   search: {
-    middlewares: [stripSearchParams({ selectedTab: "" })]
+    middlewares: [stripSearchParams({ selectedTab: '' })],
   },
   context: () => ({
     breadcrumbs: [
       {
-        label: "Home",
+        label: 'Home',
         icon: () => <FontAwesomeIcon icon={faHome} />,
-        link: linkOptions({ to: "/" })
+        link: linkOptions({ to: '/' }),
       },
       {
-        label: "Settings"
-      }
-    ]
-  })
-});
+        label: 'Settings',
+      },
+    ],
+  }),
+})

frontend/src/pages/project/RoleDetailsBySlugPage/components/SshHostPermissionConditions.tsx

@@ -125,7 +125,7 @@ export const SshHostPermissionConditions = ({ position = 0, isDisabled }: Props)
                       errorText={error?.message}
                       className="mb-0 flex-grow"
                     >
-                      <Input {...field} />
+                      <Input {...field} onChange={(e) => field.onChange(e.target.value.trim())} />
                     </FormControl>
                   )}
                 />

frontend/src/pages/ssh/SshHostsPage/components/SshHostGroupModal.tsx

@@ -22,6 +22,7 @@ import {
   useCreateSshHostGroup,
   useGetSshHostGroupById,
   useGetWorkspaceUsers,
+  useListWorkspaceGroups,
   useListWorkspaceSshHostGroups,
   useUpdateSshHostGroup
 } from "@app/hooks/api";
@@ -38,7 +39,14 @@ const schema = z
     loginMappings: z
       .object({
         loginUser: z.string().trim().min(1),
-        allowedPrincipals: z.array(z.string().trim()).default([])
+        allowedPrincipals: z
+          .array(
+            z.object({
+              type: z.enum(["user", "group"]),
+              value: z.string().trim().min(1)
+            })
+          )
+          .default([])
       })
       .array()
       .default([])
@@ -49,9 +57,10 @@ export type FormData = z.infer<typeof schema>;
 
 export const SshHostGroupModal = ({ popUp, handlePopUpToggle }: Props) => {
   const { currentWorkspace } = useWorkspace();
-  const projectId = currentWorkspace?.id || "";
-  const { data: sshHostGroups } = useListWorkspaceSshHostGroups(currentWorkspace.id);
+  const projectId = currentWorkspace.id;
+  const { data: sshHostGroups } = useListWorkspaceSshHostGroups(projectId);
   const { data: members = [] } = useGetWorkspaceUsers(projectId);
+  const { data: groups = [] } = useListWorkspaceGroups(projectId);
   const [expandedMappings, setExpandedMappings] = useState<Record<number, boolean>>({});
 
   const { data: sshHostGroup } = useGetSshHostGroupById(
@@ -87,7 +96,16 @@ export const SshHostGroupModal = ({ popUp, handlePopUpToggle }: Props) => {
         name: sshHostGroup.name,
         loginMappings: sshHostGroup.loginMappings.map(({ loginUser, allowedPrincipals }) => ({
           loginUser,
-          allowedPrincipals: allowedPrincipals.usernames
+          allowedPrincipals: [
+            ...(allowedPrincipals.usernames || []).map((username) => ({
+              type: "user" as const,
+              value: username
+            })),
+            ...(allowedPrincipals.groups || []).map((group) => ({
+              type: "group" as const,
+              value: group
+            }))
+          ]
         }))
       });
 
@@ -118,27 +136,35 @@ export const SshHostGroupModal = ({ popUp, handlePopUpToggle }: Props) => {
         return;
       }
 
+      const transformedLoginMappings = loginMappings.map(({ loginUser, allowedPrincipals }) => {
+        const usernames = allowedPrincipals
+          .filter((p) => p.type === "user" && p.value)
+          .map((p) => p.value);
+
+        const groupNames = allowedPrincipals
+          .filter((p) => p.type === "group" && p.value)
+          .map((p) => p.value);
+
+        return {
+          loginUser,
+          allowedPrincipals: {
+            usernames,
+            groups: groupNames
+          }
+        };
+      });
+
       if (sshHostGroup) {
         await updateMutateAsync({
           sshHostGroupId: sshHostGroup.id,
           name,
-          loginMappings: loginMappings.map(({ loginUser, allowedPrincipals }) => ({
-            loginUser,
-            allowedPrincipals: {
-              usernames: allowedPrincipals
-            }
-          }))
+          loginMappings: transformedLoginMappings
         });
       } else {
         await createMutateAsync({
           projectId,
           name,
-          loginMappings: loginMappings.map(({ loginUser, allowedPrincipals }) => ({
-            loginUser,
-            allowedPrincipals: {
-              usernames: allowedPrincipals
-            }
-          }))
+          loginMappings: transformedLoginMappings
         });
       }
 
@@ -165,6 +191,15 @@ export const SshHostGroupModal = ({ popUp, handlePopUpToggle }: Props) => {
     }));
   };
 
+  const isPrincipalDuplicate = (
+    mappingIndex: number,
+    principalType: string,
+    principalValue: string
+  ) => {
+    const principals = getValues(`loginMappings.${mappingIndex}.allowedPrincipals`) || [];
+    return principals.some((p) => p.type === principalType && p.value === principalValue);
+  };
+
   return (
     <Modal
       isOpen={popUp?.sshHostGroup?.isOpen}
@@ -203,7 +238,10 @@ export const SshHostGroupModal = ({ popUp, handlePopUpToggle }: Props) => {
               variant="outline_bg"
               onClick={() => {
                 const newIndex = loginMappingsFormFields.fields.length;
-                loginMappingsFormFields.append({ loginUser: "", allowedPrincipals: [""] });
+                loginMappingsFormFields.append({
+                  loginUser: "",
+                  allowedPrincipals: [{ type: "user", value: "" }]
+                });
                 setExpandedMappings((prev) => ({
                   ...prev,
                   [newIndex]: true
@@ -299,7 +337,10 @@ export const SshHostGroupModal = ({ popUp, handlePopUpToggle }: Props) => {
                           variant="outline_bg"
                           onClick={() => {
                             const current = getValues(`loginMappings.${i}.allowedPrincipals`) ?? [];
-                            setValue(`loginMappings.${i}.allowedPrincipals`, [...current, ""]);
+                            setValue(`loginMappings.${i}.allowedPrincipals`, [
+                              ...current,
+                              { type: "user", value: "" }
+                            ]);
                           }}
                         >
                           Add Principal
@@ -310,40 +351,69 @@ export const SshHostGroupModal = ({ popUp, handlePopUpToggle }: Props) => {
                         name={`loginMappings.${i}.allowedPrincipals`}
                         render={({ field: { value = [], onChange }, fieldState: { error } }) => (
                           <div className="flex flex-col space-y-2">
-                            {(value.length === 0 ? [""] : value).map(
-                              (principal: string, principalIndex: number) => (
-                                <div
-                                  key={`${metadataFieldId}-principal-${principal}`}
-                                  className="flex items-center space-x-2"
-                                >
-                                  <div className="flex-1">
-                                    <Select
-                                      value={principal}
-                                      onValueChange={(newValue) => {
-                                        if (value.includes(newValue)) {
-                                          createNotification({
-                                            text: "This principal is already added",
-                                            type: "error"
-                                          });
-                                          return;
-                                        }
-                                        const newPrincipals = [...value];
-                                        newPrincipals[principalIndex] = newValue;
-                                        onChange(newPrincipals);
-                                      }}
-                                      placeholder="Select a member"
-                                      className="w-full"
-                                    >
-                                      {members.map((member) => (
-                                        <SelectItem
-                                          key={member.user.id}
-                                          value={member.user.username}
-                                        >
-                                          {member.user.username}
-                                        </SelectItem>
-                                      ))}
-                                    </Select>
-                                  </div>
+                            {value.map((principal, principalIndex) => (
+                              <div
+                                key={`principal-${i + 1}-${principalIndex + 1}-${principal.type}`}
+                                className="flex items-center space-x-2"
+                              >
+                                <div className="mr-2">
+                                  <Select
+                                    className="w-24"
+                                    value={principal.type}
+                                    onValueChange={(newType) => {
+                                      const newPrincipals = [...value];
+                                      newPrincipals[principalIndex] = {
+                                        type: newType as "user" | "group",
+                                        value: ""
+                                      };
+                                      onChange(newPrincipals);
+                                    }}
+                                  >
+                                    <SelectItem value="user">User</SelectItem>
+                                    <SelectItem value="group">Group</SelectItem>
+                                  </Select>
+                                </div>
+                                <div className="flex-1">
+                                  <Select
+                                    value={principal.value}
+                                    onValueChange={(newValue) => {
+                                      if (isPrincipalDuplicate(i, principal.type, newValue)) {
+                                        createNotification({
+                                          text: `This ${principal.type} is already added`,
+                                          type: "error"
+                                        });
+                                        return;
+                                      }
+                                      const newPrincipals = [...value];
+                                      newPrincipals[principalIndex] = {
+                                        type: principal.type as "user" | "group",
+                                        value: newValue
+                                      };
+                                      onChange(newPrincipals);
+                                    }}
+                                    placeholder={`Select a ${principal.type}`}
+                                    className="w-full"
+                                  >
+                                    {principal.type === "user"
+                                      ? members.map((member) => (
+                                          <SelectItem
+                                            key={member.user.id}
+                                            value={member.user.username}
+                                          >
+                                            {member.user.username}
+                                          </SelectItem>
+                                        ))
+                                      : groups.map((group) => (
+                                          <SelectItem
+                                            key={group.group.slug}
+                                            value={group.group.slug}
+                                          >
+                                            {group.group.slug}
+                                          </SelectItem>
+                                        ))}
+                                  </Select>
+                                </div>
+                                <div className="flex w-10 justify-center">
                                   <IconButton
                                     size="sm"
                                     ariaLabel="delete principal"
@@ -353,14 +423,14 @@ export const SshHostGroupModal = ({ popUp, handlePopUpToggle }: Props) => {
                                       const newPrincipals = value.filter(
                                         (_, idx) => idx !== principalIndex
                                       );
-                                      onChange(newPrincipals);
+                                      onChange(newPrincipals.length ? newPrincipals : []);
                                     }}
                                   >
                                     <FontAwesomeIcon icon={faTrash} />
                                   </IconButton>
                                 </div>
-                              )
-                            )}
+                              </div>
+                            ))}
                             {error && <span className="text-sm text-red-500">{error.message}</span>}
                           </div>
                         )}

frontend/src/pages/ssh/SshHostsPage/components/SshHostGroupsSection.tsx

@@ -1,4 +1,4 @@
-import { faPlus } from "@fortawesome/free-solid-svg-icons";
+import { faArrowUpRightFromSquare, faPlus } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 import { UpgradePlanModal } from "@app/components/license/UpgradePlanModal";
@@ -56,22 +56,38 @@ export const SshHostGroupsSection = () => {
     <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">Host Groups</p>
-        <ProjectPermissionCan
-          I={ProjectPermissionActions.Create}
-          a={ProjectPermissionSub.SshHostGroups}
-        >
-          {(isAllowed) => (
-            <Button
-              colorSchema="primary"
-              type="button"
-              leftIcon={<FontAwesomeIcon icon={faPlus} />}
-              onClick={() => handleAddSshHostGroupModal()}
-              isDisabled={!isAllowed}
-            >
-              Add Group
-            </Button>
-          )}
-        </ProjectPermissionCan>
+        <div className="flex justify-end">
+          <a
+            target="_blank"
+            rel="noopener noreferrer"
+            href="https://infisical.com/docs/documentation/platform/ssh/host-groups"
+          >
+            <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={ProjectPermissionActions.Create}
+            a={ProjectPermissionSub.SshHostGroups}
+          >
+            {(isAllowed) => (
+              <Button
+                colorSchema="primary"
+                type="button"
+                leftIcon={<FontAwesomeIcon icon={faPlus} />}
+                onClick={() => handleAddSshHostGroupModal()}
+                isDisabled={!isAllowed}
+                className="ml-4"
+              >
+                Add Group
+              </Button>
+            )}
+          </ProjectPermissionCan>
+        </div>
       </div>
       <SshHostGroupsTable handlePopUpOpen={handlePopUpOpen} />
       <SshHostGroupModal popUp={popUp} handlePopUpToggle={handlePopUpToggle} />

frontend/src/pages/ssh/SshHostsPage/components/SshHostGroupsTable.tsx

@@ -1,10 +1,18 @@
-import { faEllipsis, faPencil, faServer, faTrash } from "@fortawesome/free-solid-svg-icons";
+import {
+  faEllipsis,
+  faPencil,
+  faServer,
+  faTrash,
+  faUser,
+  faUsers
+} 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,
@@ -77,9 +85,40 @@ export const SshHostGroupsTable = ({ handlePopUpOpen }: Props) => {
                         group.loginMappings.map(({ loginUser, allowedPrincipals }) => (
                           <div key={`${group.id}-${loginUser}`} className="mb-2">
                             <div className="text-mineshaft-200">{loginUser}</div>
-                            {allowedPrincipals.usernames.map((username) => (
-                              <div key={`${group.id}-${loginUser}-${username}`} className="ml-4">
-                                └─ {username}
+                            {allowedPrincipals.usernames?.map((username) => (
+                              <div
+                                key={`${loginUser}-${username}`}
+                                className="flex items-center gap-2"
+                              >
+                                <div className="flex items-center">
+                                  <span className="text-gray-400">└─</span>
+                                </div>
+                                <div className="flex items-center gap-1.5">
+                                  <FontAwesomeIcon
+                                    icon={faUser}
+                                    className="text-xs text-yellow/80"
+                                  />
+                                  <span>{username}</span>
+                                  <Badge variant="primary">user</Badge>
+                                </div>
+                              </div>
+                            ))}
+                            {allowedPrincipals.groups?.map((allowedGroup) => (
+                              <div
+                                key={`${loginUser}-${allowedGroup}`}
+                                className="flex items-center gap-2"
+                              >
+                                <div className="flex items-center">
+                                  <span className="text-gray-400">└─</span>
+                                </div>
+                                <div className="flex items-center gap-1.5">
+                                  <FontAwesomeIcon
+                                    icon={faUsers}
+                                    className="text-xs text-green/80"
+                                  />
+                                  <span>{allowedGroup}</span>
+                                  <Badge variant="success">group</Badge>
+                                </div>
                               </div>
                             ))}
                           </div>

frontend/src/pages/ssh/SshHostsPage/components/SshHostModal.tsx

@@ -23,6 +23,7 @@ import {
   useCreateSshHost,
   useGetSshHostById,
   useGetWorkspaceUsers,
+  useListWorkspaceGroups,
   useListWorkspaceSshHosts,
   useUpdateSshHost
 } from "@app/hooks/api";
@@ -49,7 +50,14 @@ const schema = z
     loginMappings: z
       .object({
         loginUser: z.string().trim().min(1),
-        allowedPrincipals: z.array(z.string().trim()).default([]),
+        allowedPrincipals: z
+          .array(
+            z.object({
+              type: z.enum(["user", "group"]),
+              value: z.string().trim().min(1)
+            })
+          )
+          .default([]),
         source: z.nativeEnum(LoginMappingSource)
       })
       .array()
@@ -64,6 +72,7 @@ export const SshHostModal = ({ popUp, handlePopUpToggle }: Props) => {
   const projectId = currentWorkspace?.id || "";
   const { data: sshHosts } = useListWorkspaceSshHosts(currentWorkspace.id);
   const { data: members = [] } = useGetWorkspaceUsers(projectId);
+  const { data: groups = [] } = useListWorkspaceGroups(projectId);
   const [expandedMappings, setExpandedMappings] = useState<Record<number, boolean>>({});
 
   const { data: sshHost } = useGetSshHostById(
@@ -103,7 +112,16 @@ export const SshHostModal = ({ popUp, handlePopUpToggle }: Props) => {
         userCertTtl: sshHost.userCertTtl,
         loginMappings: sshHost.loginMappings.map(({ loginUser, allowedPrincipals, source }) => ({
           loginUser,
-          allowedPrincipals: allowedPrincipals.usernames,
+          allowedPrincipals: [
+            ...(allowedPrincipals.usernames || []).map((username) => ({
+              type: "user" as const,
+              value: username
+            })),
+            ...(allowedPrincipals.groups || []).map((group) => ({
+              type: "group" as const,
+              value: group
+            }))
+          ],
           source
         }))
       });
@@ -159,18 +177,31 @@ export const SshHostModal = ({ popUp, handlePopUpToggle }: Props) => {
         }
       }
 
+      const transformedLoginMappings = hostLoginMappings.map(({ loginUser, allowedPrincipals }) => {
+        const usernames = allowedPrincipals
+          .filter((p) => p.type === "user" && p.value)
+          .map((p) => p.value);
+
+        const groupNames = allowedPrincipals
+          .filter((p) => p.type === "group" && p.value)
+          .map((p) => p.value);
+
+        return {
+          loginUser,
+          allowedPrincipals: {
+            usernames,
+            groups: groupNames
+          }
+        };
+      });
+
       if (sshHost) {
         await updateMutateAsync({
           sshHostId: sshHost.id,
           hostname,
           alias: trimmedAlias,
           userCertTtl,
-          loginMappings: hostLoginMappings.map(({ loginUser, allowedPrincipals }) => ({
-            loginUser,
-            allowedPrincipals: {
-              usernames: allowedPrincipals
-            }
-          }))
+          loginMappings: transformedLoginMappings
         });
       } else {
         await createMutateAsync({
@@ -178,12 +209,7 @@ export const SshHostModal = ({ popUp, handlePopUpToggle }: Props) => {
           hostname,
           alias: trimmedAlias,
           userCertTtl,
-          loginMappings: hostLoginMappings.map(({ loginUser, allowedPrincipals }) => ({
-            loginUser,
-            allowedPrincipals: {
-              usernames: allowedPrincipals
-            }
-          }))
+          loginMappings: transformedLoginMappings
         });
       }
 
@@ -210,6 +236,15 @@ export const SshHostModal = ({ popUp, handlePopUpToggle }: Props) => {
     }));
   };
 
+  const isPrincipalDuplicate = (
+    mappingIndex: number,
+    principalType: string,
+    principalValue: string
+  ) => {
+    const principals = getValues(`loginMappings.${mappingIndex}.allowedPrincipals`) || [];
+    return principals.some((p) => p.type === principalType && p.value === principalValue);
+  };
+
   return (
     <Modal
       isOpen={popUp?.sshHost?.isOpen}
@@ -275,7 +310,7 @@ export const SshHostModal = ({ popUp, handlePopUpToggle }: Props) => {
                 const newIndex = loginMappingsFormFields.fields.length;
                 loginMappingsFormFields.append({
                   loginUser: "",
-                  allowedPrincipals: [""],
+                  allowedPrincipals: [],
                   source: LoginMappingSource.HOST
                 });
                 setExpandedMappings((prev) => ({
@@ -397,7 +432,10 @@ export const SshHostModal = ({ popUp, handlePopUpToggle }: Props) => {
                             onClick={() => {
                               const current =
                                 getValues(`loginMappings.${i}.allowedPrincipals`) ?? [];
-                              setValue(`loginMappings.${i}.allowedPrincipals`, [...current, ""]);
+                              setValue(`loginMappings.${i}.allowedPrincipals`, [
+                                ...current,
+                                { type: "user", value: "" }
+                              ]);
                             }}
                           >
                             Add Principal
@@ -409,50 +447,82 @@ export const SshHostModal = ({ popUp, handlePopUpToggle }: Props) => {
                         name={`loginMappings.${i}.allowedPrincipals`}
                         render={({ field: { value = [], onChange }, fieldState: { error } }) => (
                           <div className="flex flex-col space-y-2">
-                            {(value.length === 0 ? [""] : value).map(
-                              (principal: string, principalIndex: number) => (
-                                <div
-                                  key={`${metadataFieldId}-principal-${principal}`}
-                                  className="flex items-center space-x-2"
-                                >
-                                  <div className="flex-1">
-                                    <Select
-                                      value={principal}
-                                      onValueChange={(newValue) => {
-                                        if (
-                                          loginMappingsFormFields.fields[i].source ===
-                                          LoginMappingSource.HOST_GROUP
-                                        )
-                                          return;
-
-                                        if (value.includes(newValue)) {
-                                          createNotification({
-                                            text: "This principal is already added",
-                                            type: "error"
-                                          });
-                                          return;
-                                        }
-                                        const newPrincipals = [...value];
-                                        newPrincipals[principalIndex] = newValue;
-                                        onChange(newPrincipals);
-                                      }}
-                                      placeholder="Select a member"
-                                      className="w-full"
-                                      isDisabled={
+                            {value.map((principal, principalIndex) => (
+                              <div
+                                key={`principal-${i + 1}-${principalIndex + 1}-${principal.type}`}
+                                className="flex items-center space-x-2"
+                              >
+                                <div className="mr-2">
+                                  <Select
+                                    className="w-24"
+                                    value={principal.type}
+                                    onValueChange={(newType) => {
+                                      const newPrincipals = [...value];
+                                      newPrincipals[principalIndex] = {
+                                        type: newType as "user" | "group",
+                                        value: ""
+                                      };
+                                      onChange(newPrincipals);
+                                    }}
+                                    isDisabled={
+                                      loginMappingsFormFields.fields[i].source ===
+                                      LoginMappingSource.HOST_GROUP
+                                    }
+                                  >
+                                    <SelectItem value="user">User</SelectItem>
+                                    <SelectItem value="group">Group</SelectItem>
+                                  </Select>
+                                </div>
+                                <div className="flex-1">
+                                  <Select
+                                    value={principal.value}
+                                    onValueChange={(newValue) => {
+                                      if (
                                         loginMappingsFormFields.fields[i].source ===
                                         LoginMappingSource.HOST_GROUP
+                                      )
+                                        return;
+                                      if (isPrincipalDuplicate(i, principal.type, newValue)) {
+                                        createNotification({
+                                          text: `This ${principal.type} is already added`,
+                                          type: "error"
+                                        });
+                                        return;
                                       }
-                                    >
-                                      {members.map((member) => (
-                                        <SelectItem
-                                          key={member.user.id}
-                                          value={member.user.username}
-                                        >
-                                          {member.user.username}
-                                        </SelectItem>
-                                      ))}
-                                    </Select>
-                                  </div>
+                                      const newPrincipals = [...value];
+                                      newPrincipals[principalIndex] = {
+                                        type: principal.type,
+                                        value: newValue
+                                      };
+                                      onChange(newPrincipals);
+                                    }}
+                                    placeholder={`Select a ${principal.type}`}
+                                    className="w-full"
+                                    isDisabled={
+                                      loginMappingsFormFields.fields[i].source ===
+                                      LoginMappingSource.HOST_GROUP
+                                    }
+                                  >
+                                    {principal.type === "user"
+                                      ? members.map((member) => (
+                                          <SelectItem
+                                            key={member.user.id}
+                                            value={member.user.username}
+                                          >
+                                            {member.user.username}
+                                          </SelectItem>
+                                        ))
+                                      : groups.map((group) => (
+                                          <SelectItem
+                                            key={group.group.slug}
+                                            value={group.group.slug}
+                                          >
+                                            {group.group.slug}
+                                          </SelectItem>
+                                        ))}
+                                  </Select>
+                                </div>
+                                <div className="flex w-10 justify-center">
                                   <IconButton
                                     size="sm"
                                     ariaLabel="delete principal"
@@ -468,7 +538,7 @@ export const SshHostModal = ({ popUp, handlePopUpToggle }: Props) => {
                                       const newPrincipals = value.filter(
                                         (_, idx) => idx !== principalIndex
                                       );
-                                      onChange(newPrincipals);
+                                      onChange([...newPrincipals]);
                                     }}
                                     isDisabled={
                                       loginMappingsFormFields.fields[i].source ===
@@ -478,8 +548,8 @@ export const SshHostModal = ({ popUp, handlePopUpToggle }: Props) => {
                                     <FontAwesomeIcon icon={faTrash} />
                                   </IconButton>
                                 </div>
-                              )
-                            )}
+                              </div>
+                            ))}
                             {error && <span className="text-sm text-red-500">{error.message}</span>}
                           </div>
                         )}

frontend/src/pages/ssh/SshHostsPage/components/SshHostsSection.tsx

@@ -42,7 +42,7 @@ export const SshHostsSection = () => {
     <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">Hosts</p>
-        <div className="flex w-full justify-end">
+        <div className="flex justify-end">
           <a
             target="_blank"
             rel="noopener noreferrer"

frontend/src/pages/ssh/SshHostsPage/components/SshHostsTable.tsx

@@ -3,7 +3,9 @@ import {
   faEllipsis,
   faPencil,
   faServer,
-  faTrash
+  faTrash,
+  faUser,
+  faUsers
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import FileSaver from "file-saver";
@@ -12,6 +14,7 @@ import { twMerge } from "tailwind-merge";
 import { createNotification } from "@app/components/notifications";
 import { ProjectPermissionCan } from "@app/components/permissions";
 import {
+  Badge,
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
@@ -101,43 +104,53 @@ export const SshHostsTable = ({ handlePopUpOpen }: Props) => {
 
                           const hostLoginUserToPrincipals = hostMappings.reduce(
                             (acc, { loginUser, allowedPrincipals }) => {
-                              acc[loginUser] = new Set(allowedPrincipals.usernames);
+                              acc[loginUser] = {
+                                users: new Set(allowedPrincipals.usernames),
+                                groups: new Set(allowedPrincipals.groups)
+                              };
                               return acc;
                             },
-                            {} as Record<string, Set<string>>
+                            {} as Record<string, { users: Set<string>; groups: Set<string> }>
                           );
 
                           const entriesFromHost = hostMappings.map(
                             ({ loginUser, allowedPrincipals }) => ({
                               loginUser,
                               source: LoginMappingSource.HOST,
-                              usernames: allowedPrincipals.usernames
+                              users: allowedPrincipals.usernames,
+                              groups: allowedPrincipals.groups
                             })
                           );
 
                           const entriesFromGroup = groupMappings
                             .map(({ loginUser, allowedPrincipals }) => {
-                              const existing = hostLoginUserToPrincipals[loginUser] || new Set();
-                              const filteredUsernames = allowedPrincipals.usernames.filter(
-                                (u) => !existing.has(u)
+                              const existing = hostLoginUserToPrincipals[loginUser] || {};
+                              const filteredUsernames = allowedPrincipals.usernames?.filter(
+                                (u) => !existing.users?.has(u)
                               );
-                              return filteredUsernames.length > 0
+                              const filteredGroups = allowedPrincipals.groups?.filter(
+                                (g) => !existing.groups?.has(g)
+                              );
+                              return ((filteredGroups?.length || filteredUsernames?.length) ?? 0) >
+                                0
                                 ? {
                                     loginUser,
                                     source: LoginMappingSource.HOST_GROUP,
-                                    usernames: filteredUsernames
+                                    users: filteredUsernames,
+                                    groups: filteredGroups
                                   }
                                 : null;
                             })
                             .filter(Boolean) as {
                             loginUser: string;
                             source: LoginMappingSource;
-                            usernames: string[];
+                            users: string[];
+                            groups: string[];
                           }[];
 
                           return [...entriesFromHost, ...entriesFromGroup]
                             .sort((a, b) => a.loginUser.localeCompare(b.loginUser))
-                            .map(({ loginUser, usernames, source }) => (
+                            .map(({ loginUser, users, groups, source }) => (
                               <div key={`${host.id}-${loginUser}-${source}`} className="mb-2">
                                 <div className="text-mineshaft-200">
                                   {loginUser}
@@ -147,12 +160,40 @@ export const SshHostsTable = ({ handlePopUpOpen }: Props) => {
                                     </span>
                                   )}
                                 </div>
-                                {usernames.map((username) => (
+                                {users?.map((username) => (
                                   <div
                                     key={`${host.id}-${loginUser}-${source}-${username}`}
-                                    className="ml-4"
+                                    className="flex items-center gap-2"
                                   >
-                                    └─ {username}
+                                    <div className="flex items-center">
+                                      <span className="text-gray-400">└─</span>
+                                    </div>
+                                    <div className="flex items-center gap-1.5">
+                                      <FontAwesomeIcon
+                                        icon={faUser}
+                                        className="text-xs text-yellow/80"
+                                      />
+                                      <span>{username}</span>
+                                      <Badge variant="primary">user</Badge>
+                                    </div>
+                                  </div>
+                                ))}
+                                {groups?.map((group) => (
+                                  <div
+                                    key={`${host.id}-${loginUser}-${source}-${group}`}
+                                    className="flex items-center gap-2"
+                                  >
+                                    <div className="flex items-center">
+                                      <span className="text-gray-400">└─</span>
+                                    </div>
+                                    <div className="flex items-center gap-1.5">
+                                      <FontAwesomeIcon
+                                        icon={faUsers}
+                                        className="text-xs text-green/80"
+                                      />
+                                      <span>{group}</span>
+                                      <Badge variant="success">group</Badge>
+                                    </div>
                                   </div>
                                 ))}
                               </div>