From 73b57169c7a08f129b602341ab0f251b2506eaf3 Mon Sep 17 00:00:00 2001 From: McKayla Washburn Date: Mon, 30 Oct 2023 17:04:22 +0000 Subject: [PATCH 01/27] emotion: `AgentMetadata` --- .../components/Resources/AgentMetadata.tsx | 79 +++++++------------ 1 file changed, 30 insertions(+), 49 deletions(-) diff --git a/site/src/components/Resources/AgentMetadata.tsx b/site/src/components/Resources/AgentMetadata.tsx index 009e67ee54eae..ce4eea782d9e8 100644 --- a/site/src/components/Resources/AgentMetadata.tsx +++ b/site/src/components/Resources/AgentMetadata.tsx @@ -1,4 +1,3 @@ -import makeStyles from "@mui/styles/makeStyles"; import { watchAgentMetadata } from "api/api"; import { WorkspaceAgent, WorkspaceAgentMetadata } from "api/typesGenerated"; import { Stack } from "components/Stack/Stack"; @@ -13,17 +12,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 { Interpolation, 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 +53,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 +86,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 +111,6 @@ export const AgentMetadata: FC<{ WorkspaceAgentMetadata[] | undefined >(undefined); const watchAgentMetadata = useContext(WatchAgentMetadataContext); - const styles = useStyles(); useEffect(() => { if (storybookMetadata !== undefined) { @@ -166,7 +149,7 @@ export const AgentMetadata: FC<{ if (metadata === undefined) { return ( -
+
); @@ -176,21 +159,19 @@ export const AgentMetadata: FC<{ }; export const AgentMetadataSkeleton: FC = () => { - const styles = useStyles(); - return ( -
+
-
+
-
+
@@ -219,16 +200,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 +221,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 +239,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>; From b3d799f7ad0a869be74927f2cb70ba9035ec9fa4 Mon Sep 17 00:00:00 2001 From: McKayla Washburn Date: Mon, 30 Oct 2023 17:10:42 +0000 Subject: [PATCH 02/27] emotion: `AgentRow` --- site/src/components/Resources/AgentRow.tsx | 152 ++++++++++----------- 1 file changed, 71 insertions(+), 81 deletions(-) diff --git a/site/src/components/Resources/AgentRow.tsx b/site/src/components/Resources/AgentRow.tsx index d77160b5cc07b..29e8711d25d22 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 }) => { @@ -429,13 +425,10 @@ export const AgentRow: FC = ({ -
+
{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>; From f3e471c70972ed995aa9b2ae8db5ce50a75bafa5 Mon Sep 17 00:00:00 2001 From: McKayla Washburn Date: Mon, 30 Oct 2023 18:41:46 +0000 Subject: [PATCH 16/27] emotion: `TimelineEntry` --- .../src/components/Timeline/TimelineEntry.tsx | 66 ++++++++----------- 1 file changed, 28 insertions(+), 38 deletions(-) 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, - }, - }, -})); From 739245f3b4aa09a8f9549b638801bc477612a13a Mon Sep 17 00:00:00 2001 From: McKayla Washburn Date: Mon, 30 Oct 2023 18:43:27 +0000 Subject: [PATCH 17/27] emotion: `SelectedTemplate` --- .../CreateWorkspacePage/SelectedTemplate.tsx | 29 +++++++++---------- 1 file changed, 13 insertions(+), 16 deletions(-) diff --git a/site/src/pages/CreateWorkspacePage/SelectedTemplate.tsx b/site/src/pages/CreateWorkspacePage/SelectedTemplate.tsx index 219851a64eede..0adfdc3c95219 100644 --- a/site/src/pages/CreateWorkspacePage/SelectedTemplate.tsx +++ b/site/src/pages/CreateWorkspacePage/SelectedTemplate.tsx @@ -1,21 +1,20 @@ -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 { Interpolation } from "@emotion/react"; +import { 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>; From 83d9d80d47181bf81307ba874e9a2f6633a23173 Mon Sep 17 00:00:00 2001 From: McKayla Washburn Date: Mon, 30 Oct 2023 19:41:37 +0000 Subject: [PATCH 18/27] emotion: `WorkspaceScheduleForm` --- .../WorkspaceScheduleForm.tsx | 28 +++++++++---------- 1 file changed, 14 insertions(+), 14 deletions(-) diff --git a/site/src/pages/WorkspaceSettingsPage/WorkspaceSchedulePage/WorkspaceScheduleForm.tsx b/site/src/pages/WorkspaceSettingsPage/WorkspaceSchedulePage/WorkspaceScheduleForm.tsx index 6bacd8b37afb1..bcc9fc145cf28 100644 --- a/site/src/pages/WorkspaceSettingsPage/WorkspaceSchedulePage/WorkspaceScheduleForm.tsx +++ b/site/src/pages/WorkspaceSettingsPage/WorkspaceSchedulePage/WorkspaceScheduleForm.tsx @@ -340,11 +340,23 @@ export const WorkspaceScheduleForm: FC< - + {Language.daysOfWeekLabel} - + ({ + display: "flex", + flexDirection: "row", + flexWrap: "wrap", + paddingTop: theme.spacing(0.5), + })} + > {checkboxes.map((checkbox) => ( { .humanize()} ${Language.ttlCausesShutdownAfterStart}.`; } }; - -const useStyles = makeStyles((theme) => ({ - daysOfWeekLabel: { - fontSize: 12, - }, - daysOfWeekOptions: { - display: "flex", - flexDirection: "row", - flexWrap: "wrap", - paddingTop: theme.spacing(0.5), - }, -})); From 0b1874e0ded79547204eb2329acc2d086edb8370 Mon Sep 17 00:00:00 2001 From: McKayla Washburn Date: Mon, 30 Oct 2023 19:43:16 +0000 Subject: [PATCH 19/27] emotion: `TemplateSettingsLayout` --- .../TemplateSettingsLayout.tsx | 36 +++++++++---------- 1 file changed, 17 insertions(+), 19 deletions(-) diff --git a/site/src/pages/TemplateSettingsPage/TemplateSettingsLayout.tsx b/site/src/pages/TemplateSettingsPage/TemplateSettingsLayout.tsx index 1396789e15672..4fab050d02876 100644 --- a/site/src/pages/TemplateSettingsPage/TemplateSettingsLayout.tsx +++ b/site/src/pages/TemplateSettingsPage/TemplateSettingsLayout.tsx @@ -1,18 +1,17 @@ -import { makeStyles } from "@mui/styles"; -import { Sidebar } from "./Sidebar"; -import { Stack } from "components/Stack/Stack"; -import { createContext, FC, Suspense, useContext } from "react"; +import { createContext, type FC, Suspense, useContext } from "react"; import { Helmet } from "react-helmet-async"; +import { useQuery } from "react-query"; import { pageTitle } from "utils/page"; +import { Stack } from "components/Stack/Stack"; import { Loader } from "components/Loader/Loader"; import { Outlet, useParams } from "react-router-dom"; import { Margins } from "components/Margins/Margins"; -import { useQuery } from "react-query"; import { useOrganizationId } from "hooks/useOrganizationId"; import { templateByName } from "api/queries/templates"; -import { type AuthorizationResponse, type Template } from "api/typesGenerated"; +import type { AuthorizationResponse, Template } from "api/typesGenerated"; import { ErrorAlert } from "components/Alert/ErrorAlert"; import { checkAuthorization } from "api/queries/authCheck"; +import { Sidebar } from "./Sidebar"; const TemplateSettings = createContext< { template: Template; permissions: AuthorizationResponse } | undefined @@ -28,7 +27,6 @@ export function useTemplateSettings() { } export const TemplateSettingsLayout: FC = () => { - const styles = useStyles(); const orgId = useOrganizationId(); const { template: templateName } = useParams() as { template: string }; const templateQuery = useQuery(templateByName(orgId, templateName)); @@ -58,7 +56,13 @@ export const TemplateSettingsLayout: FC = () => { - + ({ + padding: theme.spacing(6, 0), + })} + direction="row" + spacing={10} + > {templateQuery.isError || permissionsQuery.isError ? ( ) : ( @@ -70,7 +74,11 @@ export const TemplateSettingsLayout: FC = () => { > }> -
+
@@ -81,13 +89,3 @@ export const TemplateSettingsLayout: FC = () => { ); }; - -const useStyles = makeStyles((theme) => ({ - wrapper: { - padding: theme.spacing(6, 0), - }, - - content: { - width: "100%", - }, -})); From 0f695490b2b86e6d2298e362097110a537f3f4b4 Mon Sep 17 00:00:00 2001 From: McKayla Washburn Date: Mon, 30 Oct 2023 19:50:52 +0000 Subject: [PATCH 20/27] emotion: `FileTreeView` --- .../FileTreeView.tsx | 110 ++++++++---------- 1 file changed, 50 insertions(+), 60 deletions(-) diff --git a/site/src/pages/TemplateVersionEditorPage/FileTreeView.tsx b/site/src/pages/TemplateVersionEditorPage/FileTreeView.tsx index aff625bb3a012..ea9b9a544cfe8 100644 --- a/site/src/pages/TemplateVersionEditorPage/FileTreeView.tsx +++ b/site/src/pages/TemplateVersionEditorPage/FileTreeView.tsx @@ -1,11 +1,11 @@ -import { makeStyles } from "@mui/styles"; import ChevronRightIcon from "@mui/icons-material/ChevronRight"; import ExpandMoreIcon from "@mui/icons-material/ExpandMore"; import TreeView from "@mui/lab/TreeView"; import TreeItem from "@mui/lab/TreeItem"; import Menu from "@mui/material/Menu"; import MenuItem from "@mui/material/MenuItem"; -import { CSSProperties, FC, useState } from "react"; +import { type CSSProperties, type FC, useState } from "react"; +import { css } from "@emotion/react"; import { FileTree } from "utils/filetree"; import { DockerIcon } from "components/Icons/DockerIcon"; import { colors } from "theme/colors"; @@ -35,7 +35,6 @@ export const FileTreeView: FC<{ fileTree: FileTree; activePath?: string; }> = ({ fileTree, activePath, onDelete, onRename, onSelect }) => { - const styles = useStyles(); const [contextMenu, setContextMenu] = useState(); const buildTreeItems = ( @@ -60,9 +59,54 @@ export const FileTreeView: FC<{ nodeId={currentPath} key={currentPath} label={filename} - className={`${styles.fileTreeItem} ${ - currentPath === activePath ? "active" : "" - }`} + css={(theme) => css` + overflow: hidden; + user-select: none; + + &:focus:not(.active) > .MuiTreeItem-content { + background: ${theme.palette.action.hover}; + color: ${theme.palette.text.primary}; + } + + &:not(:focus):not(.active) > .MuiTreeItem-content:hover { + background: ${theme.palette.action.hover}; + color: ${theme.palette.text.primary}; + } + + & > .MuiTreeItem-content { + padding: ${theme.spacing(0.25, 2)}; + color: ${theme.palette.text.secondary}; + + & svg { + width: 16px; + height: 16px; + } + + & > .muitreeitem-label { + margin-left: 4px; + font-size: 13px; + color: inherit; + } + } + + &.active { + & > .MuiTreeItem-content { + color: ${theme.palette.text.primary}; + background: ${colors.gray[13]}; + pointer-events: none; + } + } + + & .MuiTreeItem-group { + margin-left: 0; + + // We need to find a better way to recursive padding here + & .MuiTreeItem-content { + padding-left: calc(var(--level) * ${theme.spacing(5)}); + } + } + `} + className={currentPath === activePath ? "active" : ""} onClick={() => { onSelect(currentPath); }} @@ -161,60 +205,6 @@ export const FileTreeView: FC<{ ); }; -const useStyles = makeStyles((theme) => ({ - fileTreeItem: { - overflow: "hidden", - userSelect: "none", - - "&:focus:not(.active) > .MuiTreeItem-content": { - background: theme.palette.action.hover, - color: theme.palette.text.primary, - }, - - "&:not(:focus):not(.active) > .MuiTreeItem-content:hover": { - background: theme.palette.action.hover, - color: theme.palette.text.primary, - }, - - "& > .MuiTreeItem-content": { - padding: theme.spacing(0.25, 2), - color: theme.palette.text.secondary, - - "& svg": { - width: 16, - height: 16, - }, - - "& > .MuiTreeItem-label": { - marginLeft: 4, - fontSize: 13, - color: "inherit", - }, - }, - - "&.active": { - "& > .MuiTreeItem-content": { - color: theme.palette.text.primary, - background: colors.gray[13], - pointerEvents: "none", - }, - }, - - "& .MuiTreeItem-group": { - marginLeft: 0, - - // We need to find a better way to recursive padding here - "& .MuiTreeItem-content": { - paddingLeft: `calc(var(--level) * ${theme.spacing(5)})`, - }, - }, - }, - editor: { - flex: 1, - }, - preview: {}, -})); - const FileTypeTerraform = () => ( file_type_terraform From 9225685feec6fa227f9f320cc4292925fe8bea65 Mon Sep 17 00:00:00 2001 From: McKayla Washburn Date: Mon, 30 Oct 2023 19:56:19 +0000 Subject: [PATCH 21/27] emotion: `MissingTemplateVariablesDialog` --- .../MissingTemplateVariablesDialog.tsx | 72 +++++++++---------- 1 file changed, 32 insertions(+), 40 deletions(-) diff --git a/site/src/pages/TemplateVersionEditorPage/MissingTemplateVariablesDialog.tsx b/site/src/pages/TemplateVersionEditorPage/MissingTemplateVariablesDialog.tsx index 61a5c39fd1907..2c6a32ce3937e 100644 --- a/site/src/pages/TemplateVersionEditorPage/MissingTemplateVariablesDialog.tsx +++ b/site/src/pages/TemplateVersionEditorPage/MissingTemplateVariablesDialog.tsx @@ -1,12 +1,16 @@ -import { makeStyles } from "@mui/styles"; +import { css } from "@emotion/css"; +import { useTheme, type Interpolation, type Theme } from "@emotion/react"; import Dialog from "@mui/material/Dialog"; import DialogContent from "@mui/material/DialogContent"; import DialogContentText from "@mui/material/DialogContentText"; import DialogTitle from "@mui/material/DialogTitle"; -import { DialogProps } from "components/Dialogs/Dialog"; -import { FC, useEffect, useState } from "react"; +import { type DialogProps } from "components/Dialogs/Dialog"; +import { type FC, useEffect, useState } from "react"; import { FormFields, VerticalForm } from "components/Form/Form"; -import { TemplateVersionVariable, VariableValue } from "api/typesGenerated"; +import type { + TemplateVersionVariable, + VariableValue, +} from "api/typesGenerated"; import DialogActions from "@mui/material/DialogActions"; import Button from "@mui/material/Button"; import { VariableInput } from "pages/CreateTemplatePage/VariableInput"; @@ -24,7 +28,7 @@ export type MissingTemplateVariablesDialogProps = Omit< export const MissingTemplateVariablesDialog: FC< MissingTemplateVariablesDialogProps > = ({ missingVariables, onSubmit, ...dialogProps }) => { - const styles = useStyles(); + const theme = useTheme(); const [variableValues, setVariableValues] = useState([]); // Pre-fill the form with the default values when missing variables are loaded @@ -47,16 +51,25 @@ export const MissingTemplateVariablesDialog: FC< > Template variables - - + + There are a few missing template variable values. Please fill them in. { e.preventDefault(); @@ -89,7 +102,7 @@ export const MissingTemplateVariablesDialog: FC< )} - + @@ -101,43 +114,22 @@ export const MissingTemplateVariablesDialog: FC< ); }; -const useStyles = makeStyles((theme) => ({ - title: { - padding: theme.spacing(3, 5), - - "& h2": { - fontSize: theme.spacing(2.5), - fontWeight: 400, - }, - }, - - content: { - padding: theme.spacing(0, 5, 0, 5), - }, +const styles = { + content: (theme) => ({ + padding: theme.spacing(0, 5), + }), info: { margin: 0, }, - form: { + form: (theme) => ({ paddingTop: theme.spacing(4), - }, + }), - infoTitle: { - fontSize: theme.spacing(2), - fontWeight: 600, - display: "flex", - alignItems: "center", - gap: theme.spacing(1), - }, - - formFooter: { - flexDirection: "column", - }, - - dialogActions: { + dialogActions: (theme) => ({ padding: theme.spacing(5), flexDirection: "column", gap: theme.spacing(1), - }, -})); + }), +} satisfies Record>; From e31a8a5461dd0c9b7d38f0778ba0006b1f28aada Mon Sep 17 00:00:00 2001 From: McKayla Washburn Date: Mon, 30 Oct 2023 19:57:51 +0000 Subject: [PATCH 22/27] =?UTF-8?q?=F0=9F=A7=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../WorkspaceSchedulePage/WorkspaceScheduleForm.tsx | 3 --- 1 file changed, 3 deletions(-) diff --git a/site/src/pages/WorkspaceSettingsPage/WorkspaceSchedulePage/WorkspaceScheduleForm.tsx b/site/src/pages/WorkspaceSettingsPage/WorkspaceSchedulePage/WorkspaceScheduleForm.tsx index bcc9fc145cf28..9af169452862d 100644 --- a/site/src/pages/WorkspaceSettingsPage/WorkspaceSchedulePage/WorkspaceScheduleForm.tsx +++ b/site/src/pages/WorkspaceSettingsPage/WorkspaceSchedulePage/WorkspaceScheduleForm.tsx @@ -5,7 +5,6 @@ import FormGroup from "@mui/material/FormGroup"; import FormHelperText from "@mui/material/FormHelperText"; import FormLabel from "@mui/material/FormLabel"; import MenuItem from "@mui/material/MenuItem"; -import makeStyles from "@mui/styles/makeStyles"; import Switch from "@mui/material/Switch"; import TextField from "@mui/material/TextField"; import { @@ -200,8 +199,6 @@ export const WorkspaceScheduleForm: FC< enableAutoStop, enableAutoStart, }) => { - const styles = useStyles(); - const form = useFormik({ initialValues, onSubmit, From 787446c591d509cba5b3c997eaf41905ad655b22 Mon Sep 17 00:00:00 2001 From: McKayla Washburn Date: Mon, 30 Oct 2023 20:04:20 +0000 Subject: [PATCH 23/27] emotion: `VersionRow` --- .../TemplateVersionsPage/VersionRow.tsx | 57 +++++++++---------- 1 file changed, 26 insertions(+), 31 deletions(-) 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" ? ( ) : (