Skip to content

Commit 3c60de4

Browse files
heisbrotheisbrot
authored
Add a fallback in case the user has no name (#320)
* Fix redirect link to event streaming docs * Fallback to a user id in case user has no name
1 parent 2267cec commit 3c60de4

File tree

11 files changed

+68
-41
lines changed

11 files changed

+68
-41
lines changed

‎src/app/(dashboard)/team/user/page.tsx‎

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -121,7 +121,7 @@ function UserOverview({ user }: Props) {
121121
/>
122122
)}
123123

124-
<Breadcrumbs.Item label={user.name} active />
124+
<Breadcrumbs.Item label={user.name || user.id} active />
125125
</Breadcrumbs>
126126

127127
<div className={"flex justify-between max-w-6xl"}>
@@ -138,18 +138,22 @@ function UserOverview({ user }: Props) {
138138
}
139139
: {
140140
color: user?.name
141-
? generateColorFromString(user?.name || "System User")
141+
? generateColorFromString(
142+
user?.name || user?.id || "System User",
143+
)
142144
: "#808080",
143145
}
144146
}
145147
>
146148
{user.is_service_user ? (
147149
<IconSettings2 size={16} />
148150
) : (
149-
user?.name?.charAt(0)
151+
user?.name?.charAt(0) || user?.id?.charAt(0)
150152
)}
151153
</div>
152-
<h1 className={"flex items-center gap-3"}>{user.name}</h1>
154+
<h1 className={"flex items-center gap-3"}>
155+
{user.name || user.id}
156+
</h1>
153157
</div>
154158
</div>
155159
<div className={"flex gap-4"}>
@@ -256,10 +260,10 @@ function UserInformationCard({ user }: { user: User }) {
256260
label={
257261
<>
258262
<User2 size={16} />
259-
Name
263+
{user.name ? "Name" : "User ID"}
260264
</>
261265
}
262-
value={user.name}
266+
value={user.name || user.id}
263267
/>
264268

265269
{!isServiceUser && (
@@ -270,7 +274,7 @@ function UserInformationCard({ user }: { user: User }) {
270274
E-Mail
271275
</>
272276
}
273-
value={user.email}
277+
value={user.email || "-"}
274278
/>
275279
)}
276280

‎src/components/ui/UserAvatar.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -31,11 +31,11 @@ export const UserAvatar = ({ size = "default" }: Props) => {
3131
)}
3232
style={{
3333
color: user?.name
34-
? generateColorFromString(user?.name || "System User")
34+
? generateColorFromString(user?.name || user?.id || "System User")
3535
: "#808080",
3636
}}
3737
>
38-
{user?.name?.charAt(0)}
38+
{user?.name?.charAt(0) || user?.id?.charAt(0)}
3939
</div>
4040
);
4141
};

‎src/modules/activity/ActivityDescription.tsx‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -314,8 +314,7 @@ export default function ActivityDescription({ event }: Props) {
314314
return (
315315
<div className={"inline"}>
316316
User <Value>{event.meta.username}</Value>{" "}
317-
<Value>{event.meta.email}</Value>
318-
was deleted
317+
<Value>{event.meta.email}</Value> was deleted
319318
</div>
320319
);
321320

@@ -454,7 +453,7 @@ function Value({
454453
return children ? (
455454
<span
456455
className={cn(
457-
"text-nb-gray-200 inline font-medium bg-nb-gray-900 py-[3px] text-[12px] px-[5px] border border-nb-gray-800 rounded-[4px]",
456+
"text-nb-gray-200 inline font-medium bg-nb-gray-900 py-[3px] text-[11px] px-[5px] border border-nb-gray-800 rounded-[4px]",
458457
className,
459458
)}
460459
>

‎src/modules/activity/ActivityEntryRow.tsx‎

Lines changed: 15 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -61,23 +61,25 @@ export const ActivityEntryRow = ({ event }: { event: ActivityEvent }) => {
6161
}
6262
style={{
6363
color: user?.name
64-
? generateColorFromString(user?.name || "System User")
64+
? generateColorFromString(
65+
user?.name || user?.id || "System User",
66+
)
6567
: "#808080",
6668
}}
6769
>
68-
{!user?.name && <Cog size={12} />}
69-
{user?.name?.charAt(0)}
70+
{!user?.name && !user?.id && <Cog size={12} />}
71+
{user?.name?.charAt(0) || user?.id?.charAt(0)}
7072
</div>
7173

7274
<span className={"text-sm text-nb-gray-200"}>
73-
<TextWithTooltip text={user?.name || "System"} maxChars={20} />
74-
</span>
75-
<span className={"text-sm text-nb-gray-400 font-light"}>
7675
<TextWithTooltip
77-
text={user?.email || "NetBird"}
76+
text={user?.name || user?.id || "System"}
7877
maxChars={20}
7978
/>
8079
</span>
80+
<span className={"text-sm text-nb-gray-400 font-light"}>
81+
<TextWithTooltip text={user?.email || ""} maxChars={20} />
82+
</span>
8183
</div>
8284
</div>
8385

@@ -91,11 +93,15 @@ export const ActivityEntryRow = ({ event }: { event: ActivityEvent }) => {
9193

9294
<Card
9395
className={
94-
"w-full relative bg-nb-gray-925 text-sm text-nb-gray-300 flex flex-col px-4 pt-3 pb-4"
96+
"w-full relative bg-nb-gray-925 text-sm text-nb-gray-300 flex flex-col px-4 pt-3 pb-3"
9597
}
9698
>
9799
<div className={"flex gap-4"}>
98-
<div className={"flex items-center mt-2 text-nb-gray-300 text-sm"}>
100+
<div
101+
className={
102+
"flex items-center text-nb-gray-300 text-sm leading-[2]"
103+
}
104+
>
99105
<ActivityDescription event={event} />
100106
</div>
101107
</div>

‎src/modules/activity/ActivityUserSelector.tsx‎

Lines changed: 24 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -88,13 +88,18 @@ export function ActivityUserSelector({
8888
style={{
8989
color: selectedUser?.name
9090
? generateColorFromString(
91-
selectedUser?.name || "System User",
91+
selectedUser?.name ||
92+
selectedUser?.id ||
93+
"System User",
9294
)
9395
: "#808080",
9496
}}
9597
>
96-
{!selectedUser?.name && <Cog size={12} />}
97-
{selectedUser?.name?.charAt(0)}
98+
{selectedUser?.email === "NetBird" ? (
99+
<Cog size={12} />
100+
) : (
101+
selectedUser?.name?.charAt(0) || selectedUser?.id?.charAt(0)
102+
)}
98103
</div>
99104
<div className={"flex items-center gap-2"}>
100105
<TextWithTooltip
@@ -203,10 +208,14 @@ export function ActivityUserSelector({
203208
</CommandItem>
204209

205210
{users.map((user) => {
211+
const searchValue =
212+
user.email === "NetBird"
213+
? "NetBird System"
214+
: user.name + " " + user.id + " " + user.email;
206215
return (
207216
<CommandItem
208217
key={user.id}
209-
value={user.name + " " + user.id}
218+
value={searchValue}
210219
className={"py-1 px-2"}
211220
onSelect={() => {
212221
toggle(user.email);
@@ -222,19 +231,26 @@ export function ActivityUserSelector({
222231
style={{
223232
color: user?.name
224233
? generateColorFromString(
225-
user?.name || "System User",
234+
user?.name || user?.id || "System User",
226235
)
227236
: "#808080",
228237
}}
229238
>
230-
{!user?.name && <Cog size={14} />}
231-
{user?.name?.charAt(0)}
239+
{user?.email === "NetBird" ? (
240+
<Cog size={14} />
241+
) : (
242+
user?.name?.charAt(0) || user?.id?.charAt(0)
243+
)}
232244
</div>
233245

234246
<div className={"flex flex-col text-xs"}>
235247
<span className={" text-nb-gray-200"}>
236248
<TextWithTooltip
237-
text={user?.name || "System"}
249+
text={
250+
user?.email === "NetBird"
251+
? "System"
252+
: user?.name || user?.id
253+
}
238254
maxChars={20}
239255
/>
240256
</span>

‎src/modules/users/ServiceUsersTable.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -88,7 +88,7 @@ export default function ServiceUsersTable({ users, isLoading }: Props) {
8888
<>
8989
<DataTable
9090
isLoading={isLoading}
91-
text={"Network Routes"}
91+
text={"Service Users"}
9292
sorting={sorting}
9393
setSorting={setSorting}
9494
columns={ServiceUsersTableColumns}

‎src/modules/users/UsersTable.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -123,7 +123,7 @@ export default function UsersTable({ users, isLoading }: Props) {
123123
<>
124124
<DataTable
125125
isLoading={isLoading}
126-
text={"Network Routes"}
126+
text={"Users"}
127127
sorting={sorting}
128128
setSorting={setSorting}
129129
columns={UsersTableColumns}

‎src/modules/users/table-cells/ServiceUserNameCell.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ export default function ServiceUserNameCell({ user }: Props) {
1919
</div>
2020
<div className={"flex flex-col justify-center"}>
2121
<span className={cn("text-base font-medium flex items-center gap-3")}>
22-
{user.name}
22+
{user.name || user.id}
2323
</span>
2424
</div>
2525
</div>

‎src/modules/users/table-cells/UserActionCell.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,8 +18,9 @@ export default function UserActionCell({ user, serviceUser = false }: Props) {
1818
const { mutate } = useSWRConfig();
1919

2020
const deleteRule = async () => {
21+
const name = user.name || "User";
2122
notify({
22-
title: user.name + "deleted",
23+
title: name + "deleted",
2324
description: "User was successfully deleted.",
2425
promise: userRequest.del("", `/${user.id}`).then(() => {
2526
mutate(`/users?service_user=${serviceUser}`);
@@ -29,8 +30,9 @@ export default function UserActionCell({ user, serviceUser = false }: Props) {
2930
};
3031

3132
const openConfirm = async () => {
33+
const name = user.name || "User";
3234
const choice = await confirm({
33-
title: `Delete '${user.name}'?`,
35+
title: `Delete '${name}'?`,
3436
description:
3537
"Deleting this user will remove their devices and remove dashboard access. This action cannot be undone.",
3638
confirmText: "Delete",

‎src/modules/users/table-cells/UserBlockCell.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -20,12 +20,12 @@ export default function UserBlockCell({ user, isUserPage = false }: Props) {
2020
const disabled = user.is_current || user.role === "owner";
2121

2222
const update = async (blocked: boolean) => {
23+
const name = user.name || "User";
24+
2325
notify({
2426
title: blocked ? "User blocked" : "User unblocked",
2527
description:
26-
user.name +
27-
" was successfully " +
28-
(blocked ? "blocked." : "unblocked."),
28+
name + " was successfully " + (blocked ? "blocked." : "unblocked."),
2929
promise: userRequest
3030
.put(
3131
{

0 commit comments

Comments
 (0)