Skip to content

Commit 26b5390

Browse files
aslilacaslilac
authored
refactor: remove usage of styled and withStyles (#10806)
1 parent ad3eb4b commit 26b5390

File tree

8 files changed

+557
-477
lines changed

8 files changed

+557
-477
lines changed

‎site/src/components/BuildAvatar/BuildAvatar.tsx

Lines changed: 28 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,54 +1,52 @@
11
import Badge from "@mui/material/Badge";
2-
import { withStyles } from "@mui/styles";
2+
import { css, cx } from "@emotion/css";
3+
import { useTheme } from "@emotion/react";
34
import { type FC } from "react";
4-
import { WorkspaceBuild } from "api/typesGenerated";
5+
import type { WorkspaceBuild } from "api/typesGenerated";
56
import { getDisplayWorkspaceBuildStatus } from "utils/workspace";
7+
import { useClassName } from "hooks/useClassName";
68
import { Avatar, AvatarProps } from "components/Avatar/Avatar";
7-
import type { PaletteIndex } from "theme/mui";
8-
import { useTheme } from "@emotion/react";
99
import { BuildIcon } from "components/BuildIcon/BuildIcon";
1010

11-
interface StylesBadgeProps {
12-
type: PaletteIndex;
13-
}
14-
15-
const StyledBadge = withStyles((theme) => ({
16-
badge: {
17-
backgroundColor: ({ type }: StylesBadgeProps) => theme.palette[type].light,
18-
borderRadius: "100%",
19-
width: 8,
20-
minWidth: 8,
21-
height: 8,
22-
display: "block",
23-
padding: 0,
24-
},
25-
}))(Badge);
26-
2711
export interface BuildAvatarProps {
2812
build: WorkspaceBuild;
2913
size?: AvatarProps["size"];
3014
}
3115

3216
export const BuildAvatar: FC<BuildAvatarProps> = ({ build, size }) => {
3317
const theme = useTheme();
34-
const displayBuildStatus = getDisplayWorkspaceBuildStatus(theme, build);
18+
const { status, type } = getDisplayWorkspaceBuildStatus(theme, build);
19+
const badgeType = useClassName(
20+
(css, theme) => css`
21+
background-color: ${theme.palette[type].light};
22+
`,
23+
[type],
24+
);
3525

3626
return (
37-
<StyledBadge
27+
<Badge
3828
role="status"
39-
type={displayBuildStatus.type}
40-
arial-label={displayBuildStatus.status}
41-
title={displayBuildStatus.status}
29+
aria-label={status}
30+
title={status}
4231
overlap="circular"
43-
anchorOrigin={{
44-
vertical: "bottom",
45-
horizontal: "right",
46-
}}
32+
anchorOrigin={{ vertical: "bottom", horizontal: "right" }}
4733
badgeContent={<div></div>}
34+
classes={{ badge: cx(classNames.badge, badgeType) }}
4835
>
4936
<Avatar background size={size}>
5037
<BuildIcon transition={build.transition} />
5138
</Avatar>
52-
</StyledBadge>
39+
</Badge>
5340
);
5441
};
42+
43+
const classNames = {
44+
badge: css({
45+
borderRadius: "100%",
46+
width: 8,
47+
minWidth: 8,
48+
height: 8,
49+
display: "block",
50+
padding: 0,
51+
}),
52+
};

‎site/src/components/GroupAvatar/GroupAvatar.tsx

Lines changed: 30 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,45 +1,46 @@
1-
import { Avatar } from "components/Avatar/Avatar";
21
import Badge from "@mui/material/Badge";
3-
import { withStyles } from "@mui/styles";
42
import Group from "@mui/icons-material/Group";
5-
import { FC } from "react";
6-
7-
const StyledBadge = withStyles((theme) => ({
8-
badge: {
9-
backgroundColor: theme.palette.background.paper,
10-
border: `1px solid ${theme.palette.divider}`,
11-
borderRadius: "100%",
12-
width: 24,
13-
height: 24,
14-
display: "flex",
15-
alignItems: "center",
16-
justifyContent: "center",
17-
18-
"& svg": {
19-
width: 14,
20-
height: 14,
21-
},
22-
},
23-
}))(Badge);
3+
import { type FC } from "react";
4+
import { type ClassName, useClassName } from "hooks/useClassName";
5+
import { Avatar } from "components/Avatar/Avatar";
246

25-
export type GroupAvatarProps = {
7+
export interface GroupAvatarProps {
268
name: string;
279
avatarURL?: string;
28-
};
10+
}
2911

3012
export const GroupAvatar: FC<GroupAvatarProps> = ({ name, avatarURL }) => {
13+
const badge = useClassName(classNames.badge, []);
14+
3115
return (
32-
<StyledBadge
16+
<Badge
3317
overlap="circular"
34-
anchorOrigin={{
35-
vertical: "bottom",
36-
horizontal: "right",
37-
}}
18+
anchorOrigin={{ vertical: "bottom", horizontal: "right" }}
3819
badgeContent={<Group />}
20+
classes={{ badge }}
3921
>
4022
<Avatar src={avatarURL} background>
4123
{name}
4224
</Avatar>
43-
</StyledBadge>
25+
</Badge>
4426
);
4527
};
28+
29+
const classNames = {
30+
badge: (css, theme) =>
31+
css({
32+
backgroundColor: theme.palette.background.paper,
33+
border: `1px solid ${theme.palette.divider}`,
34+
borderRadius: "100%",
35+
width: 24,
36+
height: 24,
37+
display: "flex",
38+
alignItems: "center",
39+
justifyContent: "center",
40+
41+
"& svg": {
42+
width: 14,
43+
height: 14,
44+
},
45+
}),
46+
} satisfies Record<string, ClassName>;

‎site/src/components/TableToolbar/TableToolbar.tsx

Lines changed: 38 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,50 +1,59 @@
1-
import { styled } from "@mui/material/styles";
2-
import Box from "@mui/material/Box";
31
import Skeleton from "@mui/material/Skeleton";
2+
import { type FC, type PropsWithChildren } from "react";
43

5-
export const TableToolbar = styled(Box)(({ theme }) => ({
6-
fontSize: 13,
7-
marginBottom: "8px",
8-
marginTop: 0,
9-
height: "36px", // The size of a small button
10-
color: theme.palette.text.secondary,
11-
display: "flex",
12-
alignItems: "center",
13-
"& strong": {
14-
color: theme.palette.text.primary,
15-
},
16-
}));
4+
export const TableToolbar: FC<PropsWithChildren> = ({ children }) => {
5+
return (
6+
<div
7+
css={(theme) => ({
8+
fontSize: 13,
9+
marginBottom: "8px",
10+
marginTop: 0,
11+
height: "36px", // The size of a small button
12+
color: theme.palette.text.secondary,
13+
display: "flex",
14+
alignItems: "center",
15+
"& strong": {
16+
color: theme.palette.text.primary,
17+
},
18+
})}
19+
>
20+
{children}
21+
</div>
22+
);
23+
};
24+
25+
type PaginationStatusProps =
26+
| BasePaginationStatusProps
27+
| LoadedPaginationStatusProps;
1728

1829
type BasePaginationStatusProps = {
19-
label: string;
20-
isLoading: boolean;
21-
showing?: number;
22-
total?: number;
30+
isLoading: true;
2331
};
2432

25-
type LoadedPaginationStatusProps = BasePaginationStatusProps & {
33+
type LoadedPaginationStatusProps = {
2634
isLoading: false;
35+
label: string;
2736
showing: number;
2837
total: number;
2938
};
3039

31-
export const PaginationStatus = ({
32-
isLoading,
33-
showing,
34-
total,
35-
label,
36-
}: BasePaginationStatusProps | LoadedPaginationStatusProps) => {
40+
export const PaginationStatus: FC<PaginationStatusProps> = (props) => {
41+
const { isLoading } = props;
42+
3743
if (isLoading) {
3844
return (
39-
<Box sx={{ height: 24, display: "flex", alignItems: "center" }}>
45+
<div css={{ height: 24, display: "flex", alignItems: "center" }}>
4046
<Skeleton variant="text" width={160} height={16} />
41-
</Box>
47+
</div>
4248
);
4349
}
50+
51+
const { showing, total, label } = props;
52+
4453
return (
45-
<Box>
54+
<div>
4655
Showing <strong>{showing}</strong> of{" "}
4756
<strong>{total?.toLocaleString()}</strong> {label}
48-
</Box>
57+
</div>
4958
);
5059
};

‎site/src/components/WorkspaceDeletion/DormantDeletionStat.tsx

Lines changed: 16 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,10 @@
11
import { StatsItem } from "components/Stats/Stats";
22
import Link from "@mui/material/Link";
3+
import { type FC } from "react";
34
import { Link as RouterLink } from "react-router-dom";
4-
import styled from "@emotion/styled";
5-
import { Workspace } from "api/typesGenerated";
6-
import { displayDormantDeletion } from "./utils";
5+
import type { Workspace } from "api/typesGenerated";
76
import { useDashboard } from "components/Dashboard/DashboardProvider";
8-
import { type FC } from "react";
7+
import { displayDormantDeletion } from "./utils";
98

109
interface DormantDeletionStatProps {
1110
workspace: Workspace;
@@ -32,7 +31,7 @@ export const DormantDeletionStat: FC<DormantDeletionStatProps> = ({
3231
}
3332

3433
return (
35-
<StyledStatsItem
34+
<StatsItem
3635
label="Deletion on"
3736
className="containerClass"
3837
value={
@@ -45,19 +44,18 @@ export const DormantDeletionStat: FC<DormantDeletionStatProps> = ({
4544
{new Date(workspace.deleting_at!).toLocaleString()}
4645
</Link>
4746
}
47+
css={{
48+
"&.containerClass": {
49+
flexDirection: "column",
50+
gap: 0,
51+
padding: 0,
52+
53+
"& > span:first-of-type": {
54+
fontSize: 12,
55+
fontWeight: 500,
56+
},
57+
},
58+
}}
4859
/>
4960
);
5061
};
51-
52-
const StyledStatsItem = styled(StatsItem)(() => ({
53-
"&.containerClass": {
54-
flexDirection: "column",
55-
gap: 0,
56-
padding: 0,
57-
58-
"& > span:first-of-type": {
59-
fontSize: 12,
60-
fontWeight: 500,
61-
},
62-
},
63-
}));

‎site/src/components/WorkspaceDeletion/DormantDeletionText.tsx

Lines changed: 20 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,15 @@
1-
import { Workspace } from "api/typesGenerated";
1+
import { type FC } from "react";
2+
import type { Workspace } from "api/typesGenerated";
23
import { displayDormantDeletion } from "./utils";
34
import { useDashboard } from "components/Dashboard/DashboardProvider";
4-
import styled from "@emotion/styled";
5-
import { Theme as MaterialUITheme } from "@mui/material/styles";
65

7-
export const DormantDeletionText = ({
8-
workspace,
9-
}: {
6+
interface DormantDeletionTextProps {
107
workspace: Workspace;
11-
}): JSX.Element | null => {
8+
}
9+
10+
export const DormantDeletionText: FC<DormantDeletionTextProps> = ({
11+
workspace,
12+
}) => {
1213
const { entitlements, experiments } = useDashboard();
1314
const allowAdvancedScheduling =
1415
entitlements.features["advanced_template_scheduling"].enabled;
@@ -25,10 +26,16 @@ export const DormantDeletionText = ({
2526
) {
2627
return null;
2728
}
28-
return <StyledSpan role="status">Impending deletion</StyledSpan>;
29-
};
3029

31-
const StyledSpan = styled.span<{ theme?: MaterialUITheme }>`
32-
color: ${(props) => props.theme.palette.warning.light};
33-
font-weight: 600;
34-
`;
30+
return (
31+
<span
32+
role="status"
33+
css={(theme) => ({
34+
color: theme.palette.warning.light,
35+
fontWeight: 600,
36+
})}
37+
>
38+
Impending deletion
39+
</span>
40+
);
41+
};

0 commit comments

Comments
 (0)