displayName correctly integrated

This commit is contained in:
Domingo Dirutigliano 2025-07-11 10:54:38 +02:00 committed by Aarnav Tale
parent ad469129bc
commit 27b2831f00
13 changed files with 16 additions and 20 deletions

View File

@ -107,7 +107,7 @@ export default function Header(data: Props) {
{data.user.picture ? ( {data.user.picture ? (
<img <img
src={data.user.picture} src={data.user.picture}
alt={data.user.name} alt={data.user.name || data.user.displayName}
className="w-8 h-8 rounded-full" className="w-8 h-8 rounded-full"
/> />
) : ( ) : (
@ -131,7 +131,7 @@ export default function Header(data: Props) {
<Menu.Section> <Menu.Section>
<Menu.Item key="profile" textValue="Profile"> <Menu.Item key="profile" textValue="Profile">
<div className="text-black dark:text-headplane-50"> <div className="text-black dark:text-headplane-50">
<p className="font-bold">{data.user.name}</p> <p className="font-bold">{data.user.name || data.user.displayName}</p>
<p>{data.user.email}</p> <p>{data.user.email}</p>
</div> </div>
</Menu.Item> </Menu.Item>

View File

@ -64,7 +64,7 @@ export default function MachineRow({
{node.givenName} {node.givenName}
</p> </p>
<p className="text-sm opacity-50"> <p className="text-sm opacity-50">
{node.user.name || node.user.email || node.user.id} {node.user.name || node.user.displayName || node.user.email || node.user.id}
</p> </p>
<div className="flex gap-1 flex-wrap mt-1.5"> <div className="flex gap-1 flex-wrap mt-1.5">
{mapTagsToComponents(node, uiTags)} {mapTagsToComponents(node, uiTags)}

View File

@ -34,7 +34,7 @@ export default function Move({ machine, users, isOpen, setIsOpen }: MoveProps) {
}} }}
> >
{users.map((user) => ( {users.map((user) => (
<Select.Item key={user.id}>{user.name || user.email || user.id}</Select.Item> <Select.Item key={user.id}>{user.name || user.displayName || user.email || user.id}</Select.Item>
))} ))}
</Select> </Select>
</Dialog.Panel> </Dialog.Panel>

View File

@ -46,7 +46,7 @@ export default function NewMachine(data: NewMachineProps) {
placeholder="Select a user" placeholder="Select a user"
> >
{data.users.map((user) => ( {data.users.map((user) => (
<Select.Item key={user.id}>{user.name || user.email || user.id}</Select.Item> <Select.Item key={user.id}>{user.name || user.displayName || user.email || user.id}</Select.Item>
))} ))}
</Select> </Select>
</Dialog.Panel> </Dialog.Panel>

View File

@ -109,7 +109,7 @@ export default function Page() {
</span> </span>
<div className="flex items-center gap-x-2.5 mt-1"> <div className="flex items-center gap-x-2.5 mt-1">
<UserCircle /> <UserCircle />
{node.user.name || node.user.email || node.user.id} {node.user.name || node.user.displayName || node.user.email || node.user.id}
</div> </div>
</div> </div>
<div className="p-2 pl-4"> <div className="p-2 pl-4">
@ -254,7 +254,7 @@ export default function Page() {
className="w-full max-w-full grid grid-cols-1 lg:grid-cols-2 gap-y-2 sm:gap-x-12" className="w-full max-w-full grid grid-cols-1 lg:grid-cols-2 gap-y-2 sm:gap-x-12"
> >
<div className="flex flex-col gap-1"> <div className="flex flex-col gap-1">
<Attribute name="Creator" value={node.user.name || node.user.email} /> <Attribute name="Creator" value={node.user.name || node.user.displayName || node.user.email || node.user.id} />
<Attribute name="Machine name" value={node.givenName} /> <Attribute name="Machine name" value={node.givenName} />
<Attribute <Attribute
tooltip="OS hostname is published by the machines operating system and is used as the default name for the machine." tooltip="OS hostname is published by the machines operating system and is used as the default name for the machine."

View File

@ -18,7 +18,7 @@ export default function AuthKeyRow({ authKey, user, url }: Props) {
return ( return (
<div className="w-full"> <div className="w-full">
<Attribute name="Key" value={authKey.key} isCopyable /> <Attribute name="Key" value={authKey.key} isCopyable />
<Attribute name="User" value={user.name} isCopyable /> <Attribute name="User" value={user.name || user.displayName} isCopyable />
<Attribute name="Reusable" value={authKey.reusable ? 'Yes' : 'No'} /> <Attribute name="Reusable" value={authKey.reusable ? 'Yes' : 'No'} />
<Attribute name="Ephemeral" value={authKey.ephemeral ? 'Yes' : 'No'} /> <Attribute name="Ephemeral" value={authKey.ephemeral ? 'Yes' : 'No'} />
<Attribute name="Used" value={authKey.used ? 'Yes' : 'No'} /> <Attribute name="Used" value={authKey.used ? 'Yes' : 'No'} />

View File

@ -36,7 +36,7 @@ export default function AddAuthKey(data: AddAuthKeyProps) {
}} }}
> >
{data.users.map((user) => ( {data.users.map((user) => (
<Select.Item key={user.id}>{user.name || user.email || user.id}</Select.Item> <Select.Item key={user.id}>{user.name || user.displayName || user.email || user.id}</Select.Item>
))} ))}
</Select> </Select>
<NumberInput <NumberInput

View File

@ -197,7 +197,7 @@ export default function Page() {
{[ {[
<Select.Item key="__headplane_all">All</Select.Item>, <Select.Item key="__headplane_all">All</Select.Item>,
...keys.map(({ user }) => ( ...keys.map(({ user }) => (
<Select.Item key={user.id}>{user.name || user.email || user.id}</Select.Item> <Select.Item key={user.id}>{user.name || user.displayName || user.email || user.id}</Select.Item>
)), )),
]} ]}
</Select> </Select>

View File

@ -26,14 +26,14 @@ export default function UserRow({ user, role }: UserRowProps) {
{user.profilePicUrl ? ( {user.profilePicUrl ? (
<img <img
src={user.profilePicUrl} src={user.profilePicUrl}
alt={user.name} alt={user.name || user.displayName}
className="w-10 h-10 rounded-full" className="w-10 h-10 rounded-full"
/> />
) : ( ) : (
<CircleUser className="w-10 h-10" /> <CircleUser className="w-10 h-10" />
)} )}
<div className="ml-4"> <div className="ml-4">
<p className={cn('font-semibold leading-snug')}>{user.name}</p> <p className={cn('font-semibold leading-snug')}>{user.name || user.displayName}</p>
<p className="text-sm opacity-50">{user.email}</p> <p className="text-sm opacity-50">{user.email}</p>
</div> </div>
</div> </div>

View File

@ -8,7 +8,7 @@ interface DeleteProps {
} }
export default function DeleteUser({ user, isOpen, setIsOpen }: DeleteProps) { export default function DeleteUser({ user, isOpen, setIsOpen }: DeleteProps) {
const name = user.name; const name = user.name || user.displayName;
return ( return (
<Dialog isOpen={isOpen} onOpenChange={setIsOpen}> <Dialog isOpen={isOpen} onOpenChange={setIsOpen}>

View File

@ -21,7 +21,7 @@ export default function ReassignUser({
<Dialog.Panel <Dialog.Panel
variant={user.headplaneRole === 'owner' ? 'unactionable' : 'normal'} variant={user.headplaneRole === 'owner' ? 'unactionable' : 'normal'}
> >
<Dialog.Title>Change role for {user.name}?</Dialog.Title> <Dialog.Title>Change role for {user.name || user.displayName}?</Dialog.Title>
<Dialog.Text className="mb-6"> <Dialog.Text className="mb-6">
Most roles are carried straight from Tailscale. However, keep in mind Most roles are carried straight from Tailscale. However, keep in mind
that I have not fully implemented permissions yet and some things may that I have not fully implemented permissions yet and some things may

View File

@ -13,9 +13,9 @@ export default function RenameUser({ user, isOpen, setIsOpen }: RenameProps) {
return ( return (
<Dialog isOpen={isOpen} onOpenChange={setIsOpen}> <Dialog isOpen={isOpen} onOpenChange={setIsOpen}>
<Dialog.Panel> <Dialog.Panel>
<Dialog.Title>Rename {user.name}?</Dialog.Title> <Dialog.Title>Rename {user.name || user.displayName}?</Dialog.Title>
<Dialog.Text className="mb-6"> <Dialog.Text className="mb-6">
Enter a new username for {user.name}. Changing a username will not Enter a new username for {user.name || user.displayName}. Changing a username will not
update any ACL policies that may refer to this user by their old update any ACL policies that may refer to this user by their old
username. username.
</Dialog.Text> </Dialog.Text>

View File

@ -132,10 +132,6 @@ function getName(user: client.UserInfoResponse, claims: client.IDToken) {
return user.name; return user.name;
} }
if (user.displayName) {
return user.displayName;
}
if (claims.name && typeof claims.name === 'string') { if (claims.name && typeof claims.name === 'string') {
return claims.name; return claims.name;
} }