Merge remote-tracking branch 'origin/main' into feat-secret-input-autocomplete

2026-10-16 19:28:35 +00:00 · 2024-04-26 01:40:21 +08:00
parent e555d3129d c414bf6c39
commit b79e61c86b
132 changed files with 7317 additions and 877 deletions
@@ -0,0 +1,256 @@
+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,
+  Select,
+  SelectItem,
+  Table,
+  TableContainer,
+  TableSkeleton,
+  TBody,
+  Td,
+  Th,
+  THead,
+  Tr
+} from "@app/components/v2";
+import { useOrganization } from "@app/context";
+import {
+  useCreateLDAPGroupMapping,
+  useDeleteLDAPGroupMapping,
+  useGetLDAPConfig,
+  useGetLDAPGroupMaps,
+  useGetOrganizationGroups
+} 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: groups } = useGetOrganizationGroups(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"
+              defaultValue=""
+              render={({ field: { onChange, ...field }, fieldState: { error } }) => (
+                <FormControl
+                  label="Infisical Group"
+                  errorText={error?.message}
+                  isError={Boolean(error)}
+                  className="ml-4 w-full"
+                >
+                  <div className="flex">
+                    <Select
+                      defaultValue={field.value}
+                      {...field}
+                      onValueChange={(e) => onChange(e)}
+                      className="w-full"
+                    >
+                      {(groups || []).map(({ name, id, slug }) => (
+                        <SelectItem value={slug} key={`internal-group-${id}`}>
+                          {name}
+                        </SelectItem>
+                      ))}
+                    </Select>
+                    <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>Infisical Group</Th>
+                <Th className="w-5" />
+              </Tr>
+            </THead>
+            <TBody>
+              {isLoading && <TableSkeleton columns={3} innerKey="ldap-group-maps" />}
+              {!isLoading &&
+                groupMaps?.map(({ id, ldapGroupCN, group }) => {
+                  return (
+                    <Tr className="h-10 items-center" key={`ldap-group-map-${id}`}>
+                      <Td>{ldapGroupCN}</Td>
+                      <Td>{group.name}</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>
+  );
+};
@@ -6,7 +6,12 @@ import { z } from "zod";
 import { createNotification } from "@app/components/notifications";
 import { Button, FormControl, Input, Modal, ModalContent, TextArea } from "@app/components/v2";
 import { useOrganization } from "@app/context";
-import { useCreateLDAPConfig, useGetLDAPConfig, useUpdateLDAPConfig } from "@app/hooks/api";
+import {
+  useCreateLDAPConfig,
+  useGetLDAPConfig,
+  useTestLDAPConnection,
+  useUpdateLDAPConfig
+} from "@app/hooks/api";
 import { UsePopUpState } from "@app/hooks/usePopUp";

 const LDAPFormSchema = z.object({
@@ -14,6 +19,9 @@ const LDAPFormSchema = z.object({
  bindDN: z.string().default(""),
  bindPass: z.string().default(""),
  searchBase: z.string().default(""),
+  searchFilter: z.string().default(""),
+  groupSearchBase: z.string().default(""),
+  groupSearchFilter: z.string().default(""),
  caCert: z.string().optional()
 });

@@ -27,15 +35,25 @@ type Props = {

 export const LDAPModal = ({ popUp, handlePopUpClose, handlePopUpToggle }: Props) => {
  const { currentOrg } = useOrganization();
-  
+
  const { mutateAsync: createMutateAsync, isLoading: createIsLoading } = useCreateLDAPConfig();
  const { mutateAsync: updateMutateAsync, isLoading: updateIsLoading } = useUpdateLDAPConfig();
+  const { mutateAsync: testLDAPConnection } = useTestLDAPConnection();
  const { data } = useGetLDAPConfig(currentOrg?.id ?? "");

-  const { control, handleSubmit, reset } = useForm<TLDAPFormData>({
+  const { control, handleSubmit, reset, watch } = useForm<TLDAPFormData>({
    resolver: zodResolver(LDAPFormSchema)
  });

+  const watchUrl = watch("url");
+  const watchBindDN = watch("bindDN");
+  const watchBindPass = watch("bindPass");
+  const watchSearchBase = watch("searchBase");
+  const watchSearchFilter = watch("searchFilter");
+  const watchGroupSearchBase = watch("groupSearchBase");
+  const watchGroupSearchFilter = watch("groupSearchFilter");
+  const watchCaCert = watch("caCert");
+
  useEffect(() => {
    if (data) {
      reset({
@@ -43,12 +61,25 @@ export const LDAPModal = ({ popUp, handlePopUpClose, handlePopUpToggle }: Props)
        bindDN: data?.bindDN ?? "",
        bindPass: data?.bindPass ?? "",
        searchBase: data?.searchBase ?? "",
+        searchFilter: data?.searchFilter ?? "",
+        groupSearchBase: data?.groupSearchBase ?? "",
+        groupSearchFilter: data?.groupSearchFilter ?? "",
        caCert: data?.caCert ?? ""
      });
    }
  }, [data]);

-  const onSSOModalSubmit = async ({ url, bindDN, bindPass, searchBase, caCert }: TLDAPFormData) => {
+  const onSSOModalSubmit = async ({
+    url,
+    bindDN,
+    bindPass,
+    searchBase,
+    searchFilter,
+    groupSearchBase,
+    groupSearchFilter,
+    caCert,
+    shouldCloseModal = true
+  }: TLDAPFormData & { shouldCloseModal?: boolean }) => {
    try {
      if (!currentOrg) return;

@@ -60,6 +91,9 @@ export const LDAPModal = ({ popUp, handlePopUpClose, handlePopUpToggle }: Props)
          bindDN,
          bindPass,
          searchBase,
+          searchFilter,
+          groupSearchBase,
+          groupSearchFilter,
          caCert
        });
      } else {
@@ -70,11 +104,16 @@ export const LDAPModal = ({ popUp, handlePopUpClose, handlePopUpToggle }: Props)
          bindDN,
          bindPass,
          searchBase,
+          searchFilter,
+          groupSearchBase,
+          groupSearchFilter,
          caCert
        });
      }

-      handlePopUpClose("addLDAP");
+      if (shouldCloseModal) {
+        handlePopUpClose("addLDAP");
+      }

      createNotification({
        text: `Successfully ${!data ? "added" : "updated"} LDAP configuration`,
@@ -89,6 +128,45 @@ export const LDAPModal = ({ popUp, handlePopUpClose, handlePopUpToggle }: Props)
    }
  };

+  const handleTestLDAPConnection = async () => {
+    try {
+      await onSSOModalSubmit({
+        url: watchUrl,
+        bindDN: watchBindDN,
+        bindPass: watchBindPass,
+        searchBase: watchSearchBase,
+        searchFilter: watchSearchFilter,
+        groupSearchBase: watchGroupSearchBase,
+        groupSearchFilter: watchGroupSearchFilter,
+        caCert: watchCaCert,
+        shouldCloseModal: false
+      });
+
+      if (!data) return;
+
+      const result = await testLDAPConnection(data.id);
+
+      if (!result) {
+        createNotification({
+          text: "Failed to test the LDAP connection: Bind operation was unsuccessful",
+          type: "error"
+        });
+        return;
+      }
+
+      createNotification({
+        text: "Successfully tested the LDAP connection: Bind operation was successful",
+        type: "success"
+      });
+    } catch (err) {
+      console.error(err);
+      createNotification({
+        text: "Failed to test the LDAP connection",
+        type: "error"
+      });
+    }
+  };
+
  return (
    <Modal
      isOpen={popUp?.addLDAP?.isOpen}
@@ -131,7 +209,7 @@ export const LDAPModal = ({ popUp, handlePopUpClose, handlePopUpToggle }: Props)
            name="searchBase"
            render={({ field, fieldState: { error } }) => (
              <FormControl
-                label="Search Base / User DN"
+                label="User Search Base / User DN"
                errorText={error?.message}
                isError={Boolean(error)}
              >
@@ -139,6 +217,48 @@ export const LDAPModal = ({ popUp, handlePopUpClose, handlePopUpToggle }: Props)
              </FormControl>
            )}
          />
+          <Controller
+            control={control}
+            name="searchFilter"
+            render={({ field, fieldState: { error } }) => (
+              <FormControl
+                label="User Search Filter (Optional)"
+                errorText={error?.message}
+                isError={Boolean(error)}
+              >
+                <Input {...field} placeholder="(uid={{username}})" />
+              </FormControl>
+            )}
+          />
+          <Controller
+            control={control}
+            name="groupSearchBase"
+            render={({ field, fieldState: { error } }) => (
+              <FormControl
+                label="Group Search Base / Group DN (Optional)"
+                errorText={error?.message}
+                isError={Boolean(error)}
+              >
+                <Input {...field} placeholder="ou=groups,dc=acme,dc=com" />
+              </FormControl>
+            )}
+          />
+          <Controller
+            control={control}
+            name="groupSearchFilter"
+            render={({ field, fieldState: { error } }) => (
+              <FormControl
+                label="Group Filter (Optional)"
+                errorText={error?.message}
+                isError={Boolean(error)}
+              >
+                <Input
+                  {...field}
+                  placeholder="(&(objectClass=posixGroup)(memberUid={{.Username}}))"
+                />
+              </FormControl>
+            )}
+          />
          <Controller
            control={control}
            name="caCert"
@@ -161,12 +281,8 @@ export const LDAPModal = ({ popUp, handlePopUpClose, handlePopUpToggle }: Props)
            >
              {!data ? "Add" : "Update"}
            </Button>
-            <Button
-              colorSchema="secondary"
-              variant="plain"
-              onClick={() => handlePopUpClose("addLDAP")}
-            >
-              Cancel
+            <Button colorSchema="secondary" onClick={handleTestLDAPConnection}>
+              Test Connection
            </Button>
          </div>
        </form>
@@ -10,16 +10,20 @@ 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 => {
  const { currentOrg } = useOrganization();
  const { subscription } = useSubscription();
-  
+
  const { data } = useGetLDAPConfig(currentOrg?.id ?? "");
+
  const { mutateAsync } = useUpdateLDAPConfig();
  const { popUp, handlePopUpOpen, handlePopUpClose, handlePopUpToggle } = usePopUp([
    "addLDAP",
+    "ldapGroupMap",
+    "deleteLdapGroupMap",
    "upgradePlan"
  ] as const);

@@ -63,7 +67,10 @@ export const OrgLDAPSection = (): JSX.Element => {
            url: "",
            bindDN: "",
            bindPass: "",
-            searchBase: ""
+            searchBase: "",
+            searchFilter: "",
+            groupSearchBase: "",
+            groupSearchFilter: ""
          });
        }

@@ -76,21 +83,51 @@ export const OrgLDAPSection = (): JSX.Element => {
    }
  };

+  const openLDAPGroupMapModal = () => {
+    if (!subscription?.ldap) {
+      handlePopUpOpen("upgradePlan");
+      return;
+    }
+
+    handlePopUpOpen("ldapGroupMap");
+  };
+
  return (
    <>
      <hr className="border-mineshaft-600" />
      <div className="py-4">
        <div className="mb-2 flex items-center justify-between">
          <h2 className="text-md text-mineshaft-100">LDAP</h2>
+          <div className="flex">
+            <OrgPermissionCan I={OrgPermissionActions.Create} a={OrgPermissionSubjects.Ldap}>
+              {(isAllowed) => (
+                <Button onClick={addLDAPBtnClick} colorSchema="secondary" isDisabled={!isAllowed}>
+                  Manage
+                </Button>
+              )}
+            </OrgPermissionCan>
+          </div>
+        </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={addLDAPBtnClick} colorSchema="secondary" isDisabled={!isAllowed}>
+              <Button
+                onClick={openLDAPGroupMapModal}
+                colorSchema="secondary"
+                isDisabled={!isAllowed}
+              >
                Manage
              </Button>
            )}
          </OrgPermissionCan>
        </div>
-        <p className="text-sm text-mineshaft-300">Manage LDAP authentication configuration</p>
+        <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">
@@ -119,6 +156,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)}