Render route in OrganizationProfile

Author: LauraBeatris

packages/localizations/src/en-US.ts

@@ -768,6 +768,7 @@ export const enUS: LocalizationResource = {
     navbar: {
       apiKeys: 'API keys',
       billing: 'Billing',
+      selfServeSso: 'Self-Serve SSO',
       description: 'Manage your organization.',
       general: 'General',
       members: 'Members',

packages/shared/src/internal/clerk-js/componentGuards.ts

@@ -18,6 +18,7 @@ export const noOrganizationExists: ComponentGuard = clerk => {
   return !clerk.organization;
 };
 
+// TODO -> Update with per org check
 export const disabledOrganizationsFeature: ComponentGuard = (_, environment) => {
   return !environment?.organizationSettings.enabled;
 };

packages/shared/src/types/localization.ts

@@ -1021,6 +1021,7 @@ export type __internal_LocalizationResource = {
       members: LocalizationValue;
       billing: LocalizationValue;
       apiKeys: LocalizationValue;
+      selfServeSso: LocalizationValue;
     };
     badge__unverified: LocalizationValue;
     badge__automaticInvitation: LocalizationValue;

packages/ui/src/components/OrganizationProfile/OrganizationProfileRoutes.tsx

@@ -37,14 +37,22 @@ const OrganizationPaymentAttemptPage = lazy(() =>
   })),
 );
 
+const OrganizationSelfServeSsoPage = lazy(() =>
+  import(/* webpackChunkName: "op-self-serve-sso-page"*/ './OrganizationSelfServeSsoPage').then(module => ({
+    default: module.OrganizationSelfServeSsoPage,
+  })),
+);
+
 export const OrganizationProfileRoutes = () => {
   const {
     pages,
     isMembersPageRoot,
     isGeneralPageRoot,
     isBillingPageRoot,
     isAPIKeysPageRoot,
+    isSelfServeSsoPageRoot,
     shouldShowBilling,
+    shouldShowSelfServeSso,
     apiKeysProps,
   } = useOrganizationProfileContext();
 
@@ -142,6 +150,15 @@ export const OrganizationProfileRoutes = () => {
             </Route>
           </Protect>
         )}
+        {shouldShowSelfServeSso ? (
+          <Route path={isSelfServeSsoPageRoot ? undefined : 'organization-self-serve-sso'}>
+            <Switch>
+              <Route index>
+                <OrganizationSelfServeSsoPage />
+              </Route>
+            </Switch>
+          </Route>
+        ) : null}
       </Route>
     </Switch>
   );

packages/ui/src/components/OrganizationProfile/OrganizationSelfServeSsoPage.tsx

@@ -0,0 +1,24 @@
+import { useOrganization } from '@clerk/shared/react';
+
+import { Col } from '@/ui/customizables';
+import { Header } from '@/ui/elements/Header';
+
+export const OrganizationSelfServeSsoPage = () => {
+  const { organization } = useOrganization();
+
+  if (!organization) {
+    // We should never reach this point, but we'll return null to make TS happy
+    return null;
+  }
+
+  return (
+    <Col gap={4}>
+      <Header.Root>
+        <Header.Title
+          title='Self-Serve SSO'
+          textVariant='h2'
+        />
+      </Header.Root>
+    </Col>
+  );
+};

packages/ui/src/components/OrganizationProfile/__tests__/OrganizationProfile.test.tsx

@@ -476,6 +476,68 @@ describe('OrganizationProfile', () => {
     });
   });
 
+  describe('Self-Serve SSO visibility', () => {
+    it('includes Self-Serve SSO when self-serve SSO is enabled in environment settings', async () => {
+      const { wrapper } = await createFixtures(f => {
+        f.withEnterpriseSso({ selfServeSso: true });
+        f.withOrganizations();
+        f.withUser({
+          email_addresses: ['test@clerk.com'],
+          organization_memberships: [
+            {
+              name: 'Org1',
+              permissions: ['org:sys_entconns:manage'],
+            },
+          ],
+        });
+      });
+
+      render(<OrganizationProfile />, { wrapper });
+      expect(await screen.findByText('Self-Serve SSO')).toBeDefined();
+    });
+
+    it('does not include Self-Serve SSO when self-serve SSO is disabled in environment settings', async () => {
+      const { wrapper } = await createFixtures(f => {
+        f.withEnterpriseSso({ selfServeSso: false });
+        f.withOrganizations();
+        f.withUser({
+          email_addresses: ['test@clerk.com'],
+          organization_memberships: [
+            {
+              name: 'Org1',
+              permissions: ['org:sys_entconns:manage'],
+            },
+          ],
+        });
+      });
+
+      const { queryByText } = render(<OrganizationProfile />, { wrapper });
+      await waitFor(() => expect(queryByText('Self-Serve SSO')).toBeNull());
+    });
+
+    // We keep showing the section but the internal page displays a warning for missing permission
+
+    it('includes Self-Serve SSO even when the user does not have the manage enterprise connections permission', async () => {
+      const { wrapper } = await createFixtures(f => {
+        f.withEnterpriseSso({ selfServeSso: true });
+        f.withOrganizations();
+        f.withUser({
+          email_addresses: ['test@clerk.com'],
+          organization_memberships: [
+            {
+              name: 'Org1',
+              permissions: [],
+            },
+          ],
+        });
+      });
+
+      // TODO -> Add assertions for page content warning
+      render(<OrganizationProfile />, { wrapper });
+      expect(await screen.findByText('Self-Serve SSO')).toBeDefined();
+    });
+  });
+
   it('removes member nav item if user is lacking permissions', async () => {
     const { wrapper } = await createFixtures(f => {
       f.withOrganizations();

packages/ui/src/constants.ts

@@ -12,6 +12,7 @@ export const ORGANIZATION_PROFILE_NAVBAR_ROUTE_ID = {
   MEMBERS: 'members',
   BILLING: 'billing',
   API_KEYS: 'apiKeys',
+  SELF_SERVE_SSO: 'selfServeSso',
 };
 
 export const USER_BUTTON_ITEM_ID = {

packages/ui/src/contexts/components/OrganizationProfile.ts

@@ -25,7 +25,9 @@ export type OrganizationProfileContextType = OrganizationProfileCtx & {
   isGeneralPageRoot: boolean;
   isBillingPageRoot: boolean;
   isAPIKeysPageRoot: boolean;
+  isSelfServeSsoPageRoot: boolean;
   shouldShowBilling: boolean;
+  shouldShowSelfServeSso: boolean;
 };
 
 export const OrganizationProfileContext = createContext<OrganizationProfileCtx | null>(null);
@@ -56,6 +58,9 @@ export const useOrganizationProfileContext = (): OrganizationProfileContextType
     // The C2 had a subscription in the past
     Boolean(statements.data.length > 0);
 
+  // TODO -> Check for org level as well
+  const shouldShowSelfServeSso = environment.userSettings.enterpriseSSO.self_serve_sso;
+
   const pages = useMemo(
     () => createOrganizationProfileCustomPages(customPages || [], clerk, shouldShowBilling, environment),
     [customPages, shouldShowBilling],
@@ -68,6 +73,7 @@ export const useOrganizationProfileContext = (): OrganizationProfileContextType
   const isGeneralPageRoot = pages.routes[0].id === ORGANIZATION_PROFILE_NAVBAR_ROUTE_ID.GENERAL;
   const isBillingPageRoot = pages.routes[0].id === ORGANIZATION_PROFILE_NAVBAR_ROUTE_ID.BILLING;
   const isAPIKeysPageRoot = pages.routes[0].id === ORGANIZATION_PROFILE_NAVBAR_ROUTE_ID.API_KEYS;
+  const isSelfServeSsoPageRoot = pages.routes[0].id === ORGANIZATION_PROFILE_NAVBAR_ROUTE_ID.SELF_SERVE_SSO;
   const navigateToGeneralPageRoot = () =>
     navigate(isGeneralPageRoot ? '../' : isMembersPageRoot ? './organization-general' : '../organization-general');
 
@@ -81,6 +87,8 @@ export const useOrganizationProfileContext = (): OrganizationProfileContextType
     isGeneralPageRoot,
     isBillingPageRoot,
     isAPIKeysPageRoot,
+    isSelfServeSsoPageRoot,
     shouldShowBilling,
+    shouldShowSelfServeSso,
   };
 };

packages/ui/src/utils/createCustomPages.tsx

@@ -1,6 +1,7 @@
 import {
   disabledOrganizationAPIKeysFeature,
   disabledOrganizationBillingFeature,
+  disabledSelfServeSSOFeature,
   disabledUserAPIKeysFeature,
   disabledUserBillingFeature,
 } from '@clerk/shared/internal/clerk-js/componentGuards';
@@ -9,7 +10,7 @@ import type { CustomPage, EnvironmentResource, LoadedClerk } from '@clerk/shared
 
 import { ORGANIZATION_PROFILE_NAVBAR_ROUTE_ID, USER_PROFILE_NAVBAR_ROUTE_ID } from '../constants';
 import type { NavbarRoute } from '../elements/Navbar';
-import { Code, CreditCard, Organization, TickShield, User, Users } from '../icons';
+import { Code, CreditCard, LinkIcon, Organization, TickShield, User, Users } from '../icons';
 import { localizationKeys } from '../localization';
 import { ExternalElementMounter } from './ExternalElementMounter';
 import { isDevelopmentSDK } from './runtimeEnvironment';
@@ -48,7 +49,15 @@ type GetDefaultRoutesReturnType = {
 
 type CreateCustomPagesParams = {
   customPages: CustomPage[];
-  getDefaultRoutes: ({ commerce, apiKeys }: { commerce: boolean; apiKeys: boolean }) => GetDefaultRoutesReturnType;
+  getDefaultRoutes: ({
+    commerce,
+    apiKeys,
+    selfServeSso,
+  }: {
+    commerce: boolean;
+    apiKeys: boolean;
+    selfServeSso: boolean;
+  }) => GetDefaultRoutesReturnType;
   setFirstPathToRoot: (routes: NavbarRoute[]) => NavbarRoute[];
   excludedPathsFromDuplicateWarning: string[];
 };
@@ -106,6 +115,7 @@ const createCustomPages = (
     apiKeys: organization
       ? !disabledOrganizationAPIKeysFeature(clerk, environment)
       : !disabledUserAPIKeysFeature(clerk, environment),
+    selfServeSso: organization ? !disabledSelfServeSSOFeature(clerk, environment) : false,
   });
 
   if (isDevelopmentSDK(clerk)) {
@@ -315,9 +325,11 @@ const getUserProfileDefaultRoutes = ({
 const getOrganizationProfileDefaultRoutes = ({
   commerce,
   apiKeys,
+  selfServeSso,
 }: {
   commerce: boolean;
   apiKeys: boolean;
+  selfServeSso: boolean;
 }): GetDefaultRoutesReturnType => {
   const INITIAL_ROUTES: NavbarRoute[] = [
     {
@@ -349,6 +361,14 @@ const getOrganizationProfileDefaultRoutes = ({
       path: 'organization-api-keys',
     });
   }
+  if (selfServeSso) {
+    INITIAL_ROUTES.push({
+      name: localizationKeys('organizationProfile.navbar.selfServeSso'),
+      id: ORGANIZATION_PROFILE_NAVBAR_ROUTE_ID.SELF_SERVE_SSO,
+      icon: LinkIcon,
+      path: 'organization-self-serve-sso',
+    });
+  }
 
   const pageToRootNavbarRouteMap: Record<string, NavbarRoute> = {
     'invite-members': INITIAL_ROUTES.find(r => r.id === ORGANIZATION_PROFILE_NAVBAR_ROUTE_ID.MEMBERS) as NavbarRoute,