Skip to content

fix(site): fix template schedule options #13084

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 3 commits into from
Apr 29, 2024
Merged

fix(site): fix template schedule options #13084

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
25ad857
fix(site): fix template schedule options
BrunoQuaresma Apr 26, 2024
ee31a25
Fix/improve copy
BrunoQuaresma Apr 26, 2024
fd44bcc
Update color to white
BrunoQuaresma Apr 26, 2024
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
31 changes: 31 additions & 0 deletions site/src/components/StackLabel/StackLabel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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) => {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

just import StackProps

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

StackProps does not work very well because of theForwardProps.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Screenshot 2024-04-29 at 14 13 06

return (
<Stack
spacing={0.5}
css={{ paddingLeft: 12, fontWeight: 500 }}
{...props}
/>
);
};

export const StackLabelHelperText: FC<FormHelperTextProps> = (props) => {
return (
<FormHelperText
css={{
marginTop: 0,
}}
{...props}
/>
);
};
8 changes: 2 additions & 6 deletions site/src/pages/TemplateSettingsPage/TemplateSchedulePage/TemplateScheduleAutostart.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand All @@ -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
Expand Down
143 changes: 86 additions & 57 deletions site/src/pages/TemplateSettingsPage/TemplateSchedulePage/TemplateScheduleForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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";
Expand All @@ -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,
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -151,7 +155,6 @@ export const TemplateScheduleForm: FC<TemplateScheduleForm> = ({
form,
error,
);
const theme = useTheme();

const now = new Date();
const weekFromNow = new Date(now);
Expand Down Expand Up @@ -404,62 +407,61 @@ 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>

<FormSection
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)}
Expand All @@ -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", {
Expand All @@ -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", {
Expand All @@ -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", {
Expand Down
Loading