fix(mosaic): keep custom profile page ids from colliding

Skip account custom pages under the organization/ prefix in UserProfile, and keep only the first custom page per path in both profiles, warning about the rest.

Author: austincalvelage

packages/mosaic/src/features/organization-profile/__tests__/organization-profile.layout.test.tsx

@@ -1,10 +1,22 @@
 import { describe, expect, it } from 'vitest';
 
-import { getAvailableOrganizationProfilePages } from '../organization-profile.layout';
-import type { OrganizationProfilePages } from '../organization-profile.types';
+import { getAvailableOrganizationProfilePages, resolveOrganizationProfilePages } from '../organization-profile.layout';
+import type { CustomOrganizationProfilePage, OrganizationProfilePages } from '../organization-profile.types';
 
 const general: OrganizationProfilePages['general'] = <p>General</p>;
 
+describe('resolveOrganizationProfilePages', () => {
+  it('keeps the first custom page for a repeated path', () => {
+    const audit: CustomOrganizationProfilePage = { label: 'Audit', path: 'audit', content: null };
+    const otherAudit: CustomOrganizationProfilePage = { label: 'Other audit', path: 'audit', content: null };
+
+    expect(resolveOrganizationProfilePages(['general'], [audit, otherAudit])).toEqual([
+      { id: 'general' },
+      { id: 'audit', custom: audit },
+    ]);
+  });
+});
+
 describe('getAvailableOrganizationProfilePages', () => {
   it('lists api keys given content', () => {
     expect(getAvailableOrganizationProfilePages({ general, apiKeys: <p>API keys</p> })).toEqual(['general', 'apiKeys']);

packages/mosaic/src/features/organization-profile/organization-profile.layout.ts

@@ -5,6 +5,7 @@ import { Key } from '../../icons/glyphs/key';
 import { SecurityLockSquare } from '../../icons/glyphs/security-lock-square';
 import { Users } from '../../icons/glyphs/users';
 import { applyOrder } from '../../utils/apply-order';
+import { withUniquePaths } from '../profile-pages/profile-pages.layout';
 import type {
   CustomOrganizationProfilePage,
   OrganizationProfilePageId,
@@ -43,14 +44,15 @@ export function resolveOrganizationProfilePages(
   customPages: readonly CustomOrganizationProfilePage[] = [],
   order?: readonly string[],
 ): OrganizationProfileNavEntry[] {
-  const customById = new Map(customPages.map(page => [page.path, page]));
+  const uniqueCustomPages = withUniquePaths(customPages);
+  const customById = new Map(uniqueCustomPages.map(page => [page.path, page]));
   const builtInIds = new Set<string>(builtIn);
   const entries: OrganizationProfileNavEntry[] = [
     ...builtIn.map((id): OrganizationProfileNavEntry => {
       const custom = customById.get(id);
       return custom ? { id, custom } : { id };
     }),
-    ...customPages.filter(page => !builtInIds.has(page.path)).map(page => ({ id: page.path, custom: page })),
+    ...uniqueCustomPages.filter(page => !builtInIds.has(page.path)).map(page => ({ id: page.path, custom: page })),
   ];
   return applyOrder(order, entries, entry => entry.id);
 }

packages/mosaic/src/features/profile-pages/profile-pages.layout.ts

@@ -0,0 +1,15 @@
+import { logger } from '@clerk/shared/logger';
+
+export function withUniquePaths<Page extends { path: string }>(pages: readonly Page[]): Page[] {
+  const seen = new Set<string>();
+  return pages.filter(page => {
+    if (seen.has(page.path)) {
+      logger.warnOnce(
+        `[Clerk] Duplicate path "${page.path}" found in custom pages. This may cause unexpected behavior.`,
+      );
+      return false;
+    }
+    seen.add(page.path);
+    return true;
+  });
+}

packages/mosaic/src/features/user-profile/__tests__/user-profile.feature.test.tsx

@@ -252,6 +252,23 @@ describe('UserProfile with an active organization', () => {
     expect(screen.getByText('Organization security')).toBeVisible();
   });
 
+  it('skips an account page whose path is an organization page id', async () => {
+    serveWithOrganization();
+    await renderWithClerk(
+      <UserProfile
+        defaultPage='organization/general'
+        customPages={[{ path: 'organization/general', label: 'Imposter', content: <p>Imposter content</p> }]}
+      />,
+    );
+
+    expect(tabNames()).toEqual(['Account', 'Security', 'General', 'Members']);
+    expect(screen.getByRole('tab', { name: 'General', description: 'Organization' })).toHaveAttribute(
+      'aria-selected',
+      'true',
+    );
+    expect(screen.queryByText('Imposter content')).not.toBeInTheDocument();
+  });
+
   it('passes the organization options to its pages', async () => {
     serveWithOrganization();
     await renderWithClerk(

packages/mosaic/src/features/user-profile/__tests__/user-profile.layout.test.ts

@@ -25,6 +25,17 @@ describe('getAvailableUserProfilePages', () => {
 });
 
 describe('resolveUserProfilePages', () => {
+  it('keeps the first custom page for a repeated path', () => {
+    const otherTerms: CustomProfilePage = { label: 'Other terms', path: 'terms', content: null };
+    const otherAccount: CustomProfilePage = { label: 'Other account', path: 'account', content: null };
+    const account: CustomProfilePage = { label: 'My account', path: 'account', content: null };
+
+    expect(resolveUserProfilePages(['account'], [account, terms, otherTerms, otherAccount])).toEqual([
+      { id: 'account', custom: account },
+      { id: 'terms', custom: terms },
+    ]);
+  });
+
   it('lists the built-ins, then the custom pages by path', () => {
     expect(resolveUserProfilePages(['account', 'security'], [terms, help])).toEqual([
       { id: 'account' },

packages/mosaic/src/features/user-profile/user-profile.layout.ts

@@ -4,6 +4,7 @@ import { CreditCard } from '../../icons/glyphs/credit-card';
 import { ShieldCheck } from '../../icons/glyphs/shield-check';
 import { UserCircle } from '../../icons/glyphs/user-circle';
 import { applyOrder } from '../../utils/apply-order';
+import { withUniquePaths } from '../profile-pages/profile-pages.layout';
 import type { CustomProfilePage, UserProfilePageId, UserProfilePages } from './user-profile.types';
 
 /** The built-in pages in the order the profile lists them before a consumer reorders anything. */
@@ -42,14 +43,15 @@ export function resolveUserProfilePages(
   customPages: readonly CustomProfilePage[] = [],
   order?: readonly string[],
 ): UserProfileNavEntry[] {
-  const customById = new Map(customPages.map(page => [page.path, page]));
+  const uniqueCustomPages = withUniquePaths(customPages);
+  const customById = new Map(uniqueCustomPages.map(page => [page.path, page]));
   const builtInIds = new Set<string>(builtIn);
   const entries: UserProfileNavEntry[] = [
     ...builtIn.map((id): UserProfileNavEntry => {
       const custom = customById.get(id);
       return custom ? { id, custom } : { id };
     }),
-    ...customPages.filter(page => !builtInIds.has(page.path)).map(page => ({ id: page.path, custom: page })),
+    ...uniqueCustomPages.filter(page => !builtInIds.has(page.path)).map(page => ({ id: page.path, custom: page })),
   ];
   return applyOrder(order, entries, entry => entry.id);
 }

packages/mosaic/src/features/user-profile/user-profile.view.tsx

@@ -52,7 +52,16 @@ export const UserProfileView = React.forwardRef<HTMLDivElement, UserProfileViewP
 ) {
   const m = useMessages('userProfile');
   const organizationLabels = useMessages('organizationProfile').pages;
-  const accountPages = userProfilePageList({ pages, customPages, pageOrder }, m.pages);
+  const accountCustomPages = customPages?.filter(page => {
+    if (!page.path.startsWith(ORGANIZATION_PAGE_PREFIX)) {
+      return true;
+    }
+    logger.warnOnce(
+      `[Clerk] UserProfile custom page "${page.path}" uses the reserved "${ORGANIZATION_PAGE_PREFIX}" prefix and was skipped.`,
+    );
+    return false;
+  });
+  const accountPages = userProfilePageList({ pages, customPages: accountCustomPages, pageOrder }, m.pages);
   const groups: ProfilePageGroup[] = organization
     ? [
         { label: m.accountGroup, pages: accountPages },