Skip to content

fix(site): disable autostart and autostop according to template settings #11809

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 5 commits into from
Jan 26, 2024
Merged

fix(site): disable autostart and autostop according to template settings #11809

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
0786256
fix (site): disable autostart and autostop according to template sett…
Kira-Pilot Jan 24, 2024
735fca1
checking form values again; wrote tests
Kira-Pilot Jan 25, 2024
785670b
fixed closure and label bugs
Kira-Pilot Jan 26, 2024
becf9ca
fix broken query key
Kira-Pilot Jan 26, 2024
a9ef499
tweaks
Kira-Pilot Jan 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
Next Next commit
fix (site): disable autostart and autostop according to template sett… 
…ings
  • Loading branch information
@Kira-Pilot
Kira-Pilot committed Jan 24, 2024
commit 0786256016786cf9a35a188188acea73ef74148c
19 changes: 14 additions & 5 deletions site/src/pages/WorkspaceSettingsPage/WorkspaceSchedulePage/WorkspaceScheduleForm.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,8 +19,17 @@ const meta: Meta<typeof WorkspaceScheduleForm> = {
title: "pages/WorkspaceSettingsPage/WorkspaceScheduleForm",
component: WorkspaceScheduleForm,
args: {
enableAutoStart: true,
enableAutoStop: true,
allowTemplateAutoStart: true,
allowTemplateAutoStop: true,
allowedTemplateAutoStartDays: [
"sunday",
"monday",
"tuesday",
"wednesday",
"thursday",
"friday",
"saturday",
],
},
};

Expand All @@ -42,8 +51,8 @@ export const AllDisabled: Story = {
autostopEnabled: false,
ttl: emptyTTL,
},
enableAutoStart: false,
enableAutoStop: false,
allowTemplateAutoStart: false,
allowTemplateAutoStop: false,
},
};

Expand All @@ -55,7 +64,7 @@ export const Autostart: Story = {
autostopEnabled: false,
ttl: emptyTTL,
},
enableAutoStop: false,
allowTemplateAutoStop: false,
},
};

Expand Down
109 changes: 109 additions & 0 deletions ...chedulePage/WorkspaceScheduleForm.test.ts → ...hedulePage/WorkspaceScheduleForm.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,14 @@ import {
ttlShutdownAt,
validationSchema,
WorkspaceScheduleFormValues,
WorkspaceScheduleForm,
} from "./WorkspaceScheduleForm";
import { timeZones } from "utils/timeZones";
import * as API from "api/api";
import { MockTemplate } from "testHelpers/entities";
import { render } from "testHelpers/renderHelpers";
import { defaultSchedule } from "pages/WorkspaceSettingsPage/WorkspaceSchedulePage/schedule";
import { screen } from "@testing-library/react";

const valid: WorkspaceScheduleFormValues = {
autostartEnabled: true,
Expand Down Expand Up @@ -237,3 +243,106 @@ describe("ttlShutdownAt", () => {
expect(ttlShutdownAt(ttlHours)).toEqual(expected);
});
});

const autoStartDays = [
"sunday",
"monday",
"tuesday",
"wednesday",
"thursday",
"friday",
"saturday",
];
const defaultFormProps = {
submitScheduleError: "",
initialValues: {
...defaultSchedule(),
autostartEnabled: true,
autostopEnabled: true,
ttl: 24,
},
isLoading: false,
defaultTTL: 24,
onCancel: () => null,
onSubmit: () => null,
allowedTemplateAutoStartDays: autoStartDays,
allowTemplateAutoStart: true,
allowTemplateAutoStop: true,
};

describe("templateInheritance", () => {
it("disables the entire autostart feature appropriately", async () => {
jest.spyOn(API, "getTemplateByName").mockResolvedValue(MockTemplate);
render(
<WorkspaceScheduleForm
{...defaultFormProps}
allowTemplateAutoStart={false}
/>,
);

const autoStartToggle = await screen.findByLabelText("Enable Autostart");
expect(autoStartToggle).toBeDisabled();

const startTimeInput = await screen.findByLabelText("Start time");
expect(startTimeInput).toBeDisabled();

const timezoneInput = await screen.findByLabelText("Timezone");
// MUI's input is wrapped in a div so we look at the aria-attribute instead
expect(timezoneInput).toHaveAttribute("aria-disabled");

autoStartDays.forEach(async (label) => {
const checkbox = await screen.findByLabelText(label);
expect(checkbox).toBeDisabled();
});
});
it("disables the autostart days of the week appropriately", async () => {
const enabledDays = ["saturday", "sunday"];

jest.spyOn(API, "getTemplateByName").mockResolvedValue(MockTemplate);
render(
<WorkspaceScheduleForm
{...defaultFormProps}
allowedTemplateAutoStartDays={enabledDays}
/>,
);

const autoStartToggle = await screen.findByLabelText("Enable Autostart");
expect(autoStartToggle).toBeEnabled();

const startTimeInput = await screen.findByLabelText("Start time");
expect(startTimeInput).toBeEnabled();

const timezoneInput = await screen.findByLabelText("Timezone");
// MUI's input is wrapped in a div so we look at the aria-attribute instead
expect(timezoneInput).not.toHaveAttribute("aria-disabled");

enabledDays.forEach(async (label) => {
const checkbox = await screen.findByLabelText(label);
expect(checkbox).toBeEnabled();
});

autoStartDays
.filter((day) => !enabledDays.includes(day))
.forEach(async (label) => {
const checkbox = await screen.findByLabelText(label);
expect(checkbox).toBeDisabled();
});
});
it("disables the entire autostop feature appropriately", async () => {
jest.spyOn(API, "getTemplateByName").mockResolvedValue(MockTemplate);
render(
<WorkspaceScheduleForm
{...defaultFormProps}
allowTemplateAutoStop={false}
/>,
);

const autoStopToggle = await screen.findByLabelText("Enable Autostop");
expect(autoStopToggle).toBeDisabled();

const ttlInput = await screen.findByLabelText(
"Time until shutdown (hours)",
);
expect(ttlInput).toBeDisabled();
});
});
36 changes: 23 additions & 13 deletions site/src/pages/WorkspaceSettingsPage/WorkspaceSchedulePage/WorkspaceScheduleForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,8 @@ import { timeZones } from "utils/timeZones";
import Tooltip from "@mui/material/Tooltip";
import { formatDuration, intervalToDuration } from "date-fns";
import { DisabledBadge } from "components/Badges/Badges";
import { TemplateAutostartRequirement } from "api/typesGenerated";
import { PropsWithChildren } from "react";

// REMARK: some plugins depend on utc, so it's listed first. Otherwise they're
// sorted alphabetically.
Expand Down Expand Up @@ -73,8 +75,9 @@ export interface WorkspaceScheduleFormProps {
submitScheduleError?: unknown;
initialValues: WorkspaceScheduleFormValues;
isLoading: boolean;
enableAutoStop: boolean;
enableAutoStart: boolean;
allowedTemplateAutoStartDays: TemplateAutostartRequirement["days_of_week"];
allowTemplateAutoStop: boolean;
allowTemplateAutoStart: boolean;
onCancel: () => void;
onSubmit: (values: WorkspaceScheduleFormValues) => void;
// for storybook
Expand Down Expand Up @@ -182,7 +185,7 @@ export const validationSchema = Yup.object({
});

export const WorkspaceScheduleForm: FC<
React.PropsWithChildren<WorkspaceScheduleFormProps>
PropsWithChildren<WorkspaceScheduleFormProps>
> = ({
submitScheduleError,
initialValues,
Expand All @@ -191,8 +194,9 @@ export const WorkspaceScheduleForm: FC<
onSubmit,
initialTouched,
defaultTTL,
enableAutoStop,
enableAutoStart,
allowedTemplateAutoStartDays,
allowTemplateAutoStop,
allowTemplateAutoStart,
}) => {
const form = useFormik<WorkspaceScheduleFormValues>({
initialValues,
Expand Down Expand Up @@ -288,7 +292,7 @@ export const WorkspaceScheduleForm: FC<
Select the time and days of week on which you want the workspace
starting automatically.
</div>
{!enableAutoStart && (
{!allowTemplateAutoStart && (
<Tooltip title="This option can be enabled in the template settings">
<DisabledBadge />
</Tooltip>
Expand All @@ -300,7 +304,7 @@ export const WorkspaceScheduleForm: FC<
<FormControlLabel
control={
<Switch
disabled={!enableAutoStart}
disabled={!allowTemplateAutoStart}
name="autostartEnabled"
checked={form.values.autostartEnabled}
onChange={handleToggleAutostart}
Expand All @@ -311,14 +315,14 @@ export const WorkspaceScheduleForm: FC<
<Stack direction="row">
<TextField
{...formHelpers("startTime")}
disabled={isLoading || !form.values.autostartEnabled}
Copy link
Member Author

Choose a reason for hiding this comment

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

I am not sure why we were looking at the form values here...I assume this was a typo.

Copy link
Collaborator

Choose a reason for hiding this comment

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

I think it's because that's where the state of the form is. So if someone turns on autostart, this is the place to check its value.

Copy link
Member

Choose a reason for hiding this comment

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

Yea, the disabled state matches their checkbox

Copy link
Member Author

Choose a reason for hiding this comment

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

Thanks for catching me here - I've fixed the attribute and added some test cases.
Down the road, we might want to reconsider the prop architecture of the form as it accepts initialValues, and one could try to disable autostart or autostop using this prop, e.g. :

initialValues={{
  autoStartEnabled: false
  autoStopEnabled: false
}}

But this wouldn't affect the top toggle of each feature; only the secondary fields associated with them. So it's a bit of a bizarre API, but I'd rather not touch it in this PR.

disabled={isLoading || !allowTemplateAutoStart}
label={Language.startTimeLabel}
type="time"
fullWidth
/>
<TextField
{...formHelpers("timezone")}
disabled={isLoading || !form.values.autostartEnabled}
disabled={isLoading || !allowTemplateAutoStart}
label={Language.timezoneLabel}
select
fullWidth
Expand Down Expand Up @@ -349,7 +353,13 @@ export const WorkspaceScheduleForm: FC<
control={
<Checkbox
checked={checkbox.value}
disabled={isLoading || !form.values.autostartEnabled}
// template admins can disable the autostart feature in general,
// or they can disallow autostart on specific days of the week
disabled={
isLoading ||
!allowTemplateAutoStart ||
!allowedTemplateAutoStartDays.includes(checkbox.name)
}
onChange={form.handleChange}
name={checkbox.name}
size="small"
Expand Down Expand Up @@ -378,7 +388,7 @@ export const WorkspaceScheduleForm: FC<
extended by 1 hour after last activity in the workspace was
detected.
</div>
{!enableAutoStop && (
{!allowTemplateAutoStop && (
<Tooltip title="This option can be enabled in the template settings">
<DisabledBadge />
</Tooltip>
Expand All @@ -393,7 +403,7 @@ export const WorkspaceScheduleForm: FC<
name="autostopEnabled"
checked={form.values.autostopEnabled}
onChange={handleToggleAutostop}
disabled={!enableAutoStop}
disabled={!allowTemplateAutoStop}
/>
}
label={Language.stopSwitch}
Expand All @@ -403,7 +413,7 @@ export const WorkspaceScheduleForm: FC<
helperText: ttlShutdownAt(form.values.ttl),
backendFieldName: "ttl_ms",
})}
disabled={isLoading || !form.values.autostopEnabled}
disabled={isLoading || !allowTemplateAutoStop}
inputProps={{ min: 0, step: "any" }}
label={Language.ttlLabel}
type="number"
Expand Down
7 changes: 5 additions & 2 deletions site/src/pages/WorkspaceSettingsPage/WorkspaceSchedulePage/WorkspaceSchedulePage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -98,8 +98,11 @@ export const WorkspaceSchedulePage: FC = () => {

{template && (
<WorkspaceScheduleForm
enableAutoStart={template.allow_user_autostart}
enableAutoStop={template.allow_user_autostop}
allowedTemplateAutoStartDays={
template.autostart_requirement.days_of_week
}
allowTemplateAutoStart={template.allow_user_autostart}
allowTemplateAutoStop={template.allow_user_autostop}
submitScheduleError={submitScheduleMutation.error}
initialValues={{
...getAutostart(workspace),
Expand Down