refactor(ui): name the UserButton account line by identifier, not email

Author: alexcarpenter

packages/ui/src/mosaic/user-button/__tests__/user-button.view.test.tsx

@@ -12,8 +12,8 @@ import { userButtonBusyKeys, UserButtonView } from '../user-button.view';
 // this is the only place the three surfaces can be told apart. One describe per mode covers what
 // each carries and withholds; the describes after them cover what the modes share.
 
-const alice = { sessionId: 'sess_1', name: 'Alice Smith', email: 'alice@example.com' };
-const bob = { sessionId: 'sess_2', name: 'Bob Jones', email: 'bob@example.com' };
+const alice = { sessionId: 'sess_1', name: 'Alice Smith', identifier: 'alice@example.com' };
+const bob = { sessionId: 'sess_2', name: 'Bob Jones', identifier: 'bob@example.com' };
 
 const foundry = {
   kind: 'membership',
@@ -82,7 +82,7 @@ const scrollClasses = stylex.props(...scrollAreaViewport('auto')).className?.spl
 /** The workspace list: the one group in the popup that scrolls. */
 const workspaceList = () => groups().find(group => scrollClasses.every(name => group.classList.contains(name)));
 
-/** The accounts group: the one whose rows are titled by email rather than by workspace name. */
+/** The accounts group: the one whose rows are titled by identifier rather than by workspace name. */
 const accountsList = () =>
   groups().find(group => group !== workspaceList() && titles(group).some(title => title.includes('@')));
 

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

@@ -29,7 +29,8 @@ import { styles, triggerShapes } from './user-button.styles';
 export interface UserButtonSession {
   sessionId: string;
   name: string;
-  email: string;
+  /** Whatever the account is addressed by: username, email, phone, or wallet. */
+  identifier: string;
   imageUrl?: string;
 }
 
@@ -446,9 +447,9 @@ function HeaderActionButton({ label, icon, onClick, busyKey }: HeaderAction) {
 function Header() {
   const data = useUserButtonContext();
   const signOutSession = data.onSignOutSession;
-  const { sessionId, email } = data.activeSession;
+  const { sessionId, identifier } = data.activeSession;
   const { name, imageUrl, shape, organization } = leadWorkspace(data);
-  const subtitle = organization ? membershipSubtitle(organization) : email;
+  const subtitle = organization ? membershipSubtitle(organization) : identifier;
   // Inviting belongs to whichever organization is active, even where the account is what heads the
   // surface. The gear manages whatever the header names.
   const invitable = showsOrganizations(data) ? data.activeOrganization : null;
@@ -537,13 +538,13 @@ function ActionMenu({ label, actions, disabled }: { label: string; actions: Acco
 }
 
 /**
- * The active account, identified by its email. It heads the workspaces that belong to it and
+ * The active account, named by its identifier. It heads the workspaces that belong to it and
  * carries the account-wide actions, the way the "Accounts" row heads the other accounts.
  */
 function ActiveAccountRow() {
   const data = useUserButtonContext();
   const signOutSession = data.onSignOutSession;
-  const { email, sessionId } = data.activeSession;
+  const { identifier, sessionId } = data.activeSession;
   // Its actions live in a menu that closes on click, so the row itself carries their spinner.
   const { busy, disabled } = useBusy(userButtonBusyKeys.signOutSession(sessionId));
 
@@ -570,7 +571,7 @@ function ActiveAccountRow() {
             fontWeight: fontWeightVars['--cl-font-medium'],
           }}
         >
-          {email}
+          {identifier}
         </Item.Description>
       </Item.Content>
       {busy ? (
@@ -579,7 +580,7 @@ function ActiveAccountRow() {
         </Trailing>
       ) : (
         <ActionMenu
-          label={`Actions for ${email}`}
+          label={`Actions for ${identifier}`}
           actions={actions}
           disabled={disabled}
         />
@@ -787,8 +788,8 @@ function AccountRow({ session, active }: { session: UserButtonSession; active?:
         />
       </Item.Media>
       <Item.Content>
-        {/* Identified by email, like the active account's row, so the two read as the same kind. */}
-        <Item.Title>{session.email}</Item.Title>
+        {/* Named by its identifier, like the active account's row, so the two read as the same kind. */}
+        <Item.Title>{session.identifier}</Item.Title>
       </Item.Content>
       {busy ? (
         <Trailing>