diff --git a/site/src/components/Resources/AgentMetadata.tsx b/site/src/components/Resources/AgentMetadata.tsx index 009e67ee54eae..2ad3bb79eba1d 100644 --- 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" ? ( - + ) : status === "stale" ? ( - + {item.result.value} ) : ( {item.result.value} ); return ( -
-
- {item.description.display_name} -
+
+
{item.description.display_name}
{value}
); @@ -101,12 +89,11 @@ export interface AgentMetadataViewProps { } export const AgentMetadataView: FC = ({ metadata }) => { - const styles = useStyles(); if (metadata.length === 0) { return <>; } return ( -
+
{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 ( -
+
); @@ -176,21 +162,19 @@ export const AgentMetadata: FC<{ }; export const AgentMetadataSkeleton: FC = () => { - const styles = useStyles(); - return ( -
+
-
+
-
+
@@ -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>; diff --git a/site/src/components/Resources/AgentRow.tsx b/site/src/components/Resources/AgentRow.tsx index d77160b5cc07b..8808be86c1508 100644 --- a/site/src/components/Resources/AgentRow.tsx +++ b/site/src/components/Resources/AgentRow.tsx @@ -1,9 +1,9 @@ import Collapse from "@mui/material/Collapse"; import Skeleton from "@mui/material/Skeleton"; import Tooltip from "@mui/material/Tooltip"; -import { makeStyles } from "@mui/styles"; +import { type Interpolation, type Theme } from "@emotion/react"; import * as API from "api/api"; -import { +import type { Workspace, WorkspaceAgent, WorkspaceAgentLogSource, @@ -30,7 +30,6 @@ import { import AutoSizer from "react-virtualized-auto-sizer"; import { FixedSizeList as List, ListOnScrollProps } from "react-window"; import { colors } from "theme/colors"; -import { combineClasses } from "utils/combineClasses"; import { Stack } from "../Stack/Stack"; import { AgentLatency } from "./AgentLatency"; import { AgentMetadata } from "./AgentMetadata"; @@ -75,7 +74,6 @@ export const AgentRow: FC = ({ sshPrefix, storybookLogs, }) => { - const styles = useStyles(); const hasAppsToDisplay = !hideVSCodeDesktopButton || agent.apps.length > 0; const shouldDisplayApps = showApps && @@ -159,28 +157,26 @@ export const AgentRow: FC = ({ key={agent.id} direction="column" spacing={0} - className={combineClasses([ + css={[ styles.agentRow, styles[`agentRow-${agent.status}`], styles[`agentRow-lifecycle-${agent.lifecycle_state}`], - ])} + ]} > -
-
-
+
+
+
-
{agent.name}
+
{agent.name}
{agent.status === "connected" && ( <> - - {agent.operating_system} - + {agent.operating_system} = ({
{agent.status === "connected" && ( -
+
{shouldDisplayApps && ( <> {(agent.display_apps.includes("vscode") || @@ -258,18 +254,18 @@ export const AgentRow: FC = ({ )} {agent.status === "connecting" && ( -
+
)} @@ -278,7 +274,7 @@ export const AgentRow: FC = ({ {hasStartupFeatures && ( -
+
{({ width }) => ( @@ -289,7 +285,7 @@ export const AgentRow: FC = ({ itemCount={startupLogs.length} itemSize={logLineHeight} width={width} - className={styles.startupLogs} + css={styles.startupLogs} onScroll={handleLogScroll} > {({ index, style }) => { @@ -323,7 +319,7 @@ export const AgentRow: FC = ({ alt="" width={16} height={16} - style={{ + css={{ marginRight: 8, }} /> @@ -331,7 +327,7 @@ export const AgentRow: FC = ({ } else { icon = (
= ({ ) { icon = (
= ({ }} >
= ({ /> {nextChangesSource && (
= ({ -
+
{showLogs ? ( ) : ( ); })} @@ -92,16 +87,16 @@ export const TemplateFiles: FC<{
); }; -const useStyles = makeStyles((theme) => ({ - tabs: { +const styles = { + tabs: (theme) => ({ display: "flex", alignItems: "baseline", borderBottom: `1px solid ${theme.palette.divider}`, gap: 1, overflowX: "auto", - }, + }), - tab: { + tab: (theme) => ({ background: "transparent", border: 0, padding: theme.spacing(0, 3), @@ -123,9 +118,9 @@ const useStyles = makeStyles((theme) => ({ "&:hover": { backgroundColor: theme.palette.action.hover, }, - }, + }), - tabActive: { + tabActive: (theme) => ({ opacity: 1, background: theme.palette.action.hover, color: theme.palette.text.primary, @@ -140,26 +135,26 @@ const useStyles = makeStyles((theme) => ({ backgroundColor: theme.palette.secondary.dark, position: "absolute", }, - }, + }), - tabDiff: { + tabDiff: (theme) => ({ height: 6, width: 6, backgroundColor: theme.palette.warning.light, borderRadius: "100%", marginLeft: theme.spacing(0.5), - }, + }), - codeWrapper: { + codeWrapper: (theme) => ({ background: theme.palette.background.paperLight, - }, + }), - files: { + files: (theme) => ({ borderRadius: theme.shape.borderRadius, border: `1px solid ${theme.palette.divider}`, - }, + }), prism: { borderRadius: 0, }, -})); +} satisfies Record>; diff --git a/site/src/components/Timeline/TimelineEntry.tsx b/site/src/components/Timeline/TimelineEntry.tsx index 40985af99a1fe..c1a6895467df9 100644 --- a/site/src/components/Timeline/TimelineEntry.tsx +++ b/site/src/components/Timeline/TimelineEntry.tsx @@ -1,7 +1,5 @@ -import { makeStyles } from "@mui/styles"; -import TableRow, { TableRowProps } from "@mui/material/TableRow"; +import TableRow, { type TableRowProps } from "@mui/material/TableRow"; import { type PropsWithChildren, forwardRef } from "react"; -import { combineClasses } from "utils/combineClasses"; type TimelineEntryProps = PropsWithChildren< TableRowProps & { @@ -13,47 +11,39 @@ export const TimelineEntry = forwardRef(function TimelineEntry( { children, clickable = true, ...props }: TimelineEntryProps, ref?: React.ForwardedRef, ) { - const styles = useStyles(); - return ( [ + { + position: "relative", + "&:focus": { + outlineStyle: "solid", + outlineOffset: -1, + outlineWidth: 2, + outlineColor: theme.palette.secondary.dark, + }, + "& td:before": { + position: "absolute", + left: 50, + display: "block", + content: "''", + height: "100%", + width: 2, + background: theme.palette.divider, + }, + }, + clickable && { + cursor: "pointer", + + "&:hover": { + backgroundColor: theme.palette.action.hover, + }, + }, + ]} {...props} > {children} ); }); - -const useStyles = makeStyles((theme) => ({ - clickable: { - cursor: "pointer", - - "&:hover": { - backgroundColor: theme.palette.action.hover, - }, - }, - - timelineEntry: { - position: "relative", - "&:focus": { - outlineStyle: "solid", - outlineOffset: -1, - outlineWidth: 2, - outlineColor: theme.palette.secondary.dark, - }, - "& td:before": { - position: "absolute", - left: 50, - display: "block", - content: "''", - height: "100%", - width: 2, - background: theme.palette.divider, - }, - }, -})); diff --git a/site/src/pages/CreateWorkspacePage/SelectedTemplate.tsx b/site/src/pages/CreateWorkspacePage/SelectedTemplate.tsx index 219851a64eede..41b9baaf9326c 100644 --- a/site/src/pages/CreateWorkspacePage/SelectedTemplate.tsx +++ b/site/src/pages/CreateWorkspacePage/SelectedTemplate.tsx @@ -1,21 +1,19 @@ -import { makeStyles } from "@mui/styles"; -import { Template, TemplateExample } from "api/typesGenerated"; +import { type FC } from "react"; +import type { Template, TemplateExample } from "api/typesGenerated"; import { Avatar } from "components/Avatar/Avatar"; import { Stack } from "components/Stack/Stack"; -import { FC } from "react"; +import { type Interpolation, type Theme } from "@emotion/react"; export interface SelectedTemplateProps { template: Template | TemplateExample; } export const SelectedTemplate: FC = ({ template }) => { - const styles = useStyles(); - return ( = ({ template }) => { - + {"display_name" in template && template.display_name.length > 0 ? template.display_name : template.name} {template.description && ( - - {template.description} - + {template.description} )} ); }; -const useStyles = makeStyles((theme) => ({ - template: { +const styles = { + template: (theme) => ({ padding: theme.spacing(2.5, 3), borderRadius: theme.shape.borderRadius, backgroundColor: theme.palette.background.paper, border: `1px solid ${theme.palette.divider}`, - }, + }), templateName: { fontSize: 16, }, - templateDescription: { + templateDescription: (theme) => ({ fontSize: 14, color: theme.palette.text.secondary, - }, -})); + }), +} satisfies Record>; diff --git a/site/src/pages/TemplatePage/TemplateVersionsPage/VersionRow.tsx b/site/src/pages/TemplatePage/TemplateVersionsPage/VersionRow.tsx index 0ad02ffd2b696..0fd8f80531324 100644 --- a/site/src/pages/TemplatePage/TemplateVersionsPage/VersionRow.tsx +++ b/site/src/pages/TemplatePage/TemplateVersionsPage/VersionRow.tsx @@ -1,16 +1,15 @@ +import { type CSSObject, type Interpolation, type Theme } from "@emotion/react"; import Button from "@mui/material/Button"; -import { makeStyles } from "@mui/styles"; import TableCell from "@mui/material/TableCell"; -import { TemplateVersion } from "api/typesGenerated"; +import { useNavigate } from "react-router-dom"; +import type { TemplateVersion } from "api/typesGenerated"; import { Pill } from "components/Pill/Pill"; import { Stack } from "components/Stack/Stack"; import { TimelineEntry } from "components/Timeline/TimelineEntry"; import { UserAvatar } from "components/UserAvatar/UserAvatar"; import { InfoTooltip } from "components/InfoTooltip/InfoTooltip"; import { useClickableTableRow } from "hooks/useClickableTableRow"; -import { useNavigate } from "react-router-dom"; import { colors } from "theme/colors"; -import { combineClasses } from "utils/combineClasses"; export interface VersionRowProps { version: TemplateVersion; @@ -27,7 +26,6 @@ export const VersionRow: React.FC = ({ onPromoteClick, onArchiveClick, }) => { - const styles = useStyles(); const navigate = useNavigate(); const clickableProps = useClickableTableRow({ @@ -40,17 +38,14 @@ export const VersionRow: React.FC = ({ - + @@ -59,7 +54,7 @@ export const VersionRow: React.FC = ({ avatarURL={version.created_by.avatar_url} /> = ({ )} - + {new Date(version.created_at).toLocaleTimeString()} @@ -94,7 +89,7 @@ export const VersionRow: React.FC = ({ {jobStatus === "failed" && } {jobStatus === "failed" ? ( ) : (