feat(mosaic): open the combined profile straight from Settings behind experimental.newProfiles

Author: austincalvelage

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

@@ -140,6 +140,10 @@ function resolveAfterUrl<T extends object>(
   return undefined;
 }
 
+function opensModal(url: string | undefined, mode: 'navigation' | 'modal' | undefined): boolean {
+  return (mode ?? (url ? 'navigation' : 'modal')) === 'modal';
+}
+
 /** Opens the modal unless a URL routes instead. An explicit mode wins; a URL on its own means navigation. */
 function openOrNavigate({
   url,
@@ -154,8 +158,7 @@ function openOrNavigate({
   buildUrl: () => string;
   navigate: (to: string) => unknown;
 }): () => void {
-  const resolved = mode ?? (url ? 'navigation' : 'modal');
-  return resolved === 'navigation' ? () => void navigate(url ?? buildUrl()) : () => openModal();
+  return opensModal(url, mode) ? () => openModal() : () => void navigate(url ?? buildUrl());
 }
 
 const INVITE_MEMBERS_PERMISSION = 'org:sys_memberships:manage';
@@ -252,6 +255,12 @@ export function useSwitcherModel(options?: SwitcherModelOptions, modals?: Switch
     navigate: router.navigate,
   });
 
+  const managesBothInOneProfile =
+    newProfiles &&
+    mosaicUserProfile?.mode === 'combined' &&
+    opensModal(options?.userProfileUrl, options?.userProfileMode) &&
+    opensModal(options?.organizationProfileUrl, options?.organizationProfileMode);
+
   const createOrganization = openOrNavigate({
     url: options?.createOrganizationUrl,
     mode: options?.createOrganizationMode,
@@ -383,7 +392,7 @@ export function useSwitcherModel(options?: SwitcherModelOptions, modals?: Switch
     // Single-session apps cannot hold a second account, so both actions are meaningless there.
     onSignOutAll: singleSessionMode ? undefined : () => clerk.signOut({ redirectUrl: clerk.buildAfterSignOutUrl() }),
     onManageAccount: manageAccount,
-    onManageOrganization: manageOrganization,
+    onManageOrganization: managesBothInOneProfile ? undefined : manageOrganization,
     // Invite has no page of its own to route to, so it opens its modal even when management is routed.
     onInviteMembers: canInviteMembers ? () => clerk.openInviteMembers({ getContainer }) : undefined,
     // Covers both restricted instances and users at their creation limit.

packages/mosaic/src/features/user-button/__tests__/user-button.new-profiles.feature.test.tsx

@@ -103,13 +103,14 @@ describe('UserButton with experimental.newProfiles', () => {
 
   const profileTabs = () => screen.getAllByRole('tab').map(tab => tab.textContent);
 
-  it('opens the combined UserProfile when managing the account, and closes', async () => {
+  it('opens the combined UserProfile straight from Settings, without a menu, and closes', async () => {
     const { clerk, navigate } = await renderWithNewProfiles();
     const openUserProfile = vi.spyOn(clerk, 'openUserProfile');
     const user = await open();
 
-    await openSettings(user, 'Manage profile');
+    await user.click(screen.getByRole('button', { name: 'Settings' }));
 
+    expect(screen.queryByRole('menu')).toBeNull();
     expect(await screen.findByRole('tab', { name: 'Account' })).toHaveAttribute('aria-selected', 'true');
     expect(profileTabs()).toEqual(['Account', 'Security', 'General', 'Members']);
     expect(openUserProfile).not.toHaveBeenCalled();
@@ -149,7 +150,7 @@ describe('UserButton with experimental.newProfiles', () => {
     );
     const user = await open();
 
-    await openSettings(user, 'Manage profile');
+    await user.click(screen.getByRole('button', { name: 'Settings' }));
 
     expect(within(container).getByRole('tab', { name: 'Account' })).toBeInTheDocument();
   });
@@ -163,23 +164,32 @@ describe('UserButton with experimental.newProfiles', () => {
     });
     const user = await open();
 
-    await openSettings(user, 'Manage profile');
+    await user.click(screen.getByRole('button', { name: 'Settings' }));
 
     expect(await screen.findByRole('tab', { name: 'Terms' })).toHaveAttribute('aria-selected', 'true');
     expect(screen.getByText('Terms body')).toBeVisible();
     expect(profileTabs()).toEqual(['Terms', 'Account', 'Security', 'General', 'Members']);
   });
 
-  it("opens the combined profile on the organization's General page, with its own pages in order", async () => {
+  it("lists the organization's own pages in order in the combined profile", async () => {
     await renderWithNewProfiles({ organizationProfileProps: { customPages: [terms], pageOrder: ['terms'] } });
     const user = await open();
 
-    await openSettings(user, 'Manage organization');
+    await user.click(screen.getByRole('button', { name: 'Settings' }));
 
-    expect(await screen.findByRole('tab', { name: 'General' })).toHaveAttribute('aria-selected', 'true');
+    expect(await screen.findByRole('tab', { name: 'Account' })).toHaveAttribute('aria-selected', 'true');
     expect(profileTabs()).toEqual(['Account', 'Security', 'Terms', 'General', 'Members']);
   });
 
+  it('still asks which to manage when the organization profile routes to a page', async () => {
+    const { navigate } = await renderWithNewProfiles({ organizationProfileUrl: '/org' });
+    const user = await open();
+
+    await openSettings(user, 'Manage organization');
+
+    expect(navigate).toHaveBeenCalledWith('/org');
+  });
+
   it("leaves the organization's pages out in user mode", async () => {
     await renderWithNewProfiles({ mode: 'user' });
     const user = await open();