fix: make sure workspace avatars display correctly when URLs fail to load

Parkreiner · Parkreiner · commit 59214b181fca · 2024-09-26T05:31:06.000Z
diff --git a/site/src/components/AvatarData/AvatarData.tsx b/site/src/components/AvatarData/AvatarData.tsx
@@ -8,19 +8,34 @@ export interface AvatarDataProps {
 	subtitle?: ReactNode;
 	src?: string;
 	avatar?: React.ReactNode;
+
+	/**
+	 * Useful for when you need to pass in a ReactNode for the title of the
+	 * component.
+	 *
+	 * MUI will try to take any string titles and turn them into the first
+	 * character, but if you pass in a ReactNode, MUI can't do that, because it
+	 * has no way to reliably grab the text content during renders.
+	 *
+	 * Tried writing some layout effect/JSX parsing logic to do the extraction,
+	 * but it added complexity and render overhead, and wasn't reliable enough
+	 */
+	fallbackLetter?: string;
 }
 
 export const AvatarData: FC<AvatarDataProps> = ({
 	title,
 	subtitle,
 	src,
+	fallbackLetter,
 	avatar,
 }) => {
 	const theme = useTheme();
-
-	if (!avatar) {
-		avatar = <Avatar src={src}>{title}</Avatar>;
-	}
+	avatar ??= (
+		<Avatar background src={src}>
+			{typeof title === "string" ? title : (fallbackLetter?.slice(0, 1) ?? "-")}
+		</Avatar>
+	);
 
 	return (
 		<Stack
diff --git a/site/src/pages/WorkspacePage/WorkspaceTopbar.tsx b/site/src/pages/WorkspacePage/WorkspaceTopbar.tsx
@@ -30,6 +30,7 @@ import { WorkspaceActions } from "./WorkspaceActions/WorkspaceActions";
 import { WorkspaceNotifications } from "./WorkspaceNotifications/WorkspaceNotifications";
 import { WorkspaceScheduleControls } from "./WorkspaceScheduleControls";
 import type { WorkspacePermissions } from "./permissions";
+import { isEmojiUrl } from "utils/appearance";
 
 export type WorkspaceError =
 	| "getBuildsError"
@@ -344,7 +345,12 @@ const OrganizationBreadcrumb: FC<OrganizationBreadcrumbProps> = ({
 					subtitle="Organization"
 					avatar={
 						orgIconUrl && (
-							<ExternalAvatar src={orgIconUrl} variant="square" fitImage />
+							<ExternalAvatar
+								src={orgIconUrl}
+								title={orgName}
+								variant={isEmojiUrl(orgIconUrl) ? "square" : "circular"}
+								fitImage
+							/>
 						)
 					}
 				/>
@@ -405,7 +411,12 @@ const WorkspaceBreadcrumb: FC<WorkspaceBreadcrumbProps> = ({
 						</Link>
 					}
 					avatar={
-						<ExternalAvatar src={templateIconUrl} variant="square" fitImage />
+						<ExternalAvatar
+							src={templateIconUrl}
+							title={workspaceName}
+							variant={isEmojiUrl(templateIconUrl) ? "square" : "circular"}
+							fitImage
+						/>
 					}
 				/>
 			</HelpTooltipContent>
diff --git a/site/src/theme/externalImages.ts b/site/src/theme/externalImages.ts
@@ -75,8 +75,8 @@ const parseInvertFilterParameters = (
 
 	let extraStyles: CSSObject | undefined;
 
-	const brightness = params.get("brightness");
-	if (multiplier.test(brightness!)) {
+	const brightness = params.get("brightness") ?? "";
+	if (multiplier.test(brightness)) {
 		let filter = baseStyles.filter ?? "";
 		filter += ` brightness(${brightness})`;
 		extraStyles = { ...extraStyles, filter };
@@ -131,7 +131,7 @@ export function getExternalImageStylesFromUrl(
 	) {
 		return parseImageParameters(
 			modes,
-			defaultParametersForBuiltinIcons.get(url.pathname)!,
+			defaultParametersForBuiltinIcons.get(url.pathname) as string,
 		);
 	}
 
diff --git a/site/src/utils/appearance.ts b/site/src/utils/appearance.ts
@@ -1,3 +1,5 @@
+import type { ReactFragment, ReactNode, ReactPortal } from "react";
+
 export const getApplicationName = (): string => {
 	const c = document.head
 		.querySelector("meta[name=application-name]")
@@ -14,3 +16,18 @@ export const getLogoURL = (): string => {
 		?.getAttribute("content");
 	return c && !c.startsWith("{{ .") ? c : "";
 };
+
+/**
+ * Exposes an easy way to determine if a given URL is for an emoji hosted on
+ * the Coder deployment.
+ *
+ * Helps when you need to style emojis differently (i.e., not adding rounding to
+ * the container so that the emoji doesn't get cut off).
+ */
+export function isEmojiUrl(url: string | undefined): boolean {
+	if (!url) {
+		return false;
+	}
+
+	return url.startsWith("/emojis/");
+}
