Add Google SSO

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

@@ -1,15 +1,13 @@
 import { faPlus } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-
 import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
-import { Button , Switch } from "@app/components/v2";
-import { useOrganization } from "@app/context";
+import { Button, Switch, UpgradePlanModal } from "@app/components/v2";
+import { useOrganization, useSubscription } from "@app/context";
 import { 
     useGetSSOConfig,
     useUpdateSSOConfig
 } from "@app/hooks/api";
 import { usePopUp } from "@app/hooks/usePopUp";
-
 import { SSOModal } from "./SSOModal";
 
 const ssoAuthProviderMap: { [key: string]: string } = {
@@ -18,10 +16,12 @@ const ssoAuthProviderMap: { [key: string]: string } = {
 
 export const OrgSSOSection = (): JSX.Element => {
     const { currentOrg } = useOrganization();
+    const { subscription } = useSubscription();
     const { createNotification } = useNotificationContext();
     const { data, isLoading } = useGetSSOConfig(currentOrg?._id ?? "");
     const { mutateAsync } = useUpdateSSOConfig();
     const { popUp, handlePopUpOpen, handlePopUpClose, handlePopUpToggle } = usePopUp([
+        "upgradePlan",
         "addSSO"
     ] as const);
 
@@ -55,7 +55,13 @@ export const OrgSSOSection = (): JSX.Element => {
                 </h2>
                 {!isLoading && (
                     <Button
-                        onClick={() => handlePopUpOpen("addSSO")}
+                        onClick={() => {
+                            if (subscription?.samlSSO) {
+                                handlePopUpOpen("addSSO");
+                            } else {
+                                handlePopUpOpen("upgradePlan");
+                            }
+                        }}
                         colorSchema="secondary"
                         leftIcon={<FontAwesomeIcon icon={faPlus} />}
                     >
@@ -101,6 +107,11 @@ export const OrgSSOSection = (): JSX.Element => {
                 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>
     );
 };

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

@@ -1,15 +1,31 @@
 import { Fragment } from "react"
 import { Tab } from "@headlessui/react"
-
 import { OrgAuthTab } from "../OrgAuthTab";
 import { OrgGeneralTab } from "../OrgGeneralTab";
-
-const tabs = [
-    { name: "General", key: "tab-org-general" },
-    { name: "SAML SSO", key: "tab-org-saml" }
-];
+import { useUser, useOrganization } from "@app/context";
+import {
+    useGetOrgUsers
+} from "@app/hooks/api";
 
 export const OrgTabGroup = () => {
+    const { currentOrg } = useOrganization();
+    const { user } = useUser();
+    const { data } = useGetOrgUsers(currentOrg?._id ?? "");
+
+    const isRoleSufficient = data?.some((orgUser) => {
+        return orgUser.role !== 'member' && orgUser.user._id === user._id;
+    });
+
+    const tabs = [
+        { name: "General", key: "tab-org-general" },
+    ];
+        
+    if (isRoleSufficient) {
+        tabs.push(
+            { name: "SAML SSO", key: "tab-org-saml" }
+        );
+    }
+
     return (
         <Tab.Group>
             <Tab.List className="mb-6 border-b-2 border-mineshaft-800 w-full">
@@ -30,9 +46,11 @@ export const OrgTabGroup = () => {
                 <Tab.Panel>
                     <OrgGeneralTab />
                 </Tab.Panel>
-                <Tab.Panel>
-                    <OrgAuthTab />
-                </Tab.Panel>
+                {isRoleSufficient && (
+                    <Tab.Panel>
+                        <OrgAuthTab />
+                    </Tab.Panel>
+                )}
             </Tab.Panels>
         </Tab.Group>
     );