Complete LDAP group mapping data structure + frontend/backend

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

@@ -1,2 +1,6 @@
-export { useCreateLDAPConfig, useUpdateLDAPConfig } from "./mutations";
-export { useGetLDAPConfig } from "./queries";
+export {
+  useCreateLDAPConfig,
+  useCreateLDAPGroupMapping,
+  useDeleteLDAPGroupMapping,
+  useUpdateLDAPConfig} from "./mutations";
+export { useGetLDAPConfig, useGetLDAPGroupMaps } from "./queries";

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

@@ -91,3 +91,48 @@ export const useUpdateLDAPConfig = () => {
     }
   });
 };
+
+export const useCreateLDAPGroupMapping = () => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: async ({
+      ldapConfigId,
+      ldapGroupCN,
+      groupSlug
+    }: {
+      ldapConfigId: string;
+      ldapGroupCN: string;
+      groupSlug: string;
+    }) => {
+      const { data } = await apiRequest.post(`/api/v1/ldap/config/${ldapConfigId}/group-maps`, {
+        ldapGroupCN,
+        groupSlug
+      });
+      return data;
+    },
+    onSuccess(_, { ldapConfigId }) {
+      queryClient.invalidateQueries(ldapConfigKeys.getLDAPGroupMaps(ldapConfigId));
+    }
+  });
+};
+
+export const useDeleteLDAPGroupMapping = () => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: async ({
+      ldapConfigId,
+      ldapGroupMapId
+    }: {
+      ldapConfigId: string;
+      ldapGroupMapId: string;
+    }) => {
+      const { data } = await apiRequest.delete(
+        `/api/v1/ldap/config/${ldapConfigId}/group-maps/${ldapGroupMapId}`
+      );
+      return data;
+    },
+    onSuccess(_, { ldapConfigId }) {
+      queryClient.invalidateQueries(ldapConfigKeys.getLDAPGroupMaps(ldapConfigId));
+    }
+  });
+};

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

@@ -2,8 +2,11 @@ import { useQuery } from "@tanstack/react-query";
 
 import { apiRequest } from "@app/config/request";
 
+import { LDAPGroupMap } from "./types";
+
 export const ldapConfigKeys = {
-  getLDAPConfig: (orgId: string) => [{ orgId }, "organization-ldap"] as const
+  getLDAPConfig: (orgId: string) => [{ orgId }, "organization-ldap"] as const,
+  getLDAPGroupMaps: (ldapConfigId: string) => [{ ldapConfigId }, "ldap-group-maps"] as const
 };
 
 export const useGetLDAPConfig = (organizationId: string) => {
@@ -17,3 +20,19 @@ export const useGetLDAPConfig = (organizationId: string) => {
     enabled: true
   });
 };
+
+export const useGetLDAPGroupMaps = (ldapConfigId: string) => {
+  return useQuery({
+    queryKey: ldapConfigKeys.getLDAPGroupMaps(ldapConfigId),
+    queryFn: async () => {
+      if (!ldapConfigId) return [];
+
+      const { data } = await apiRequest.get<LDAPGroupMap[]>(
+        `/api/v1/ldap/config/${ldapConfigId}/group-maps`
+      );
+
+      return data;
+    },
+    enabled: true
+  });
+};

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

@@ -0,0 +1,6 @@
+export type LDAPGroupMap = {
+  id: string;
+  ldapConfigId: string;
+  ldapGroupCN: string;
+  groupSlug: string;
+};

frontend/src/views/Settings/OrgSettingsPage/components/OrgAuthTab/LDAPGroupMapModal.tsx

@@ -0,0 +1,238 @@
+import { Controller, useForm } from "react-hook-form";
+import { faUsers, 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,
+  DeleteActionModal,
+  EmptyState,
+  FormControl,
+  IconButton,
+  Input,
+  Modal,
+  ModalContent,
+  Table,
+  TableContainer,
+  TableSkeleton,
+  TBody,
+  Td,
+  Th,
+  THead,
+  Tr} from "@app/components/v2";
+import { useOrganization } from "@app/context";
+import {
+  useCreateLDAPGroupMapping,
+  useDeleteLDAPGroupMapping,
+  useGetLDAPConfig,
+  useGetLDAPGroupMaps} from "@app/hooks/api";
+import { UsePopUpState } from "@app/hooks/usePopUp";
+
+const schema = z.object({
+  ldapGroupCN: z.string().min(1, "LDAP Group CN is required"),
+  groupSlug: z.string().min(1, "Group Slug is required")
+});
+
+export type TFormData = z.infer<typeof schema>;
+
+type Props = {
+  popUp: UsePopUpState<["ldapGroupMap", "deleteLdapGroupMap"]>;
+  handlePopUpOpen: (
+    popUpName: keyof UsePopUpState<["deleteLdapGroupMap"]>,
+    data?: {
+      ldapGroupMapId: string;
+      ldapGroupCN: string;
+    }
+  ) => void;
+  handlePopUpToggle: (
+    popUpName: keyof UsePopUpState<["ldapGroupMap", "deleteLdapGroupMap"]>,
+    state?: boolean
+  ) => void;
+};
+
+export const LDAPGroupMapModal = ({ popUp, handlePopUpOpen, handlePopUpToggle }: Props) => {
+  const { currentOrg } = useOrganization();
+
+  const { data: ldapConfig } = useGetLDAPConfig(currentOrg?.id ?? "");
+  const { data: groupMaps, isLoading } = useGetLDAPGroupMaps(ldapConfig?.id ?? "");
+  const { mutateAsync: createLDAPGroupMapping, isLoading: createIsLoading } =
+    useCreateLDAPGroupMapping();
+  const { mutateAsync: deleteLDAPGroupMapping } = useDeleteLDAPGroupMapping();
+
+  const { control, handleSubmit, reset } = useForm<TFormData>({
+    resolver: zodResolver(schema),
+    defaultValues: {
+      ldapGroupCN: "",
+      groupSlug: ""
+    }
+  });
+
+  const onFormSubmit = async ({ groupSlug, ldapGroupCN }: TFormData) => {
+    try {
+      if (!ldapConfig) return;
+
+      await createLDAPGroupMapping({
+        ldapConfigId: ldapConfig.id,
+        groupSlug,
+        ldapGroupCN
+      });
+
+      reset();
+
+      createNotification({
+        text: `Successfully added LDAP group mapping for ${ldapGroupCN}`,
+        type: "success"
+      });
+    } catch (err) {
+      console.error(err);
+      createNotification({
+        text: `Failed to add LDAP group mapping for ${ldapGroupCN}`,
+        type: "error"
+      });
+    }
+  };
+
+  const onDeleteGroupMapSubmit = async ({
+    ldapConfigId,
+    ldapGroupMapId,
+    ldapGroupCN
+  }: {
+    ldapConfigId: string;
+    ldapGroupMapId: string;
+    ldapGroupCN: string;
+  }) => {
+    try {
+      await deleteLDAPGroupMapping({
+        ldapConfigId,
+        ldapGroupMapId
+      });
+
+      handlePopUpToggle("deleteLdapGroupMap", false);
+
+      createNotification({
+        text: `Successfully deleted LDAP group mapping ${ldapGroupCN}`,
+        type: "success"
+      });
+    } catch (err) {
+      console.error(err);
+      createNotification({
+        text: `Failed to delete LDAP group mapping ${ldapGroupCN}`,
+        type: "error"
+      });
+    }
+  };
+
+  return (
+    <Modal
+      isOpen={popUp?.ldapGroupMap?.isOpen}
+      onOpenChange={(isOpen) => {
+        handlePopUpToggle("ldapGroupMap", isOpen);
+        reset();
+      }}
+    >
+      <ModalContent title="Manage LDAP Group Mappings">
+        <h2 className="mb-4">New Group Mapping</h2>
+        <form onSubmit={handleSubmit(onFormSubmit)} className="mb-8">
+          <div className="flex">
+            <Controller
+              control={control}
+              name="ldapGroupCN"
+              render={({ field, fieldState: { error } }) => (
+                <FormControl
+                  label="LDAP Group CN"
+                  errorText={error?.message}
+                  isError={Boolean(error)}
+                >
+                  <Input {...field} placeholder="Engineering" />
+                </FormControl>
+              )}
+            />
+            <Controller
+              control={control}
+              name="groupSlug"
+              render={({ field, fieldState: { error } }) => (
+                <FormControl
+                  label="Group Slug"
+                  errorText={error?.message}
+                  isError={Boolean(error)}
+                  className="ml-4"
+                >
+                  <div className="flex">
+                    <Input {...field} placeholder="engineering" />
+                    <Button className="ml-4" size="sm" type="submit" isLoading={createIsLoading}>
+                      Add mapping
+                    </Button>
+                  </div>
+                </FormControl>
+              )}
+            />
+          </div>
+        </form>
+        <h2 className="mb-4">Group Mappings</h2>
+        <TableContainer>
+          <Table>
+            <THead>
+              <Tr>
+                <Th>LDAP Group CN</Th>
+                <Th>Group Slug</Th>
+                <Th className="w-5" />
+              </Tr>
+            </THead>
+            <TBody>
+              {isLoading && <TableSkeleton columns={3} innerKey="ldap-group-maps" />}
+              {!isLoading &&
+                groupMaps?.map(({ id, ldapGroupCN, groupSlug }) => {
+                  return (
+                    <Tr className="h-10 items-center" key={`ldap-group-map-${id}`}>
+                      <Td>{ldapGroupCN}</Td>
+                      <Td>{groupSlug}</Td>
+                      <Td>
+                        <IconButton
+                          onClick={() => {
+                            handlePopUpOpen("deleteLdapGroupMap", {
+                              ldapGroupMapId: id,
+                              ldapGroupCN
+                            });
+                          }}
+                          size="lg"
+                          colorSchema="danger"
+                          variant="plain"
+                          ariaLabel="update"
+                        >
+                          <FontAwesomeIcon icon={faXmark} />
+                        </IconButton>
+                      </Td>
+                    </Tr>
+                  );
+                })}
+            </TBody>
+          </Table>
+          {groupMaps?.length === 0 && (
+            <EmptyState title="No LDAP group mappings found" icon={faUsers} />
+          )}
+        </TableContainer>
+        <DeleteActionModal
+          isOpen={popUp.deleteLdapGroupMap.isOpen}
+          title={`Are you sure want to delete the group mapping for ${
+            (popUp?.deleteLdapGroupMap?.data as { ldapGroupCN: string })?.ldapGroupCN || ""
+          }?`}
+          onChange={(isOpen) => handlePopUpToggle("deleteLdapGroupMap", isOpen)}
+          deleteKey="confirm"
+          onDeleteApproved={() => {
+            const deleteLdapGroupMapData = popUp?.deleteLdapGroupMap?.data as {
+              ldapGroupMapId: string;
+              ldapGroupCN: string;
+            };
+            return onDeleteGroupMapSubmit({
+              ldapConfigId: ldapConfig?.id ?? "",
+              ldapGroupMapId: deleteLdapGroupMapData.ldapGroupMapId,
+              ldapGroupCN: deleteLdapGroupMapData.ldapGroupCN
+            });
+          }}
+        />
+      </ModalContent>
+    </Modal>
+  );
+};

frontend/src/views/Settings/OrgSettingsPage/components/OrgAuthTab/OrgLDAPSection.tsx

@@ -10,6 +10,7 @@ import {
 import { useCreateLDAPConfig, useGetLDAPConfig, useUpdateLDAPConfig } from "@app/hooks/api";
 import { usePopUp } from "@app/hooks/usePopUp";
 
+import { LDAPGroupMapModal } from "./LDAPGroupMapModal";
 import { LDAPModal } from "./LDAPModal";
 
 export const OrgLDAPSection = (): JSX.Element => {
@@ -21,6 +22,8 @@ export const OrgLDAPSection = (): JSX.Element => {
   const { mutateAsync } = useUpdateLDAPConfig();
   const { popUp, handlePopUpOpen, handlePopUpClose, handlePopUpToggle } = usePopUp([
     "addLDAP",
+    "ldapGroupMap",
+    "deleteLdapGroupMap",
     "upgradePlan"
   ] as const);
 
@@ -79,6 +82,16 @@ export const OrgLDAPSection = (): JSX.Element => {
     }
   };
 
+  const openLDAPGroupMapModal = () => {
+    console.log("openLDAPGroupMapModal sub: ", subscription);
+    if (!subscription?.ldap) {
+      handlePopUpOpen("upgradePlan");
+      return;
+    }
+
+    handlePopUpOpen("ldapGroupMap");
+  };
+
   return (
     <>
       <hr className="border-mineshaft-600" />
@@ -95,6 +108,25 @@ export const OrgLDAPSection = (): JSX.Element => {
         </div>
         <p className="text-sm text-mineshaft-300">Manage LDAP authentication configuration</p>
       </div>
+      <div className="py-4">
+        <div className="mb-2 flex items-center justify-between">
+          <h2 className="text-md text-mineshaft-100">LDAP Group Mappings</h2>
+          <OrgPermissionCan I={OrgPermissionActions.Create} a={OrgPermissionSubjects.Ldap}>
+            {(isAllowed) => (
+              <Button
+                onClick={openLDAPGroupMapModal}
+                colorSchema="secondary"
+                isDisabled={!isAllowed}
+              >
+                Manage
+              </Button>
+            )}
+          </OrgPermissionCan>
+        </div>
+        <p className="text-sm text-mineshaft-300">
+          Manage how LDAP groups are mapped to internal groups in Infisical
+        </p>
+      </div>
       {data && (
         <div className="py-4">
           <div className="mb-2 flex items-center justify-between">
@@ -122,6 +154,11 @@ export const OrgLDAPSection = (): JSX.Element => {
         handlePopUpClose={handlePopUpClose}
         handlePopUpToggle={handlePopUpToggle}
       />
+      <LDAPGroupMapModal
+        popUp={popUp}
+        handlePopUpOpen={handlePopUpOpen}
+        handlePopUpToggle={handlePopUpToggle}
+      />
       <UpgradePlanModal
         isOpen={popUp.upgradePlan.isOpen}
         onOpenChange={(isOpen) => handlePopUpToggle("upgradePlan", isOpen)}