Update org settings > general tab ui

backend/src/ee/routes/v1/ldap-router.ts

@@ -164,15 +164,17 @@ export const registerLdapRouter = async (server: FastifyZodProvider) => {
     method: "PATCH",
     onRequest: verifyAuth([AuthMode.JWT]),
     schema: {
-      body: z.object({
+      body: z
-        organizationId: z.string().trim(),
+        .object({
-        isActive: z.boolean().optional(),
+          isActive: z.boolean(),
-        url: z.string().trim().optional(),
+          url: z.string().trim(),
-        bindDN: z.string().trim().optional(),
+          bindDN: z.string().trim(),
-        bindPass: z.string().trim().optional(),
+          bindPass: z.string().trim(),
-        searchBase: z.string().trim().optional(),
+          searchBase: z.string().trim(),
-        caCert: z.string().trim().optional()
+          caCert: z.string().trim()
-      }),
+        })
+        .partial()
+        .merge(z.object({ organizationId: z.string() })),
       response: {
         200: LdapConfigsSchema
       }

backend/src/ee/services/ldap-config/ldap-config-service.ts

@@ -180,21 +180,21 @@ export const ldapConfigServiceFactory = ({
       keyEncoding: orgBot.symmetricKeyKeyEncoding as SecretKeyEncoding
     });
 
-    if (bindDN) {
+    if (bindDN !== undefined) {
       const { ciphertext: encryptedBindDN, iv: bindDNIV, tag: bindDNTag } = encryptSymmetric(bindDN, key);
       updateQuery.encryptedBindDN = encryptedBindDN;
       updateQuery.bindDNIV = bindDNIV;
       updateQuery.bindDNTag = bindDNTag;
     }
 
-    if (bindPass) {
+    if (bindPass !== undefined) {
       const { ciphertext: encryptedBindPass, iv: bindPassIV, tag: bindPassTag } = encryptSymmetric(bindPass, key);
       updateQuery.encryptedBindPass = encryptedBindPass;
       updateQuery.bindPassIV = bindPassIV;
       updateQuery.bindPassTag = bindPassTag;
     }
 
-    if (caCert) {
+    if (caCert !== undefined) {
       const { ciphertext: encryptedCACert, iv: caCertIV, tag: caCertTag } = encryptSymmetric(caCert, key);
       updateQuery.encryptedCACert = encryptedCACert;
       updateQuery.caCertIV = caCertIV;

backend/src/ee/services/license/__mocks__/licence-fns.ts

@@ -17,9 +17,9 @@ export const getDefaultOnPremFeatures = () => {
     customAlerts: false,
     auditLogs: false,
     auditLogsRetentionDays: 0,
-    samlSSO: true,
+    samlSSO: false,
-    scim: true,
+    scim: false,
-    ldap: true,
+    ldap: false,
     status: null,
     trial_end: null,
     has_used_trial: true,

backend/src/ee/services/license/licence-fns.ts

@@ -23,9 +23,9 @@ export const getDefaultOnPremFeatures = (): TFeatureSet => ({
   customAlerts: false,
   auditLogs: false,
   auditLogsRetentionDays: 0,
-  samlSSO: true,
+  samlSSO: false,
-  scim: true,
+  scim: false,
-  ldap: true,
+  ldap: false,
   status: null,
   trial_end: null,
   has_used_trial: true,

backend/src/ee/services/license/license-types.ts

@@ -24,9 +24,9 @@ export type TFeatureSet = {
   customAlerts: false;
   auditLogs: false;
   auditLogsRetentionDays: 0;
-  samlSSO: true;
+  samlSSO: false;
-  scim: true;
+  scim: false;
-  ldap: true;
+  ldap: false;
   status: null;
   trial_end: null;
   has_used_trial: true;

backend/src/ee/services/saml-config/saml-config-service.ts

@@ -172,7 +172,7 @@ export const samlConfigServiceFactory = ({
       keyEncoding: orgBot.symmetricKeyKeyEncoding as SecretKeyEncoding
     });
 
-    if (entryPoint) {
+    if (entryPoint !== undefined) {
       const {
         ciphertext: encryptedEntryPoint,
         iv: entryPointIV,
@@ -182,18 +182,19 @@ export const samlConfigServiceFactory = ({
       updateQuery.entryPointIV = entryPointIV;
       updateQuery.entryPointTag = entryPointTag;
     }
-    if (issuer) {
+    if (issuer !== undefined) {
       const { ciphertext: encryptedIssuer, iv: issuerIV, tag: issuerTag } = encryptSymmetric(issuer, key);
       updateQuery.encryptedIssuer = encryptedIssuer;
       updateQuery.issuerIV = issuerIV;
       updateQuery.issuerTag = issuerTag;
     }
-    if (cert) {
+    if (cert !== undefined) {
       const { ciphertext: encryptedCert, iv: certIV, tag: certTag } = encryptSymmetric(cert, key);
       updateQuery.encryptedCert = encryptedCert;
       updateQuery.certIV = certIV;
       updateQuery.certTag = certTag;
     }
+
     const [ssoConfig] = await samlConfigDAL.update({ orgId }, updateQuery);
     await orgDAL.updateById(orgId, { authEnforced: false, scimEnabled: false });
 

docs/mint.json

@@ -158,14 +158,6 @@
             "documentation/platform/ldap/general"
           ]
         },
-        {
-          "group": "LDAP",
-          "pages": [
-            "documentation/platform/ldap/overview",
-            "documentation/platform/ldap/jumpcloud",
-            "documentation/platform/ldap/general"
-          ]
-        },
         {
           "group": "SCIM",
           "pages": [

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

@@ -21,10 +21,10 @@ import {
 import { UsePopUpState } from "@app/hooks/usePopUp";
 
 const LDAPFormSchema = z.object({
-    url: z.string().min(1, "URL is requiredx"),
+    url: z.string().default(""),
-    bindDN: z.string().min(1, "Bind DN is requiredx"),
+    bindDN: z.string().default(""),
-    bindPass: z.string().min(1, "Bind Pass is required"),
+    bindPass: z.string().default(""),
-    searchBase: z.string().min(1, "Search Base is required"),
+    searchBase: z.string().default(""),
     caCert: z.string().optional()
 });
 
@@ -122,7 +122,7 @@ export const LDAPModal = ({
                 reset();
             }}
         >
-            <ModalContent title="Add LDAP">
+            <ModalContent title="Manage LDAP configuration">
                 <form onSubmit={handleSubmit(onSSOModalSubmit)}>
                     <Controller
                             control={control}

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

@@ -60,7 +60,7 @@ export const OrgGeneralAuthSection = () => {
 
     return (
         <>
-            <div className="py-4">
+            {/* <div className="py-4">
                 <div className="mb-2 flex justify-between">
                     <h3 className="text-md text-mineshaft-100">Allow users to send invites</h3>
                     <OrgPermissionCan I={OrgPermissionActions.Edit} a={OrgPermissionSubjects.Sso}>
@@ -75,7 +75,7 @@ export const OrgGeneralAuthSection = () => {
                     </OrgPermissionCan>
                 </div>
                 <p className="text-sm text-mineshaft-300">Allow members to invite new users to this organization</p>
-            </div>
+            </div> */}
             <div className="py-4">
                 <div className="mb-2 flex justify-between"> 
                     <h3 className="text-md text-mineshaft-100">Enforce SAML SSO</h3>

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

@@ -104,24 +104,26 @@ export const OrgLDAPSection = (): JSX.Element => {
         </div>
         <p className="text-sm text-mineshaft-300">Manage LDAP authentication configuration</p>
       </div>
-      <div className="py-4">
+      {data && (
-        <div className="mb-2 flex items-center justify-between">
+        <div className="py-4">
-          <h2 className="text-md text-mineshaft-100">Enable LDAP</h2>
+          <div className="mb-2 flex items-center justify-between">
-          <OrgPermissionCan I={OrgPermissionActions.Edit} a={OrgPermissionSubjects.Ldap}>
+            <h2 className="text-md text-mineshaft-100">Enable LDAP</h2>
-              {(isAllowed) => (
+            <OrgPermissionCan I={OrgPermissionActions.Edit} a={OrgPermissionSubjects.Ldap}>
-                <Switch
+                {(isAllowed) => (
-                  id="enable-saml-sso"
+                  <Switch
-                  onCheckedChange={(value) => handleLDAPToggle(value)}
+                    id="enable-saml-sso"
-                  isChecked={data ? data.isActive : false}
+                    onCheckedChange={(value) => handleLDAPToggle(value)}
-                  isDisabled={!isAllowed}
+                    isChecked={data ? data.isActive : false}
-                >
+                    isDisabled={!isAllowed}
-                  Enable
+                  >
-                </Switch>
+                    Enable
-              )}
+                  </Switch>
-            </OrgPermissionCan>
+                )}
+              </OrgPermissionCan>
+          </div>
+          <p className="text-sm text-mineshaft-300">Allow members to authenticate into Infisical with LDAP</p>
         </div>
-        <p className="text-sm text-mineshaft-300">Allow members to authenticate into Infisical with LDAP</p>
+      )}
-      </div>
         <LDAPModal
           popUp={popUp}
           handlePopUpClose={handlePopUpClose}

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

@@ -1,7 +1,7 @@
 import { useEffect } from "react";
 import { Controller, useForm } from "react-hook-form";
-import { yupResolver } from "@hookform/resolvers/yup";
+import { zodResolver } from "@hookform/resolvers/zod";
-import * as yup from "yup";
+import { z } from "zod";
 
 import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
 import {
@@ -32,16 +32,16 @@ const ssoAuthProviders = [
   { label: "Google SAML", value: AuthProvider.GOOGLE_SAML }
 ];
 
-const schema = yup
+const schema = z
   .object({
-    authProvider: yup.string().required("SSO Type is required"),
+    authProvider: z.string().min(1, "SSO Type is required"),
-    entryPoint: yup.string().required("IdP entrypoint is required"),
+    entryPoint: z.string().default(""),
-    issuer: yup.string().required("Issuer string is required"),
+    issuer: z.string().default(""),
-    cert: yup.string().required("IdP's public signing certificate is required")
+    cert: z.string().default("")
   })
   .required();
 
-export type AddSSOFormData = yup.InferType<typeof schema>;
+export type AddSSOFormData = z.infer<typeof schema>;
 
 type Props = {
   popUp: UsePopUpState<["addSSO"]>;
@@ -60,7 +60,7 @@ export const SSOModal = ({ popUp, handlePopUpClose, handlePopUpToggle }: Props)
     defaultValues: {
       authProvider: AuthProvider.OKTA_SAML
     },
-    resolver: yupResolver(schema)
+    resolver: zodResolver(schema)
   });
 
   useEffect(() => {
@@ -173,7 +173,7 @@ export const SSOModal = ({ popUp, handlePopUpClose, handlePopUpToggle }: Props)
         reset();
       }}
     >
-      <ModalContent title="Add SSO">
+      <ModalContent title="Manage SAML configuration">
         <form onSubmit={handleSubmit(onSSOModalSubmit)}>
           <Controller
             control={control}

frontend/src/views/Settings/OrgSettingsPage/components/OrgDeleteSection/OrgDeleteSection.tsx

@@ -45,18 +45,21 @@ export const OrgDeleteSection = () => {
   };
 
   return (
-    <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+    <>
-      <p className="mb-4 text-xl font-semibold text-mineshaft-100">Danger Zone</p>
+      <hr className="border-mineshaft-600" />
-      <Button
+      <div className="py-4">
-        isLoading={isLoading}
+        <p className="mb-4 text-md text-mineshaft-100">Danger Zone</p>
-        colorSchema="danger"
+        <Button
-        variant="outline_bg"
+          isLoading={isLoading}
-        type="submit"
+          colorSchema="danger"
-        onClick={() => handlePopUpOpen("deleteOrg")}
+          variant="outline_bg"
-        isDisabled={Boolean(membership && membership.role !== "admin")}
+          type="submit"
-      >
+          onClick={() => handlePopUpOpen("deleteOrg")}
-        {`Delete ${currentOrg?.name}`}
+          isDisabled={Boolean(membership && membership.role !== "admin")}
-      </Button>
+        >
+          {`Delete ${currentOrg?.name}`}
+        </Button>
+      </div>
       <DeleteActionModal
         isOpen={popUp.deleteOrg.isOpen}
         title="Are you sure want to delete this organization?"
@@ -65,6 +68,6 @@ export const OrgDeleteSection = () => {
         deleteKey="confirm"
         onDeleteApproved={handleDeleteOrgSubmit}
       />
-    </div>
+    </>
   );
 };

frontend/src/views/Settings/OrgSettingsPage/components/OrgGeneralTab/OrgGeneralTab.tsx

@@ -3,15 +3,12 @@ import { useOrgPermission } from "@app/context";
 import { OrgDeleteSection } from "../OrgDeleteSection";
 import { OrgIncidentContactsSection } from "../OrgIncidentContactsSection";
 import { OrgNameChangeSection } from "../OrgNameChangeSection";
-import { OrgSlugChangeSection } from "../OrgSlugChangeSection";
 
 export const OrgGeneralTab = () => {
   const { membership } = useOrgPermission();
-
   return (
-    <div>
+    <div className="rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-6">
       <OrgNameChangeSection />
-      <OrgSlugChangeSection />
       <OrgIncidentContactsSection />
       {membership && membership.role === "admin" && <OrgDeleteSection />}
     </div>

frontend/src/views/Settings/OrgSettingsPage/components/OrgIncidentContactsSection/OrgIncidentContactsSection.tsx

@@ -18,9 +18,10 @@ export const OrgIncidentContactsSection = () => {
   const { permission } = useOrgPermission();
 
   return (
-    <div className="p-4 bg-mineshaft-900 mb-6 rounded-lg border border-mineshaft-600">
+    <>
-      <div className="flex justify-between mb-4">
+      <hr className="border-mineshaft-600" />
-        <p className="min-w-max text-xl font-semibold">{t("section.incident.incident-contacts")}</p>
+      <div className="flex items-center justify-between pt-4">
+        <p className="text-md text-mineshaft-100">{t("section.incident.incident-contacts")}</p>
         <OrgPermissionCan I={OrgPermissionActions.Create} a={OrgPermissionSubjects.IncidentAccount}>
           {(isAllowed) => (
             <Button
@@ -35,16 +36,18 @@ export const OrgIncidentContactsSection = () => {
           )}
         </OrgPermissionCan>
       </div>
-      {permission.can(OrgPermissionActions.Read, OrgPermissionSubjects.IncidentAccount) ? (
+      <div className="py-4">
-        <OrgIncidentContactsTable />
+        {permission.can(OrgPermissionActions.Read, OrgPermissionSubjects.IncidentAccount) ? (
-      ) : (
+          <OrgIncidentContactsTable />
-        <PermissionDeniedBanner />
+        ) : (
-      )}
+          <PermissionDeniedBanner />
+        )}
+      </div>
       <AddOrgIncidentContactModal
         popUp={popUp}
         handlePopUpClose={handlePopUpClose}
         handlePopUpToggle={handlePopUpToggle}
       />
-    </div>
+    </>
   );
 };

frontend/src/views/Settings/OrgSettingsPage/components/OrgNameChangeSection/OrgNameChangeSection.tsx

@@ -10,7 +10,12 @@ import { OrgPermissionActions, OrgPermissionSubjects, useOrganization } from "@a
 import { useUpdateOrg } from "@app/hooks/api";
 
 const formSchema = yup.object({
-  name: yup.string().required().label("Project Name")
+  name: yup.string().required().label("Organization Name"),
+  slug: yup
+      .string()
+      .matches(/^[a-zA-Z0-9-]+$/, "Name must only contain alphanumeric characters or hyphens")
+      .required()
+      .label("Organization Slug")
 });
 
 type FormData = yup.InferType<typeof formSchema>;
@@ -25,40 +30,44 @@ export const OrgNameChangeSection = (): JSX.Element => {
 
   useEffect(() => {
     if (currentOrg) {
-      reset({ name: currentOrg.name });
+      reset({ 
+        name: currentOrg.name,
+        slug: currentOrg.slug
+      });
     }
   }, [currentOrg]);
 
-  const onFormSubmit = async ({ name }: FormData) => {
+  const onFormSubmit = async ({ name, slug }: FormData) => {
     try {
       if (!currentOrg?.id) return;
-      if (name === "") return;
 
-      await mutateAsync({ orgId: currentOrg?.id, name });
+      await mutateAsync({ 
+        orgId: currentOrg?.id, 
+        name,
+        slug
+      });
+      
       createNotification({
-        text: "Successfully renamed organization",
+        text: "Successfully updated organization details",
         type: "success"
       });
     } catch (error) {
       console.error(error);
       createNotification({
-        text: "Failed to rename organization",
+        text: "Failed to update organization details",
         type: "error"
       });
     }
   };
 
   return (
-    <form
+    <form onSubmit={handleSubmit(onFormSubmit)} className="py-4">
-      onSubmit={handleSubmit(onFormSubmit)}
+      <div className="">
-      className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4"
+        <h2 className="mb-2 text-md text-mineshaft-100">Organization Name</h2>
-    >
-      <p className="mb-4 text-xl font-semibold text-mineshaft-100">Organization Name</p>
-      <div className="mb-2 max-w-md">
         <Controller
           defaultValue=""
           render={({ field, fieldState: { error } }) => (
-            <FormControl isError={Boolean(error)} errorText={error?.message}>
+            <FormControl isError={Boolean(error)} errorText={error?.message} className="max-w-md">
               <Input placeholder="Acme Corp" {...field} />
             </FormControl>
           )}
@@ -66,6 +75,19 @@ export const OrgNameChangeSection = (): JSX.Element => {
           name="name"
         />
       </div>
+      <div className="py-4">
+        <h2 className="mb-2 text-md text-mineshaft-100">Organization Slug</h2>
+        <Controller
+          defaultValue=""
+          render={({ field, fieldState: { error } }) => (
+            <FormControl isError={Boolean(error)} errorText={error?.message} className="max-w-md">
+              <Input placeholder="acme" {...field} />
+            </FormControl>
+          )}
+          control={control}
+          name="slug"
+        />
+      </div>
       <OrgPermissionCan I={OrgPermissionActions.Edit} a={OrgPermissionSubjects.Settings}>
         {(isAllowed) => (
           <Button

frontend/src/views/Settings/OrgSettingsPage/components/OrgSlugChangeSection/OrgSlugChangeSection.tsx

@@ -1,88 +0,0 @@
-import { useEffect } from "react";
-import { Controller, useForm } from "react-hook-form";
-import { yupResolver } from "@hookform/resolvers/yup";
-import * as yup from "yup";
-
-import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
-import { OrgPermissionCan } from "@app/components/permissions";
-import { Button, FormControl, Input } from "@app/components/v2";
-import { OrgPermissionActions, OrgPermissionSubjects, useOrganization } from "@app/context";
-import { useUpdateOrg } from "@app/hooks/api";
-
-const formSchema = yup.object({
-    slug: yup
-        .string()
-        .matches(/^[a-zA-Z0-9-]+$/, "Name must only contain alphanumeric characters or hyphens")
-        .required()
-        .label("Project Slug")
-});
-
-type FormData = yup.InferType<typeof formSchema>;
-
-export const OrgSlugChangeSection = (): JSX.Element => {
-    const { currentOrg } = useOrganization();
-    const { createNotification } = useNotificationContext();
-    const { handleSubmit, control, reset } = useForm<FormData>({
-        resolver: yupResolver(formSchema)
-    });
-    const { mutateAsync, isLoading } = useUpdateOrg();
-
-    useEffect(() => {
-        if (currentOrg) {
-            reset({ slug: currentOrg.slug });
-        }
-    }, [currentOrg]);
-
-    const onFormSubmit = async ({ slug }: FormData) => {
-        try {
-            if (!currentOrg?.id) return;
-            if (slug === "") return;
-
-            await mutateAsync({ orgId: currentOrg?.id, slug });
-            createNotification({
-                text: "Successfully updated organization slug",
-                type: "success"
-            });
-        } catch (error) {
-            console.error(error);
-            createNotification({
-                text: "Failed to update organization slug",
-                type: "error"
-            });
-        }
-    };
-    
-    return (
-        <form
-            onSubmit={handleSubmit(onFormSubmit)}
-            className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4"
-        >
-            <p className="mb-4 text-xl font-semibold text-mineshaft-100">Organization Slug</p>
-            <div className="mb-2 max-w-md">
-                <Controller
-                    defaultValue=""
-                    render={({ field, fieldState: { error } }) => (
-                        <FormControl isError={Boolean(error)} errorText={error?.message}>
-                            <Input placeholder="acme" {...field} />
-                        </FormControl>
-                    )}
-                    control={control}
-                    name="slug"
-                />
-            </div>
-            <OrgPermissionCan I={OrgPermissionActions.Edit} a={OrgPermissionSubjects.Settings}>
-                {(isAllowed) => (
-                    <Button
-                        isLoading={isLoading}
-                        isDisabled={!isAllowed}
-                        colorSchema="primary"
-                        variant="outline_bg"
-                        type="submit"
-                    >
-                        Save
-                    </Button>
-                )}
-            </OrgPermissionCan>
-        </form>
-    );
-}

frontend/src/views/Settings/OrgSettingsPage/components/OrgSlugChangeSection/index.tsx

@@ -1 +0,0 @@
-export { OrgSlugChangeSection } from "./OrgSlugChangeSection";