Skip to content

Commit 6453ce3

Browse files
BrunoQuaresmaBrunoQuaresma
committed
E2E fix + review requests
1 parent 9e03115 commit 6453ce3

File tree

33 files changed

+128
-253
lines changed

33 files changed

+128
-253
lines changed

‎site/e2e/tests/deployment/workspaceProxies.spec.ts

Lines changed: 9 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -50,19 +50,16 @@ test("custom proxy is online", async ({ page }) => {
5050
waitUntil: "domcontentloaded",
5151
});
5252

53-
const workspaceProxy = page.locator("table.MuiTable-root tr", {
53+
const proxyRow = page.locator("table.MuiTable-root tr", {
5454
hasText: proxyName,
5555
});
5656

57-
const workspaceProxyName = workspaceProxy.locator("td.name span");
58-
const workspaceProxyURL = workspaceProxy.locator("td.url");
59-
const workspaceProxyStatus = workspaceProxy.locator("td.status span");
57+
const summary = proxyRow.locator(".summary");
58+
const status = proxyRow.locator(".status");
6059

61-
await expect(workspaceProxyName).toHaveText(proxyName);
62-
await expect(workspaceProxyURL).toHaveText(
63-
`http://127.0.0.1:${workspaceProxyPort}`,
64-
);
65-
await expect(workspaceProxyStatus).toHaveText("Healthy");
60+
await expect(summary).toHaveText(proxyName);
61+
await expect(summary).toHaveText(`http://127.0.0.1:${workspaceProxyPort}`);
62+
await expect(status).toHaveText("Healthy");
6663

6764
// Tear down the proxy
6865
await stopWorkspaceProxy(proxyServer);
@@ -82,13 +79,13 @@ const waitUntilWorkspaceProxyIsHealthy = async (
8279
while (retries < maxRetries) {
8380
await page.reload();
8481

85-
const workspaceProxy = page.locator("table.MuiTable-root tr", {
82+
const proxyRow = page.locator("table.MuiTable-root tr", {
8683
hasText: proxyName,
8784
});
88-
const workspaceProxyStatus = workspaceProxy.locator("td.status span");
85+
const status = proxyRow.locator(".status");
8986

9087
try {
91-
await expect(workspaceProxyStatus).toHaveText("Healthy", {
88+
await expect(status).toHaveText("Healthy", {
9289
timeout: 1_000,
9390
});
9491
return; // healthy!

‎site/src/components/Avatar/Avatar.stories.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ export const ImageLgSize: Story = {
1616
args: { size: "lg" },
1717
};
1818

19-
export const ImageDefaultSize: Story = {};
19+
export const ImageMdSize: Story = {};
2020

2121
export const ImageSmSize: Story = {
2222
args: { size: "sm" },
@@ -30,7 +30,7 @@ export const IconLgSize: Story = {
3030
},
3131
};
3232

33-
export const IconDefaultSize: Story = {
33+
export const IconMdSize: Story = {
3434
args: {
3535
variant: "icon",
3636
src: "https://em-content.zobj.net/source/apple/391/billed-cap_1f9e2.png",
@@ -60,7 +60,7 @@ export const FallbackLgSize: Story = {
6060
},
6161
};
6262

63-
export const FallbackDefaultSize: Story = {
63+
export const FallbackMdSize: Story = {
6464
args: {
6565
src: "",
6666
fallback: "Adriana Rodrigues",

‎site/src/components/Avatar/Avatar.tsx

Lines changed: 28 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -23,16 +23,16 @@ const avatarVariants = cva(
2323
variants: {
2424
size: {
2525
lg: "h-[--avatar-lg] w-[--avatar-lg] rounded-[6px] text-sm font-medium",
26-
default: "h-[--avatar-default] w-[--avatar-default] text-2xs",
26+
md: "h-[--avatar-default] w-[--avatar-default] text-2xs",
2727
sm: "h-[--avatar-sm] w-[--avatar-sm] text-[8px]",
2828
},
2929
variant: {
30-
default: "",
31-
icon: "",
30+
default: null,
31+
icon: null,
3232
},
3333
},
3434
defaultVariants: {
35-
size: "default",
35+
size: "md",
3636
},
3737
compoundVariants: [
3838
{
@@ -41,7 +41,7 @@ const avatarVariants = cva(
4141
className: "p-2",
4242
},
4343
{
44-
size: "default",
44+
size: "md",
4545
variant: "icon",
4646
className: "p-1",
4747
},
@@ -57,42 +57,36 @@ const avatarVariants = cva(
5757
export type AvatarProps = AvatarPrimitive.AvatarProps &
5858
VariantProps<typeof avatarVariants> & {
5959
src?: string;
60-
alt?: string;
60+
6161
fallback?: string;
6262
};
6363

6464
const Avatar = React.forwardRef<
6565
React.ElementRef<typeof AvatarPrimitive.Root>,
6666
AvatarProps
67-
>(
68-
(
69-
{ className, size, variant, src, alt, fallback, children, ...props },
70-
ref,
71-
) => {
72-
const theme = useTheme();
67+
>(({ className, size, variant, src, fallback, children, ...props }, ref) => {
68+
const theme = useTheme();
7369

74-
return (
75-
<AvatarPrimitive.Root
76-
ref={ref}
77-
className={cn(avatarVariants({ size, variant, className }))}
78-
{...props}
79-
>
80-
<AvatarPrimitive.Image
81-
src={src}
82-
className="aspect-square h-full w-full object-contain"
83-
css={getExternalImageStylesFromUrl(theme.externalImages, src)}
84-
alt={alt}
85-
/>
86-
{fallback && (
87-
<AvatarPrimitive.Fallback className="flex h-full w-full items-center justify-center rounded-full">
88-
{fallback.charAt(0).toUpperCase()}
89-
</AvatarPrimitive.Fallback>
90-
)}
91-
{children}
92-
</AvatarPrimitive.Root>
93-
);
94-
},
95-
);
70+
return (
71+
<AvatarPrimitive.Root
72+
ref={ref}
73+
className={cn(avatarVariants({ size, variant, className }))}
74+
{...props}
75+
>
76+
<AvatarPrimitive.Image
77+
src={src}
78+
className="aspect-square h-full w-full object-contain"
79+
css={getExternalImageStylesFromUrl(theme.externalImages, src)}
80+
/>
81+
{fallback && (
82+
<AvatarPrimitive.Fallback className="flex h-full w-full items-center justify-center rounded-full">
83+
{fallback.charAt(0).toUpperCase()}
84+
</AvatarPrimitive.Fallback>
85+
)}
86+
{children}
87+
</AvatarPrimitive.Root>
88+
);
89+
});
9690
Avatar.displayName = AvatarPrimitive.Root.displayName;
9791

9892
export { Avatar };

‎site/src/components/Avatar/AvatarCard.stories.tsx

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,6 @@ export const WithImage: Story = {
1313
args: {
1414
header: "Coder",
1515
imgUrl: "https://avatars.githubusercontent.com/u/95932066?s=200&v=4",
16-
altText: "Coder",
1716
subtitle: "56 members",
1817
},
1918
};

‎site/src/components/Avatar/AvatarCard.tsx

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,15 +5,13 @@ import type { FC, ReactNode } from "react";
55
type AvatarCardProps = {
66
header: string;
77
imgUrl: string;
8-
altText: string;
98
subtitle?: ReactNode;
109
maxWidth?: number | "none";
1110
};
1211

1312
export const AvatarCard: FC<AvatarCardProps> = ({
1413
header,
1514
imgUrl,
16-
altText,
1715
subtitle,
1816
maxWidth = "none",
1917
}) => {
@@ -69,7 +67,7 @@ export const AvatarCard: FC<AvatarCardProps> = ({
6967
)}
7068
</div>
7169

72-
<Avatar size="lg" src={imgUrl} alt={altText} fallback={header} />
70+
<Avatar size="lg" src={imgUrl} fallback={header} />
7371
</div>
7472
);
7573
};

‎site/src/components/Filter/SelectFilter.stories.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,17 @@
11
import { action } from "@storybook/addon-actions";
22
import type { Meta, StoryObj } from "@storybook/react";
33
import { expect, userEvent, within } from "@storybook/test";
4-
import { UserAvatar } from "modules/users/UserAvatar/UserAvatar";
54
import { useState } from "react";
65
import { withDesktopViewport } from "testHelpers/storybook";
76
import {
87
SelectFilter,
98
type SelectFilterOption,
109
SelectFilterSearch,
1110
} from "./SelectFilter";
11+
import { Avatar } from "components/Avatar/Avatar";
1212

1313
const options: SelectFilterOption[] = Array.from({ length: 50 }, (_, i) => ({
14-
startIcon: <UserAvatar username={`username ${i + 1}`} size="sm" />,
14+
startIcon: <Avatar fallback={`username ${i + 1}`} size="sm" />,
1515
label: `Option ${i + 1}`,
1616
value: `option-${i + 1}`,
1717
}));

‎site/src/components/Filter/UserFilter.tsx

Lines changed: 7 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,9 @@ import {
55
SelectFilterSearch,
66
} from "components/Filter/SelectFilter";
77
import { useAuthenticated } from "contexts/auth/RequireAuth";
8-
import { UserAvatar } from "modules/users/UserAvatar/UserAvatar";
98
import type { FC } from "react";
109
import { type UseFilterMenuOptions, useFilterMenu } from "./menu";
10+
import { Avatar } from "components/Avatar/Avatar";
1111

1212
export const useUserFilterMenu = ({
1313
value,
@@ -23,11 +23,7 @@ export const useUserFilterMenu = ({
2323
label: me.username,
2424
value: me.username,
2525
startIcon: (
26-
<UserAvatar
27-
username={me.username}
28-
avatarURL={me.avatar_url}
29-
size="sm"
30-
/>
26+
<Avatar fallback={me.username} src={me.avatar_url} size="sm" />
3127
),
3228
},
3329
...filtered,
@@ -45,11 +41,7 @@ export const useUserFilterMenu = ({
4541
label: me.username,
4642
value: me.username,
4743
startIcon: (
48-
<UserAvatar
49-
username={me.username}
50-
avatarURL={me.avatar_url}
51-
size="sm"
52-
/>
44+
<Avatar fallback={me.username} src={me.avatar_url} size="sm" />
5345
),
5446
};
5547
}
@@ -61,9 +53,9 @@ export const useUserFilterMenu = ({
6153
label: firstUser.username,
6254
value: firstUser.username,
6355
startIcon: (
64-
<UserAvatar
65-
username={firstUser.username}
66-
avatarURL={firstUser.avatar_url}
56+
<Avatar
57+
fallback={firstUser.username}
58+
src={firstUser.avatar_url}
6759
size="sm"
6860
/>
6961
),
@@ -77,11 +69,7 @@ export const useUserFilterMenu = ({
7769
label: user.username,
7870
value: user.username,
7971
startIcon: (
80-
<UserAvatar
81-
username={user.username}
82-
avatarURL={user.avatar_url}
83-
size="sm"
84-
/>
72+
<Avatar fallback={user.username} src={user.avatar_url} size="sm" />
8573
),
8674
}));
8775
options = addMeAsFirstOption(options);

‎site/src/components/FullPageLayout/Topbar.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { css } from "@emotion/css";
22
import { useTheme } from "@emotion/react";
33
import Button, { type ButtonProps } from "@mui/material/Button";
44
import IconButton, { type IconButtonProps } from "@mui/material/IconButton";
5-
import { Avatar } from "components/Avatar/Avatar";
5+
import { Avatar, type AvatarProps } from "components/Avatar/Avatar";
66
import {
77
type FC,
88
type ForwardedRef,
@@ -93,8 +93,8 @@ export const TopbarDivider: FC<HTMLAttributes<HTMLSpanElement>> = (props) => {
9393
);
9494
};
9595

96-
export const TopbarAvatar: FC<{ src: string }> = ({ src }) => {
97-
return <Avatar variant="icon" size="sm" src={src} />;
96+
export const TopbarAvatar: FC<AvatarProps> = (props) => {
97+
return <Avatar {...props} variant="icon" size="sm" />;
9898
};
9999

100100
type TopbarIconProps = HTMLAttributes<HTMLOrSVGElement>;

‎site/src/components/SelectMenu/SelectMenu.stories.tsx

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import { action } from "@storybook/addon-actions";
22
import type { Meta, StoryObj } from "@storybook/react";
33
import { userEvent, within } from "@storybook/test";
4-
import { UserAvatar } from "modules/users/UserAvatar/UserAvatar";
54
import { withDesktopViewport } from "testHelpers/storybook";
65
import {
76
SelectMenu,
@@ -13,6 +12,7 @@ import {
1312
SelectMenuSearch,
1413
SelectMenuTrigger,
1514
} from "./SelectMenu";
15+
import { Avatar } from "components/Avatar/Avatar";
1616

1717
const meta: Meta<typeof SelectMenu> = {
1818
title: "components/SelectMenu",
@@ -25,7 +25,7 @@ const meta: Meta<typeof SelectMenu> = {
2525
<SelectMenu>
2626
<SelectMenuTrigger>
2727
<SelectMenuButton
28-
startIcon={<UserAvatar size="sm" username={selectedOpt} />}
28+
startIcon={<Avatar size="sm" fallback={selectedOpt} />}
2929
>
3030
{selectedOpt}
3131
</SelectMenuButton>
@@ -36,7 +36,7 @@ const meta: Meta<typeof SelectMenu> = {
3636
{opts.map((o) => (
3737
<SelectMenuItem key={o} selected={o === selectedOpt}>
3838
<SelectMenuIcon>
39-
<UserAvatar size="sm" username={o} />
39+
<Avatar size="sm" fallback={o} />
4040
</SelectMenuIcon>
4141
{o}
4242
</SelectMenuItem>
@@ -77,7 +77,7 @@ export const LongButtonText: Story = {
7777
<SelectMenuTrigger>
7878
<SelectMenuButton
7979
css={{ width: 200 }}
80-
startIcon={<UserAvatar size="sm" username={selectedOpt} />}
80+
startIcon={<Avatar size="sm" fallback={selectedOpt} />}
8181
>
8282
{selectedOpt}
8383
</SelectMenuButton>
@@ -88,7 +88,7 @@ export const LongButtonText: Story = {
8888
{opts.map((o) => (
8989
<SelectMenuItem key={o} selected={o === selectedOpt}>
9090
<SelectMenuIcon>
91-
<UserAvatar size="sm" username={o} />
91+
<Avatar size="sm" fallback={o} />
9292
</SelectMenuIcon>
9393
{o}
9494
</SelectMenuItem>
@@ -115,7 +115,7 @@ export const NoSelectedOption: Story = {
115115
{opts.map((o) => (
116116
<SelectMenuItem key={o}>
117117
<SelectMenuIcon>
118-
<UserAvatar size="sm" username={o} />
118+
<Avatar size="sm" fallback={o} />
119119
</SelectMenuIcon>
120120
{o}
121121
</SelectMenuItem>

‎site/src/components/Sidebar/Sidebar.stories.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,8 @@ import SecurityIcon from "@mui/icons-material/LockOutlined";
44
import AccountIcon from "@mui/icons-material/Person";
55
import VpnKeyOutlined from "@mui/icons-material/VpnKeyOutlined";
66
import type { Meta, StoryObj } from "@storybook/react";
7-
import { UserAvatar } from "modules/users/UserAvatar/UserAvatar";
87
import { Sidebar, SidebarHeader, SidebarNavItem } from "./Sidebar";
8+
import { Avatar } from "components/Avatar/Avatar";
99

1010
const meta: Meta<typeof Sidebar> = {
1111
title: "components/Sidebar",
@@ -20,7 +20,7 @@ export const Default: Story = {
2020
children: (
2121
<Sidebar>
2222
<SidebarHeader
23-
avatar={<UserAvatar username="Jon" />}
23+
avatar={<Avatar fallback="Jon" />}
2424
title="Jon"
2525
subtitle="jon@coder.com"
2626
/>

‎site/src/modules/builds/BuildAvatar/BuildAvatar.stories.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,9 +19,9 @@ export const SmSize: Story = {
1919
},
2020
};
2121

22-
export const DefaultSize: Story = {
22+
export const MdSize: Story = {
2323
args: {
24-
size: "default",
24+
size: "md",
2525
},
2626
};
2727

0 commit comments

Comments
 (0)