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
+2 -2
View File
@@ -107,7 +107,7 @@ export default function Header(data: Props) {
{data.user.picture ? (
<img
src={data.user.picture}
alt={data.user.name}
alt={data.user.name || data.user.displayName}
className="w-8 h-8 rounded-full"
/>
) : (
@@ -131,7 +131,7 @@ export default function Header(data: Props) {
<Menu.Section>
<Menu.Item key="profile" textValue="Profile">
<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>
</div>
</Menu.Item>
@@ -64,7 +64,7 @@ export default function MachineRow({
{node.givenName}
</p>
<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>
<div className="flex gap-1 flex-wrap mt-1.5">
{mapTagsToComponents(node, uiTags)}
+1 -1
View File
@@ -34,7 +34,7 @@ export default function Move({ machine, users, isOpen, setIsOpen }: MoveProps) {
}}
>
{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>
</Dialog.Panel>
+1 -1
View File
@@ -46,7 +46,7 @@ export default function NewMachine(data: NewMachineProps) {
placeholder="Select a 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>
</Dialog.Panel>
+2 -2
View File
@@ -109,7 +109,7 @@ export default function Page() {
</span>
<div className="flex items-center gap-x-2.5 mt-1">
<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 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"
>
<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
tooltip="OS hostname is published by the machines operating system and is used as the default name for the machine."
@@ -18,7 +18,7 @@ export default function AuthKeyRow({ authKey, user, url }: Props) {
return (
<div className="w-full">
<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="Ephemeral" value={authKey.ephemeral ? 'Yes' : 'No'} />
<Attribute name="Used" value={authKey.used ? 'Yes' : 'No'} />
@@ -36,7 +36,7 @@ export default function AddAuthKey(data: AddAuthKeyProps) {
}}
>
{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>
<NumberInput
+1 -1
View File
@@ -197,7 +197,7 @@ export default function Page() {
{[
<Select.Item key="__headplane_all">All</Select.Item>,
...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>
+2 -2
View File
@@ -26,14 +26,14 @@ export default function UserRow({ user, role }: UserRowProps) {
{user.profilePicUrl ? (
<img
src={user.profilePicUrl}
alt={user.name}
alt={user.name || user.displayName}
className="w-10 h-10 rounded-full"
/>
) : (
<CircleUser className="w-10 h-10" />
)}
<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>
</div>
</div>
+1 -1
View File
@@ -8,7 +8,7 @@ interface DeleteProps {
}
export default function DeleteUser({ user, isOpen, setIsOpen }: DeleteProps) {
const name = user.name;
const name = user.name || user.displayName;
return (
<Dialog isOpen={isOpen} onOpenChange={setIsOpen}>
+1 -1
View File
@@ -21,7 +21,7 @@ export default function ReassignUser({
<Dialog.Panel
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">
Most roles are carried straight from Tailscale. However, keep in mind
that I have not fully implemented permissions yet and some things may
+2 -2
View File
@@ -13,9 +13,9 @@ export default function RenameUser({ user, isOpen, setIsOpen }: RenameProps) {
return (
<Dialog isOpen={isOpen} onOpenChange={setIsOpen}>
<Dialog.Panel>
<Dialog.Title>Rename {user.name}?</Dialog.Title>
<Dialog.Title>Rename {user.name || user.displayName}?</Dialog.Title>
<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
username.
</Dialog.Text>
-4
View File
@@ -132,10 +132,6 @@ function getName(user: client.UserInfoResponse, claims: client.IDToken) {
return user.name;
}
if (user.displayName) {
return user.displayName;
}
if (claims.name && typeof claims.name === 'string') {
return claims.name;
}