feat: allow autostop to be specified in minutes and seconds (#10707)

* feat: allow autostop to be specified in minutes and seconds

* fix test

site/src/pages/WorkspaceSettingsPage/WorkspaceSchedulePage/WorkspaceScheduleForm.test.ts

@@ -175,6 +175,15 @@ describe("validationSchema", () => {
     const validate = () => validationSchema.validateSync(values);
     expect(validate).toThrowError(Language.errorTtlMax);
   });
+
+  it("allows a ttl of 1.2 hours", () => {
+    const values: WorkspaceScheduleFormValues = {
+      ...valid,
+      ttl: 1.2,
+    };
+    const validate = () => validationSchema.validateSync(values);
+    expect(validate).not.toThrowError();
+  });
 });
 
 describe("ttlShutdownAt", () => {
@@ -182,27 +191,47 @@ describe("ttlShutdownAt", () => {
     [
       "Manual shutdown --> manual helper text",
       0,
-      Language.ttlCausesNoShutdownHelperText,
+      "Your workspace will not automatically shut down.",
     ],
     [
-      "One hour --> helper text shows shutdown after an hour",
+      "One hour --> helper text shows shutdown after 1 hour",
       1,
-      `${Language.ttlCausesShutdownHelperText} an hour ${Language.ttlCausesShutdownAfterStart}.`,
+      `Your workspace will shut down 1 hour after its next start. We delay shutdown by this time whenever we detect activity.`,
     ],
     [
       "Two hours --> helper text shows shutdown after 2 hours",
       2,
-      `${Language.ttlCausesShutdownHelperText} 2 hours ${Language.ttlCausesShutdownAfterStart}.`,
+      `Your workspace will shut down 2 hours after its next start. We delay shutdown by this time whenever we detect activity.`,
     ],
     [
-      "24 hours --> helper text shows shutdown after a day",
+      "24 hours --> helper text shows shutdown after 1 day",
       24,
-      `${Language.ttlCausesShutdownHelperText} a day ${Language.ttlCausesShutdownAfterStart}.`,
+      `Your workspace will shut down 1 day after its next start. We delay shutdown by this time whenever we detect activity.`,
     ],
     [
       "48 hours --> helper text shows shutdown after 2 days",
       48,
-      `${Language.ttlCausesShutdownHelperText} 2 days ${Language.ttlCausesShutdownAfterStart}.`,
+      `Your workspace will shut down 2 days after its next start. We delay shutdown by this time whenever we detect activity.`,
+    ],
+    [
+      "1.2 hours --> helper text shows shutdown after 1 hour and 12 minutes",
+      1.2,
+      `Your workspace will shut down 1 hour and 12 minutes after its next start. We delay shutdown by this time whenever we detect activity.`,
+    ],
+    [
+      "24.2 hours --> helper text shows shutdown after 1 day and 12 minutes",
+      24.2,
+      `Your workspace will shut down 1 day and 12 minutes after its next start. We delay shutdown by this time whenever we detect activity.`,
+    ],
+    [
+      "0.2 hours --> helper text shows shutdown after 12 minutes",
+      0.2,
+      `Your workspace will shut down 12 minutes after its next start. We delay shutdown by this time whenever we detect activity.`,
+    ],
+    [
+      "48.258 hours --> helper text shows shutdown after 2 days and 15 minutes and 28 seconds",
+      48.258,
+      `Your workspace will shut down 2 days and 15 minutes and 28 seconds after its next start. We delay shutdown by this time whenever we detect activity.`,
     ],
   ])("%p", (_, ttlHours, expected) => {
     expect(ttlShutdownAt(ttlHours)).toEqual(expected);

site/src/pages/WorkspaceSettingsPage/WorkspaceSchedulePage/WorkspaceScheduleForm.tsx

@@ -31,6 +31,7 @@ import { getFormHelpers } from "utils/formUtils";
 import { timeZones } from "utils/timeZones";
 import { Pill } from "components/Pill/Pill";
 import Tooltip from "@mui/material/Tooltip";
+import { formatDuration, intervalToDuration } from "date-fns";
 
 // REMARK: some plugins depend on utc, so it's listed first. Otherwise they're
 //         sorted alphabetically.
@@ -61,11 +62,6 @@ export const Language = {
   startTimeLabel: "Start time",
   timezoneLabel: "Timezone",
   ttlLabel: "Time until shutdown (hours)",
-  ttlCausesShutdownHelperText: "Your workspace will shut down",
-  ttlCausesShutdownAfterStart:
-    "after its next start. We delay shutdown by this time whenever we detect activity",
-  ttlCausesNoShutdownHelperText:
-    "Your workspace will not automatically shut down.",
   formTitle: "Workspace schedule",
   startSection: "Start",
   startSwitch: "Enable Autostart",
@@ -173,7 +169,6 @@ export const validationSchema = Yup.object({
       }
     }),
   ttl: Yup.number()
-    .integer()
     .min(0)
     .max(24 * 30 /* 30 days */, Language.errorTtlMax)
     .test("positive-if-autostop", Language.errorNoStop, function (value) {
@@ -404,7 +399,7 @@ export const WorkspaceScheduleForm: FC<
           <TextField
             {...formHelpers("ttl", ttlShutdownAt(form.values.ttl), "ttl_ms")}
             disabled={isLoading || !form.values.autostopEnabled}
-            inputProps={{ min: 0, step: 1 }}
+            inputProps={{ min: 0, step: "any" }}
             label={Language.ttlLabel}
             type="number"
             fullWidth
@@ -417,12 +412,13 @@ export const WorkspaceScheduleForm: FC<
 };
 
 export const ttlShutdownAt = (formTTL: number): string => {
-  if (formTTL < 1) {
+  if (formTTL === 0) {
     // Passing an empty value for TTL in the form results in a number that is not zero but less than 1.
-    return Language.ttlCausesNoShutdownHelperText;
+    return "Your workspace will not automatically shut down.";
   } else {
-    return `${Language.ttlCausesShutdownHelperText} ${dayjs
-      .duration(formTTL, "hours")
-      .humanize()} ${Language.ttlCausesShutdownAfterStart}.`;
+    return `Your workspace will shut down ${formatDuration(
+      intervalToDuration({ start: 0, end: formTTL * 60 * 60 * 1000 }),
+      { delimiter: " and " },
+    )} after its next start. We delay shutdown by this time whenever we detect activity.`;
   }
 };

site/src/pages/WorkspaceSettingsPage/WorkspaceSchedulePage/WorkspaceSchedulePage.test.tsx

@@ -275,7 +275,7 @@ describe("WorkspaceSchedulePage", () => {
       await user.click(autostopToggle);
       // find helper text that describes the mock template's 24 hour default
       const autostopHelperText = await screen.findByText(
-        "Your workspace will shut down a day after",
+        "Your workspace will shut down 1 day after",
         { exact: false },
       );
       expect(autostopHelperText).toBeDefined();