feat(mosaic): name the active organization in the UserButton header

.changeset/mosaic-user-button-header-organization.md

@@ -0,0 +1,5 @@
+---
+'@clerk/mosaic': patch
+---
+
+Show the active organization's name, instead of the account's email or username, under the user's name in the `UserButton` popover header when an organization is active in combined mode.

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

@@ -110,6 +110,7 @@ function requiredPopup() {
 const reading = (...names: string[]) =>
   within(requiredPopup())
     .queryAllByText(new RegExp(`^(${names.join('|')})$`))
+    .filter(node => !node.closest('.cl-user-button-header'))
     .map(node => node.textContent);
 
 const current = () =>
@@ -788,7 +789,6 @@ describe('UserButton', () => {
       await openWithList();
 
       expect(reading('Personal account', 'Acme', 'Other', 'Create organization')).toEqual([
-        'Acme',
         'Acme',
         'Personal account',
         'Other',
@@ -809,6 +809,7 @@ describe('UserButton', () => {
       const user = await open();
 
       expect(within(requiredPopup()).getByText('Alice Smith')).toBeInTheDocument();
+      expect(requiredPopup().querySelector('.cl-user-button-header-description')).toHaveTextContent('Acme');
       expect(within(requiredPopup()).getByRole('button', { name: 'Invite' })).toBeInTheDocument();
       await openSettings(user, 'Organization settings');
       expect(openOrganizationProfile).toHaveBeenCalled();

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

@@ -160,6 +160,21 @@ function membershipSubtitle(membership: UserButtonMembership, m: Messages, local
   return joinDetails(membership.planLabel, members);
 }
 
+function headerSubtitle(lead: LeadSelection, identifier: string, m: Messages, locale: string): string {
+  if (lead.kind === 'organization') {
+    return membershipSubtitle(lead.organization, m, locale);
+  }
+  if (lead.kind === 'none') {
+    // No selection is not the account, so it carries no identifier line.
+    return '';
+  }
+  if (lead.badge) {
+    return lead.badge.name;
+  }
+  // An account with no name is titled by its identifier, and repeating it underneath says nothing.
+  return identifier === lead.name ? '' : identifier;
+}
+
 // ─── Presentational leaves ──────────────────────────────────────────────────
 
 /**
@@ -437,14 +452,7 @@ function Header() {
   const lead = leadSelection(data, m);
   const { name } = lead;
   const organization = leadOrganization(lead);
-  // An account with no name is titled by its identifier, and repeating it underneath says nothing.
-  // No selection is not the account, so it carries no identifier line either.
-  const subtitle =
-    lead.kind === 'organization'
-      ? membershipSubtitle(lead.organization, m, locale)
-      : lead.kind === 'user' && identifier !== name
-        ? identifier
-        : '';
+  const subtitle = headerSubtitle(lead, identifier, m, locale);
 
   const actions: HeaderAction[] = [];
   for (const action of data.layout.actions.header) {