coder · aslilac · Nov 1, 2023 · Oct 30, 2023 · Oct 30, 2023 · Oct 30, 2023
diff --git a/site/src/components/Resources/AgentMetadata.tsx b/site/src/components/Resources/AgentMetadata.tsx
@@ -1,6 +1,8 @@
-import makeStyles from "@mui/styles/makeStyles";
 import { watchAgentMetadata } from "api/api";
-import { WorkspaceAgent, WorkspaceAgentMetadata } from "api/typesGenerated";
+import type {
+  WorkspaceAgent,
+  WorkspaceAgentMetadata,
+} from "api/typesGenerated";
 import { Stack } from "components/Stack/Stack";
 import dayjs from "dayjs";
 import {
@@ -13,17 +15,15 @@ import {
 } from "react";
 import Skeleton from "@mui/material/Skeleton";
 import { MONOSPACE_FONT_FAMILY } from "theme/constants";
-import { combineClasses } from "utils/combineClasses";
 import Tooltip from "@mui/material/Tooltip";
 import Box, { BoxProps } from "@mui/material/Box";
+import { type Interpolation, type Theme } from "@emotion/react";
 
 type ItemStatus = "stale" | "valid" | "loading";
 
 export const WatchAgentMetadataContext = createContext(watchAgentMetadata);
 
 const MetadataItem: FC<{ item: WorkspaceAgentMetadata }> = ({ item }) => {
-  const styles = useStyles();
-
   if (item.result === undefined) {
     throw new Error("Metadata item result is undefined");
   }
@@ -56,41 +56,29 @@ const MetadataItem: FC<{ item: WorkspaceAgentMetadata }> = ({ item }) => {
   // could be buggy. But, how common is that anyways?
   const value =
     status === "loading" ? (
-      <Skeleton
-        width={65}
-        height={12}
-        variant="text"
-        className={styles.skeleton}
-      />
+      <Skeleton width={65} height={12} variant="text" css={styles.skeleton} />
     ) : status === "stale" ? (
       <Tooltip title="This data is stale and no longer up to date">
-        <StaticWidth
-          className={combineClasses([
-            styles.metadataValue,
-            styles.metadataStale,
-          ])}
-        >
+        <StaticWidth css={[styles.metadataValue, styles.metadataStale]}>
           {item.result.value}
         </StaticWidth>
       </Tooltip>
     ) : (
       <StaticWidth
-        className={combineClasses([
+        css={[
           styles.metadataValue,
           item.result.error.length === 0
             ? styles.metadataValueSuccess
             : styles.metadataValueError,
-        ])}
+        ]}
       >
         {item.result.value}
       </StaticWidth>
     );
 
   return (
-    <div className={styles.metadata}>
-      <div className={styles.metadataLabel}>
-        {item.description.display_name}
-      </div>
+    <div css={styles.metadata}>
+      <div css={styles.metadataLabel}>{item.description.display_name}</div>
       <Box>{value}</Box>
     </div>
   );
@@ -101,12 +89,11 @@ export interface AgentMetadataViewProps {
 }
 
 export const AgentMetadataView: FC<AgentMetadataViewProps> = ({ metadata }) => {
-  const styles = useStyles();
   if (metadata.length === 0) {
     return <></>;
   }
   return (
-    <div className={styles.root}>
+    <div css={styles.root}>
       <Stack alignItems="baseline" direction="row" spacing={6}>
         {metadata.map((m) => {
           if (m.description === undefined) {
@@ -127,7 +114,6 @@ export const AgentMetadata: FC<{
     WorkspaceAgentMetadata[] | undefined
   >(undefined);
   const watchAgentMetadata = useContext(WatchAgentMetadataContext);
-  const styles = useStyles();
 
   useEffect(() => {
     if (storybookMetadata !== undefined) {
@@ -166,7 +152,7 @@ export const AgentMetadata: FC<{
 
   if (metadata === undefined) {
     return (
-      <div className={styles.root}>
+      <div css={styles.root}>
         <AgentMetadataSkeleton />
       </div>
     );
@@ -176,21 +162,19 @@ export const AgentMetadata: FC<{
 };
 
 export const AgentMetadataSkeleton: FC = () => {
-  const styles = useStyles();
-
   return (
     <Stack alignItems="baseline" direction="row" spacing={6}>
-      <div className={styles.metadata}>
+      <div css={styles.metadata}>
         <Skeleton width={40} height={12} variant="text" />
         <Skeleton width={65} height={14} variant="text" />
       </div>
 
-      <div className={styles.metadata}>
+      <div css={styles.metadata}>
         <Skeleton width={40} height={12} variant="text" />
         <Skeleton width={65} height={14} variant="text" />
       </div>
 
-      <div className={styles.metadata}>
+      <div css={styles.metadata}>
         <Skeleton width={40} height={12} variant="text" />
         <Skeleton width={65} height={14} variant="text" />
       </div>
@@ -219,16 +203,16 @@ const StaticWidth = (props: BoxProps) => {
 
 // These are more or less copied from
 // site/src/components/Resources/ResourceCard.tsx
-const useStyles = makeStyles((theme) => ({
-  root: {
+const styles = {
+  root: (theme) => ({
     padding: theme.spacing(2.5, 4),
     borderTop: `1px solid ${theme.palette.divider}`,
     background: theme.palette.background.paper,
     overflowX: "auto",
     scrollPadding: theme.spacing(0, 4),
-  },
+  }),
 
-  metadata: {
+  metadata: (theme) => ({
     fontSize: 12,
     lineHeight: "normal",
     display: "flex",
@@ -240,15 +224,15 @@ const useStyles = makeStyles((theme) => ({
     "&:last-child": {
       paddingRight: theme.spacing(4),
     },
-  },
+  }),
 
-  metadataLabel: {
+  metadataLabel: (theme) => ({
     color: theme.palette.text.secondary,
     textOverflow: "ellipsis",
     overflow: "hidden",
     whiteSpace: "nowrap",
     fontWeight: 500,
-  },
+  }),
 
   metadataValue: {
     textOverflow: "ellipsis",
@@ -258,29 +242,29 @@ const useStyles = makeStyles((theme) => ({
     fontSize: 14,
   },
 
-  metadataValueSuccess: {
+  metadataValueSuccess: (theme) => ({
     color: theme.palette.success.light,
-  },
+  }),
 
-  metadataValueError: {
+  metadataValueError: (theme) => ({
     color: theme.palette.error.main,
-  },
+  }),
 
-  metadataStale: {
+  metadataStale: (theme) => ({
     color: theme.palette.text.disabled,
     cursor: "pointer",
-  },
+  }),
 
-  skeleton: {
+  skeleton: (theme) => ({
     marginTop: theme.spacing(0.5),
-  },
+  }),
 
-  inlineCommand: {
+  inlineCommand: (theme) => ({
     fontFamily: MONOSPACE_FONT_FAMILY,
     display: "inline-block",
     fontWeight: 600,
     margin: 0,
     borderRadius: 4,
     color: theme.palette.text.primary,
-  },
-}));
+  }),
+} satisfies Record<string, Interpolation<Theme>>;