From a6d7d32156faa3f63bc1a85d994392793a2d58b5 Mon Sep 17 00:00:00 2001
From: Tuan Dang <dangtony98@gmail.com>
Date: Tue, 12 Mar 2024 09:37:28 -0700
Subject: [PATCH] Draft revamp org auth tab

---
 .../services/license/__mocks__/licence-fns.ts |  6 +-
 .../src/ee/services/license/licence-fns.ts    |  6 +-
 .../src/ee/services/license/license-types.ts  |  6 +-
 .../OrgSettingsPage/OrgSettingsPage.tsx       |  2 +-
 .../components/OrgAuthTab/OrgAuthTab.tsx      |  2 +-
 .../OrgAuthTab/OrgGeneralAuthSection.tsx      | 49 +++++++---
 .../components/OrgAuthTab/OrgLDAPSection.tsx  | 76 +++++++--------
 .../components/OrgAuthTab/OrgSCIMSection.tsx  | 60 ++++++------
 .../components/OrgAuthTab/OrgSSOSection.tsx   | 95 ++++++++++---------
 .../components/OrgTabGroup/OrgTabGroup.tsx    |  2 +-
 10 files changed, 165 insertions(+), 139 deletions(-)

diff --git a/backend/src/ee/services/license/__mocks__/licence-fns.ts b/backend/src/ee/services/license/__mocks__/licence-fns.ts
index 8f52939c5..0a466c57c 100644
--- a/backend/src/ee/services/license/__mocks__/licence-fns.ts
+++ b/backend/src/ee/services/license/__mocks__/licence-fns.ts
@@ -17,9 +17,9 @@ export const getDefaultOnPremFeatures = () => {
     customAlerts: false,
     auditLogs: false,
     auditLogsRetentionDays: 0,
-    samlSSO: false,
-    scim: false,
-    ldap: false,
+    samlSSO: true,
+    scim: true,
+    ldap: true,
     status: null,
     trial_end: null,
     has_used_trial: true,
diff --git a/backend/src/ee/services/license/licence-fns.ts b/backend/src/ee/services/license/licence-fns.ts
index 8dca96737..98f8c5f24 100644
--- a/backend/src/ee/services/license/licence-fns.ts
+++ b/backend/src/ee/services/license/licence-fns.ts
@@ -23,9 +23,9 @@ export const getDefaultOnPremFeatures = (): TFeatureSet => ({
   customAlerts: false,
   auditLogs: false,
   auditLogsRetentionDays: 0,
-  samlSSO: false,
-  scim: false,
-  ldap: false,
+  samlSSO: true,
+  scim: true,
+  ldap: true,
   status: null,
   trial_end: null,
   has_used_trial: true,
diff --git a/backend/src/ee/services/license/license-types.ts b/backend/src/ee/services/license/license-types.ts
index 80f422380..830cacf99 100644
--- a/backend/src/ee/services/license/license-types.ts
+++ b/backend/src/ee/services/license/license-types.ts
@@ -24,9 +24,9 @@ export type TFeatureSet = {
   customAlerts: false;
   auditLogs: false;
   auditLogsRetentionDays: 0;
-  samlSSO: false;
-  scim: false;
-  ldap: false;
+  samlSSO: true;
+  scim: true;
+  ldap: true;
   status: null;
   trial_end: null;
   has_used_trial: true;
diff --git a/frontend/src/views/Settings/OrgSettingsPage/OrgSettingsPage.tsx b/frontend/src/views/Settings/OrgSettingsPage/OrgSettingsPage.tsx
index 29e4eaff5..8c9a64222 100644
--- a/frontend/src/views/Settings/OrgSettingsPage/OrgSettingsPage.tsx
+++ b/frontend/src/views/Settings/OrgSettingsPage/OrgSettingsPage.tsx
@@ -7,7 +7,7 @@ export const OrgSettingsPage = () => {
 
   return (
     <div className="flex justify-center bg-bunker-800 text-white w-full py-6">
-		<div className="max-w-7xl w-full px-6">
+		<div className="max-w-4xl w-full px-6">
 			<div className="mb-4">
 				<p className="text-3xl font-semibold text-gray-200">{t("settings.org.title")}</p>
 			</div>
diff --git a/frontend/src/views/Settings/OrgSettingsPage/components/OrgAuthTab/OrgAuthTab.tsx b/frontend/src/views/Settings/OrgSettingsPage/components/OrgAuthTab/OrgAuthTab.tsx
index c4b03bae6..322798d16 100644
--- a/frontend/src/views/Settings/OrgSettingsPage/components/OrgAuthTab/OrgAuthTab.tsx
+++ b/frontend/src/views/Settings/OrgSettingsPage/components/OrgAuthTab/OrgAuthTab.tsx
@@ -9,7 +9,7 @@ import { OrgSSOSection } from "./OrgSSOSection";
 export const OrgAuthTab = withPermission(
   () => {
     return (
-      <div>
+      <div className="rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-6">
         <OrgGeneralAuthSection />
         <OrgSSOSection />
         <OrgLDAPSection />
diff --git a/frontend/src/views/Settings/OrgSettingsPage/components/OrgAuthTab/OrgGeneralAuthSection.tsx b/frontend/src/views/Settings/OrgSettingsPage/components/OrgAuthTab/OrgGeneralAuthSection.tsx
index ef81a6cab..57de34052 100644
--- a/frontend/src/views/Settings/OrgSettingsPage/components/OrgAuthTab/OrgGeneralAuthSection.tsx
+++ b/frontend/src/views/Settings/OrgSettingsPage/components/OrgAuthTab/OrgGeneralAuthSection.tsx
@@ -59,25 +59,44 @@ export const OrgGeneralAuthSection = () => {
     }
 
     return (
-        <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
-            <h2 className="flex-1 text-xl font-semibold text-white mb-8">Settings</h2>
-            <OrgPermissionCan I={OrgPermissionActions.Edit} a={OrgPermissionSubjects.Sso}>
-                {(isAllowed) => (
-                    <Switch
-                        id="enforce-org-auth"
-                        onCheckedChange={(value) => handleEnforceOrgAuthToggle(value)}
-                        isChecked={currentOrg?.authEnforced ?? false}
-                        isDisabled={!isAllowed}
-                    >
-                        Enforce SAML SSO
-                    </Switch>
-                )}
-            </OrgPermissionCan>
+        <>
+            <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}>
+                        {(isAllowed) => (
+                            <Switch
+                                id="allow-org-invites"
+                                onCheckedChange={(value) => handleEnforceOrgAuthToggle(value)}
+                                isChecked={currentOrg?.authEnforced ?? false}
+                                isDisabled={!isAllowed}
+                            />
+                        )}
+                    </OrgPermissionCan>
+                </div>
+                <p className="text-sm text-mineshaft-300">Allow members to invite new users to this organization</p>
+            </div>
+            <div className="py-4">
+                <div className="mb-2 flex justify-between"> 
+                    <h3 className="text-md text-mineshaft-100">Enforce SAML SSO</h3>
+                    <OrgPermissionCan I={OrgPermissionActions.Edit} a={OrgPermissionSubjects.Sso}>
+                        {(isAllowed) => (
+                            <Switch
+                                id="enforce-org-auth"
+                                onCheckedChange={(value) => handleEnforceOrgAuthToggle(value)}
+                                isChecked={currentOrg?.authEnforced ?? false}
+                                isDisabled={!isAllowed}
+                            />
+                        )}
+                    </OrgPermissionCan>
+                </div>
+                <p className="text-sm text-mineshaft-300">Enforce members to authenticate via SAML to access this organization</p>
+            </div>
             <UpgradePlanModal
                 isOpen={popUp.upgradePlan.isOpen}
                 onOpenChange={(isOpen) => handlePopUpToggle("upgradePlan", isOpen)}
                 text="You can enforce SAML SSO if you switch to Infisical's Pro plan."
             />
-        </div>
+        </>
     );
 }
\ No newline at end of file
diff --git a/frontend/src/views/Settings/OrgSettingsPage/components/OrgAuthTab/OrgLDAPSection.tsx b/frontend/src/views/Settings/OrgSettingsPage/components/OrgAuthTab/OrgLDAPSection.tsx
index c1ac93db8..b7f957698 100644
--- a/frontend/src/views/Settings/OrgSettingsPage/components/OrgAuthTab/OrgLDAPSection.tsx
+++ b/frontend/src/views/Settings/OrgSettingsPage/components/OrgAuthTab/OrgLDAPSection.tsx
@@ -1,6 +1,3 @@
-import { faPlus } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-
 import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
 import { OrgPermissionCan } from "@app/components/permissions";
 import {
@@ -27,7 +24,7 @@ export const OrgLDAPSection = (): JSX.Element => {
   const { currentOrg } = useOrganization();
   const { subscription } = useSubscription();
   const { createNotification } = useNotificationContext();
-  const { data, isLoading } = useGetLDAPConfig(currentOrg?.id ?? "");
+  const { data } = useGetLDAPConfig(currentOrg?.id ?? "");
   const { mutateAsync } = useUpdateLDAPConfig();
   const { popUp, handlePopUpOpen, handlePopUpClose, handlePopUpToggle } = usePopUp([
     "addLDAP",
@@ -88,50 +85,53 @@ export const OrgLDAPSection = (): JSX.Element => {
   };
 
   return (
-    <div className="p-4 bg-mineshaft-900 mb-6 rounded-lg border border-mineshaft-600">
-      <div className="flex items-center mb-8">
-        <h2 className="text-xl font-semibold flex-1 text-white">LDAP</h2>
-        {!isLoading && (
+    <>
+      <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>
           <OrgPermissionCan I={OrgPermissionActions.Create} a={OrgPermissionSubjects.Ldap}>
             {(isAllowed) => (
               <Button
                 onClick={addLDAPBtnClick}
                 colorSchema="secondary"
                 isDisabled={!isAllowed}
-                leftIcon={<FontAwesomeIcon icon={faPlus} />}
               >
-                Configure
+                Manage
               </Button>
             )}
           </OrgPermissionCan>
-        )}
-      </div>
-      {data && (
-        <div className="mb-4">
-          <OrgPermissionCan I={OrgPermissionActions.Edit} a={OrgPermissionSubjects.Ldap}>
-            {(isAllowed) => (
-              <Switch
-                id="enable-saml-sso"
-                onCheckedChange={(value) => handleLDAPToggle(value)}
-                isChecked={data ? data.isActive : false}
-                isDisabled={!isAllowed}
-              >
-                Enable
-              </Switch>
-            )}
-          </OrgPermissionCan>
         </div>
-      )}
-      <LDAPModal
-        popUp={popUp}
-        handlePopUpClose={handlePopUpClose}
-        handlePopUpToggle={handlePopUpToggle}
-      />
-      <UpgradePlanModal
-          isOpen={popUp.upgradePlan.isOpen}
-          onOpenChange={(isOpen) => handlePopUpToggle("upgradePlan", isOpen)}
-          text="You can use LDAP authentication if you switch to Infisical's Enterprise plan."
-      />
-    </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">Enable LDAP</h2>
+          <OrgPermissionCan I={OrgPermissionActions.Edit} a={OrgPermissionSubjects.Ldap}>
+              {(isAllowed) => (
+                <Switch
+                  id="enable-saml-sso"
+                  onCheckedChange={(value) => handleLDAPToggle(value)}
+                  isChecked={data ? data.isActive : false}
+                  isDisabled={!isAllowed}
+                >
+                  Enable
+                </Switch>
+              )}
+            </OrgPermissionCan>
+        </div>
+        <p className="text-sm text-mineshaft-300">Allow members to authenticate into Infisical with LDAP</p>
+      </div>
+        <LDAPModal
+          popUp={popUp}
+          handlePopUpClose={handlePopUpClose}
+          handlePopUpToggle={handlePopUpToggle}
+        />
+        <UpgradePlanModal
+            isOpen={popUp.upgradePlan.isOpen}
+            onOpenChange={(isOpen) => handlePopUpToggle("upgradePlan", isOpen)}
+            text="You can use LDAP authentication if you switch to Infisical's Enterprise plan."
+        />
+    </>
   );
 };
\ No newline at end of file
diff --git a/frontend/src/views/Settings/OrgSettingsPage/components/OrgAuthTab/OrgSCIMSection.tsx b/frontend/src/views/Settings/OrgSettingsPage/components/OrgAuthTab/OrgSCIMSection.tsx
index bb1f4ff94..f599bc07a 100644
--- a/frontend/src/views/Settings/OrgSettingsPage/components/OrgAuthTab/OrgSCIMSection.tsx
+++ b/frontend/src/views/Settings/OrgSettingsPage/components/OrgAuthTab/OrgSCIMSection.tsx
@@ -1,6 +1,3 @@
-import { faPlus } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-
 import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
 import { OrgPermissionCan } from "@app/components/permissions";
 import { 
@@ -64,40 +61,47 @@ export const OrgScimSection = () => {
     }
     
     return (
-        <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
-            <div className="mb-8 flex items-center">
-                <h2 className="flex-1 text-xl font-semibold text-white">SCIM</h2>
-                <OrgPermissionCan I={OrgPermissionActions.Read} a={OrgPermissionSubjects.Scim}>
+        <>
+            <hr className="border-mineshaft-600" />
+            <div className="py-4">
+                <div className="mb-2 flex justify-between items-center">
+                    <h2 className="text-md text-mineshaft-100">SCIM</h2>
+                    <OrgPermissionCan I={OrgPermissionActions.Read} a={OrgPermissionSubjects.Scim}>
                     {(isAllowed) => (
                         <Button
                             onClick={addScimTokenBtnClick}
                             colorSchema="secondary"
                             isDisabled={!isAllowed}
-                            leftIcon={<FontAwesomeIcon icon={faPlus} />}
                         >
-                            Configure
+                            Manage
                         </Button>
                     )}
                 </OrgPermissionCan>
+                </div>
+                <p className="text-sm text-mineshaft-300">Manage SCIM configuration</p>
+            </div>
+            <div className="py-4">
+                <div className="mb-2 flex justify-between items-center">
+                    <h2 className="text-md text-mineshaft-100">Enable SCIM</h2>
+                    <OrgPermissionCan I={OrgPermissionActions.Edit} a={OrgPermissionSubjects.Scim}>
+                        {(isAllowed) => (
+                            <Switch
+                                id="enable-scim"
+                                onCheckedChange={(value) => {
+                                    if (subscription?.scim) {
+                                        handleEnableSCIMToggle(value)
+                                    } else {
+                                        handlePopUpOpen("upgradePlan");
+                                    }
+                                }}
+                                isChecked={currentOrg?.scimEnabled ?? false}
+                                isDisabled={!isAllowed}
+                             />
+                        )}
+                    </OrgPermissionCan>
+                </div>
+                <p className="text-sm text-mineshaft-300">Allow member provisioning/deprovisioning with SCIM</p>
             </div>
-            <OrgPermissionCan I={OrgPermissionActions.Edit} a={OrgPermissionSubjects.Scim}>
-                {(isAllowed) => (
-                    <Switch
-                        id="enable-scim"
-                        onCheckedChange={(value) => {
-                            if (subscription?.scim) {
-                                handleEnableSCIMToggle(value)
-                            } else {
-                                handlePopUpOpen("upgradePlan");
-                            }
-                        }}
-                        isChecked={currentOrg?.scimEnabled ?? false}
-                        isDisabled={!isAllowed}
-                    >
-                        Enable
-                    </Switch>
-                )}
-            </OrgPermissionCan>
             <ScimTokenModal 
                 popUp={popUp}
                 handlePopUpOpen={handlePopUpOpen}
@@ -108,6 +112,6 @@ export const OrgScimSection = () => {
                 onOpenChange={(isOpen) => handlePopUpToggle("upgradePlan", isOpen)}
                 text="You can use SCIM Provisioning if you switch to Infisical's Enterprise plan."
             />
-        </div>
+        </>
     );
 }
\ No newline at end of file
diff --git a/frontend/src/views/Settings/OrgSettingsPage/components/OrgAuthTab/OrgSSOSection.tsx b/frontend/src/views/Settings/OrgSettingsPage/components/OrgAuthTab/OrgSSOSection.tsx
index 9f03bdc7f..240a1db2e 100644
--- a/frontend/src/views/Settings/OrgSettingsPage/components/OrgAuthTab/OrgSSOSection.tsx
+++ b/frontend/src/views/Settings/OrgSettingsPage/components/OrgAuthTab/OrgSSOSection.tsx
@@ -1,6 +1,3 @@
-import { faPlus } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-
 import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
 import { OrgPermissionCan } from "@app/components/permissions";
 import { Button, Switch, UpgradePlanModal } from "@app/components/v2";
@@ -81,49 +78,55 @@ export const OrgSSOSection = (): JSX.Element => {
   };
 
   return (
-    <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
-      <div className="mb-8 flex items-center">
-        <h2 className="flex-1 text-xl font-semibold text-white">SAML</h2>
-        {!isLoading && (
-          <OrgPermissionCan I={OrgPermissionActions.Create} a={OrgPermissionSubjects.Sso}>
-            {(isAllowed) => (
-              <Button
-                onClick={addSSOBtnClick}
-                colorSchema="secondary"
-                isDisabled={!isAllowed}
-                leftIcon={<FontAwesomeIcon icon={faPlus} />}
-              >
-                Configure
-              </Button>
-            )}
-          </OrgPermissionCan>
-        )}
-      </div>
-      {/* {data && ( */}
-        <div className="mb-4">
-          <OrgPermissionCan I={OrgPermissionActions.Edit} a={OrgPermissionSubjects.Sso}>
-            {(isAllowed) => (
-              <Switch
-                id="enable-saml-sso"
-                onCheckedChange={(value) => handleSamlSSOToggle(value)}
-                isChecked={data ? data.isActive : false}
-                isDisabled={!isAllowed}
-              >
-                Enable
-              </Switch>
-            )}
-          </OrgPermissionCan>
+    <>
+      <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">SAML</h2>
+          {!isLoading && (
+            <OrgPermissionCan I={OrgPermissionActions.Create} a={OrgPermissionSubjects.Sso}>
+              {(isAllowed) => (
+                <Button
+                  onClick={addSSOBtnClick}
+                  colorSchema="secondary"
+                  isDisabled={!isAllowed}
+                >
+                  Manage
+                </Button>
+              )}
+            </OrgPermissionCan>
+          )}
         </div>
-      <SSOModal
-        popUp={popUp}
-        handlePopUpClose={handlePopUpClose}
-        handlePopUpToggle={handlePopUpToggle}
-      />
-      <UpgradePlanModal
-        isOpen={popUp.upgradePlan.isOpen}
-        onOpenChange={(isOpen) => handlePopUpToggle("upgradePlan", isOpen)}
-        text="You can use SAML SSO if you switch to Infisical's Pro plan."
-      />
-    </div>
+        <p className="text-sm text-mineshaft-300">Manage SAML authentication configuration</p>
+        </div>
+        <div className="py-4">
+          <div className="mb-2 flex items-center justify-between">
+            <h2 className="text-md text-mineshaft-100">Enable SAML</h2>
+            {!isLoading && (
+              <OrgPermissionCan I={OrgPermissionActions.Edit} a={OrgPermissionSubjects.Sso}>
+              {(isAllowed) => (
+                <Switch
+                  id="enable-saml-sso"
+                  onCheckedChange={(value) => handleSamlSSOToggle(value)}
+                  isChecked={data ? data.isActive : false}
+                  isDisabled={!isAllowed}
+                 />
+              )}
+            </OrgPermissionCan>
+            )}
+          </div>
+          <p className="text-sm text-mineshaft-300">Allow members to authenticate into Infisical with SAML</p>
+        </div>
+        <SSOModal
+          popUp={popUp}
+          handlePopUpClose={handlePopUpClose}
+          handlePopUpToggle={handlePopUpToggle}
+        />
+        <UpgradePlanModal
+          isOpen={popUp.upgradePlan.isOpen}
+          onOpenChange={(isOpen) => handlePopUpToggle("upgradePlan", isOpen)}
+          text="You can use SAML SSO if you switch to Infisical's Pro plan."
+        />
+    </>
   );
 };
diff --git a/frontend/src/views/Settings/OrgSettingsPage/components/OrgTabGroup/OrgTabGroup.tsx b/frontend/src/views/Settings/OrgSettingsPage/components/OrgTabGroup/OrgTabGroup.tsx
index cacbf1b59..d4c01d0ef 100644
--- a/frontend/src/views/Settings/OrgSettingsPage/components/OrgTabGroup/OrgTabGroup.tsx
+++ b/frontend/src/views/Settings/OrgSettingsPage/components/OrgTabGroup/OrgTabGroup.tsx
@@ -6,7 +6,7 @@ import { OrgGeneralTab } from "../OrgGeneralTab";
 
 const tabs = [
   { name: "General", key: "tab-org-general" },
-  { name: "Authentication", key: "tab-org-auth" }
+  { name: "Security", key: "tab-org-security" }
 ];
 export const OrgTabGroup = () => {
   return (