Skip to content

Commit 73b5716

Browse files
aslilacaslilac
committed
emotion: AgentMetadata 
1 parent 6b7858c commit 73b5716

File tree

1 file changed

+30
-49
lines changed

1 file changed

+30
-49
lines changed

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

Lines changed: 30 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import makeStyles from "@mui/styles/makeStyles";
21
import { watchAgentMetadata } from "api/api";
32
import { WorkspaceAgent, WorkspaceAgentMetadata } from "api/typesGenerated";
43
import { Stack } from "components/Stack/Stack";
@@ -13,17 +12,15 @@ import {
1312
} from "react";
1413
import Skeleton from "@mui/material/Skeleton";
1514
import { MONOSPACE_FONT_FAMILY } from "theme/constants";
16-
import { combineClasses } from "utils/combineClasses";
1715
import Tooltip from "@mui/material/Tooltip";
1816
import Box, { BoxProps } from "@mui/material/Box";
17+
import { Interpolation, Theme } from "@emotion/react";
1918

2019
type ItemStatus = "stale" | "valid" | "loading";
2120

2221
export const WatchAgentMetadataContext = createContext(watchAgentMetadata);
2322

2423
const MetadataItem: FC<{ item: WorkspaceAgentMetadata }> = ({ item }) => {
25-
const styles = useStyles();
26-
2724
if (item.result === undefined) {
2825
throw new Error("Metadata item result is undefined");
2926
}
@@ -56,41 +53,29 @@ const MetadataItem: FC<{ item: WorkspaceAgentMetadata }> = ({ item }) => {
5653
// could be buggy. But, how common is that anyways?
5754
const value =
5855
status === "loading" ? (
59-
<Skeleton
60-
width={65}
61-
height={12}
62-
variant="text"
63-
className={styles.skeleton}
64-
/>
56+
<Skeleton width={65} height={12} variant="text" css={styles.skeleton} />
6557
) : status === "stale" ? (
6658
<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-
>
59+
<StaticWidth css={[styles.metadataValue, styles.metadataStale]}>
7360
{item.result.value}
7461
</StaticWidth>
7562
</Tooltip>
7663
) : (
7764
<StaticWidth
78-
className={combineClasses([
65+
css={[
7966
styles.metadataValue,
8067
item.result.error.length === 0
8168
? styles.metadataValueSuccess
8269
: styles.metadataValueError,
83-
])}
70+
]}
8471
>
8572
{item.result.value}
8673
</StaticWidth>
8774
);
8875

8976
return (
90-
<div className={styles.metadata}>
91-
<div className={styles.metadataLabel}>
92-
{item.description.display_name}
93-
</div>
77+
<div css={styles.metadata}>
78+
<div css={styles.metadataLabel}>{item.description.display_name}</div>
9479
<Box>{value}</Box>
9580
</div>
9681
);
@@ -101,12 +86,11 @@ export interface AgentMetadataViewProps {
10186
}
10287

10388
export const AgentMetadataView: FC<AgentMetadataViewProps> = ({ metadata }) => {
104-
const styles = useStyles();
10589
if (metadata.length === 0) {
10690
return <></>;
10791
}
10892
return (
109-
<div className={styles.root}>
93+
<div css={styles.root}>
11094
<Stack alignItems="baseline" direction="row" spacing={6}>
11195
{metadata.map((m) => {
11296
if (m.description === undefined) {
@@ -127,7 +111,6 @@ export const AgentMetadata: FC<{
127111
WorkspaceAgentMetadata[] | undefined
128112
>(undefined);
129113
const watchAgentMetadata = useContext(WatchAgentMetadataContext);
130-
const styles = useStyles();
131114

132115
useEffect(() => {
133116
if (storybookMetadata !== undefined) {
@@ -166,7 +149,7 @@ export const AgentMetadata: FC<{
166149

167150
if (metadata === undefined) {
168151
return (
169-
<div className={styles.root}>
152+
<div css={styles.root}>
170153
<AgentMetadataSkeleton />
171154
</div>
172155
);
@@ -176,21 +159,19 @@ export const AgentMetadata: FC<{
176159
};
177160

178161
export const AgentMetadataSkeleton: FC = () => {
179-
const styles = useStyles();
180-
181162
return (
182163
<Stack alignItems="baseline" direction="row" spacing={6}>
183-
<div className={styles.metadata}>
164+
<div css={styles.metadata}>
184165
<Skeleton width={40} height={12} variant="text" />
185166
<Skeleton width={65} height={14} variant="text" />
186167
</div>
187168

188-
<div className={styles.metadata}>
169+
<div css={styles.metadata}>
189170
<Skeleton width={40} height={12} variant="text" />
190171
<Skeleton width={65} height={14} variant="text" />
191172
</div>
192173

193-
<div className={styles.metadata}>
174+
<div css={styles.metadata}>
194175
<Skeleton width={40} height={12} variant="text" />
195176
<Skeleton width={65} height={14} variant="text" />
196177
</div>
@@ -219,16 +200,16 @@ const StaticWidth = (props: BoxProps) => {
219200

220201
// These are more or less copied from
221202
// site/src/components/Resources/ResourceCard.tsx
222-
const useStyles = makeStyles((theme) => ({
223-
root: {
203+
const styles = {
204+
root: (theme) => ({
224205
padding: theme.spacing(2.5, 4),
225206
borderTop: `1px solid ${theme.palette.divider}`,
226207
background: theme.palette.background.paper,
227208
overflowX: "auto",
228209
scrollPadding: theme.spacing(0, 4),
229-
},
210+
}),
230211

231-
metadata: {
212+
metadata: (theme) => ({
232213
fontSize: 12,
233214
lineHeight: "normal",
234215
display: "flex",
@@ -240,15 +221,15 @@ const useStyles = makeStyles((theme) => ({
240221
"&:last-child": {
241222
paddingRight: theme.spacing(4),
242223
},
243-
},
224+
}),
244225

245-
metadataLabel: {
226+
metadataLabel: (theme) => ({
246227
color: theme.palette.text.secondary,
247228
textOverflow: "ellipsis",
248229
overflow: "hidden",
249230
whiteSpace: "nowrap",
250231
fontWeight: 500,
251-
},
232+
}),
252233

253234
metadataValue: {
254235
textOverflow: "ellipsis",
@@ -258,29 +239,29 @@ const useStyles = makeStyles((theme) => ({
258239
fontSize: 14,
259240
},
260241

261-
metadataValueSuccess: {
242+
metadataValueSuccess: (theme) => ({
262243
color: theme.palette.success.light,
263-
},
244+
}),
264245

265-
metadataValueError: {
246+
metadataValueError: (theme) => ({
266247
color: theme.palette.error.main,
267-
},
248+
}),
268249

269-
metadataStale: {
250+
metadataStale: (theme) => ({
270251
color: theme.palette.text.disabled,
271252
cursor: "pointer",
272-
},
253+
}),
273254

274-
skeleton: {
255+
skeleton: (theme) => ({
275256
marginTop: theme.spacing(0.5),
276-
},
257+
}),
277258

278-
inlineCommand: {
259+
inlineCommand: (theme) => ({
279260
fontFamily: MONOSPACE_FONT_FAMILY,
280261
display: "inline-block",
281262
fontWeight: 600,
282263
margin: 0,
283264
borderRadius: 4,
284265
color: theme.palette.text.primary,
285-
},
286-
}));
266+
}),
267+
} satisfies Record<string, Interpolation<Theme>>;

0 commit comments

Comments
 (0)