Skip to content

Commit b3d799f

Browse files
aslilacaslilac
committed
emotion: AgentRow 
1 parent 73b5716 commit b3d799f

File tree

1 file changed

+71
-81
lines changed

1 file changed

+71
-81
lines changed

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

Lines changed: 71 additions & 81 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import Collapse from "@mui/material/Collapse";
22
import Skeleton from "@mui/material/Skeleton";
33
import Tooltip from "@mui/material/Tooltip";
4-
import { makeStyles } from "@mui/styles";
4+
import { type Interpolation, type Theme } from "@emotion/react";
55
import * as API from "api/api";
6-
import {
6+
import type {
77
Workspace,
88
WorkspaceAgent,
99
WorkspaceAgentLogSource,
@@ -30,7 +30,6 @@ import {
3030
import AutoSizer from "react-virtualized-auto-sizer";
3131
import { FixedSizeList as List, ListOnScrollProps } from "react-window";
3232
import { colors } from "theme/colors";
33-
import { combineClasses } from "utils/combineClasses";
3433
import { Stack } from "../Stack/Stack";
3534
import { AgentLatency } from "./AgentLatency";
3635
import { AgentMetadata } from "./AgentMetadata";
@@ -75,7 +74,6 @@ export const AgentRow: FC<AgentRowProps> = ({
7574
sshPrefix,
7675
storybookLogs,
7776
}) => {
78-
const styles = useStyles();
7977
const hasAppsToDisplay = !hideVSCodeDesktopButton || agent.apps.length > 0;
8078
const shouldDisplayApps =
8179
showApps &&
@@ -159,28 +157,26 @@ export const AgentRow: FC<AgentRowProps> = ({
159157
key={agent.id}
160158
direction="column"
161159
spacing={0}
162-
className={combineClasses([
160+
css={[
163161
styles.agentRow,
164162
styles[`agentRow-${agent.status}`],
165163
styles[`agentRow-lifecycle-${agent.lifecycle_state}`],
166-
])}
164+
]}
167165
>
168-
<div className={styles.agentInfo}>
169-
<div className={styles.agentNameAndStatus}>
170-
<div className={styles.agentNameAndInfo}>
166+
<div css={styles.agentInfo}>
167+
<div css={styles.agentNameAndStatus}>
168+
<div css={styles.agentNameAndInfo}>
171169
<AgentStatus agent={agent} />
172-
<div className={styles.agentName}>{agent.name}</div>
170+
<div css={styles.agentName}>{agent.name}</div>
173171
<Stack
174172
direction="row"
175173
spacing={2}
176174
alignItems="baseline"
177-
className={styles.agentDescription}
175+
css={styles.agentDescription}
178176
>
179177
{agent.status === "connected" && (
180178
<>
181-
<span className={styles.agentOS}>
182-
{agent.operating_system}
183-
</span>
179+
<span css={styles.agentOS}>{agent.operating_system}</span>
184180
<AgentVersion
185181
agent={agent}
186182
serverVersion={serverVersion}
@@ -200,7 +196,7 @@ export const AgentRow: FC<AgentRowProps> = ({
200196
</div>
201197

202198
{agent.status === "connected" && (
203-
<div className={styles.agentButtons}>
199+
<div css={styles.agentButtons}>
204200
{shouldDisplayApps && (
205201
<>
206202
{(agent.display_apps.includes("vscode") ||
@@ -258,18 +254,18 @@ export const AgentRow: FC<AgentRowProps> = ({
258254
)}
259255

260256
{agent.status === "connecting" && (
261-
<div className={styles.agentButtons}>
257+
<div css={styles.agentButtons}>
262258
<Skeleton
263259
width={80}
264260
height={32}
265261
variant="rectangular"
266-
className={styles.buttonSkeleton}
262+
css={styles.buttonSkeleton}
267263
/>
268264
<Skeleton
269265
width={110}
270266
height={32}
271267
variant="rectangular"
272-
className={styles.buttonSkeleton}
268+
css={styles.buttonSkeleton}
273269
/>
274270
</div>
275271
)}
@@ -278,7 +274,7 @@ export const AgentRow: FC<AgentRowProps> = ({
278274
<AgentMetadata storybookMetadata={storybookAgentMetadata} agent={agent} />
279275

280276
{hasStartupFeatures && (
281-
<div className={styles.logsPanel}>
277+
<div css={styles.logsPanel}>
282278
<Collapse in={showLogs}>
283279
<AutoSizer disableHeight>
284280
{({ width }) => (
@@ -289,7 +285,7 @@ export const AgentRow: FC<AgentRowProps> = ({
289285
itemCount={startupLogs.length}
290286
itemSize={logLineHeight}
291287
width={width}
292-
className={styles.startupLogs}
288+
css={styles.startupLogs}
293289
onScroll={handleLogScroll}
294290
>
295291
{({ index, style }) => {
@@ -429,13 +425,10 @@ export const AgentRow: FC<AgentRowProps> = ({
429425
</AutoSizer>
430426
</Collapse>
431427

432-
<div className={styles.logsPanelButtons}>
428+
<div css={styles.logsPanelButtons}>
433429
{showLogs ? (
434430
<button
435-
className={combineClasses([
436-
styles.logsPanelButton,
437-
styles.toggleLogsButton,
438-
])}
431+
css={[styles.logsPanelButton, styles.toggleLogsButton]}
439432
onClick={() => {
440433
setShowLogs((v) => !v);
441434
}}
@@ -445,10 +438,7 @@ export const AgentRow: FC<AgentRowProps> = ({
445438
</button>
446439
) : (
447440
<button
448-
className={combineClasses([
449-
styles.logsPanelButton,
450-
styles.toggleLogsButton,
451-
])}
441+
css={[styles.logsPanelButton, styles.toggleLogsButton]}
452442
onClick={() => {
453443
setShowLogs((v) => !v);
454444
}}
@@ -511,68 +501,68 @@ const useAgentLogs = (
511501
return logs;
512502
};
513503

514-
const useStyles = makeStyles((theme) => ({
515-
agentRow: {
504+
const styles = {
505+
agentRow: (theme) => ({
516506
backgroundColor: theme.palette.background.paperLight,
517507
fontSize: 16,
518508
borderLeft: `2px solid ${theme.palette.text.secondary}`,
519509

520510
"&:not(:first-of-type)": {
521511
borderTop: `2px solid ${theme.palette.divider}`,
522512
},
523-
},
513+
}),
524514

525-
"agentRow-connected": {
515+
"agentRow-connected": (theme) => ({
526516
borderLeftColor: theme.palette.success.light,
527-
},
517+
}),
528518

529-
"agentRow-disconnected": {
519+
"agentRow-disconnected": (theme) => ({
530520
borderLeftColor: theme.palette.text.secondary,
531-
},
521+
}),
532522

533-
"agentRow-connecting": {
523+
"agentRow-connecting": (theme) => ({
534524
borderLeftColor: theme.palette.info.light,
535-
},
525+
}),
536526

537-
"agentRow-timeout": {
527+
"agentRow-timeout": (theme) => ({
538528
borderLeftColor: theme.palette.warning.light,
539-
},
529+
}),
540530

541531
"agentRow-lifecycle-created": {},
542532

543-
"agentRow-lifecycle-starting": {
533+
"agentRow-lifecycle-starting": (theme) => ({
544534
borderLeftColor: theme.palette.info.light,
545-
},
535+
}),
546536

547-
"agentRow-lifecycle-ready": {
537+
"agentRow-lifecycle-ready": (theme) => ({
548538
borderLeftColor: theme.palette.success.light,
549-
},
539+
}),
550540

551-
"agentRow-lifecycle-start_timeout": {
541+
"agentRow-lifecycle-start_timeout": (theme) => ({
552542
borderLeftColor: theme.palette.warning.light,
553-
},
543+
}),
554544

555-
"agentRow-lifecycle-start_error": {
545+
"agentRow-lifecycle-start_error": (theme) => ({
556546
borderLeftColor: theme.palette.error.light,
557-
},
547+
}),
558548

559-
"agentRow-lifecycle-shutting_down": {
549+
"agentRow-lifecycle-shutting_down": (theme) => ({
560550
borderLeftColor: theme.palette.info.light,
561-
},
551+
}),
562552

563-
"agentRow-lifecycle-shutdown_timeout": {
553+
"agentRow-lifecycle-shutdown_timeout": (theme) => ({
564554
borderLeftColor: theme.palette.warning.light,
565-
},
555+
}),
566556

567-
"agentRow-lifecycle-shutdown_error": {
557+
"agentRow-lifecycle-shutdown_error": (theme) => ({
568558
borderLeftColor: theme.palette.error.light,
569-
},
559+
}),
570560

571-
"agentRow-lifecycle-off": {
561+
"agentRow-lifecycle-off": (theme) => ({
572562
borderLeftColor: theme.palette.text.secondary,
573-
},
563+
}),
574564

575-
agentInfo: {
565+
agentInfo: (theme) => ({
576566
padding: theme.spacing(2, 4),
577567
display: "flex",
578568
alignItems: "center",
@@ -582,9 +572,9 @@ const useStyles = makeStyles((theme) => ({
582572
[theme.breakpoints.down("md")]: {
583573
gap: theme.spacing(2),
584574
},
585-
},
575+
}),
586576

587-
agentNameAndInfo: {
577+
agentNameAndInfo: (theme) => ({
588578
display: "flex",
589579
alignItems: "center",
590580
gap: theme.spacing(3),
@@ -593,9 +583,9 @@ const useStyles = makeStyles((theme) => ({
593583
[theme.breakpoints.down("md")]: {
594584
gap: theme.spacing(1.5),
595585
},
596-
},
586+
}),
597587

598-
agentButtons: {
588+
agentButtons: (theme) => ({
599589
display: "flex",
600590
gap: theme.spacing(1),
601591
justifyContent: "flex-end",
@@ -606,14 +596,14 @@ const useStyles = makeStyles((theme) => ({
606596
marginLeft: 0,
607597
justifyContent: "flex-start",
608598
},
609-
},
599+
}),
610600

611-
agentDescription: {
601+
agentDescription: (theme) => ({
612602
fontSize: 14,
613603
color: theme.palette.text.secondary,
614-
},
604+
}),
615605

616-
startupLogs: {
606+
startupLogs: (theme) => ({
617607
maxHeight: 256,
618608
borderBottom: `1px solid ${theme.palette.divider}`,
619609
backgroundColor: theme.palette.background.paper,
@@ -623,19 +613,19 @@ const useStyles = makeStyles((theme) => ({
623613
"& > div": {
624614
position: "relative",
625615
},
626-
},
616+
}),
627617

628-
agentNameAndStatus: {
618+
agentNameAndStatus: (theme) => ({
629619
display: "flex",
630620
alignItems: "center",
631621
gap: theme.spacing(4),
632622

633623
[theme.breakpoints.down("md")]: {
634624
width: "100%",
635625
},
636-
},
626+
}),
637627

638-
agentName: {
628+
agentName: (theme) => ({
639629
whiteSpace: "nowrap",
640630
overflow: "hidden",
641631
textOverflow: "ellipsis",
@@ -648,15 +638,15 @@ const useStyles = makeStyles((theme) => ({
648638
[theme.breakpoints.down("md")]: {
649639
overflow: "unset",
650640
},
651-
},
641+
}),
652642

653-
agentDataGroup: {
643+
agentDataGroup: (theme) => ({
654644
display: "flex",
655645
alignItems: "baseline",
656646
gap: theme.spacing(6),
657-
},
647+
}),
658648

659-
agentData: {
649+
agentData: (theme) => ({
660650
display: "flex",
661651
flexDirection: "column",
662652
fontSize: 12,
@@ -665,17 +655,17 @@ const useStyles = makeStyles((theme) => ({
665655
fontWeight: 500,
666656
color: theme.palette.text.secondary,
667657
},
668-
},
658+
}),
669659

670-
logsPanel: {
660+
logsPanel: (theme) => ({
671661
borderTop: `1px solid ${theme.palette.divider}`,
672-
},
662+
}),
673663

674664
logsPanelButtons: {
675665
display: "flex",
676666
},
677667

678-
logsPanelButton: {
668+
logsPanelButton: (theme) => ({
679669
textAlign: "left",
680670
background: "transparent",
681671
border: 0,
@@ -696,7 +686,7 @@ const useStyles = makeStyles((theme) => ({
696686
"& svg": {
697687
color: "inherit",
698688
},
699-
},
689+
}),
700690

701691
toggleLogsButton: {
702692
width: "100%",
@@ -706,17 +696,17 @@ const useStyles = makeStyles((theme) => ({
706696
borderRadius: 4,
707697
},
708698

709-
agentErrorMessage: {
699+
agentErrorMessage: (theme) => ({
710700
fontSize: 12,
711701
fontWeight: 400,
712702
marginTop: theme.spacing(0.5),
713703
color: theme.palette.warning.light,
714-
},
704+
}),
715705

716706
agentOS: {
717707
textTransform: "capitalize",
718708
},
719-
}));
709+
} satisfies Record<string, Interpolation<Theme>>;
720710

721711
// These colors were picked at random. Feel free
722712
// to add more, adjust, or change! Users will not

0 commit comments

Comments
 (0)