fix(mosaic): Keep the requested page order when the switcher opens the legacy organization profile

Author: alexcarpenter

.changeset/mosaic-switcher-sso-bypass-page-order.md

@@ -0,0 +1,5 @@
+---
+'@clerk/mosaic': patch
+---
+
+Fix the organization profile's page order when `OrganizationSwitcher` or `UserButton` opens the legacy profile for a member who can manage the SSO bypass allowlist. The Security page now stays where `pageOrder` puts it instead of moving to the top.

packages/mosaic/src/features/organization-switcher/__tests__/organization-switcher.feature.test.tsx

@@ -305,6 +305,38 @@ describe('OrganizationSwitcher', () => {
     expect(reading('Settings', 'Terms of service', 'Support')).toEqual(['Support', 'Terms of service', 'Settings']);
   });
 
+  describe('the organization profile page order', () => {
+    const termsPage = { label: 'Terms', path: 'terms', icon: <span />, content: <p>Terms body</p> };
+
+    async function openedPageLabels(permissions: string[]) {
+      const memberships = [fapiMembership(acme, { permissions }), fapiMembership(other)];
+      const user = fapiUser({ ...alice, organization_memberships: memberships });
+      const session = fapiSession({ id: 'sess_1', user, last_active_organization_id: 'org_1' });
+      const { clerk } = await renderSwitcher({}, noOffers({ client: fapiClient([session]), memberships }), {
+        organizationProfileProps: { customPages: [termsPage], pageOrder: ['terms', 'security'] },
+      });
+      const openOrganizationProfile = vi.spyOn(clerk, 'openOrganizationProfile').mockImplementation(() => {});
+      const clicker = await openWithList();
+
+      await clicker.click(screen.getByRole('button', { name: 'Settings' }));
+
+      return openOrganizationProfile.mock.calls[0]?.[0]?.customPages?.map(page => page.label);
+    }
+
+    it('keeps Security where it was asked for when the member can manage the SSO bypass allowlist', async () => {
+      expect(await openedPageLabels(['org:sys_entconns_sso_bypass:manage'])).toEqual([
+        'Terms',
+        'security',
+        'general',
+        'members',
+      ]);
+    });
+
+    it('leaves Security out when the organization profile will not show it', async () => {
+      expect(await openedPageLabels([])).toEqual(['Terms', 'general', 'members']);
+    });
+  });
+
   it('themes its parts through organization-switcher slots', async () => {
     await renderSwitcher({}, noOffers());
     await openWithList();

packages/mosaic/src/features/switcher/switcher.pages.tsx

@@ -6,14 +6,15 @@ import {
   disabledUserAPIKeysFeature,
   disabledUserBillingFeature,
 } from '@clerk/shared/internal/clerk-js/componentGuards';
-import { useClerk } from '@clerk/shared/react';
+import { useClerk, useSession } from '@clerk/shared/react';
 import type { CustomPage } from '@clerk/shared/types';
 import type { ReactNode } from 'react';
 import { useCallback, useState } from 'react';
 import { createPortal } from 'react-dom';
 
 import { useMosaicEnvironment } from '../../hooks/use-mosaic-environment';
 import { applyOrder } from '../../utils/apply-order';
+import { ORGANIZATION_PERMISSIONS } from '../../utils/permissions';
 import type { OrganizationProfilePageId } from '../organization-profile/organization-profile.types';
 import { USER_PROFILE_PAGE_IDS } from '../user-profile/user-profile.layout';
 import type { CustomProfilePage, UserProfilePageId } from '../user-profile/user-profile.types';
@@ -42,6 +43,9 @@ export function useUserProfilePages(): UserProfilePageId[] {
 export function useOrganizationProfilePages(): OrganizationProfilePageId[] {
   const clerk = useClerk();
   const environment = useMosaicEnvironment();
+  const { session } = useSession();
+  const canManageSSOBypass =
+    session?.checkAuthorization({ permission: ORGANIZATION_PERMISSIONS.ssoBypassManage }) ?? false;
 
   const pages: OrganizationProfilePageId[] = ['general', 'members'];
   if (!disabledOrganizationBillingFeature(clerk, environment)) {
@@ -50,7 +54,11 @@ export function useOrganizationProfilePages(): OrganizationProfilePageId[] {
   if (!disabledOrganizationAPIKeysFeature(clerk, environment)) {
     pages.push('apiKeys');
   }
-  if (!disabledSelfServeSSOFeature(clerk, environment) || !disabledSelfServeDirectorySyncFeature(clerk, environment)) {
+  if (
+    !disabledSelfServeSSOFeature(clerk, environment) ||
+    !disabledSelfServeDirectorySyncFeature(clerk, environment) ||
+    canManageSSOBypass
+  ) {
     pages.push('security');
   }
   return pages;

packages/mosaic/src/utils/permissions.ts

@@ -5,4 +5,5 @@ export const ORGANIZATION_PERMISSIONS = {
   membershipsManage: 'org:sys_memberships:manage',
   profileManage: 'org:sys_profile:manage',
   profileDelete: 'org:sys_profile:delete',
+  ssoBypassManage: 'org:sys_entconns_sso_bypass:manage',
 } as const;