Skip to content

Commit 31355b5

Browse files
aslilacaslilac
committed
emotion: AgentStatus 
1 parent 3504769 commit 31355b5

File tree

1 file changed

+26
-44
lines changed

1 file changed

+26
-44
lines changed

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

Lines changed: 26 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
1+
import { type Interpolation, type Theme } from "@emotion/react";
12
import Tooltip from "@mui/material/Tooltip";
2-
import { makeStyles } from "@mui/styles";
3-
import { combineClasses } from "utils/combineClasses";
43
import { WorkspaceAgent } from "api/typesGenerated";
54
import { ChooseOne, Cond } from "components/Conditionals/ChooseOne";
65
import WarningRounded from "@mui/icons-material/WarningRounded";
@@ -19,27 +18,23 @@ import Link from "@mui/material/Link";
1918
// connected:shutdown_error, connected:off.
2019

2120
const ReadyLifecycle = () => {
22-
const styles = useStyles();
23-
2421
return (
2522
<div
2623
role="status"
2724
data-testid="agent-status-ready"
2825
aria-label="Ready"
29-
className={combineClasses([styles.status, styles.connected])}
26+
css={[styles.status, styles.connected]}
3027
/>
3128
);
3229
};
3330

3431
const StartingLifecycle: React.FC = () => {
35-
const styles = useStyles();
36-
3732
return (
3833
<Tooltip title="Starting...">
3934
<div
4035
role="status"
4136
aria-label="Starting..."
42-
className={combineClasses([styles.status, styles.connecting])}
37+
css={[styles.status, styles.connecting]}
4338
/>
4439
</Tooltip>
4540
);
@@ -48,7 +43,6 @@ const StartingLifecycle: React.FC = () => {
4843
const StartTimeoutLifecycle: React.FC<{
4944
agent: WorkspaceAgent;
5045
}> = ({ agent }) => {
51-
const styles = useStyles();
5246
const anchorRef = useRef<SVGSVGElement>(null);
5347
const [isOpen, setIsOpen] = useState(false);
5448
const id = isOpen ? "timeout-popover" : undefined;
@@ -61,7 +55,7 @@ const StartTimeoutLifecycle: React.FC<{
6155
onMouseLeave={() => setIsOpen(false)}
6256
role="status"
6357
aria-label="Start timeout"
64-
className={styles.timeoutWarning}
58+
css={styles.timeoutWarning}
6559
/>
6660
<HelpPopover
6761
id={id}
@@ -90,7 +84,6 @@ const StartTimeoutLifecycle: React.FC<{
9084
const StartErrorLifecycle: React.FC<{
9185
agent: WorkspaceAgent;
9286
}> = ({ agent }) => {
93-
const styles = useStyles();
9487
const anchorRef = useRef<SVGSVGElement>(null);
9588
const [isOpen, setIsOpen] = useState(false);
9689
const id = isOpen ? "timeout-popover" : undefined;
@@ -103,7 +96,7 @@ const StartErrorLifecycle: React.FC<{
10396
onMouseLeave={() => setIsOpen(false)}
10497
role="status"
10598
aria-label="Start error"
106-
className={styles.errorWarning}
99+
css={styles.errorWarning}
107100
/>
108101
<HelpPopover
109102
id={id}
@@ -130,14 +123,12 @@ const StartErrorLifecycle: React.FC<{
130123
};
131124

132125
const ShuttingDownLifecycle: React.FC = () => {
133-
const styles = useStyles();
134-
135126
return (
136127
<Tooltip title="Stopping...">
137128
<div
138129
role="status"
139130
aria-label="Stopping..."
140-
className={combineClasses([styles.status, styles.connecting])}
131+
css={[styles.status, styles.connecting]}
141132
/>
142133
</Tooltip>
143134
);
@@ -146,7 +137,6 @@ const ShuttingDownLifecycle: React.FC = () => {
146137
const ShutdownTimeoutLifecycle: React.FC<{
147138
agent: WorkspaceAgent;
148139
}> = ({ agent }) => {
149-
const styles = useStyles();
150140
const anchorRef = useRef<SVGSVGElement>(null);
151141
const [isOpen, setIsOpen] = useState(false);
152142
const id = isOpen ? "timeout-popover" : undefined;
@@ -159,7 +149,7 @@ const ShutdownTimeoutLifecycle: React.FC<{
159149
onMouseLeave={() => setIsOpen(false)}
160150
role="status"
161151
aria-label="Stop timeout"
162-
className={styles.timeoutWarning}
152+
css={styles.timeoutWarning}
163153
/>
164154
<HelpPopover
165155
id={id}
@@ -188,7 +178,6 @@ const ShutdownTimeoutLifecycle: React.FC<{
188178
const ShutdownErrorLifecycle: React.FC<{
189179
agent: WorkspaceAgent;
190180
}> = ({ agent }) => {
191-
const styles = useStyles();
192181
const anchorRef = useRef<SVGSVGElement>(null);
193182
const [isOpen, setIsOpen] = useState(false);
194183
const id = isOpen ? "timeout-popover" : undefined;
@@ -201,7 +190,7 @@ const ShutdownErrorLifecycle: React.FC<{
201190
onMouseLeave={() => setIsOpen(false)}
202191
role="status"
203192
aria-label="Stop error"
204-
className={styles.errorWarning}
193+
css={styles.errorWarning}
205194
/>
206195
<HelpPopover
207196
id={id}
@@ -228,14 +217,12 @@ const ShutdownErrorLifecycle: React.FC<{
228217
};
229218

230219
const OffLifecycle: React.FC = () => {
231-
const styles = useStyles();
232-
233220
return (
234221
<Tooltip title="Stopped">
235222
<div
236223
role="status"
237224
aria-label="Stopped"
238-
className={combineClasses([styles.status, styles.disconnected])}
225+
css={[styles.status, styles.disconnected]}
239226
/>
240227
</Tooltip>
241228
);
@@ -280,28 +267,24 @@ const ConnectedStatus: React.FC<{
280267
};
281268

282269
const DisconnectedStatus: React.FC = () => {
283-
const styles = useStyles();
284-
285270
return (
286271
<Tooltip title="Disconnected">
287272
<div
288273
role="status"
289274
aria-label="Disconnected"
290-
className={combineClasses([styles.status, styles.disconnected])}
275+
css={[styles.status, styles.disconnected]}
291276
/>
292277
</Tooltip>
293278
);
294279
};
295280

296281
const ConnectingStatus: React.FC = () => {
297-
const styles = useStyles();
298-
299282
return (
300283
<Tooltip title="Connecting...">
301284
<div
302285
role="status"
303286
aria-label="Connecting..."
304-
className={combineClasses([styles.status, styles.connecting])}
287+
css={[styles.status, styles.connecting]}
305288
/>
306289
</Tooltip>
307290
);
@@ -310,7 +293,6 @@ const ConnectingStatus: React.FC = () => {
310293
const TimeoutStatus: React.FC<{
311294
agent: WorkspaceAgent;
312295
}> = ({ agent }) => {
313-
const styles = useStyles();
314296
const anchorRef = useRef<SVGSVGElement>(null);
315297
const [isOpen, setIsOpen] = useState(false);
316298
const id = isOpen ? "timeout-popover" : undefined;
@@ -323,7 +305,7 @@ const TimeoutStatus: React.FC<{
323305
onMouseLeave={() => setIsOpen(false)}
324306
role="status"
325307
aria-label="Timeout"
326-
className={styles.timeoutWarning}
308+
css={styles.timeoutWarning}
327309
/>
328310
<HelpPopover
329311
id={id}
@@ -370,22 +352,22 @@ export const AgentStatus: React.FC<{
370352
);
371353
};
372354

373-
const useStyles = makeStyles((theme) => ({
374-
status: {
355+
const styles = {
356+
status: (theme) => ({
375357
width: theme.spacing(1),
376358
height: theme.spacing(1),
377359
borderRadius: "100%",
378360
flexShrink: 0,
379-
},
361+
}),
380362

381-
connected: {
363+
connected: (theme) => ({
382364
backgroundColor: theme.palette.success.light,
383365
boxShadow: `0 0 12px 0 ${theme.palette.success.light}`,
384-
},
366+
}),
385367

386-
disconnected: {
368+
disconnected: (theme) => ({
387369
backgroundColor: theme.palette.text.secondary,
388-
},
370+
}),
389371

390372
"@keyframes pulse": {
391373
"0%": {
@@ -399,22 +381,22 @@ const useStyles = makeStyles((theme) => ({
399381
},
400382
},
401383

402-
connecting: {
384+
connecting: (theme) => ({
403385
backgroundColor: theme.palette.info.light,
404386
animation: "$pulse 1.5s 0.5s ease-in-out forwards infinite",
405-
},
387+
}),
406388

407-
timeoutWarning: {
389+
timeoutWarning: (theme) => ({
408390
color: theme.palette.warning.light,
409391
width: theme.spacing(2),
410392
height: theme.spacing(2),
411393
position: "relative",
412-
},
394+
}),
413395

414-
errorWarning: {
396+
errorWarning: (theme) => ({
415397
color: theme.palette.error.main,
416398
width: theme.spacing(2),
417399
height: theme.spacing(2),
418400
position: "relative",
419-
},
420-
}));
401+
}),
402+
} satisfies Record<string, Interpolation<Theme>>;

0 commit comments

Comments
 (0)