feat: update default audit log avatar (cherry-pick #16774) (#16805)

gcp-cherry-pick-bot[bot] · BrunoQuaresma · web-flow · commit 03b501284600 · 2025-03-05T00:21:19.000+05:00
Cherry-picked feat: update default audit log avatar (#16774) After update: ![image](https://github.com/user-attachments/assets/2ac6707f-2a56-45ec-a88f-651826776744) Co-authored-by: Bruno Quaresma <bruno@coder.com>
diff --git a/site/src/components/Avatar/Avatar.tsx b/site/src/components/Avatar/Avatar.tsx
@@ -57,7 +57,6 @@ const avatarVariants = cva(
 export type AvatarProps = AvatarPrimitive.AvatarProps &
 	VariantProps<typeof avatarVariants> & {
 		src?: string;
-
 		fallback?: string;
 	};
 
diff --git a/site/src/pages/AuditPage/AuditLogRow/AuditLogRow.tsx b/site/src/pages/AuditPage/AuditLogRow/AuditLogRow.tsx
@@ -10,6 +10,7 @@ import { DropdownArrow } from "components/DropdownArrow/DropdownArrow";
 import { Pill } from "components/Pill/Pill";
 import { Stack } from "components/Stack/Stack";
 import { TimelineEntry } from "components/Timeline/TimelineEntry";
+import { NetworkIcon } from "lucide-react";
 import { type FC, useState } from "react";
 import { Link as RouterLink } from "react-router-dom";
 import type { ThemeRole } from "theme/roles";
@@ -101,10 +102,20 @@ export const AuditLogRow: FC<AuditLogRowProps> = ({
 						css={styles.auditLogHeaderInfo}
 					>
 						<Stack direction="row" alignItems="center" css={styles.fullWidth}>
-							<Avatar
-								fallback={auditLog.user?.username ?? "?"}
-								src={auditLog.user?.avatar_url}
-							/>
+							{/*
+							 * Session logs don't have an associated user to the log,
+							 * so when it happens we display a default icon to represent non user actions
+							 */}
+							{auditLog.user ? (
+								<Avatar
+									fallback={auditLog.user.username}
+									src={auditLog.user.avatar_url}
+								/>
+							) : (
+								<Avatar>
+									<NetworkIcon className="h-full w-full p-1" />
+								</Avatar>
+							)}
 
 							<Stack
 								alignItems="baseline"
