selfhosted
/
coder
mirror of https://github.com/coder/coder.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

fix(site): fix template schedule options (#13084)

This commit is contained in:
Bruno Quaresma 2024-04-29 14:14:24 -03:00 committed by GitHub
parent ed07921752
commit 053c56cc1a
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 119 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
site/src/components/StackLabel/StackLabel.tsx Normal file
View File

@ -0,0 +1,31 @@
import FormHelperText, {
type FormHelperTextProps,
} from "@mui/material/FormHelperText";
import type { ComponentProps, FC } from "react";
import { Stack } from "components/Stack/Stack";
/**
* Use these components as the label in FormControlLabel when implementing radio
* buttons, checkboxes, or switches to ensure proper styling.
*/
export const StackLabel: FC<ComponentProps<typeof Stack>> = (props) => {
return (
<Stack
spacing={0.5}
css={{ paddingLeft: 12, fontWeight: 500 }}
{...props}
/>
);
};
export const StackLabelHelperText: FC<FormHelperTextProps> = (props) => {
return (
<FormHelperText
css={{
marginTop: 0,
}}
{...props}
/>
);
};

8
site/src/pages/TemplateSettingsPage/TemplateSchedulePage/TemplateScheduleAutostart.tsx
View File

@ -21,12 +21,7 @@ export const TemplateScheduleAutostart: FC<TemplateScheduleAutostartProps> = ({
onChange,
}) => {
return (
<Stack
direction="column"
width="100%"
alignItems="center"
css={{ marginBottom: "20px" }}
>
<Stack width="100%" alignItems="start" spacing={1}>
<Stack
direction="row"
spacing={0}
@ -49,6 +44,7 @@ export const TemplateScheduleAutostart: FC<TemplateScheduleAutostartProps> = ({
}[]
).map((day) => (
<Button
fullWidth
key={day.key}
css={{ borderRadius: 0 }}
// TODO: Adding a background color would also help

143
site/src/pages/TemplateSettingsPage/TemplateSchedulePage/TemplateScheduleForm.tsx
View File

@ -1,4 +1,3 @@
import { useTheme } from "@emotion/react";
import Checkbox from "@mui/material/Checkbox";
import FormControlLabel from "@mui/material/FormControlLabel";
import MenuItem from "@mui/material/MenuItem";
@ -14,6 +13,10 @@ import {
FormFields,
} from "components/Form/Form";
import { Stack } from "components/Stack/Stack";
import {
StackLabel,
StackLabelHelperText,
} from "components/StackLabel/StackLabel";
import { getFormHelpers } from "utils/formUtils";
import {
calculateAutostopRequirementDaysValue,
@ -51,7 +54,8 @@ const DORMANT_AUTODELETION_DEFAULT = 30;
* The default form field space is 4 but since this form is quite heavy I think
* increase the space can make it feels lighter.
*/
const FORM_FIELDS_SPACING = 6;
const FORM_FIELDS_SPACING = 8;
const DORMANT_FIELDSET_SPACING = 4;
export interface TemplateScheduleForm {
template: Template;
@ -151,7 +155,6 @@ export const TemplateScheduleForm: FC<TemplateScheduleForm> = ({
form,
error,
);
const theme = useTheme();
const now = new Date();
const weekFromNow = new Date(now);
@ -404,34 +407,30 @@ export const TemplateScheduleForm: FC<TemplateScheduleForm> = ({
/>
</Stack>
<Stack direction="row" alignItems="center">
<Checkbox
id="allow-user-autostop"
size="small"
disabled={isSubmitting || !allowAdvancedScheduling}
onChange={async () => {
await form.setFieldValue(
"allow_user_autostop",
!form.values.allow_user_autostop,
);
}}
name="allow_user_autostop"
checked={form.values.allow_user_autostop}
/>
<Stack spacing={0.5}>
<strong>Enforce these settings across all workspaces</strong>
<span
css={{
fontSize: 12,
color: theme.palette.text.secondary,
<FormControlLabel
control={
<Checkbox
id="allow-user-autostop"
size="small"
disabled={isSubmitting || !allowAdvancedScheduling}
onChange={async (_, checked) => {
await form.setFieldValue("allow_user_autostop", checked);
}}
>
Workspaces by default allow users to set custom autostop timers.
Use this to apply the template settings to all workspaces under
this template.
</span>
</Stack>
</Stack>
name="allow_user_autostop"
checked={form.values.allow_user_autostop}
/>
}
label={
<StackLabel>
Allow users to customize autostop duration for workspaces.
<StackLabelHelperText>
By default, workspaces will inherit the Autostop timer from
this template. Enabling this option allows users to set custom
Autostop timers on their workspaces or turn off the timer.
</StackLabelHelperText>
</StackLabel>
}
/>
</FormFields>
</FormSection>
@ -439,27 +438,30 @@ export const TemplateScheduleForm: FC<TemplateScheduleForm> = ({
title="Autostart"
description="Allow users to set custom autostart and autostop scheduling options for workspaces created from this template."
>
<Stack direction="column">
<Stack direction="row" alignItems="center">
<Checkbox
id="allow_user_autostart"
size="small"
disabled={isSubmitting || !allowAdvancedScheduling}
onChange={async () => {
await form.setFieldValue(
"allow_user_autostart",
!form.values.allow_user_autostart,
);
}}
name="allow_user_autostart"
checked={form.values.allow_user_autostart}
/>
<Stack spacing={0.5}>
<strong>
<Stack>
<FormControlLabel
control={
<Checkbox
id="allow_user_autostart"
size="small"
disabled={isSubmitting || !allowAdvancedScheduling}
onChange={async () => {
await form.setFieldValue(
"allow_user_autostart",
!form.values.allow_user_autostart,
);
}}
name="allow_user_autostart"
checked={form.values.allow_user_autostart}
/>
}
label={
<StackLabel>
Allow users to automatically start workspaces on a schedule.
</strong>
</Stack>
</Stack>
</StackLabel>
}
/>
{allowAdvancedScheduling && (
<TemplateScheduleAutostart
enabled={Boolean(form.values.allow_user_autostart)}
@ -482,19 +484,20 @@ export const TemplateScheduleForm: FC<TemplateScheduleForm> = ({
<>
<FormSection
title="Dormancy"
description="Coder's Dormancy Threshold determines when workspaces become dormant due to inactivity, requiring manual activation for access."
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."
>
<FormFields spacing={FORM_FIELDS_SPACING}>
<Stack>
<Stack spacing={DORMANT_FIELDSET_SPACING}>
<FormControlLabel
control={
<Switch
size="small"
name="dormancyThreshold"
checked={form.values.inactivity_cleanup_enabled}
onChange={handleToggleInactivityCleanup}
/>
}
label="Enable Dormancy Threshold"
label={<StackLabel>Enable Dormancy Threshold</StackLabel>}
/>
<TextField
{...getFieldHelpers("time_til_dormant_ms", {
@ -514,16 +517,33 @@ export const TemplateScheduleForm: FC<TemplateScheduleForm> = ({
/>
</Stack>
<Stack>
<Stack spacing={DORMANT_FIELDSET_SPACING}>
<FormControlLabel
control={
<Switch
size="small"
name="dormancyAutoDeletion"
checked={form.values.dormant_autodeletion_cleanup_enabled}
onChange={handleToggleDormantAutoDeletion}
/>
}
label="Enable Dormancy Auto-Deletion"
label={
<StackLabel>
Enable Dormancy Auto-Deletion
<StackLabelHelperText>
When enabled, Coder will permanently delete dormant
workspaces after a period of time.{" "}
<span
css={(theme) => ({
fontWeight: 500,
color: theme.palette.text.primary,
})}
>
Once a workspace is deleted it cannot be recovered.
</span>
</StackLabelHelperText>
</StackLabel>
}
/>
<TextField
{...getFieldHelpers("time_til_dormant_autodelete_ms", {
@ -544,16 +564,25 @@ export const TemplateScheduleForm: FC<TemplateScheduleForm> = ({
/>
</Stack>
<Stack>
<Stack spacing={DORMANT_FIELDSET_SPACING}>
<FormControlLabel
control={
<Switch
size="small"
name="failureCleanupEnabled"
checked={form.values.failure_cleanup_enabled}
onChange={handleToggleFailureCleanup}
/>
}
label="Enable Failure Cleanup"
label={
<StackLabel>
Enable Failure Cleanup
<StackLabelHelperText>
When enabled, Coder will attempt to stop workspaces that
are in a failed state after a specified number of days.
</StackLabelHelperText>
</StackLabel>
}
/>
<TextField
{...getFieldHelpers("failure_ttl_ms", {