Skip to content

Commit 65c17a0

Browse files
BrunoQuaresmaBrunoQuaresma
authored
feat: Add selected template link at the template select field (#1918)
1 parent 75bcb73 commit 65c17a0

File tree

10 files changed

+166
-124
lines changed

10 files changed

+166
-124
lines changed

‎site/src/components/CreateUserForm/CreateUserForm.tsx

+29-26
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import * as TypesGen from "../../api/typesGenerated"
77
import { getFormHelpers, nameValidator, onChangeTrimmed } from "../../util/formUtils"
88
import { FormFooter } from "../FormFooter/FormFooter"
99
import { FullPageForm } from "../FullPageForm/FullPageForm"
10+
import { Stack } from "../Stack/Stack"
1011

1112
export const Language = {
1213
emailLabel: "Email",
@@ -57,32 +58,34 @@ export const CreateUserForm: FC<CreateUserFormProps> = ({
5758
return (
5859
<FullPageForm title="Create user" onCancel={onCancel}>
5960
<form onSubmit={form.handleSubmit}>
60-
<TextField
61-
{...getFieldHelpers("username")}
62-
onChange={onChangeTrimmed(form)}
63-
autoComplete="username"
64-
autoFocus
65-
fullWidth
66-
label={Language.usernameLabel}
67-
variant="outlined"
68-
/>
69-
<TextField
70-
{...getFieldHelpers("email")}
71-
onChange={onChangeTrimmed(form)}
72-
autoComplete="email"
73-
fullWidth
74-
label={Language.emailLabel}
75-
variant="outlined"
76-
/>
77-
<TextField
78-
{...getFieldHelpers("password")}
79-
autoComplete="current-password"
80-
fullWidth
81-
id="password"
82-
label={Language.passwordLabel}
83-
type="password"
84-
variant="outlined"
85-
/>
61+
<Stack spacing={1}>
62+
<TextField
63+
{...getFieldHelpers("username")}
64+
onChange={onChangeTrimmed(form)}
65+
autoComplete="username"
66+
autoFocus
67+
fullWidth
68+
label={Language.usernameLabel}
69+
variant="outlined"
70+
/>
71+
<TextField
72+
{...getFieldHelpers("email")}
73+
onChange={onChangeTrimmed(form)}
74+
autoComplete="email"
75+
fullWidth
76+
label={Language.emailLabel}
77+
variant="outlined"
78+
/>
79+
<TextField
80+
{...getFieldHelpers("password")}
81+
autoComplete="current-password"
82+
fullWidth
83+
id="password"
84+
label={Language.passwordLabel}
85+
type="password"
86+
variant="outlined"
87+
/>
88+
</Stack>
8689
{error && <FormHelperText error>{error}</FormHelperText>}
8790
<FormFooter onCancel={onCancel} isLoading={isLoading} />
8891
</form>

‎site/src/components/FormFooter/FormFooter.tsx

+4-3
Original file line numberDiff line numberDiff line change
@@ -14,16 +14,17 @@ export interface FormFooterProps {
1414
submitLabel?: string
1515
}
1616

17-
const useStyles = makeStyles(() => ({
17+
const useStyles = makeStyles((theme) => ({
1818
footer: {
1919
display: "flex",
2020
flex: "0",
2121
flexDirection: "row",
22-
justifyContent: "center",
22+
gap: theme.spacing(1.5),
2323
alignItems: "center",
24+
marginTop: theme.spacing(3),
2425
},
2526
button: {
26-
margin: "1em",
27+
width: "100%",
2728
},
2829
}))
2930

‎site/src/components/FormTitle/FormTitle.tsx

+2-3
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,8 @@ export interface FormTitleProps {
99

1010
const useStyles = makeStyles((theme) => ({
1111
title: {
12-
textAlign: "center",
13-
marginTop: theme.spacing(5),
14-
marginBottom: theme.spacing(5),
12+
marginTop: theme.spacing(6),
13+
marginBottom: theme.spacing(4),
1514

1615
"& h3": {
1716
marginBottom: theme.spacing(1),

‎site/src/components/FullPageForm/FullPageForm.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ export const FullPageForm: FC<FullPageFormProps> = ({ title, detail, onCancel, c
2323
const styles = useStyles()
2424
return (
2525
<main className={styles.root}>
26-
<Margins>
26+
<Margins size="small">
2727
<FormTitle title={title} detail={detail} />
2828
<FormCloseButton onClose={onCancel} />
2929

‎site/src/components/Margins/Margins.tsx

+17-5
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,30 @@
11
import { makeStyles } from "@material-ui/core/styles"
22
import { FC } from "react"
3-
import { maxWidth, sidePadding } from "../../theme/constants"
3+
import { containerWidth, sidePadding } from "../../theme/constants"
4+
5+
type Size = "regular" | "medium" | "small"
6+
7+
const widthBySize: Record<Size, number> = {
8+
regular: containerWidth,
9+
medium: containerWidth / 2,
10+
small: containerWidth / 3,
11+
}
412

513
const useStyles = makeStyles(() => ({
614
margins: {
715
margin: "0 auto",
8-
maxWidth,
9-
padding: `0 ${sidePadding}`,
16+
maxWidth: ({ maxWidth }: { maxWidth: number }) => maxWidth,
17+
padding: `0 ${sidePadding}px`,
1018
flex: 1,
1119
width: "100%",
1220
},
1321
}))
1422

15-
export const Margins: FC = ({ children }) => {
16-
const styles = useStyles()
23+
interface MarginsProps {
24+
size?: Size
25+
}
26+
27+
export const Margins: FC<MarginsProps> = ({ children, size = "regular" }) => {
28+
const styles = useStyles({ maxWidth: widthBySize[size] })
1729
return <div className={styles.margins}>{children}</div>
1830
}

‎site/src/components/ParameterInput/ParameterInput.tsx

+8-11
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
11
import FormControlLabel from "@material-ui/core/FormControlLabel"
2-
import Paper from "@material-ui/core/Paper"
32
import Radio from "@material-ui/core/Radio"
43
import RadioGroup from "@material-ui/core/RadioGroup"
5-
import { lighten, makeStyles } from "@material-ui/core/styles"
4+
import { makeStyles } from "@material-ui/core/styles"
65
import TextField from "@material-ui/core/TextField"
76
import { FC } from "react"
87
import { ParameterSchema } from "../../api/typesGenerated"
@@ -17,15 +16,15 @@ export interface ParameterInputProps {
1716
export const ParameterInput: FC<ParameterInputProps> = ({ disabled, onChange, schema }) => {
1817
const styles = useStyles()
1918
return (
20-
<Paper className={styles.paper}>
19+
<div className={styles.root}>
2120
<div className={styles.title}>
2221
<h2>var.{schema.name}</h2>
2322
{schema.description && <span>{schema.description}</span>}
2423
</div>
2524
<div className={styles.input}>
2625
<ParameterField disabled={disabled} onChange={onChange} schema={schema} />
2726
</div>
28-
</Paper>
27+
</div>
2928
)
3029
}
3130

@@ -67,28 +66,26 @@ const ParameterField: React.FC<ParameterInputProps> = ({ disabled, onChange, sch
6766
}
6867

6968
const useStyles = makeStyles((theme) => ({
70-
paper: {
69+
root: {
7170
display: "flex",
7271
flexDirection: "column",
7372
fontFamily: MONOSPACE_FONT_FAMILY,
73+
paddingTop: theme.spacing(2),
74+
paddingBottom: theme.spacing(2),
7475
},
7576
title: {
76-
background: lighten(theme.palette.background.default, 0.1),
77-
borderBottom: `1px solid ${theme.palette.divider}`,
78-
padding: theme.spacing(3),
7977
display: "flex",
8078
flexDirection: "column",
8179
"& h2": {
8280
margin: 0,
8381
},
8482
"& span": {
85-
paddingTop: theme.spacing(2),
83+
paddingTop: theme.spacing(1),
8684
},
8785
},
8886
input: {
89-
padding: theme.spacing(3),
87+
marginTop: theme.spacing(2),
9088
display: "flex",
9189
flexDirection: "column",
92-
maxWidth: 480,
9390
},
9491
}))

‎site/src/components/WorkspaceScheduleForm/WorkspaceScheduleForm.tsx

+5-16
Original file line numberDiff line numberDiff line change
@@ -167,8 +167,8 @@ export const WorkspaceScheduleForm: FC<WorkspaceScheduleFormProps> = ({
167167

168168
return (
169169
<FullPageForm onCancel={onCancel} title="Workspace Schedule">
170-
<form className={styles.form} onSubmit={form.handleSubmit}>
171-
<Stack className={styles.stack}>
170+
<form onSubmit={form.handleSubmit} className={styles.form}>
171+
<Stack>
172172
<TextField
173173
{...formHelpers("startTime", Language.startTimeHelperText)}
174174
disabled={form.isSubmitting || isLoading}
@@ -177,7 +177,6 @@ export const WorkspaceScheduleForm: FC<WorkspaceScheduleFormProps> = ({
177177
}}
178178
label={Language.startTimeLabel}
179179
type="time"
180-
variant="standard"
181180
/>
182181

183182
<TextField
@@ -195,7 +194,6 @@ export const WorkspaceScheduleForm: FC<WorkspaceScheduleFormProps> = ({
195194
shrink: true,
196195
}}
197196
label={Language.timezoneLabel}
198-
variant="standard"
199197
/>
200198

201199
<FormControl component="fieldset" error={Boolean(form.errors.monday)}>
@@ -212,6 +210,9 @@ export const WorkspaceScheduleForm: FC<WorkspaceScheduleFormProps> = ({
212210
disabled={!form.values.startTime || form.isSubmitting || isLoading}
213211
onChange={form.handleChange}
214212
name={checkbox.name}
213+
color="primary"
214+
size="small"
215+
disableRipple
215216
/>
216217
}
217218
key={checkbox.name}
@@ -229,7 +230,6 @@ export const WorkspaceScheduleForm: FC<WorkspaceScheduleFormProps> = ({
229230
inputProps={{ min: 0, step: 1 }}
230231
label={Language.ttlLabel}
231232
type="number"
232-
variant="standard"
233233
/>
234234

235235
<FormFooter onCancel={onCancel} isLoading={form.isSubmitting || isLoading} />
@@ -241,21 +241,10 @@ export const WorkspaceScheduleForm: FC<WorkspaceScheduleFormProps> = ({
241241

242242
const useStyles = makeStyles({
243243
form: {
244-
display: "flex",
245-
justifyContent: "center",
246-
247244
"& input": {
248245
colorScheme: "dark",
249246
},
250247
},
251-
stack: {
252-
// REMARK: 360 is 'arbitrary' in that it gives the helper text enough room
253-
// to render on one line. If we change the text, we might want to
254-
// adjust these. Without constraining the width, the date picker
255-
// and number inputs aren't visually appealing or maximally usable.
256-
maxWidth: 360,
257-
minWidth: 360,
258-
},
259248
daysOfWeekLabel: {
260249
fontSize: 12,
261250
},

0 commit comments

Comments
 (0)