Skip to content

Commit 7ea58ea

Browse files
aslilacaslilac
authored
chore: use emotion for styling (pt. 4) (#10149)
1 parent 00589d6 commit 7ea58ea

File tree

22 files changed

+516
-635
lines changed

22 files changed

+516
-635
lines changed

‎site/src/components/DeploySettingsLayout/OptionsTable.tsx

+17-20
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,44 @@
1-
import { makeStyles } from "@mui/styles";
21
import Table from "@mui/material/Table";
32
import TableBody from "@mui/material/TableBody";
43
import TableCell from "@mui/material/TableCell";
54
import TableContainer from "@mui/material/TableContainer";
65
import TableHead from "@mui/material/TableHead";
76
import TableRow from "@mui/material/TableRow";
7+
import { type FC } from "react";
8+
import Box from "@mui/material/Box";
9+
import { css } from "@emotion/react";
10+
import type { ClibaseOption } from "api/typesGenerated";
811
import {
912
OptionConfig,
1013
OptionConfigFlag,
1114
OptionDescription,
1215
OptionName,
1316
OptionValue,
1417
} from "components/DeploySettingsLayout/Option";
15-
import { FC } from "react";
1618
import { optionValue } from "./optionValue";
17-
import Box from "@mui/material/Box";
18-
import { ClibaseOption } from "api/typesGenerated";
1919

2020
const OptionsTable: FC<{
2121
options: ClibaseOption[];
2222
}> = ({ options }) => {
23-
const styles = useStyles();
24-
2523
if (options.length === 0) {
2624
return <p>No options to configure</p>;
2725
}
2826

2927
return (
3028
<TableContainer>
31-
<Table className={styles.table}>
29+
<Table
30+
css={(theme) => css`
31+
& td {
32+
padding-top: ${theme.spacing(3)};
33+
padding-bottom: ${theme.spacing(3)};
34+
}
35+
36+
& td:last-child,
37+
& th:last-child {
38+
padding-left: ${theme.spacing(4)};
39+
}
40+
`}
41+
>
3242
<TableHead>
3343
<TableRow>
3444
<TableCell width="50%">Option</TableCell>
@@ -96,17 +106,4 @@ const OptionsTable: FC<{
96106
);
97107
};
98108

99-
const useStyles = makeStyles((theme) => ({
100-
table: {
101-
"& td": {
102-
paddingTop: theme.spacing(3),
103-
paddingBottom: theme.spacing(3),
104-
},
105-
106-
"& td:last-child, & th:last-child": {
107-
paddingLeft: theme.spacing(4),
108-
},
109-
},
110-
}));
111-
112109
export default OptionsTable;

‎site/src/components/Dialogs/ConfirmDialog/ConfirmDialog.tsx

+17-190
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,12 @@
11
import DialogActions from "@mui/material/DialogActions";
2-
import { makeStyles } from "@mui/styles";
3-
import { ReactNode, FC, PropsWithChildren } from "react";
2+
import { type Interpolation, type Theme } from "@emotion/react";
3+
import { type FC, type PropsWithChildren, type ReactNode } from "react";
44
import {
55
Dialog,
66
DialogActionButtons,
77
DialogActionButtonsProps,
88
} from "../Dialog";
9-
import { ConfirmDialogType } from "../types";
10-
import Checkbox from "@mui/material/Checkbox";
11-
import FormControlLabel from "@mui/material/FormControlLabel";
12-
import { Stack } from "@mui/system";
9+
import type { ConfirmDialogType } from "../types";
1310

1411
interface ConfirmDialogTypeConfig {
1512
confirmText: ReactNode;
@@ -58,8 +55,8 @@ export interface ConfirmDialogProps
5855
readonly title: string;
5956
}
6057

61-
const useStyles = makeStyles((theme) => ({
62-
dialogWrapper: {
58+
const styles = {
59+
dialogWrapper: (theme) => ({
6360
"& .MuiPaper-root": {
6461
background: theme.palette.background.paper,
6562
border: `1px solid ${theme.palette.divider}`,
@@ -69,19 +66,19 @@ const useStyles = makeStyles((theme) => ({
6966
"& .MuiDialogActions-spacing": {
7067
padding: `0 ${theme.spacing(5)} ${theme.spacing(5)}`,
7168
},
72-
},
73-
dialogContent: {
69+
}),
70+
dialogContent: (theme) => ({
7471
color: theme.palette.text.secondary,
7572
padding: theme.spacing(5),
76-
},
77-
dialogTitle: {
73+
}),
74+
dialogTitle: (theme) => ({
7875
margin: 0,
7976
marginBottom: theme.spacing(2),
8077
color: theme.palette.text.primary,
8178
fontWeight: 400,
8279
fontSize: theme.spacing(2.5),
83-
},
84-
dialogDescription: {
80+
}),
81+
dialogDescription: (theme) => ({
8582
color: theme.palette.text.secondary,
8683
lineHeight: "160%",
8784
fontSize: 16,
@@ -97,8 +94,8 @@ const useStyles = makeStyles((theme) => ({
9794
"& > p": {
9895
margin: theme.spacing(1, 0),
9996
},
100-
},
101-
}));
97+
}),
98+
} satisfies Record<string, Interpolation<Theme>>;
10299

103100
/**
104101
* Quick-use version of the Dialog component with slightly alternative styles,
@@ -117,8 +114,6 @@ export const ConfirmDialog: FC<PropsWithChildren<ConfirmDialogProps>> = ({
117114
title,
118115
type = "info",
119116
}) => {
120-
const styles = useStyles({ type });
121-
122117
const defaults = CONFIRM_DIALOG_DEFAULTS[type];
123118

124119
if (typeof hideCancel === "undefined") {
@@ -127,16 +122,14 @@ export const ConfirmDialog: FC<PropsWithChildren<ConfirmDialogProps>> = ({
127122

128123
return (
129124
<Dialog
130-
className={styles.dialogWrapper}
125+
css={styles.dialogWrapper}
131126
onClose={onClose}
132127
open={open}
133128
data-testid="dialog"
134129
>
135-
<div className={styles.dialogContent}>
136-
<h3 className={styles.dialogTitle}>{title}</h3>
137-
{description && (
138-
<div className={styles.dialogDescription}>{description}</div>
139-
)}
130+
<div css={styles.dialogContent}>
131+
<h3 css={styles.dialogTitle}>{title}</h3>
132+
{description && <div css={styles.dialogDescription}>{description}</div>}
140133
</div>
141134

142135
<DialogActions>
@@ -154,169 +147,3 @@ export const ConfirmDialog: FC<PropsWithChildren<ConfirmDialogProps>> = ({
154147
</Dialog>
155148
);
156149
};
157-
158-
export interface ScheduleDialogProps extends ConfirmDialogProps {
159-
readonly inactiveWorkspacesToGoDormant: number;
160-
readonly inactiveWorkspacesToGoDormantInWeek: number;
161-
readonly dormantWorkspacesToBeDeleted: number;
162-
readonly dormantWorkspacesToBeDeletedInWeek: number;
163-
readonly updateDormantWorkspaces: (confirm: boolean) => void;
164-
readonly updateInactiveWorkspaces: (confirm: boolean) => void;
165-
readonly dormantValueChanged: boolean;
166-
readonly deletionValueChanged: boolean;
167-
}
168-
169-
export const ScheduleDialog: FC<PropsWithChildren<ScheduleDialogProps>> = ({
170-
cancelText,
171-
confirmLoading,
172-
disabled = false,
173-
hideCancel,
174-
onClose,
175-
onConfirm,
176-
type,
177-
open = false,
178-
title,
179-
inactiveWorkspacesToGoDormant,
180-
inactiveWorkspacesToGoDormantInWeek,
181-
dormantWorkspacesToBeDeleted,
182-
dormantWorkspacesToBeDeletedInWeek,
183-
updateDormantWorkspaces,
184-
updateInactiveWorkspaces,
185-
dormantValueChanged,
186-
deletionValueChanged,
187-
}) => {
188-
const styles = useScheduleStyles({ type });
189-
190-
const defaults = CONFIRM_DIALOG_DEFAULTS["delete"];
191-
192-
if (typeof hideCancel === "undefined") {
193-
hideCancel = defaults.hideCancel;
194-
}
195-
196-
const showDormancyWarning =
197-
dormantValueChanged &&
198-
(inactiveWorkspacesToGoDormant > 0 ||
199-
inactiveWorkspacesToGoDormantInWeek > 0);
200-
const showDeletionWarning =
201-
deletionValueChanged &&
202-
(dormantWorkspacesToBeDeleted > 0 ||
203-
dormantWorkspacesToBeDeletedInWeek > 0);
204-
205-
return (
206-
<Dialog
207-
className={styles.dialogWrapper}
208-
onClose={onClose}
209-
open={open}
210-
data-testid="dialog"
211-
>
212-
<div className={styles.dialogContent}>
213-
<h3 className={styles.dialogTitle}>{title}</h3>
214-
<>
215-
{showDormancyWarning && (
216-
<>
217-
<h4>{"Dormancy Threshold"}</h4>
218-
<Stack direction="row" spacing={5}>
219-
<div className={styles.dialogDescription}>{`
220-
This change will result in ${inactiveWorkspacesToGoDormant} workspaces being immediately transitioned to the dormant state and ${inactiveWorkspacesToGoDormantInWeek} over the next seven days. To prevent this, do you want to reset the inactivity period for all template workspaces?`}</div>
221-
<FormControlLabel
222-
sx={{
223-
marginTop: 2,
224-
}}
225-
control={
226-
<Checkbox
227-
size="small"
228-
onChange={(e) => {
229-
updateInactiveWorkspaces(e.target.checked);
230-
}}
231-
/>
232-
}
233-
label="Reset"
234-
/>
235-
</Stack>
236-
</>
237-
)}
238-
239-
{showDeletionWarning && (
240-
<>
241-
<h4>{"Dormancy Auto-Deletion"}</h4>
242-
<Stack direction="row" spacing={5}>
243-
<div
244-
className={styles.dialogDescription}
245-
>{`This change will result in ${dormantWorkspacesToBeDeleted} workspaces being immediately deleted and ${dormantWorkspacesToBeDeletedInWeek} over the next 7 days. To prevent this, do you want to reset the dormancy period for all template workspaces?`}</div>
246-
<FormControlLabel
247-
sx={{
248-
marginTop: 2,
249-
}}
250-
control={
251-
<Checkbox
252-
size="small"
253-
onChange={(e) => {
254-
updateDormantWorkspaces(e.target.checked);
255-
}}
256-
/>
257-
}
258-
label="Reset"
259-
/>
260-
</Stack>
261-
</>
262-
)}
263-
</>
264-
</div>
265-
266-
<DialogActions>
267-
<DialogActionButtons
268-
cancelText={cancelText}
269-
confirmDialog
270-
confirmLoading={confirmLoading}
271-
confirmText="Submit"
272-
disabled={disabled}
273-
onCancel={!hideCancel ? onClose : undefined}
274-
onConfirm={onConfirm || onClose}
275-
type="delete"
276-
/>
277-
</DialogActions>
278-
</Dialog>
279-
);
280-
};
281-
282-
const useScheduleStyles = makeStyles((theme) => ({
283-
dialogWrapper: {
284-
"& .MuiPaper-root": {
285-
background: theme.palette.background.paper,
286-
border: `1px solid ${theme.palette.divider}`,
287-
width: "100%",
288-
maxWidth: theme.spacing(125),
289-
},
290-
"& .MuiDialogActions-spacing": {
291-
padding: `0 ${theme.spacing(5)} ${theme.spacing(5)}`,
292-
},
293-
},
294-
dialogContent: {
295-
color: theme.palette.text.secondary,
296-
padding: theme.spacing(5),
297-
},
298-
dialogTitle: {
299-
margin: 0,
300-
marginBottom: theme.spacing(2),
301-
color: theme.palette.text.primary,
302-
fontWeight: 400,
303-
fontSize: theme.spacing(2.5),
304-
},
305-
dialogDescription: {
306-
color: theme.palette.text.secondary,
307-
lineHeight: "160%",
308-
fontSize: 16,
309-
310-
"& strong": {
311-
color: theme.palette.text.primary,
312-
},
313-
314-
"& p:not(.MuiFormHelperText-root)": {
315-
margin: 0,
316-
},
317-
318-
"& > p": {
319-
margin: theme.spacing(1, 0),
320-
},
321-
},
322-
}));

0 commit comments

Comments
 (0)