From 27b2831f0071cea130fdcff576fc7f86db2a92b4 Mon Sep 17 00:00:00 2001
From: Domingo Dirutigliano <me@domy.sh>
Date: Fri, 11 Jul 2025 10:54:38 +0200
Subject: [PATCH] displayName correctly integrated

---
 app/components/Header.tsx                              | 4 ++--
 app/routes/machines/components/machine-row.tsx         | 2 +-
 app/routes/machines/dialogs/move.tsx                   | 2 +-
 app/routes/machines/dialogs/new.tsx                    | 2 +-
 app/routes/machines/machine.tsx                        | 4 ++--
 app/routes/settings/auth-keys/auth-key-row.tsx         | 2 +-
 app/routes/settings/auth-keys/dialogs/add-auth-key.tsx | 2 +-
 app/routes/settings/auth-keys/overview.tsx             | 2 +-
 app/routes/users/components/user-row.tsx               | 4 ++--
 app/routes/users/dialogs/delete-user.tsx               | 2 +-
 app/routes/users/dialogs/reassign-user.tsx             | 2 +-
 app/routes/users/dialogs/rename-user.tsx               | 4 ++--
 app/utils/oidc.ts                                      | 4 ----
 13 files changed, 16 insertions(+), 20 deletions(-)

diff --git a/app/components/Header.tsx b/app/components/Header.tsx
index f02d6e3..e166c7f 100644
--- a/app/components/Header.tsx
+++ b/app/components/Header.tsx
@@ -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>
diff --git a/app/routes/machines/components/machine-row.tsx b/app/routes/machines/components/machine-row.tsx
index c078773..4513af2 100644
--- a/app/routes/machines/components/machine-row.tsx
+++ b/app/routes/machines/components/machine-row.tsx
@@ -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)}
diff --git a/app/routes/machines/dialogs/move.tsx b/app/routes/machines/dialogs/move.tsx
index 305a358..3b86bb7 100644
--- a/app/routes/machines/dialogs/move.tsx
+++ b/app/routes/machines/dialogs/move.tsx
@@ -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>
diff --git a/app/routes/machines/dialogs/new.tsx b/app/routes/machines/dialogs/new.tsx
index 35c6320..df98129 100644
--- a/app/routes/machines/dialogs/new.tsx
+++ b/app/routes/machines/dialogs/new.tsx
@@ -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>
diff --git a/app/routes/machines/machine.tsx b/app/routes/machines/machine.tsx
index a081085..051794f 100644
--- a/app/routes/machines/machine.tsx
+++ b/app/routes/machines/machine.tsx
@@ -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 machine’s operating system and is used as the default name for the machine."
diff --git a/app/routes/settings/auth-keys/auth-key-row.tsx b/app/routes/settings/auth-keys/auth-key-row.tsx
index 5483f76..76f422d 100644
--- a/app/routes/settings/auth-keys/auth-key-row.tsx
+++ b/app/routes/settings/auth-keys/auth-key-row.tsx
@@ -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'} />
diff --git a/app/routes/settings/auth-keys/dialogs/add-auth-key.tsx b/app/routes/settings/auth-keys/dialogs/add-auth-key.tsx
index faa3753..18df724 100644
--- a/app/routes/settings/auth-keys/dialogs/add-auth-key.tsx
+++ b/app/routes/settings/auth-keys/dialogs/add-auth-key.tsx
@@ -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
diff --git a/app/routes/settings/auth-keys/overview.tsx b/app/routes/settings/auth-keys/overview.tsx
index ef2cdfa..3658147 100644
--- a/app/routes/settings/auth-keys/overview.tsx
+++ b/app/routes/settings/auth-keys/overview.tsx
@@ -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>
diff --git a/app/routes/users/components/user-row.tsx b/app/routes/users/components/user-row.tsx
index b6d9118..ce8d531 100644
--- a/app/routes/users/components/user-row.tsx
+++ b/app/routes/users/components/user-row.tsx
@@ -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>
diff --git a/app/routes/users/dialogs/delete-user.tsx b/app/routes/users/dialogs/delete-user.tsx
index 0e2aae2..2490adb 100644
--- a/app/routes/users/dialogs/delete-user.tsx
+++ b/app/routes/users/dialogs/delete-user.tsx
@@ -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}>
diff --git a/app/routes/users/dialogs/reassign-user.tsx b/app/routes/users/dialogs/reassign-user.tsx
index d31fdcc..ab88195 100644
--- a/app/routes/users/dialogs/reassign-user.tsx
+++ b/app/routes/users/dialogs/reassign-user.tsx
@@ -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
diff --git a/app/routes/users/dialogs/rename-user.tsx b/app/routes/users/dialogs/rename-user.tsx
index a18b830..b47245b 100644
--- a/app/routes/users/dialogs/rename-user.tsx
+++ b/app/routes/users/dialogs/rename-user.tsx
@@ -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>
diff --git a/app/utils/oidc.ts b/app/utils/oidc.ts
index 113bb09..788029c 100644
--- a/app/utils/oidc.ts
+++ b/app/utils/oidc.ts
@@ -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;
 	}