coder · BrunoQuaresma · Dec 20, 2024 · Dec 17, 2024 · Dec 17, 2024 · Dec 17, 2024
diff --git a/site/e2e/tests/deployment/workspaceProxies.spec.ts b/site/e2e/tests/deployment/workspaceProxies.spec.ts
@@ -18,13 +18,12 @@ test("default proxy is online", async ({ page }) => {
 		`table.MuiTable-root tr[data-testid="primary"]`,
 	);
 
-	const workspaceProxyName = workspaceProxyPrimary.locator("td.name span");
-	const workspaceProxyURL = workspaceProxyPrimary.locator("td.url");
-	const workspaceProxyStatus = workspaceProxyPrimary.locator("td.status span");
+	const summary = workspaceProxyPrimary.locator(".summary");
+	const status = workspaceProxyPrimary.locator(".status");
 
-	await expect(workspaceProxyName).toHaveText("Default");
-	await expect(workspaceProxyURL).toHaveText(`http://localhost:${coderPort}`);
-	await expect(workspaceProxyStatus).toHaveText("Healthy");
+	await expect(summary).toContainText("Default");
+	await expect(summary).toContainText(`http://localhost:${coderPort}`);
+	await expect(status).toContainText("Healthy");
 });
 
 test("custom proxy is online", async ({ page }) => {
@@ -50,19 +49,16 @@ test("custom proxy is online", async ({ page }) => {
 		waitUntil: "domcontentloaded",
 	});
 
-	const workspaceProxy = page.locator("table.MuiTable-root tr", {
+	const proxyRow = page.locator("table.MuiTable-root tr", {
 		hasText: proxyName,
 	});
 
-	const workspaceProxyName = workspaceProxy.locator("td.name span");
-	const workspaceProxyURL = workspaceProxy.locator("td.url");
-	const workspaceProxyStatus = workspaceProxy.locator("td.status span");
+	const summary = proxyRow.locator(".summary");
+	const status = proxyRow.locator(".status");
 
-	await expect(workspaceProxyName).toHaveText(proxyName);
-	await expect(workspaceProxyURL).toHaveText(
-		`http://127.0.0.1:${workspaceProxyPort}`,
-	);
-	await expect(workspaceProxyStatus).toHaveText("Healthy");
+	await expect(summary).toContainText(proxyName);
+	await expect(summary).toContainText(`http://127.0.0.1:${workspaceProxyPort}`);
+	await expect(status).toContainText("Healthy");
 
 	// Tear down the proxy
 	await stopWorkspaceProxy(proxyServer);
@@ -82,13 +78,13 @@ const waitUntilWorkspaceProxyIsHealthy = async (
 	while (retries < maxRetries) {
 		await page.reload();
 
-		const workspaceProxy = page.locator("table.MuiTable-root tr", {
+		const proxyRow = page.locator("table.MuiTable-root tr", {
 			hasText: proxyName,
 		});
-		const workspaceProxyStatus = workspaceProxy.locator("td.status span");
+		const status = proxyRow.locator(".status");
 
 		try {
-			await expect(workspaceProxyStatus).toHaveText("Healthy", {
+			await expect(status).toContainText("Healthy", {
 				timeout: 1_000,
 			});
 			return; // healthy!

diff --git a/site/src/components/Avatar/Avatar.stories.tsx b/site/src/components/Avatar/Avatar.stories.tsx
@@ -1,11 +1,11 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import { Avatar, AvatarFallback, AvatarImage } from "./Avatar";
+import { Avatar } from "./Avatar";
 
 const meta: Meta<typeof Avatar> = {
 	title: "components/Avatar",
 	component: Avatar,
 	args: {
-		children: <AvatarImage src="https://github.com/kylecarbs.png" />,
+		src: "https://github.com/kylecarbs.png",
 	},
 };
 
@@ -16,7 +16,7 @@ export const ImageLgSize: Story = {
 	args: { size: "lg" },
 };
 
-export const ImageDefaultSize: Story = {};
+export const ImageMdSize: Story = {};
 
 export const ImageSmSize: Story = {
 	args: { size: "sm" },
@@ -26,48 +26,51 @@ export const IconLgSize: Story = {
 	args: {
 		size: "lg",
 		variant: "icon",
-		children: (
-			<AvatarImage src="https://em-content.zobj.net/source/apple/391/billed-cap_1f9e2.png" />
-		),
+		src: "https://em-content.zobj.net/source/apple/391/billed-cap_1f9e2.png",
 	},
 };
 
-export const IconDefaultSize: Story = {
+export const IconMdSize: Story = {
 	args: {
 		variant: "icon",
-		children: (
-			<AvatarImage src="https://em-content.zobj.net/source/apple/391/billed-cap_1f9e2.png" />
-		),
+		src: "https://em-content.zobj.net/source/apple/391/billed-cap_1f9e2.png",
 	},
 };
 
 export const IconSmSize: Story = {
 	args: {
 		variant: "icon",
 		size: "sm",
-		children: (
-			<AvatarImage src="https://em-content.zobj.net/source/apple/391/billed-cap_1f9e2.png" />
-		),
+		src: "https://em-content.zobj.net/source/apple/391/billed-cap_1f9e2.png",
+	},
+};
+
+export const NonSquaredIcon: Story = {
+	args: {
+		variant: "icon",
+		src: "/icon/docker.png",
 	},
 };
 
 export const FallbackLgSize: Story = {
 	args: {
+		src: "",
 		size: "lg",
-
-		children: <AvatarFallback>AR</AvatarFallback>,
+		fallback: "Adriana Rodrigues",
 	},
 };
 
-export const FallbackDefaultSize: Story = {
+export const FallbackMdSize: Story = {
 	args: {
-		children: <AvatarFallback>AR</AvatarFallback>,
+		src: "",
+		fallback: "Adriana Rodrigues",
 	},
 };
 
 export const FallbackSmSize: Story = {
 	args: {
+		src: "",
 		size: "sm",
-		children: <AvatarFallback>AR</AvatarFallback>,
+		fallback: "Adriana Rodrigues",
 	},
 };
diff --git a/site/src/components/Avatar/Avatar.tsx b/site/src/components/Avatar/Avatar.tsx
@@ -1,94 +1,92 @@
-import * as AvatarPrimitive from "@radix-ui/react-avatar";
-import { type VariantProps, cva } from "class-variance-authority";
 /**
  * Copied from shadc/ui on 12/16/2024
  * @see {@link https://ui.shadcn.com/docs/components/avatar}
  *
  * This component was updated to support the variants and match the styles from
  * the Figma design:
  * @see {@link https://www.figma.com/design/WfqIgsTFXN2BscBSSyXWF8/Coder-kit?node-id=711-383&t=xqxOSUk48GvDsjGK-0}
+ *
+ * It was also simplified to make usage easier and reduce boilerplate.
+ * @see {@link https://github.com/coder/coder/pull/15930#issuecomment-2552292440}
  */
+
+import { useTheme } from "@emotion/react";
+import * as AvatarPrimitive from "@radix-ui/react-avatar";
+import { type VariantProps, cva } from "class-variance-authority";
 import * as React from "react";
+import { getExternalImageStylesFromUrl } from "theme/externalImages";
 import { cn } from "utils/cn";
 
 const avatarVariants = cva(
 	"relative flex shrink-0 overflow-hidden rounded border border-solid bg-surface-secondary text-content-secondary",
 	{
 		variants: {
 			size: {
-				lg: "h-10 w-10 rounded-[6px] text-sm font-medium",
-				default: "h-6 w-6 text-2xs",
-				sm: "h-[18px] w-[18px] text-[8px]",
+				lg: "h-[--avatar-lg] w-[--avatar-lg] rounded-[6px] text-sm font-medium",
+				md: "h-[--avatar-default] w-[--avatar-default] text-2xs",
+				sm: "h-[--avatar-sm] w-[--avatar-sm] text-[8px]",
 			},
 			variant: {
-				default: "",
-				icon: "",
+				default: null,
+				icon: null,
 			},
 		},
 		defaultVariants: {
-			size: "default",
+			size: "md",
 		},
 		compoundVariants: [
 			{
 				size: "lg",
 				variant: "icon",
-				className: "p-[9px]",
+				className: "p-2",
 			},
 			{
-				size: "default",
+				size: "md",
 				variant: "icon",
-				className: "p-[3px]",
+				className: "p-1",
 			},
 			{
 				size: "sm",
 				variant: "icon",
-				className: "p-[2px]",
+				className: "p-[3px]",
 			},
 		],
 	},
 );
 
-export interface AvatarProps
-	extends React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>,
-		VariantProps<typeof avatarVariants> {}
+export type AvatarProps = AvatarPrimitive.AvatarProps &
+	VariantProps<typeof avatarVariants> & {
+		src?: string;
+
+		fallback?: string;
+	};
 
 const Avatar = React.forwardRef<
 	React.ElementRef<typeof AvatarPrimitive.Root>,
 	AvatarProps
->(({ className, size, variant, ...props }, ref) => (
-	<AvatarPrimitive.Root
-		ref={ref}
-		className={cn(avatarVariants({ size, variant, className }))}
-		{...props}
-	/>
-));
-Avatar.displayName = AvatarPrimitive.Root.displayName;
-
-const AvatarImage = React.forwardRef<
-	React.ElementRef<typeof AvatarPrimitive.Image>,
-	React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
->(({ className, ...props }, ref) => (
-	<AvatarPrimitive.Image
-		ref={ref}
-		className={cn("aspect-square h-full w-full", className)}
-		{...props}
-	/>
-));
-AvatarImage.displayName = AvatarPrimitive.Image.displayName;
+>(({ className, size, variant, src, fallback, children, ...props }, ref) => {
+	const theme = useTheme();
 
-const AvatarFallback = React.forwardRef<
-	React.ElementRef<typeof AvatarPrimitive.Fallback>,
-	React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
->(({ className, ...props }, ref) => (
-	<AvatarPrimitive.Fallback
-		ref={ref}
-		className={cn(
-			"flex h-full w-full items-center justify-center rounded-full",
-			className,
-		)}
-		{...props}
-	/>
-));
-AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
+	return (
+		<AvatarPrimitive.Root
+			ref={ref}
+			className={cn(avatarVariants({ size, variant, className }))}
+			{...props}
+		>
+			<AvatarPrimitive.Image
+				src={src}
+				className="aspect-square h-full w-full object-contain"
+				css={getExternalImageStylesFromUrl(theme.externalImages, src)}
+			/>
+			{fallback && (
+				<AvatarPrimitive.Fallback className="flex h-full w-full items-center justify-center rounded-full">
+					{fallback.charAt(0).toUpperCase()}
+				</AvatarPrimitive.Fallback>
+			)}
+			{children}
+		</AvatarPrimitive.Root>
+	);
+});
+Avatar.displayName = AvatarPrimitive.Root.displayName;
 
-export { Avatar, AvatarImage, AvatarFallback };
+export { Avatar };
diff --git a/...ponents/AvatarCard/AvatarCard.stories.tsx → .../components/Avatar/AvatarCard.stories.tsx b/...ponents/AvatarCard/AvatarCard.stories.tsx → .../components/Avatar/AvatarCard.stories.tsx
@@ -13,7 +13,6 @@ export const WithImage: Story = {
 	args: {
 		header: "Coder",
 		imgUrl: "https://avatars.githubusercontent.com/u/95932066?s=200&v=4",
-		altText: "Coder",
 		subtitle: "56 members",
 	},
 };

diff --git a/.../src/components/AvatarCard/AvatarCard.tsx → site/src/components/Avatar/AvatarCard.tsx b/.../src/components/AvatarCard/AvatarCard.tsx → site/src/components/Avatar/AvatarCard.tsx
@@ -1,22 +1,17 @@
 import { type CSSObject, useTheme } from "@emotion/react";
-import { Avatar } from "components/deprecated/Avatar/Avatar";
+import { Avatar } from "components/Avatar/Avatar";
 import type { FC, ReactNode } from "react";
 
 type AvatarCardProps = {
 	header: string;
 	imgUrl: string;
-	altText: string;
-	background?: boolean;
-
 	subtitle?: ReactNode;
 	maxWidth?: number | "none";
 };
 
 export const AvatarCard: FC<AvatarCardProps> = ({
 	header,
 	imgUrl,
-	altText,
-	background,
 	subtitle,
 	maxWidth = "none",
 }) => {
@@ -72,9 +67,7 @@ export const AvatarCard: FC<AvatarCardProps> = ({
 				)}
 			</div>
 
-			<Avatar background={background} src={imgUrl} alt={altText} size="md">
-				{header}
-			</Avatar>
+			<Avatar size="lg" src={imgUrl} fallback={header} />
 		</div>
 	);
 };
diff --git a/...ponents/AvatarData/AvatarData.stories.tsx → .../components/Avatar/AvatarData.stories.tsx b/...ponents/AvatarData/AvatarData.stories.tsx → .../components/Avatar/AvatarData.stories.tsx
diff --git a/.../src/components/AvatarData/AvatarData.tsx → site/src/components/Avatar/AvatarData.tsx b/.../src/components/AvatarData/AvatarData.tsx → site/src/components/Avatar/AvatarData.tsx
@@ -1,6 +1,6 @@
 import { useTheme } from "@emotion/react";
+import { Avatar } from "components/Avatar/Avatar";
 import { Stack } from "components/Stack/Stack";
-import { Avatar } from "components/deprecated/Avatar/Avatar";
 import type { FC, ReactNode } from "react";
 
 export interface AvatarDataProps {
@@ -29,17 +29,17 @@ export const AvatarData: FC<AvatarDataProps> = ({
 	const theme = useTheme();
 	if (!avatar) {
 		avatar = (
-			<Avatar background src={src}>
-				{(typeof title === "string" ? title : imgFallbackText) || "-"}
-			</Avatar>
+			<Avatar
+				src={src}
+				fallback={(typeof title === "string" ? title : imgFallbackText) || "-"}
+			/>
 		);
 	}
 
 	return (
 		<Stack
-			spacing={1.5}
+			spacing={1}
 			direction="row"
-			alignItems="center"
 			css={{
 				minHeight: 40, // Make it predictable for the skeleton
 				width: "100%",

diff --git a/...ponents/AvatarData/AvatarDataSkeleton.tsx → .../components/Avatar/AvatarDataSkeleton.tsx b/...ponents/AvatarData/AvatarDataSkeleton.tsx → .../components/Avatar/AvatarDataSkeleton.tsx