use display name function

2026-02-16 18:06:39 +00:00 · 2026-01-19 20:49:39 -08:00
parent e09cd6c16c
commit b299f3d6aa
14 changed files with 121 additions and 26 deletions
--- a/src/components/AdminUsersTable.tsx
+++ b/src/components/AdminUsersTable.tsx
@@ -11,6 +11,7 @@ import ConfirmDeleteDialog from "@app/components/ConfirmDeleteDialog";
 import { toast } from "@app/hooks/useToast";
 import { formatAxiosError } from "@app/lib/api";
 import { createApiClient } from "@app/lib/api";
+import { getUserDisplayName } from "@app/lib/getUserDisplayName";
 import { useEnvContext } from "@app/hooks/useEnvContext";
 import { useTranslations } from "next-intl";
 import {
@@ -321,10 +322,13 @@ export default function UsersTable({ users }: Props) {
                        <div className="space-y-2">
                            <p>
                                {t("userQuestionRemove", {
-                                    selectedUser:
-                                        selected?.email ||
-                                        selected?.name ||
-                                        selected?.username
+                                    selectedUser: selected
+                                        ? getUserDisplayName({
+                                              email: selected.email,
+                                              name: selected.name,
+                                              username: selected.username
+                                          })
+                                        : ""
                                })}
                            </p>

@@ -337,9 +341,11 @@ export default function UsersTable({ users }: Props) {
                    }
                    buttonText={t("userDeleteConfirm")}
                    onConfirm={async () => deleteUser(selected!.id)}
-                    string={
-                        selected.email || selected.name || selected.username
-                    }
+                    string={getUserDisplayName({
+                        email: selected.email,
+                        name: selected.name,
+                        username: selected.username
+                    })}
                    title={t("userDeleteServer")}
                />
            )}
--- a/src/components/ApprovalFeed.tsx
+++ b/src/components/ApprovalFeed.tsx
@@ -2,6 +2,7 @@
 import { useEnvContext } from "@app/hooks/useEnvContext";
 import { toast } from "@app/hooks/useToast";
 import { createApiClient, formatAxiosError } from "@app/lib/api";
+import { getUserDisplayName } from "@app/lib/getUserDisplayName";
 import { cn } from "@app/lib/cn";
 import {
    approvalFiltersSchema,
@@ -185,7 +186,11 @@ function ApprovalRequest({ approval, orgId, onSuccess }: ApprovalRequestProps) {
                <LaptopMinimal className="size-4 text-muted-foreground flex-none relative top-2 sm:top-0" />
                <span>
                    <span className="text-primary">
-                        {approval.user.username}
+                        {getUserDisplayName({
+                            email: approval.user.email,
+                            name: approval.user.name,
+                            username: approval.user.username
+                        })}
                    </span>
                    &nbsp;
                    {approval.type === "user_device" && (
--- a/src/components/CreateInternalResourceDialog.tsx
+++ b/src/components/CreateInternalResourceDialog.tsx
@@ -46,6 +46,7 @@ import { Switch } from "@app/components/ui/switch";
 import { useEnvContext } from "@app/hooks/useEnvContext";
 import { toast } from "@app/hooks/useToast";
 import { createApiClient, formatAxiosError } from "@app/lib/api";
+import { getUserDisplayName } from "@app/lib/getUserDisplayName";
 import { cn } from "@app/lib/cn";
 import { orgQueries } from "@app/lib/queries";
 import { zodResolver } from "@hookform/resolvers/zod";
@@ -270,7 +271,10 @@ export default function CreateInternalResourceDialog({

    const allUsers = usersResponse.map((user) => ({
        id: user.id.toString(),
-        text: `${user.email || user.username}${user.type !== UserType.Internal ? ` (${user.idpName})` : ""}`
+        text: `${getUserDisplayName({
+            email: user.email,
+            username: user.username
+        })}${user.type !== UserType.Internal ? ` (${user.idpName})` : ""}`
    }));

    const allClients = clientsResponse
--- a/src/components/EditInternalResourceDialog.tsx
+++ b/src/components/EditInternalResourceDialog.tsx
@@ -36,6 +36,7 @@ import {
 import { toast } from "@app/hooks/useToast";
 import { useTranslations } from "next-intl";
 import { createApiClient, formatAxiosError } from "@app/lib/api";
+import { getUserDisplayName } from "@app/lib/getUserDisplayName";
 import { useEnvContext } from "@app/hooks/useEnvContext";
 import { Tag, TagInput } from "@app/components/tags/tag-input";
 import { UserType } from "@server/types/UserTypes";
@@ -304,7 +305,10 @@ export default function EditInternalResourceDialog({

            const allUsers = (usersQuery.data ?? []).map((user) => ({
                id: user.id.toString(),
-                text: `${user.email || user.username}${user.type !== UserType.Internal ? ` (${user.idpName})` : ""}`
+                text: `${getUserDisplayName({
+                    email: user.email,
+                    username: user.username
+                })}${user.type !== UserType.Internal ? ` (${user.idpName})` : ""}`
            }));

            const machineClients = (clientsQuery.data ?? [])
@@ -330,7 +334,10 @@ export default function EditInternalResourceDialog({

            const formUsers = (resourceUsersQuery.data ?? []).map((i) => ({
                id: i.userId.toString(),
-                text: `${i.email || i.username}${i.type !== UserType.Internal ? ` (${i.idpName})` : ""}`
+                text: `${getUserDisplayName({
+                    email: i.email,
+                    username: i.username
+                })}${i.type !== UserType.Internal ? ` (${i.idpName})` : ""}`
            }));

            return {
--- a/src/components/ProfileIcon.tsx
+++ b/src/components/ProfileIcon.tsx
@@ -14,6 +14,7 @@ import {
 import { useEnvContext } from "@app/hooks/useEnvContext";
 import { toast } from "@app/hooks/useToast";
 import { formatAxiosError } from "@app/lib/api";
+import { getUserDisplayName } from "@app/lib/getUserDisplayName";
 import { Laptop, LogOut, Moon, Sun, Smartphone } from "lucide-react";
 import { useTheme } from "next-themes";
 import { useRouter } from "next/navigation";
@@ -49,9 +50,8 @@ export default function ProfileIcon() {
    const t = useTranslations();

    function getInitials() {
-        return (user.email || user.name || user.username)
-            .substring(0, 1)
-            .toUpperCase();
+        const displayName = getUserDisplayName({ user });
+        return displayName.substring(0, 1).toUpperCase();
    }

    function handleThemeChange(theme: "light" | "dark" | "system") {
@@ -109,7 +109,7 @@ export default function ProfileIcon() {
                                {t("signingAs")}
                            </p>
                            <p className="text-xs leading-none text-muted-foreground">
-                                {user.email || user.name || user.username}
+                                {getUserDisplayName({ user })}
                            </p>
                        </div>
                        {user.serverAdmin ? (
--- a/src/components/UserDevicesTable.tsx
+++ b/src/components/UserDevicesTable.tsx
@@ -12,6 +12,7 @@ import {
 import { useEnvContext } from "@app/hooks/useEnvContext";
 import { toast } from "@app/hooks/useToast";
 import { createApiClient, formatAxiosError } from "@app/lib/api";
+import { getUserDisplayName } from "@app/lib/getUserDisplayName";
 import {
    ArrowRight,
    ArrowUpDown,
@@ -344,7 +345,10 @@ export default function UserDevicesTable({ userClients }: ClientTableProps) {
                            href={`/${r.orgId}/settings/access/users/${r.userId}`}
                        >
                            <Button variant="outline">
-                                {r.userEmail || r.username || r.userId}
+                                {getUserDisplayName({
+                                    email: r.userEmail,
+                                    username: r.username
+                                }) || r.userId}
                                <ArrowUpRight className="ml-2 h-4 w-4" />
                            </Button>
                        </Link>
--- a/src/components/UsersTable.tsx
+++ b/src/components/UsersTable.tsx
@@ -19,6 +19,7 @@ import Link from "next/link";
 import { useRouter } from "next/navigation";
 import { formatAxiosError } from "@app/lib/api";
 import { createApiClient } from "@app/lib/api";
+import { getUserDisplayName } from "@app/lib/getUserDisplayName";
 import { useEnvContext } from "@app/hooks/useEnvContext";
 import { useUserContext } from "@app/hooks/useUserContext";
 import { useTranslations } from "next-intl";
@@ -271,10 +272,13 @@ export default function UsersTable({ users: u }: UsersTableProps) {
                buttonText={t("userRemoveOrgConfirm")}
                onConfirm={removeUser}
                string={
-                    selectedUser?.email ||
-                    selectedUser?.name ||
-                    selectedUser?.username ||
-                    ""
+                    selectedUser
+                        ? getUserDisplayName({
+                              email: selectedUser.email,
+                              name: selectedUser.name,
+                              username: selectedUser.username
+                          })
+                        : ""
                }
                title={t("userRemoveOrg")}
            />