misc: added handling of empty groups and default value

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

@@ -1,4 +1,6 @@
+import { useEffect } from "react";
 import { Controller, useForm } from "react-hook-form";
+import { useRouter } from "next/router";
 import { faUsers, faXmark } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { zodResolver } from "@hookform/resolvers/zod";
@@ -66,8 +68,9 @@ export const LDAPGroupMapModal = ({ popUp, handlePopUpOpen, handlePopUpToggle }:
   const { mutateAsync: createLDAPGroupMapping, isLoading: createIsLoading } =
     useCreateLDAPGroupMapping();
   const { mutateAsync: deleteLDAPGroupMapping } = useDeleteLDAPGroupMapping();
+  const router = useRouter();
 
-  const { control, handleSubmit, reset } = useForm<TFormData>({
+  const { control, handleSubmit, reset, setValue } = useForm<TFormData>({
     resolver: zodResolver(schema),
     defaultValues: {
       ldapGroupCN: "",
@@ -130,6 +133,12 @@ export const LDAPGroupMapModal = ({ popUp, handlePopUpOpen, handlePopUpToggle }:
     }
   };
 
+  useEffect(() => {
+    if (groups && groups.length > 0) {
+      setValue("groupSlug", groups[0].slug);
+    }
+  }, [groups, popUp.ldapGroupMap.isOpen]);
+
   return (
     <Modal
       isOpen={popUp?.ldapGroupMap?.isOpen}
@@ -139,6 +148,8 @@ export const LDAPGroupMapModal = ({ popUp, handlePopUpOpen, handlePopUpToggle }:
       }}
     >
       <ModalContent title="Manage LDAP Group Mappings">
+        {groups && groups.length > 0 && (
+          <>
             <h2 className="mb-4">New Group Mapping</h2>
             <form onSubmit={handleSubmit(onFormSubmit)} className="mb-8">
               <div className="flex">
@@ -179,7 +190,12 @@ export const LDAPGroupMapModal = ({ popUp, handlePopUpOpen, handlePopUpToggle }:
                             </SelectItem>
                           ))}
                         </Select>
-                    <Button className="ml-4" size="sm" type="submit" isLoading={createIsLoading}>
+                        <Button
+                          className="ml-4"
+                          size="sm"
+                          type="submit"
+                          isLoading={createIsLoading}
+                        >
                           Add mapping
                         </Button>
                       </div>
@@ -250,6 +266,23 @@ export const LDAPGroupMapModal = ({ popUp, handlePopUpOpen, handlePopUpToggle }:
                 });
               }}
             />
+          </>
+        )}
+        {groups && groups.length === 0 && (
+          <div>
+            <div>
+              You do not have any Infisical groups in your organization. Create one in order to
+              proceed.
+            </div>
+            <Button
+              className="mt-4"
+              size="sm"
+              onClick={() => router.push(`/org/${currentOrg?.id}/members`)}
+            >
+              Create
+            </Button>
+          </div>
+        )}
       </ModalContent>
     </Modal>
   );