E2E fix + review requests

coder · BrunoQuaresma · Dec 20, 2024 · Dec 17, 2024 · Dec 17, 2024 · Dec 17, 2024
commit 6453ce3eba6434aaf55a40ca5dc01abf6621c979
@@ -50,19 +50,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).toHaveText(proxyName);
+	await expect(summary).toHaveText(`http://127.0.0.1:${workspaceProxyPort}`);
+	await expect(status).toHaveText("Healthy");
 
 	// Tear down the proxy
 	await stopWorkspaceProxy(proxyServer);
@@ -82,13 +79,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).toHaveText("Healthy", {
 				timeout: 1_000,
 			});
 			return; // healthy!

@@ -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" },
@@ -30,7 +30,7 @@ export const IconLgSize: Story = {
 	},
 };
 
-export const IconDefaultSize: Story = {
+export const IconMdSize: Story = {
 	args: {
 		variant: "icon",
 		src: "https://em-content.zobj.net/source/apple/391/billed-cap_1f9e2.png",
@@ -60,7 +60,7 @@ export const FallbackLgSize: Story = {
 	},
 };
 
-export const FallbackDefaultSize: Story = {
+export const FallbackMdSize: Story = {
 	args: {
 		src: "",
 		fallback: "Adriana Rodrigues",

@@ -23,16 +23,16 @@ const avatarVariants = cva(
 		variants: {
 			size: {
 				lg: "h-[--avatar-lg] w-[--avatar-lg] rounded-[6px] text-sm font-medium",
-				default: "h-[--avatar-default] w-[--avatar-default] text-2xs",
+				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: [
 			{
@@ -41,7 +41,7 @@ const avatarVariants = cva(
 				className: "p-2",
 			},
 			{
-				size: "default",
+				size: "md",
 				variant: "icon",
 				className: "p-1",
 			},
@@ -57,42 +57,36 @@ const avatarVariants = cva(
 export type AvatarProps = AvatarPrimitive.AvatarProps &
 	VariantProps<typeof avatarVariants> & {
 		src?: string;
-		alt?: string;
+
 		fallback?: string;
 	};
 
 const Avatar = React.forwardRef<
 	React.ElementRef<typeof AvatarPrimitive.Root>,
 	AvatarProps
->(
-	(
-		{ className, size, variant, src, alt, fallback, children, ...props },
-		ref,
-	) => {
-		const theme = useTheme();
+>(({ className, size, variant, src, fallback, children, ...props }, ref) => {
+	const theme = useTheme();
 
-		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)}
-					alt={alt}
-				/>
-				{fallback && (
-					<AvatarPrimitive.Fallback className="flex h-full w-full items-center justify-center rounded-full">
-						{fallback.charAt(0).toUpperCase()}
-					</AvatarPrimitive.Fallback>
-				)}
-				{children}
-			</AvatarPrimitive.Root>
-		);
-	},
-);
+	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 };
@@ -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",
 	},
 };

@@ -5,15 +5,13 @@ import type { FC, ReactNode } from "react";
 type AvatarCardProps = {
 	header: string;
 	imgUrl: string;
-	altText: string;
 	subtitle?: ReactNode;
 	maxWidth?: number | "none";
 };
 
 export const AvatarCard: FC<AvatarCardProps> = ({
 	header,
 	imgUrl,
-	altText,
 	subtitle,
 	maxWidth = "none",
 }) => {
@@ -69,7 +67,7 @@ export const AvatarCard: FC<AvatarCardProps> = ({
 				)}
 			</div>
 
-			<Avatar size="lg" src={imgUrl} alt={altText} fallback={header} />
+			<Avatar size="lg" src={imgUrl} fallback={header} />
 		</div>
 	);
 };
@@ -1,17 +1,17 @@
 import { action } from "@storybook/addon-actions";
 import type { Meta, StoryObj } from "@storybook/react";
 import { expect, userEvent, within } from "@storybook/test";
-import { UserAvatar } from "modules/users/UserAvatar/UserAvatar";
 import { useState } from "react";
 import { withDesktopViewport } from "testHelpers/storybook";
 import {
 	SelectFilter,
 	type SelectFilterOption,
 	SelectFilterSearch,
 } from "./SelectFilter";
+import { Avatar } from "components/Avatar/Avatar";
 
 const options: SelectFilterOption[] = Array.from({ length: 50 }, (_, i) => ({
-	startIcon: <UserAvatar username={`username ${i + 1}`} size="sm" />,
+	startIcon: <Avatar fallback={`username ${i + 1}`} size="sm" />,
 	label: `Option ${i + 1}`,
 	value: `option-${i + 1}`,
 }));

@@ -5,9 +5,9 @@ import {
 	SelectFilterSearch,
 } from "components/Filter/SelectFilter";
 import { useAuthenticated } from "contexts/auth/RequireAuth";
-import { UserAvatar } from "modules/users/UserAvatar/UserAvatar";
 import type { FC } from "react";
 import { type UseFilterMenuOptions, useFilterMenu } from "./menu";
+import { Avatar } from "components/Avatar/Avatar";
 
 export const useUserFilterMenu = ({
 	value,
@@ -23,11 +23,7 @@ export const useUserFilterMenu = ({
 				label: me.username,
 				value: me.username,
 				startIcon: (
-					<UserAvatar
-						username={me.username}
-						avatarURL={me.avatar_url}
-						size="sm"
-					/>
+					<Avatar fallback={me.username} src={me.avatar_url} size="sm" />
 				),
 			},
 			...filtered,
@@ -45,11 +41,7 @@ export const useUserFilterMenu = ({
 					label: me.username,
 					value: me.username,
 					startIcon: (
-						<UserAvatar
-							username={me.username}
-							avatarURL={me.avatar_url}
-							size="sm"
-						/>
+						<Avatar fallback={me.username} src={me.avatar_url} size="sm" />
 					),
 				};
 			}
@@ -61,9 +53,9 @@ export const useUserFilterMenu = ({
 					label: firstUser.username,
 					value: firstUser.username,
 					startIcon: (
-						<UserAvatar
-							username={firstUser.username}
-							avatarURL={firstUser.avatar_url}
+						<Avatar
+							fallback={firstUser.username}
+							src={firstUser.avatar_url}
 							size="sm"
 						/>
 					),
@@ -77,11 +69,7 @@ export const useUserFilterMenu = ({
 				label: user.username,
 				value: user.username,
 				startIcon: (
-					<UserAvatar
-						username={user.username}
-						avatarURL={user.avatar_url}
-						size="sm"
-					/>
+					<Avatar fallback={user.username} src={user.avatar_url} size="sm" />
 				),
 			}));
 			options = addMeAsFirstOption(options);

@@ -2,7 +2,7 @@ import { css } from "@emotion/css";
 import { useTheme } from "@emotion/react";
 import Button, { type ButtonProps } from "@mui/material/Button";
 import IconButton, { type IconButtonProps } from "@mui/material/IconButton";
-import { Avatar } from "components/Avatar/Avatar";
+import { Avatar, type AvatarProps } from "components/Avatar/Avatar";
 import {
 	type FC,
 	type ForwardedRef,
@@ -93,8 +93,8 @@ export const TopbarDivider: FC<HTMLAttributes<HTMLSpanElement>> = (props) => {
 	);
 };
 
-export const TopbarAvatar: FC<{ src: string }> = ({ src }) => {
-	return <Avatar variant="icon" size="sm" src={src} />;
+export const TopbarAvatar: FC<AvatarProps> = (props) => {
+	return <Avatar {...props} variant="icon" size="sm" />;
 };
 
 type TopbarIconProps = HTMLAttributes<HTMLOrSVGElement>;

@@ -1,7 +1,6 @@
 import { action } from "@storybook/addon-actions";
 import type { Meta, StoryObj } from "@storybook/react";
 import { userEvent, within } from "@storybook/test";
-import { UserAvatar } from "modules/users/UserAvatar/UserAvatar";
 import { withDesktopViewport } from "testHelpers/storybook";
 import {
 	SelectMenu,
@@ -13,6 +12,7 @@ import {
 	SelectMenuSearch,
 	SelectMenuTrigger,
 } from "./SelectMenu";
+import { Avatar } from "components/Avatar/Avatar";
 
 const meta: Meta<typeof SelectMenu> = {
 	title: "components/SelectMenu",
@@ -25,7 +25,7 @@ const meta: Meta<typeof SelectMenu> = {
 			<SelectMenu>
 				<SelectMenuTrigger>
 					<SelectMenuButton
-						startIcon={<UserAvatar size="sm" username={selectedOpt} />}
+						startIcon={<Avatar size="sm" fallback={selectedOpt} />}
 					>
 						{selectedOpt}
 					</SelectMenuButton>
@@ -36,7 +36,7 @@ const meta: Meta<typeof SelectMenu> = {
 						{opts.map((o) => (
 							<SelectMenuItem key={o} selected={o === selectedOpt}>
 								<SelectMenuIcon>
-									<UserAvatar size="sm" username={o} />
+									<Avatar size="sm" fallback={o} />
 								</SelectMenuIcon>
 								{o}
 							</SelectMenuItem>
@@ -77,7 +77,7 @@ export const LongButtonText: Story = {
 				<SelectMenuTrigger>
 					<SelectMenuButton
 						css={{ width: 200 }}
-						startIcon={<UserAvatar size="sm" username={selectedOpt} />}
+						startIcon={<Avatar size="sm" fallback={selectedOpt} />}
 					>
 						{selectedOpt}
 					</SelectMenuButton>
@@ -88,7 +88,7 @@ export const LongButtonText: Story = {
 						{opts.map((o) => (
 							<SelectMenuItem key={o} selected={o === selectedOpt}>
 								<SelectMenuIcon>
-									<UserAvatar size="sm" username={o} />
+									<Avatar size="sm" fallback={o} />
 								</SelectMenuIcon>
 								{o}
 							</SelectMenuItem>
@@ -115,7 +115,7 @@ export const NoSelectedOption: Story = {
 						{opts.map((o) => (
 							<SelectMenuItem key={o}>
 								<SelectMenuIcon>
-									<UserAvatar size="sm" username={o} />
+									<Avatar size="sm" fallback={o} />
 								</SelectMenuIcon>
 								{o}
 							</SelectMenuItem>

@@ -4,8 +4,8 @@ import SecurityIcon from "@mui/icons-material/LockOutlined";
 import AccountIcon from "@mui/icons-material/Person";
 import VpnKeyOutlined from "@mui/icons-material/VpnKeyOutlined";
 import type { Meta, StoryObj } from "@storybook/react";
-import { UserAvatar } from "modules/users/UserAvatar/UserAvatar";
 import { Sidebar, SidebarHeader, SidebarNavItem } from "./Sidebar";
+import { Avatar } from "components/Avatar/Avatar";
 
 const meta: Meta<typeof Sidebar> = {
 	title: "components/Sidebar",
@@ -20,7 +20,7 @@ export const Default: Story = {
 		children: (
 			<Sidebar>
 				<SidebarHeader
-					avatar={<UserAvatar username="Jon" />}
+					avatar={<Avatar fallback="Jon" />}
 					title="Jon"
 					subtitle="jon@coder.com"
 				/>

@@ -19,9 +19,9 @@ export const SmSize: Story = {
 	},
 };
 
-export const DefaultSize: Story = {
+export const MdSize: Story = {
 	args: {
-		size: "default",
+		size: "md",
 	},
 };