Skip to content

Commit 4b2a964

Browse files
BrunoQuaresmaBrunoQuaresma
committed
Update layout
1 parent 19306ce commit 4b2a964

File tree

4 files changed

+174
-177
lines changed

4 files changed

+174
-177
lines changed

‎site/src/AppRouter.tsx

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -261,13 +261,16 @@ export const AppRouter: FC = () => {
261261
<Route path="/@:username">
262262
<Route path=":workspace">
263263
<Route index element={<WorkspacePage />} />
264-
<Route path="schedule" element={<WorkspaceSchedulePage />} />
265264
<Route
266265
path="builds/:buildNumber"
267266
element={<WorkspaceBuildPage />}
268267
/>
269268
<Route path="settings" element={<WorkspaceSettingsLayout />}>
270269
<Route index element={<WorkspaceSettingsPage />} />
270+
<Route
271+
path="schedule"
272+
element={<WorkspaceSchedulePage />}
273+
/>
271274
</Route>
272275
</Route>
273276
</Route>

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

Lines changed: 102 additions & 99 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,13 @@ import MenuItem from "@material-ui/core/MenuItem"
88
import makeStyles from "@material-ui/core/styles/makeStyles"
99
import Switch from "@material-ui/core/Switch"
1010
import TextField from "@material-ui/core/TextField"
11-
import { AlertBanner } from "components/AlertBanner/AlertBanner"
12-
import { Section } from "components/Section/Section"
11+
import {
12+
HorizontalForm,
13+
FormFooter,
14+
FormSection,
15+
FormFields,
16+
} from "components/Form/Form"
17+
import { Stack } from "components/Stack/Stack"
1318
import dayjs from "dayjs"
1419
import advancedFormat from "dayjs/plugin/advancedFormat"
1520
import duration from "dayjs/plugin/duration"
@@ -24,9 +29,6 @@ import {
2429
import { ChangeEvent, FC } from "react"
2530
import * as Yup from "yup"
2631
import { getFormHelpers } from "../../util/formUtils"
27-
import { FormFooter } from "../FormFooter/FormFooter"
28-
import { FullPageForm } from "../FullPageForm/FullPageForm"
29-
import { Stack } from "../Stack/Stack"
3032
import { zones } from "./zones"
3133

3234
// REMARK: some plugins depend on utc, so it's listed first. Otherwise they're
@@ -48,15 +50,15 @@ export const Language = {
4850
errorTtlMax:
4951
"Please enter a limit that is less than or equal to 168 hours (7 days).",
5052
daysOfWeekLabel: "Days of Week",
51-
daySundayLabel: "Sunday",
52-
dayMondayLabel: "Monday",
53-
dayTuesdayLabel: "Tuesday",
54-
dayWednesdayLabel: "Wednesday",
55-
dayThursdayLabel: "Thursday",
56-
dayFridayLabel: "Friday",
57-
daySaturdayLabel: "Saturday",
53+
daySundayLabel: "Sun",
54+
dayMondayLabel: "Mon",
55+
dayTuesdayLabel: "Tue",
56+
dayWednesdayLabel: "Wed",
57+
dayThursdayLabel: "Thu",
58+
dayFridayLabel: "Fri",
59+
daySaturdayLabel: "Sat",
5860
startTimeLabel: "Start time",
59-
startTimeHelperText: "Your workspace will automatically start at this time.",
61+
startTimeHelperText: "Time the workspace will automatically start.",
6062
noStartTimeHelperText: "Your workspace will not automatically start.",
6163
timezoneLabel: "Timezone",
6264
ttlLabel: "Time until shutdown (hours)",
@@ -67,13 +69,13 @@ export const Language = {
6769
"Your workspace will not automatically shut down.",
6870
formTitle: "Workspace schedule",
6971
startSection: "Start",
70-
startSwitch: "Autostart",
72+
startSwitch: "Enable Autostart",
7173
stopSection: "Stop",
72-
stopSwitch: "Autostop",
74+
stopSwitch: "Enable Autostop",
7375
}
7476

7577
export interface WorkspaceScheduleFormProps {
76-
submitScheduleError?: Error | unknown
78+
submitScheduleError?: unknown
7779
initialValues: WorkspaceScheduleFormValues
7880
isLoading: boolean
7981
onCancel: () => void
@@ -280,24 +282,24 @@ export const WorkspaceScheduleForm: FC<
280282
}
281283

282284
return (
283-
<FullPageForm title={Language.formTitle}>
284-
<form onSubmit={form.handleSubmit} className={styles.form}>
285-
<Stack>
286-
{Boolean(submitScheduleError) && (
287-
<AlertBanner severity="error" error={submitScheduleError} />
288-
)}
289-
<Section title={Language.startSection}>
290-
<FormControlLabel
291-
control={
292-
<Switch
293-
name="autostartEnabled"
294-
checked={form.values.autostartEnabled}
295-
onChange={handleToggleAutostart}
296-
color="primary"
297-
/>
298-
}
299-
label={Language.startSwitch}
300-
/>
285+
<HorizontalForm onSubmit={form.handleSubmit}>
286+
<FormSection
287+
title="Autostart"
288+
description="Select the time and days of week you want your workspace starting automatically."
289+
>
290+
<FormFields>
291+
<FormControlLabel
292+
control={
293+
<Switch
294+
name="autostartEnabled"
295+
checked={form.values.autostartEnabled}
296+
onChange={handleToggleAutostart}
297+
color="primary"
298+
/>
299+
}
300+
label={Language.startSwitch}
301+
/>
302+
<Stack direction="row">
301303
<TextField
302304
{...formHelpers(
303305
"startTime",
@@ -313,7 +315,6 @@ export const WorkspaceScheduleForm: FC<
313315
type="time"
314316
fullWidth
315317
/>
316-
317318
<TextField
318319
{...formHelpers("timezone")}
319320
disabled={isLoading || !form.values.autostartEnabled}
@@ -330,67 +331,68 @@ export const WorkspaceScheduleForm: FC<
330331
</MenuItem>
331332
))}
332333
</TextField>
334+
</Stack>
333335

334-
<FormControl
335-
component="fieldset"
336-
error={Boolean(form.errors.monday)}
337-
>
338-
<FormLabel className={styles.daysOfWeekLabel} component="legend">
339-
{Language.daysOfWeekLabel}
340-
</FormLabel>
336+
<FormControl component="fieldset" error={Boolean(form.errors.monday)}>
337+
<FormLabel className={styles.daysOfWeekLabel} component="legend">
338+
{Language.daysOfWeekLabel}
339+
</FormLabel>
341340

342-
<FormGroup>
343-
{checkboxes.map((checkbox) => (
344-
<FormControlLabel
345-
control={
346-
<Checkbox
347-
checked={checkbox.value}
348-
disabled={isLoading || !form.values.autostartEnabled}
349-
onChange={form.handleChange}
350-
name={checkbox.name}
351-
color="primary"
352-
size="small"
353-
disableRipple
354-
/>
355-
}
356-
key={checkbox.name}
357-
label={checkbox.label}
358-
/>
359-
))}
360-
</FormGroup>
361-
362-
{form.errors.monday && (
363-
<FormHelperText>{Language.errorNoDayOfWeek}</FormHelperText>
364-
)}
365-
</FormControl>
366-
</Section>
367-
368-
<Section title={Language.stopSection}>
369-
<FormControlLabel
370-
control={
371-
<Switch
372-
name="autostopEnabled"
373-
checked={form.values.autostopEnabled}
374-
onChange={handleToggleAutostop}
375-
color="primary"
341+
<FormGroup className={styles.daysOfWeekOptions}>
342+
{checkboxes.map((checkbox) => (
343+
<FormControlLabel
344+
control={
345+
<Checkbox
346+
checked={checkbox.value}
347+
disabled={isLoading || !form.values.autostartEnabled}
348+
onChange={form.handleChange}
349+
name={checkbox.name}
350+
color="primary"
351+
size="small"
352+
disableRipple
353+
/>
354+
}
355+
key={checkbox.name}
356+
label={checkbox.label}
376357
/>
377-
}
378-
label={Language.stopSwitch}
379-
/>
380-
<TextField
381-
{...formHelpers("ttl", ttlShutdownAt(form.values.ttl), "ttl_ms")}
382-
disabled={isLoading || !form.values.autostopEnabled}
383-
inputProps={{ min: 0, step: 1 }}
384-
label={Language.ttlLabel}
385-
type="number"
386-
fullWidth
387-
/>
388-
</Section>
358+
))}
359+
</FormGroup>
360+
361+
{form.errors.monday && (
362+
<FormHelperText>{Language.errorNoDayOfWeek}</FormHelperText>
363+
)}
364+
</FormControl>
365+
</FormFields>
366+
</FormSection>
389367

390-
<FormFooter onCancel={onCancel} isLoading={isLoading} />
391-
</Stack>
392-
</form>
393-
</FullPageForm>
368+
<FormSection
369+
title="Autostop"
370+
description="Set how much hours after your workspace is on it should shutdown. Helpful to control infrastructure costs."
371+
>
372+
<FormFields>
373+
<FormControlLabel
374+
control={
375+
<Switch
376+
name="autostopEnabled"
377+
checked={form.values.autostopEnabled}
378+
onChange={handleToggleAutostop}
379+
color="primary"
380+
/>
381+
}
382+
label={Language.stopSwitch}
383+
/>
384+
<TextField
385+
{...formHelpers("ttl", ttlShutdownAt(form.values.ttl), "ttl_ms")}
386+
disabled={isLoading || !form.values.autostopEnabled}
387+
inputProps={{ min: 0, step: 1 }}
388+
label={Language.ttlLabel}
389+
type="number"
390+
fullWidth
391+
/>
392+
</FormFields>
393+
</FormSection>
394+
<FormFooter onCancel={onCancel} isLoading={isLoading} />
395+
</HorizontalForm>
394396
)
395397
}
396398

@@ -405,13 +407,14 @@ export const ttlShutdownAt = (formTTL: number): string => {
405407
}
406408
}
407409

408-
const useStyles = makeStyles({
409-
form: {
410-
"& input": {
411-
colorScheme: "dark",
412-
},
413-
},
410+
const useStyles = makeStyles((theme) => ({
414411
daysOfWeekLabel: {
415412
fontSize: 12,
416413
},
417-
})
414+
daysOfWeekOptions: {
415+
display: "flex",
416+
flexDirection: "row",
417+
flexWrap: "wrap",
418+
paddingTop: theme.spacing(0.5),
419+
},
420+
}))

0 commit comments

Comments
 (0)