Add changeset

Author: LauraBeatris

.changeset/dull-plums-sleep.md

@@ -0,0 +1,8 @@
+---
+'@clerk/localizations': minor
+'@clerk/clerk-js': minor
+'@clerk/shared': minor
+'@clerk/ui': minor
+---
+
+Display "Single Sign-on (SSO)" section in `OrganizationProfile` if self-serve SSO is enabled on the current active organization

packages/clerk-js/src/core/resources/__tests__/Organization.test.ts

@@ -41,24 +41,4 @@ describe('Organization', () => {
       },
     });
   });
-
-  it('defaults selfServeSSOEnabled to false when the field is omitted from FAPI', () => {
-    const organization = new Organization({
-      object: 'organization',
-      id: 'test_id',
-      name: 'test_name',
-      public_metadata: {},
-      slug: 'test_slug',
-      image_url: '',
-      created_at: 12345,
-      updated_at: 5678,
-      members_count: 1,
-      pending_invitations_count: 0,
-      admin_delete_enabled: true,
-      max_allowed_memberships: 3,
-      has_image: false,
-    });
-
-    expect(organization.selfServeSSOEnabled).toBe(false);
-  });
 });

packages/shared/src/types/organization.ts

@@ -46,10 +46,6 @@ export interface OrganizationResource extends ClerkResource, BillingPayerMethods
   publicMetadata: OrganizationPublicMetadata;
   adminDeleteEnabled: boolean;
   maxAllowedMemberships: number;
-  /**
-   * Whether the organization opted-in to self-serve SSO. Defaults to `false`
-   * when the instance does not have self-serve SSO enabled.
-   */
   selfServeSSOEnabled: boolean;
   createdAt: Date;
   updatedAt: Date;

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

@@ -154,7 +154,9 @@ export const OrganizationProfileRoutes = () => {
           <Route path={isSelfServeSsoPageRoot ? undefined : 'organization-self-serve-sso'}>
             <Switch>
               <Route index>
-                <OrganizationSelfServeSSOPage />
+                <Suspense fallback={''}>
+                  <OrganizationSelfServeSSOPage />
+                </Suspense>
               </Route>
             </Switch>
           </Route>

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

@@ -2,9 +2,10 @@ import type { CustomPage } from '@clerk/shared/types';
 import { describe, expect, it } from 'vitest';
 
 import { bindCreateFixtures } from '@/test/create-fixtures';
-import { render, screen, waitFor } from '@/test/utils';
+import { cleanup, render, screen, waitFor } from '@/test/utils';
 
 import { OrganizationProfile } from '../';
+import { OrganizationSelfServeSSOPage } from '../OrganizationSelfServeSSOPage';
 
 const { createFixtures } = bindCreateFixtures('OrganizationProfile');
 
@@ -494,7 +495,7 @@ describe('OrganizationProfile', () => {
       });
 
       render(<OrganizationProfile />, { wrapper });
-      expect(await screen.findByText('Self-Serve SSO')).toBeDefined();
+      expect(await screen.findByText('Single Sign-On (SSO)')).toBeDefined();
     });
 
     it('does not include SSO when disabled at the instance level', async () => {
@@ -514,7 +515,7 @@ describe('OrganizationProfile', () => {
       });
 
       const { queryByText } = render(<OrganizationProfile />, { wrapper });
-      await waitFor(() => expect(queryByText('Self-Serve SSO')).toBeNull());
+      await waitFor(() => expect(queryByText('Single Sign-On (SSO)')).toBeNull());
     });
 
     it('does not include SSO when the org has not opted in, even if the instance has it enabled', async () => {
@@ -534,10 +535,10 @@ describe('OrganizationProfile', () => {
       });
 
       const { queryByText } = render(<OrganizationProfile />, { wrapper });
-      await waitFor(() => expect(queryByText('Self-Serve SSO')).toBeNull());
+      await waitFor(() => expect(queryByText('Single Sign-On (SSO)')).toBeNull());
     });
 
-    it('includes SSO even when the user does not have the manage enterprise connections permission', async () => {
+    it('includes SSO even when the user does not have the manage enterprise connections permission, but the page surfaces a warning', async () => {
       const { wrapper } = await createFixtures(f => {
         f.withEnterpriseSso({ selfServeSSO: true });
         f.withOrganizations();
@@ -553,9 +554,15 @@ describe('OrganizationProfile', () => {
         });
       });
 
-      // TODO -> Add assertions for page content warning
       render(<OrganizationProfile />, { wrapper });
-      expect(await screen.findByText('Self-Serve SSO')).toBeDefined();
+      expect(await screen.findByText('Single Sign-On (SSO)')).toBeDefined();
+
+      cleanup();
+      render(<OrganizationSelfServeSSOPage />, { wrapper });
+      expect(await screen.findByText(/you do not have permission to manage enterprise connections/i)).toBeDefined();
+      expect(
+        screen.queryByText(/contact your organization administrator in order to have permissions/i),
+      ).toBeInTheDocument();
     });
   });