Skip to content

Commit 5284d97

Browse files
aslilacaslilac
authored
chore: use emotion for styling (pt. 7) (#10431)
1 parent ec7d759 commit 5284d97

File tree

21 files changed

+556
-668
lines changed

21 files changed

+556
-668
lines changed

‎site/src/components/Resources/AgentMetadata.tsx

+34-50
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
1-
import makeStyles from "@mui/styles/makeStyles";
21
import { watchAgentMetadata } from "api/api";
3-
import { WorkspaceAgent, WorkspaceAgentMetadata } from "api/typesGenerated";
2+
import type {
3+
WorkspaceAgent,
4+
WorkspaceAgentMetadata,
5+
} from "api/typesGenerated";
46
import { Stack } from "components/Stack/Stack";
57
import dayjs from "dayjs";
68
import {
@@ -13,17 +15,15 @@ import {
1315
} from "react";
1416
import Skeleton from "@mui/material/Skeleton";
1517
import { MONOSPACE_FONT_FAMILY } from "theme/constants";
16-
import { combineClasses } from "utils/combineClasses";
1718
import Tooltip from "@mui/material/Tooltip";
1819
import Box, { BoxProps } from "@mui/material/Box";
20+
import { type Interpolation, type Theme } from "@emotion/react";
1921

2022
type ItemStatus = "stale" | "valid" | "loading";
2123

2224
export const WatchAgentMetadataContext = createContext(watchAgentMetadata);
2325

2426
const MetadataItem: FC<{ item: WorkspaceAgentMetadata }> = ({ item }) => {
25-
const styles = useStyles();
26-
2727
if (item.result === undefined) {
2828
throw new Error("Metadata item result is undefined");
2929
}
@@ -56,41 +56,29 @@ const MetadataItem: FC<{ item: WorkspaceAgentMetadata }> = ({ item }) => {
5656
// could be buggy. But, how common is that anyways?
5757
const value =
5858
status === "loading" ? (
59-
<Skeleton
60-
width={65}
61-
height={12}
62-
variant="text"
63-
className={styles.skeleton}
64-
/>
59+
<Skeleton width={65} height={12} variant="text" css={styles.skeleton} />
6560
) : status === "stale" ? (
6661
<Tooltip title="This data is stale and no longer up to date">
67-
<StaticWidth
68-
className={combineClasses([
69-
styles.metadataValue,
70-
styles.metadataStale,
71-
])}
72-
>
62+
<StaticWidth css={[styles.metadataValue, styles.metadataStale]}>
7363
{item.result.value}
7464
</StaticWidth>
7565
</Tooltip>
7666
) : (
7767
<StaticWidth
78-
className={combineClasses([
68+
css={[
7969
styles.metadataValue,
8070
item.result.error.length === 0
8171
? styles.metadataValueSuccess
8272
: styles.metadataValueError,
83-
])}
73+
]}
8474
>
8575
{item.result.value}
8676
</StaticWidth>
8777
);
8878

8979
return (
90-
<div className={styles.metadata}>
91-
<div className={styles.metadataLabel}>
92-
{item.description.display_name}
93-
</div>
80+
<div css={styles.metadata}>
81+
<div css={styles.metadataLabel}>{item.description.display_name}</div>
9482
<Box>{value}</Box>
9583
</div>
9684
);
@@ -101,12 +89,11 @@ export interface AgentMetadataViewProps {
10189
}
10290

10391
export const AgentMetadataView: FC<AgentMetadataViewProps> = ({ metadata }) => {
104-
const styles = useStyles();
10592
if (metadata.length === 0) {
10693
return <></>;
10794
}
10895
return (
109-
<div className={styles.root}>
96+
<div css={styles.root}>
11097
<Stack alignItems="baseline" direction="row" spacing={6}>
11198
{metadata.map((m) => {
11299
if (m.description === undefined) {
@@ -127,7 +114,6 @@ export const AgentMetadata: FC<{
127114
WorkspaceAgentMetadata[] | undefined
128115
>(undefined);
129116
const watchAgentMetadata = useContext(WatchAgentMetadataContext);
130-
const styles = useStyles();
131117

132118
useEffect(() => {
133119
if (storybookMetadata !== undefined) {
@@ -166,7 +152,7 @@ export const AgentMetadata: FC<{
166152

167153
if (metadata === undefined) {
168154
return (
169-
<div className={styles.root}>
155+
<div css={styles.root}>
170156
<AgentMetadataSkeleton />
171157
</div>
172158
);
@@ -176,21 +162,19 @@ export const AgentMetadata: FC<{
176162
};
177163

178164
export const AgentMetadataSkeleton: FC = () => {
179-
const styles = useStyles();
180-
181165
return (
182166
<Stack alignItems="baseline" direction="row" spacing={6}>
183-
<div className={styles.metadata}>
167+
<div css={styles.metadata}>
184168
<Skeleton width={40} height={12} variant="text" />
185169
<Skeleton width={65} height={14} variant="text" />
186170
</div>
187171

188-
<div className={styles.metadata}>
172+
<div css={styles.metadata}>
189173
<Skeleton width={40} height={12} variant="text" />
190174
<Skeleton width={65} height={14} variant="text" />
191175
</div>
192176

193-
<div className={styles.metadata}>
177+
<div css={styles.metadata}>
194178
<Skeleton width={40} height={12} variant="text" />
195179
<Skeleton width={65} height={14} variant="text" />
196180
</div>
@@ -219,16 +203,16 @@ const StaticWidth = (props: BoxProps) => {
219203

220204
// These are more or less copied from
221205
// site/src/components/Resources/ResourceCard.tsx
222-
const useStyles = makeStyles((theme) => ({
223-
root: {
206+
const styles = {
207+
root: (theme) => ({
224208
padding: theme.spacing(2.5, 4),
225209
borderTop: `1px solid ${theme.palette.divider}`,
226210
background: theme.palette.background.paper,
227211
overflowX: "auto",
228212
scrollPadding: theme.spacing(0, 4),
229-
},
213+
}),
230214

231-
metadata: {
215+
metadata: (theme) => ({
232216
fontSize: 12,
233217
lineHeight: "normal",
234218
display: "flex",
@@ -240,15 +224,15 @@ const useStyles = makeStyles((theme) => ({
240224
"&:last-child": {
241225
paddingRight: theme.spacing(4),
242226
},
243-
},
227+
}),
244228

245-
metadataLabel: {
229+
metadataLabel: (theme) => ({
246230
color: theme.palette.text.secondary,
247231
textOverflow: "ellipsis",
248232
overflow: "hidden",
249233
whiteSpace: "nowrap",
250234
fontWeight: 500,
251-
},
235+
}),
252236

253237
metadataValue: {
254238
textOverflow: "ellipsis",
@@ -258,29 +242,29 @@ const useStyles = makeStyles((theme) => ({
258242
fontSize: 14,
259243
},
260244

261-
metadataValueSuccess: {
245+
metadataValueSuccess: (theme) => ({
262246
color: theme.palette.success.light,
263-
},
247+
}),
264248

265-
metadataValueError: {
249+
metadataValueError: (theme) => ({
266250
color: theme.palette.error.main,
267-
},
251+
}),
268252

269-
metadataStale: {
253+
metadataStale: (theme) => ({
270254
color: theme.palette.text.disabled,
271255
cursor: "pointer",
272-
},
256+
}),
273257

274-
skeleton: {
258+
skeleton: (theme) => ({
275259
marginTop: theme.spacing(0.5),
276-
},
260+
}),
277261

278-
inlineCommand: {
262+
inlineCommand: (theme) => ({
279263
fontFamily: MONOSPACE_FONT_FAMILY,
280264
display: "inline-block",
281265
fontWeight: 600,
282266
margin: 0,
283267
borderRadius: 4,
284268
color: theme.palette.text.primary,
285-
},
286-
}));
269+
}),
270+
} satisfies Record<string, Interpolation<Theme>>;

0 commit comments

Comments
 (0)