Skip to content

Commit 053c56c

Browse files
BrunoQuaresmaBrunoQuaresma
authored
fix(site): fix template schedule options (coder#13084)
1 parent ed07921 commit 053c56c

File tree

3 files changed

+119
-63
lines changed

3 files changed

+119
-63
lines changed

‎site/src/components/StackLabel/StackLabel.tsx

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import FormHelperText, {
2+
type FormHelperTextProps,
3+
} from "@mui/material/FormHelperText";
4+
import type { ComponentProps, FC } from "react";
5+
import { Stack } from "components/Stack/Stack";
6+
7+
/**
8+
* Use these components as the label in FormControlLabel when implementing radio
9+
* buttons, checkboxes, or switches to ensure proper styling.
10+
*/
11+
12+
export const StackLabel: FC<ComponentProps<typeof Stack>> = (props) => {
13+
return (
14+
<Stack
15+
spacing={0.5}
16+
css={{ paddingLeft: 12, fontWeight: 500 }}
17+
{...props}
18+
/>
19+
);
20+
};
21+
22+
export const StackLabelHelperText: FC<FormHelperTextProps> = (props) => {
23+
return (
24+
<FormHelperText
25+
css={{
26+
marginTop: 0,
27+
}}
28+
{...props}
29+
/>
30+
);
31+
};

‎site/src/pages/TemplateSettingsPage/TemplateSchedulePage/TemplateScheduleAutostart.tsx

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -21,12 +21,7 @@ export const TemplateScheduleAutostart: FC<TemplateScheduleAutostartProps> = ({
2121
onChange,
2222
}) => {
2323
return (
24-
<Stack
25-
direction="column"
26-
width="100%"
27-
alignItems="center"
28-
css={{ marginBottom: "20px" }}
29-
>
24+
<Stack width="100%" alignItems="start" spacing={1}>
3025
<Stack
3126
direction="row"
3227
spacing={0}
@@ -49,6 +44,7 @@ export const TemplateScheduleAutostart: FC<TemplateScheduleAutostartProps> = ({
4944
}[]
5045
).map((day) => (
5146
<Button
47+
fullWidth
5248
key={day.key}
5349
css={{ borderRadius: 0 }}
5450
// TODO: Adding a background color would also help

‎site/src/pages/TemplateSettingsPage/TemplateSchedulePage/TemplateScheduleForm.tsx

Lines changed: 86 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import { useTheme } from "@emotion/react";
21
import Checkbox from "@mui/material/Checkbox";
32
import FormControlLabel from "@mui/material/FormControlLabel";
43
import MenuItem from "@mui/material/MenuItem";
@@ -14,6 +13,10 @@ import {
1413
FormFields,
1514
} from "components/Form/Form";
1615
import { Stack } from "components/Stack/Stack";
16+
import {
17+
StackLabel,
18+
StackLabelHelperText,
19+
} from "components/StackLabel/StackLabel";
1720
import { getFormHelpers } from "utils/formUtils";
1821
import {
1922
calculateAutostopRequirementDaysValue,
@@ -51,7 +54,8 @@ const DORMANT_AUTODELETION_DEFAULT = 30;
5154
* The default form field space is 4 but since this form is quite heavy I think
5255
* increase the space can make it feels lighter.
5356
*/
54-
const FORM_FIELDS_SPACING = 6;
57+
const FORM_FIELDS_SPACING = 8;
58+
const DORMANT_FIELDSET_SPACING = 4;
5559

5660
export interface TemplateScheduleForm {
5761
template: Template;
@@ -151,7 +155,6 @@ export const TemplateScheduleForm: FC<TemplateScheduleForm> = ({
151155
form,
152156
error,
153157
);
154-
const theme = useTheme();
155158

156159
const now = new Date();
157160
const weekFromNow = new Date(now);
@@ -404,62 +407,61 @@ export const TemplateScheduleForm: FC<TemplateScheduleForm> = ({
404407
/>
405408
</Stack>
406409

407-
<Stack direction="row" alignItems="center">
408-
<Checkbox
409-
id="allow-user-autostop"
410-
size="small"
411-
disabled={isSubmitting || !allowAdvancedScheduling}
412-
onChange={async () => {
413-
await form.setFieldValue(
414-
"allow_user_autostop",
415-
!form.values.allow_user_autostop,
416-
);
417-
}}
418-
name="allow_user_autostop"
419-
checked={form.values.allow_user_autostop}
420-
/>
421-
<Stack spacing={0.5}>
422-
<strong>Enforce these settings across all workspaces</strong>
423-
<span
424-
css={{
425-
fontSize: 12,
426-
color: theme.palette.text.secondary,
410+
<FormControlLabel
411+
control={
412+
<Checkbox
413+
id="allow-user-autostop"
414+
size="small"
415+
disabled={isSubmitting || !allowAdvancedScheduling}
416+
onChange={async (_, checked) => {
417+
await form.setFieldValue("allow_user_autostop", checked);
427418
}}
428-
>
429-
Workspaces by default allow users to set custom autostop timers.
430-
Use this to apply the template settings to all workspaces under
431-
this template.
432-
</span>
433-
</Stack>
434-
</Stack>
419+
name="allow_user_autostop"
420+
checked={form.values.allow_user_autostop}
421+
/>
422+
}
423+
label={
424+
<StackLabel>
425+
Allow users to customize autostop duration for workspaces.
426+
<StackLabelHelperText>
427+
By default, workspaces will inherit the Autostop timer from
428+
this template. Enabling this option allows users to set custom
429+
Autostop timers on their workspaces or turn off the timer.
430+
</StackLabelHelperText>
431+
</StackLabel>
432+
}
433+
/>
435434
</FormFields>
436435
</FormSection>
437436

438437
<FormSection
439438
title="Autostart"
440439
description="Allow users to set custom autostart and autostop scheduling options for workspaces created from this template."
441440
>
442-
<Stack direction="column">
443-
<Stack direction="row" alignItems="center">
444-
<Checkbox
445-
id="allow_user_autostart"
446-
size="small"
447-
disabled={isSubmitting || !allowAdvancedScheduling}
448-
onChange={async () => {
449-
await form.setFieldValue(
450-
"allow_user_autostart",
451-
!form.values.allow_user_autostart,
452-
);
453-
}}
454-
name="allow_user_autostart"
455-
checked={form.values.allow_user_autostart}
456-
/>
457-
<Stack spacing={0.5}>
458-
<strong>
441+
<Stack>
442+
<FormControlLabel
443+
control={
444+
<Checkbox
445+
id="allow_user_autostart"
446+
size="small"
447+
disabled={isSubmitting || !allowAdvancedScheduling}
448+
onChange={async () => {
449+
await form.setFieldValue(
450+
"allow_user_autostart",
451+
!form.values.allow_user_autostart,
452+
);
453+
}}
454+
name="allow_user_autostart"
455+
checked={form.values.allow_user_autostart}
456+
/>
457+
}
458+
label={
459+
<StackLabel>
459460
Allow users to automatically start workspaces on a schedule.
460-
</strong>
461-
</Stack>
462-
</Stack>
461+
</StackLabel>
462+
}
463+
/>
464+
463465
{allowAdvancedScheduling && (
464466
<TemplateScheduleAutostart
465467
enabled={Boolean(form.values.allow_user_autostart)}
@@ -482,19 +484,20 @@ export const TemplateScheduleForm: FC<TemplateScheduleForm> = ({
482484
<>
483485
<FormSection
484486
title="Dormancy"
485-
description="Coder's Dormancy Threshold determines when workspaces become dormant due to inactivity, requiring manual activation for access."
487+
description="When enabled, Coder will mark workspaces as dormant after a period of time with no connections. Dormant workspaces can be auto-deleted (see below) or manually reviewed by the workspace owner or admins."
486488
>
487489
<FormFields spacing={FORM_FIELDS_SPACING}>
488-
<Stack>
490+
<Stack spacing={DORMANT_FIELDSET_SPACING}>
489491
<FormControlLabel
490492
control={
491493
<Switch
494+
size="small"
492495
name="dormancyThreshold"
493496
checked={form.values.inactivity_cleanup_enabled}
494497
onChange={handleToggleInactivityCleanup}
495498
/>
496499
}
497-
label="Enable Dormancy Threshold"
500+
label={<StackLabel>Enable Dormancy Threshold</StackLabel>}
498501
/>
499502
<TextField
500503
{...getFieldHelpers("time_til_dormant_ms", {
@@ -514,16 +517,33 @@ export const TemplateScheduleForm: FC<TemplateScheduleForm> = ({
514517
/>
515518
</Stack>
516519

517-
<Stack>
520+
<Stack spacing={DORMANT_FIELDSET_SPACING}>
518521
<FormControlLabel
519522
control={
520523
<Switch
524+
size="small"
521525
name="dormancyAutoDeletion"
522526
checked={form.values.dormant_autodeletion_cleanup_enabled}
523527
onChange={handleToggleDormantAutoDeletion}
524528
/>
525529
}
526-
label="Enable Dormancy Auto-Deletion"
530+
label={
531+
<StackLabel>
532+
Enable Dormancy Auto-Deletion
533+
<StackLabelHelperText>
534+
When enabled, Coder will permanently delete dormant
535+
workspaces after a period of time.{" "}
536+
<span
537+
css={(theme) => ({
538+
fontWeight: 500,
539+
color: theme.palette.text.primary,
540+
})}
541+
>
542+
Once a workspace is deleted it cannot be recovered.
543+
</span>
544+
</StackLabelHelperText>
545+
</StackLabel>
546+
}
527547
/>
528548
<TextField
529549
{...getFieldHelpers("time_til_dormant_autodelete_ms", {
@@ -544,16 +564,25 @@ export const TemplateScheduleForm: FC<TemplateScheduleForm> = ({
544564
/>
545565
</Stack>
546566

547-
<Stack>
567+
<Stack spacing={DORMANT_FIELDSET_SPACING}>
548568
<FormControlLabel
549569
control={
550570
<Switch
571+
size="small"
551572
name="failureCleanupEnabled"
552573
checked={form.values.failure_cleanup_enabled}
553574
onChange={handleToggleFailureCleanup}
554575
/>
555576
}
556-
label="Enable Failure Cleanup"
577+
label={
578+
<StackLabel>
579+
Enable Failure Cleanup
580+
<StackLabelHelperText>
581+
When enabled, Coder will attempt to stop workspaces that
582+
are in a failed state after a specified number of days.
583+
</StackLabelHelperText>
584+
</StackLabel>
585+
}
557586
/>
558587
<TextField
559588
{...getFieldHelpers("failure_ttl_ms", {

0 commit comments

Comments
 (0)