From 4de27275a1113664d1752022f18b25a403b372d4 Mon Sep 17 00:00:00 2001 From: BrunoQuaresma Date: Tue, 7 May 2024 13:16:50 +0000 Subject: [PATCH 1/3] Remove disabled badge from autostop --- .../WorkspaceScheduleForm.tsx | 20 ++++++------------- 1 file changed, 6 insertions(+), 14 deletions(-) diff --git a/site/src/pages/WorkspaceSettingsPage/WorkspaceSchedulePage/WorkspaceScheduleForm.tsx b/site/src/pages/WorkspaceSettingsPage/WorkspaceSchedulePage/WorkspaceScheduleForm.tsx index 15a58bf423c99..91756effbf557 100644 --- a/site/src/pages/WorkspaceSettingsPage/WorkspaceSchedulePage/WorkspaceScheduleForm.tsx +++ b/site/src/pages/WorkspaceSettingsPage/WorkspaceSchedulePage/WorkspaceScheduleForm.tsx @@ -387,20 +387,12 @@ export const WorkspaceScheduleForm: FC = ({ title="Autostop" description={ <> -
- Set how many hours should elapse after the workspace started - before the workspace automatically shuts down. This will be - extended by{" "} - {dayjs - .duration({ milliseconds: template.activity_bump_ms }) - .humanize()}{" "} - after last activity in the workspace was detected. -
- {!template.allow_user_autostop && ( - - - - )} + Set how many hours should elapse after the workspace started before + the workspace automatically shuts down. This will be extended by{" "} + {dayjs + .duration({ milliseconds: template.activity_bump_ms }) + .humanize()}{" "} + after last activity in the workspace was detected. } > From 12f7dbf5e083378390cd48057c13545873d9b637 Mon Sep 17 00:00:00 2001 From: BrunoQuaresma Date: Tue, 7 May 2024 13:27:44 +0000 Subject: [PATCH 2/3] Add message below the switch and do the same for autostart --- .../WorkspaceScheduleForm.tsx | 54 ++++++++++++------- 1 file changed, 35 insertions(+), 19 deletions(-) diff --git a/site/src/pages/WorkspaceSettingsPage/WorkspaceSchedulePage/WorkspaceScheduleForm.tsx b/site/src/pages/WorkspaceSettingsPage/WorkspaceSchedulePage/WorkspaceScheduleForm.tsx index 91756effbf557..61e4cf597f325 100644 --- a/site/src/pages/WorkspaceSettingsPage/WorkspaceSchedulePage/WorkspaceScheduleForm.tsx +++ b/site/src/pages/WorkspaceSettingsPage/WorkspaceSchedulePage/WorkspaceScheduleForm.tsx @@ -7,7 +7,6 @@ import FormLabel from "@mui/material/FormLabel"; import MenuItem from "@mui/material/MenuItem"; import Switch from "@mui/material/Switch"; import TextField from "@mui/material/TextField"; -import Tooltip from "@mui/material/Tooltip"; import { formatDuration, intervalToDuration } from "date-fns"; import dayjs from "dayjs"; import advancedFormat from "dayjs/plugin/advancedFormat"; @@ -19,7 +18,6 @@ import { type FormikTouched, useFormik } from "formik"; import type { ChangeEvent, FC } from "react"; import * as Yup from "yup"; import type { Template } from "api/typesGenerated"; -import { DisabledBadge } from "components/Badges/Badges"; import { HorizontalForm, FormFooter, @@ -27,6 +25,10 @@ import { FormFields, } from "components/Form/Form"; import { Stack } from "components/Stack/Stack"; +import { + StackLabel, + StackLabelHelperText, +} from "components/StackLabel/StackLabel"; import { defaultSchedule, emptySchedule, @@ -180,6 +182,10 @@ export const validationSchema = Yup.object({ }), }); +// This form utilizes complex, visually-intensive fields. Increasing the space +// between these fields enhances readability and cleanliness. +const FIELDS_SPACING = 4; + export const WorkspaceScheduleForm: FC = ({ error, initialValues, @@ -275,21 +281,9 @@ export const WorkspaceScheduleForm: FC = ({ -
- Select the time and days of week on which you want the workspace - starting automatically. -
- {!template.allow_user_autostart && ( - - - - )} - - } + description="Select the time and days of week on which you want the workspace starting automatically." > - + = ({ name="autostartEnabled" checked={form.values.autostartEnabled} onChange={handleToggleAutostart} + size="small" /> } - label={Language.startSwitch} + label={ + + {Language.startSwitch} + {!template.allow_user_autostart && ( + + The template for this workspace does not allow modification + of autostart. + + )} + + } /> = ({ } > - + } - label={Language.stopSwitch} + label={ + + {Language.stopSwitch} + {!template.allow_user_autostop && ( + + The template for this workspace does not allow modification + of autostop. + + )} + + } /> Date: Wed, 8 May 2024 14:06:46 +0000 Subject: [PATCH 3/3] Fix tests --- .../WorkspaceScheduleForm.test.tsx | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/site/src/pages/WorkspaceSettingsPage/WorkspaceSchedulePage/WorkspaceScheduleForm.test.tsx b/site/src/pages/WorkspaceSettingsPage/WorkspaceSchedulePage/WorkspaceScheduleForm.test.tsx index 22d6eaa4df141..870a28b4f2f0b 100644 --- a/site/src/pages/WorkspaceSettingsPage/WorkspaceSchedulePage/WorkspaceScheduleForm.test.tsx +++ b/site/src/pages/WorkspaceSettingsPage/WorkspaceSchedulePage/WorkspaceScheduleForm.test.tsx @@ -281,7 +281,9 @@ describe("templateInheritance", () => { }; render(); - const autoStartToggle = await screen.findByLabelText("Enable Autostart"); + const autoStartToggle = await screen.findByLabelText("Enable Autostart", { + exact: false, + }); expect(autoStartToggle).toBeDisabled(); const startTimeInput = await screen.findByLabelText("Start time"); @@ -313,7 +315,9 @@ describe("templateInheritance", () => { render(); - const autoStartToggle = await screen.findByLabelText("Enable Autostart"); + const autoStartToggle = await screen.findByLabelText("Enable Autostart", { + exact: false, + }); expect(autoStartToggle).toBeEnabled(); const startTimeInput = await screen.findByLabelText("Start time"); @@ -346,7 +350,9 @@ describe("templateInheritance", () => { jest.spyOn(API, "getTemplateByName").mockResolvedValue(MockTemplate); render(); - const autoStopToggle = await screen.findByLabelText("Enable Autostop"); + const autoStopToggle = await screen.findByLabelText("Enable Autostop", { + exact: false, + }); expect(autoStopToggle).toBeDisabled(); const ttlInput = await screen.findByLabelText(