chore(clerk-js,types): Hide personal workspace options when organization selection is enforced (#5391)

Author: LauraBeatris

.changeset/fresh-plums-run.md

@@ -0,0 +1,6 @@
+---
+'@clerk/clerk-js': patch
+'@clerk/types': patch
+---
+
+Hide personal workspace options when organization selection is enforced

packages/clerk-js/src/core/clerk.ts

@@ -829,7 +829,12 @@ export class Clerk implements ClerkInterface {
       }),
     );
 
-    this.telemetry?.record(eventPrebuiltComponentMounted('OrganizationSwitcher', props));
+    this.telemetry?.record(
+      eventPrebuiltComponentMounted('OrganizationSwitcher', {
+        ...props,
+        forceOrganizationSelection: this.environment?.organizationSettings.forceOrganizationSelection,
+      }),
+    );
   };
 
   public unmountOrganizationSwitcher = (node: HTMLDivElement): void => {
@@ -863,7 +868,12 @@ export class Clerk implements ClerkInterface {
       }),
     );
 
-    this.telemetry?.record(eventPrebuiltComponentMounted('OrganizationList', props));
+    this.telemetry?.record(
+      eventPrebuiltComponentMounted('OrganizationList', {
+        ...props,
+        forceOrganizationSelection: this.environment?.organizationSettings.forceOrganizationSelection,
+      }),
+    );
   };
 
   public unmountOrganizationList = (node: HTMLDivElement): void => {

packages/clerk-js/src/core/resources/OrganizationSettings.ts

@@ -20,6 +20,7 @@ export class OrganizationSettings extends BaseResource implements OrganizationSe
   };
   enabled: boolean = false;
   maxAllowedMemberships: number = 1;
+  forceOrganizationSelection!: boolean;
 
   public constructor(data: OrganizationSettingsJSON | OrganizationSettingsJSONSnapshot | null = null) {
     super();
@@ -43,6 +44,10 @@ export class OrganizationSettings extends BaseResource implements OrganizationSe
 
     this.enabled = this.withDefault(data.enabled, this.enabled);
     this.maxAllowedMemberships = this.withDefault(data.max_allowed_memberships, this.maxAllowedMemberships);
+    this.forceOrganizationSelection = this.withDefault(
+      data.force_organization_selection,
+      this.forceOrganizationSelection,
+    );
 
     return this;
   }

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

@@ -237,6 +237,7 @@ describe('Environment', () => {
       organization_settings: {
         enabled: false,
         max_allowed_memberships: 5,
+        force_organization_selection: false,
         actions: { admin_delete: true },
         domains: { enabled: false, enrollment_modes: [], default_role: null },
       },

packages/clerk-js/src/core/resources/__tests__/__snapshots__/Environment.test.ts.snap

@@ -581,6 +581,7 @@ Environment {
       "enrollmentModes": [],
     },
     "enabled": false,
+    "forceOrganizationSelection": false,
     "maxAllowedMemberships": 5,
     "pathRoot": "",
   },

packages/clerk-js/src/ui/components/OrganizationList/__tests__/OrganizationList.test.tsx

@@ -185,6 +185,24 @@ describe('OrganizationList', () => {
         expect(queryByRole('button', { name: 'Join' })).not.toBeInTheDocument();
       });
     });
+
+    describe('with force organization selection setting on environment', () => {
+      it('does not show the personal account', async () => {
+        const { wrapper } = await createFixtures(f => {
+          f.withOrganizations();
+          f.withForceOrganizationSelection();
+          f.withUser({
+            email_addresses: ['test@clerk.com'],
+            organization_memberships: [{ name: 'Org1', id: '1', role: 'admin' }],
+          });
+        });
+        const { queryByText } = render(<OrganizationList />, { wrapper });
+
+        await waitFor(() => {
+          expect(queryByText('Personal account')).not.toBeInTheDocument();
+        });
+      });
+    });
   });
 
   describe('CreateOrganization', () => {

packages/clerk-js/src/ui/components/OrganizationSwitcher/__tests__/OrganizationSwitcher.test.tsx

@@ -45,6 +45,19 @@ describe('OrganizationSwitcher', () => {
       expect(queryByText('Personal Workspace')).toBeNull();
       expect(getByText('No organization selected')).toBeInTheDocument();
     });
+
+    describe('with force organization selection setting on environment', () => {
+      it('does not show the personal workspace', async () => {
+        const { wrapper } = await createFixtures(f => {
+          f.withOrganizations();
+          f.withForceOrganizationSelection();
+          f.withUser({ email_addresses: ['test@clerk.com'] });
+        });
+        const { queryByText, getByRole, userEvent } = render(<OrganizationSwitcher />, { wrapper });
+        await userEvent.click(getByRole('button'));
+        expect(queryByText('Personal Workspace')).toBeNull();
+      });
+    });
   });
 
   describe('OrganizationSwitcherTrigger', () => {

packages/clerk-js/src/ui/components/SessionTask/SessionTask.tsx

@@ -7,8 +7,12 @@ import { OrganizationList } from '../OrganizationList';
 
 const ContentRegistry: Record<SessionTask['key'], React.ComponentType> = {
   org: () => (
-    // TODO - Hide personal workspace within organization list context based on environment
-    <OrganizationListContext.Provider value={{ componentName: 'OrganizationList', hidePersonal: true }}>
+    <OrganizationListContext.Provider
+      value={{
+        componentName: 'OrganizationList',
+        skipInvitationScreen: true,
+      }}
+    >
       <OrganizationList />
     </OrganizationListContext.Provider>
   ),

packages/clerk-js/src/ui/contexts/components/OrganizationList.ts

@@ -11,7 +11,7 @@ export const OrganizationListContext = createContext<OrganizationListCtx | null>
 export const useOrganizationListContext = () => {
   const context = useContext(OrganizationListContext);
   const { navigate } = useRouter();
-  const { displayConfig } = useEnvironment();
+  const { displayConfig, organizationSettings } = useEnvironment();
 
   if (!context || context.componentName !== 'OrganizationList') {
     throw new Error('Clerk: useOrganizationListContext called outside OrganizationList.');
@@ -80,7 +80,7 @@ export const useOrganizationListContext = () => {
     afterCreateOrganizationUrl,
     skipInvitationScreen: ctx.skipInvitationScreen || false,
     hideSlug: ctx.hideSlug || false,
-    hidePersonal: ctx.hidePersonal || false,
+    hidePersonal: organizationSettings.forceOrganizationSelection || ctx.hidePersonal || false,
     navigateAfterCreateOrganization,
     navigateAfterSelectOrganization,
     navigateAfterSelectPersonal,

packages/clerk-js/src/ui/contexts/components/OrganizationSwitcher.ts

@@ -11,7 +11,7 @@ export const OrganizationSwitcherContext = createContext<OrganizationSwitcherCtx
 export const useOrganizationSwitcherContext = () => {
   const context = useContext(OrganizationSwitcherContext);
   const { navigate } = useRouter();
-  const { displayConfig } = useEnvironment();
+  const { displayConfig, organizationSettings } = useEnvironment();
 
   if (!context || context.componentName !== 'OrganizationSwitcher') {
     throw new Error('Clerk: useOrganizationSwitcherContext called outside OrganizationSwitcher.');
@@ -96,7 +96,7 @@ export const useOrganizationSwitcherContext = () => {
 
   return {
     ...ctx,
-    hidePersonal: ctx.hidePersonal || false,
+    hidePersonal: organizationSettings.forceOrganizationSelection || ctx.hidePersonal || false,
     organizationProfileMode: organizationProfileMode || 'modal',
     createOrganizationMode: createOrganizationMode || 'modal',
     skipInvitationScreen: ctx.skipInvitationScreen || false,