Add test connection btn for LDAP, update group search filter impl, update group search filter examples in docs

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

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

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

@@ -136,3 +136,14 @@ export const useDeleteLDAPGroupMapping = () => {
     }
   });
 };
+
+export const useTestLDAPConnection = () => {
+  return useMutation({
+    mutationFn: async (ldapConfigId: string) => {
+      const { data } = await apiRequest.post<boolean>(
+        `/api/v1/ldap/config/${ldapConfigId}/test-connection`
+      );
+      return data;
+    }
+  });
+};

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

@@ -6,7 +6,11 @@ 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({
@@ -32,12 +36,21 @@ export const LDAPModal = ({ popUp, handlePopUpClose, handlePopUpToggle }: Props)
 
   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 watchGroupSearchBase = watch("groupSearchBase");
+  const watchGroupSearchFilter = watch("groupSearchFilter");
+  const watchCaCert = watch("caCert");
+
   useEffect(() => {
     if (data) {
       reset({
@@ -59,8 +72,9 @@ export const LDAPModal = ({ popUp, handlePopUpClose, handlePopUpToggle }: Props)
     searchBase,
     groupSearchBase,
     groupSearchFilter,
-    caCert
-  }: TLDAPFormData) => {
+    caCert,
+    shouldCloseModal = true
+  }: TLDAPFormData & { shouldCloseModal?: boolean }) => {
     try {
       if (!currentOrg) return;
 
@@ -90,7 +104,9 @@ export const LDAPModal = ({ popUp, handlePopUpClose, handlePopUpToggle }: Props)
         });
       }
 
-      handlePopUpClose("addLDAP");
+      if (shouldCloseModal) {
+        handlePopUpClose("addLDAP");
+      }
 
       createNotification({
         text: `Successfully ${!data ? "added" : "updated"} LDAP configuration`,
@@ -105,6 +121,44 @@ export const LDAPModal = ({ popUp, handlePopUpClose, handlePopUpToggle }: Props)
     }
   };
 
+  const handleTestLDAPConnection = async () => {
+    try {
+      await onSSOModalSubmit({
+        url: watchUrl,
+        bindDN: watchBindDN,
+        bindPass: watchBindPass,
+        searchBase: watchSearchBase,
+        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}
@@ -203,12 +257,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>

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

@@ -97,13 +97,15 @@ export const OrgLDAPSection = (): JSX.Element => {
       <div className="py-4">
         <div className="mb-2 flex items-center justify-between">
           <h2 className="text-md text-mineshaft-100">LDAP</h2>
-          <OrgPermissionCan I={OrgPermissionActions.Create} a={OrgPermissionSubjects.Ldap}>
-            {(isAllowed) => (
-              <Button onClick={addLDAPBtnClick} colorSchema="secondary" isDisabled={!isAllowed}>
-                Manage
-              </Button>
-            )}
-          </OrgPermissionCan>
+          <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>