Skip to content

chore: use emotion for styling (pt. 4) #10149

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 25 commits into from
Oct 10, 2023
Merged

chore: use emotion for styling (pt. 4) #10149

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
25 commits
Select commit Hold shift + click to select a range
95e9688
emotion: `TemplateScheduleForm`
aslilac Oct 9, 2023
b0cdf3f
emotion: `Form` & `FormFooter`
aslilac Oct 9, 2023
a7343f0
emotion: `LastUsed`
aslilac Oct 9, 2023
4407eda
emotion: `OptionsTable`
aslilac Oct 9, 2023
c824abc
emotion: `Dialog`
aslilac Oct 9, 2023
ae5c50d
emotion: `Expander`
aslilac Oct 9, 2023
8f28843
emotion: `Margins`
aslilac Oct 9, 2023
f2d257c
emotion: `WorkspaceOutdatedTooltip`
aslilac Oct 9, 2023
65cf2a5
emotion: `ExternalAuth`
aslilac Oct 9, 2023
3bab8b2
emotion: `CreateTokenForm`
aslilac Oct 9, 2023
4e48356
emotion: `AgentVersion`
aslilac Oct 9, 2023
d597c7b
emotion: `Typography`
aslilac Oct 9, 2023
e48ec94
emotion: `UserOrGroupAutocomplete`
aslilac Oct 9, 2023
4d96e15
emotion: `SetupPageView`
aslilac Oct 9, 2023
2d7fd61
emotion: `TemplateSchedulePageView`
aslilac Oct 9, 2023
2373c01
emotion: `TemplateSettingsPageView`
aslilac Oct 9, 2023
be3657f
emotion: `TemplateSchedulePageView`
aslilac Oct 9, 2023
da73bc8
🧹
aslilac Oct 9, 2023
9ce12e8
emotion: `ChangeVersionDialog`
aslilac Oct 9, 2023
d621d05
emotion: `TemplatePermissionsPageView`
aslilac Oct 9, 2023
6b3d6e0
🧹
aslilac Oct 9, 2023
81ed84a
emotion: `FullScreenLoader`
aslilac Oct 9, 2023
a672222
🧹
aslilac Oct 10, 2023
11b9307
Merge branch 'main' into emotional-damage-4
aslilac Oct 10, 2023
050a336
Merge branch 'main' into emotional-damage-4
aslilac Oct 10, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
37 changes: 17 additions & 20 deletions site/src/components/DeploySettingsLayout/OptionsTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,34 +1,44 @@
import { makeStyles } from "@mui/styles";
import Table from "@mui/material/Table";
import TableBody from "@mui/material/TableBody";
import TableCell from "@mui/material/TableCell";
import TableContainer from "@mui/material/TableContainer";
import TableHead from "@mui/material/TableHead";
import TableRow from "@mui/material/TableRow";
import { type FC } from "react";
import Box from "@mui/material/Box";
import { css } from "@emotion/react";
import type { ClibaseOption } from "api/typesGenerated";
import {
OptionConfig,
OptionConfigFlag,
OptionDescription,
OptionName,
OptionValue,
} from "components/DeploySettingsLayout/Option";
import { FC } from "react";
import { optionValue } from "./optionValue";
import Box from "@mui/material/Box";
import { ClibaseOption } from "api/typesGenerated";

const OptionsTable: FC<{
options: ClibaseOption[];
}> = ({ options }) => {
const styles = useStyles();

if (options.length === 0) {
return <p>No options to configure</p>;
}

return (
<TableContainer>
<Table className={styles.table}>
<Table
css={(theme) => css`
& td {
padding-top: ${theme.spacing(3)};
padding-bottom: ${theme.spacing(3)};
}
& td:last-child,
& th:last-child {
padding-left: ${theme.spacing(4)};
}
`}
>
<TableHead>
<TableRow>
<TableCell width="50%">Option</TableCell>
Expand Down Expand Up @@ -96,17 +106,4 @@ const OptionsTable: FC<{
);
};

const useStyles = makeStyles((theme) => ({
table: {
"& td": {
paddingTop: theme.spacing(3),
paddingBottom: theme.spacing(3),
},

"& td:last-child, & th:last-child": {
paddingLeft: theme.spacing(4),
},
},
}));

export default OptionsTable;
207 changes: 17 additions & 190 deletions site/src/components/Dialogs/ConfirmDialog/ConfirmDialog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,12 @@
import DialogActions from "@mui/material/DialogActions";
import { makeStyles } from "@mui/styles";
import { ReactNode, FC, PropsWithChildren } from "react";
import { type Interpolation, type Theme } from "@emotion/react";
import { type FC, type PropsWithChildren, type ReactNode } from "react";
import {
Dialog,
DialogActionButtons,
DialogActionButtonsProps,
} from "../Dialog";
import { ConfirmDialogType } from "../types";
import Checkbox from "@mui/material/Checkbox";
import FormControlLabel from "@mui/material/FormControlLabel";
import { Stack } from "@mui/system";
import type { ConfirmDialogType } from "../types";

interface ConfirmDialogTypeConfig {
confirmText: ReactNode;
Expand Down Expand Up @@ -58,8 +55,8 @@ export interface ConfirmDialogProps
readonly title: string;
}

const useStyles = makeStyles((theme) => ({
dialogWrapper: {
const styles = {
dialogWrapper: (theme) => ({
"& .MuiPaper-root": {
background: theme.palette.background.paper,
border: `1px solid ${theme.palette.divider}`,
Expand All @@ -69,19 +66,19 @@ const useStyles = makeStyles((theme) => ({
"& .MuiDialogActions-spacing": {
padding: `0 ${theme.spacing(5)} ${theme.spacing(5)}`,
},
},
dialogContent: {
}),
dialogContent: (theme) => ({
color: theme.palette.text.secondary,
padding: theme.spacing(5),
},
dialogTitle: {
}),
dialogTitle: (theme) => ({
margin: 0,
marginBottom: theme.spacing(2),
color: theme.palette.text.primary,
fontWeight: 400,
fontSize: theme.spacing(2.5),
},
dialogDescription: {
}),
dialogDescription: (theme) => ({
color: theme.palette.text.secondary,
lineHeight: "160%",
fontSize: 16,
Expand All @@ -97,8 +94,8 @@ const useStyles = makeStyles((theme) => ({
"& > p": {
margin: theme.spacing(1, 0),
},
},
}));
}),
} satisfies Record<string, Interpolation<Theme>>;

/**
* Quick-use version of the Dialog component with slightly alternative styles,
Expand All @@ -117,8 +114,6 @@ export const ConfirmDialog: FC<PropsWithChildren<ConfirmDialogProps>> = ({
title,
type = "info",
}) => {
const styles = useStyles({ type });

const defaults = CONFIRM_DIALOG_DEFAULTS[type];

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

return (
<Dialog
className={styles.dialogWrapper}
css={styles.dialogWrapper}
onClose={onClose}
open={open}
data-testid="dialog"
>
<div className={styles.dialogContent}>
<h3 className={styles.dialogTitle}>{title}</h3>
{description && (
<div className={styles.dialogDescription}>{description}</div>
)}
<div css={styles.dialogContent}>
<h3 css={styles.dialogTitle}>{title}</h3>
{description && <div css={styles.dialogDescription}>{description}</div>}
</div>

<DialogActions>
Expand All @@ -154,169 +147,3 @@ export const ConfirmDialog: FC<PropsWithChildren<ConfirmDialogProps>> = ({
</Dialog>
);
};

export interface ScheduleDialogProps extends ConfirmDialogProps {
readonly inactiveWorkspacesToGoDormant: number;
readonly inactiveWorkspacesToGoDormantInWeek: number;
readonly dormantWorkspacesToBeDeleted: number;
readonly dormantWorkspacesToBeDeletedInWeek: number;
readonly updateDormantWorkspaces: (confirm: boolean) => void;
readonly updateInactiveWorkspaces: (confirm: boolean) => void;
readonly dormantValueChanged: boolean;
readonly deletionValueChanged: boolean;
}

export const ScheduleDialog: FC<PropsWithChildren<ScheduleDialogProps>> = ({
cancelText,
confirmLoading,
disabled = false,
hideCancel,
onClose,
onConfirm,
type,
open = false,
title,
inactiveWorkspacesToGoDormant,
inactiveWorkspacesToGoDormantInWeek,
dormantWorkspacesToBeDeleted,
dormantWorkspacesToBeDeletedInWeek,
updateDormantWorkspaces,
updateInactiveWorkspaces,
dormantValueChanged,
deletionValueChanged,
}) => {
const styles = useScheduleStyles({ type });

const defaults = CONFIRM_DIALOG_DEFAULTS["delete"];

if (typeof hideCancel === "undefined") {
hideCancel = defaults.hideCancel;
}

const showDormancyWarning =
dormantValueChanged &&
(inactiveWorkspacesToGoDormant > 0 ||
inactiveWorkspacesToGoDormantInWeek > 0);
const showDeletionWarning =
deletionValueChanged &&
(dormantWorkspacesToBeDeleted > 0 ||
dormantWorkspacesToBeDeletedInWeek > 0);

return (
<Dialog
className={styles.dialogWrapper}
onClose={onClose}
open={open}
data-testid="dialog"
>
<div className={styles.dialogContent}>
<h3 className={styles.dialogTitle}>{title}</h3>
<>
{showDormancyWarning && (
<>
<h4>{"Dormancy Threshold"}</h4>
<Stack direction="row" spacing={5}>
<div className={styles.dialogDescription}>{`
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>
<FormControlLabel
sx={{
marginTop: 2,
}}
control={
<Checkbox
size="small"
onChange={(e) => {
updateInactiveWorkspaces(e.target.checked);
}}
/>
}
label="Reset"
/>
</Stack>
</>
)}

{showDeletionWarning && (
<>
<h4>{"Dormancy Auto-Deletion"}</h4>
<Stack direction="row" spacing={5}>
<div
className={styles.dialogDescription}
>{`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>
<FormControlLabel
sx={{
marginTop: 2,
}}
control={
<Checkbox
size="small"
onChange={(e) => {
updateDormantWorkspaces(e.target.checked);
}}
/>
}
label="Reset"
/>
</Stack>
</>
)}
</>
</div>

<DialogActions>
<DialogActionButtons
cancelText={cancelText}
confirmDialog
confirmLoading={confirmLoading}
confirmText="Submit"
disabled={disabled}
onCancel={!hideCancel ? onClose : undefined}
onConfirm={onConfirm || onClose}
type="delete"
/>
</DialogActions>
</Dialog>
);
};

const useScheduleStyles = makeStyles((theme) => ({
dialogWrapper: {
"& .MuiPaper-root": {
background: theme.palette.background.paper,
border: `1px solid ${theme.palette.divider}`,
width: "100%",
maxWidth: theme.spacing(125),
},
"& .MuiDialogActions-spacing": {
padding: `0 ${theme.spacing(5)} ${theme.spacing(5)}`,
},
},
dialogContent: {
color: theme.palette.text.secondary,
padding: theme.spacing(5),
},
dialogTitle: {
margin: 0,
marginBottom: theme.spacing(2),
color: theme.palette.text.primary,
fontWeight: 400,
fontSize: theme.spacing(2.5),
},
dialogDescription: {
color: theme.palette.text.secondary,
lineHeight: "160%",
fontSize: 16,

"& strong": {
color: theme.palette.text.primary,
},

"& p:not(.MuiFormHelperText-root)": {
margin: 0,
},

"& > p": {
margin: theme.spacing(1, 0),
},
},
}));
Loading