fix: improve checkbox text in template schedule settings dialog (#13669)

jaaydenh · web-flow · commit 093ec3d05b05 · 2024-06-27T13:14:06.000-04:00
* fix: improve checkbox text in template schedule settings dialog

* fix: format

* fix: remove (s) plural language

* fix: fix format
diff --git a/site/src/pages/TemplateSettingsPage/TemplateSchedulePage/ScheduleDialog.stories.tsx b/site/src/pages/TemplateSettingsPage/TemplateSchedulePage/ScheduleDialog.stories.tsx
@@ -0,0 +1,33 @@
+import { action } from "@storybook/addon-actions";
+import type { Meta, StoryObj } from "@storybook/react";
+import { ScheduleDialog } from "./ScheduleDialog";
+
+const meta: Meta<typeof ScheduleDialog> = {
+  title: "pages/TemplateSettingsPage/ScheduleDialog",
+  component: ScheduleDialog,
+  args: {
+    onConfirm: action("onConfirm"),
+    onClose: action("onClose"),
+    open: true,
+    title: "Workspace Scheduling",
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof ScheduleDialog>;
+
+export const DormancyThreshold: Story = {
+  args: {
+    dormantValueChanged: true,
+    inactiveWorkspacesToGoDormant: 1,
+    inactiveWorkspacesToGoDormantInWeek: 5,
+  },
+};
+
+export const DormancyDeletion: Story = {
+  args: {
+    deletionValueChanged: true,
+    dormantWorkspacesToBeDeleted: 1,
+    dormantWorkspacesToBeDeletedInWeek: 5,
+  },
+};
diff --git a/site/src/pages/TemplateSettingsPage/TemplateSchedulePage/ScheduleDialog.tsx b/site/src/pages/TemplateSettingsPage/TemplateSchedulePage/ScheduleDialog.tsx
@@ -2,7 +2,6 @@ import type { Interpolation, Theme } from "@emotion/react";
 import Checkbox from "@mui/material/Checkbox";
 import DialogActions from "@mui/material/DialogActions";
 import FormControlLabel from "@mui/material/FormControlLabel";
-import { Stack } from "@mui/system";
 import type { FC } from "react";
 import type { ConfirmDialogProps } from "components/Dialogs/ConfirmDialog/ConfirmDialog";
 import { Dialog, DialogActionButtons } from "components/Dialogs/Dialog";
@@ -68,11 +67,18 @@ export const ScheduleDialog: FC<ScheduleDialogProps> = ({
             <>
               <h4>Dormancy Threshold</h4>
               <p css={styles.dialogDescription}>
-                This change will result in {inactiveWorkspacesToGoDormant}{" "}
-                workspaces being immediately transitioned to the dormant state
-                and {inactiveWorkspacesToGoDormantInWeek} over the next seven
-                days. To prevent this, do you want to reset the inactivity
-                period for all template workspaces?
+                This change will result in{" "}
+                <strong>{inactiveWorkspacesToGoDormant}</strong>{" "}
+                {inactiveWorkspacesToGoDormant === 1
+                  ? "workspace"
+                  : "workspaces"}{" "}
+                being immediately transitioned to the dormant state and{" "}
+                <strong>{inactiveWorkspacesToGoDormantInWeek}</strong>{" "}
+                {inactiveWorkspacesToGoDormantInWeek === 1
+                  ? "workspace"
+                  : "workspaces"}{" "}
+                over the next 7 days. To prevent this, do you want to reset the
+                inactivity period for all template workspaces?
               </p>
               <FormControlLabel
                 css={{ marginTop: 16 }}
@@ -84,35 +90,40 @@ export const ScheduleDialog: FC<ScheduleDialogProps> = ({
                     }}
                   />
                 }
-                label="Reset"
+                label="Prevent Dormancy - Reset all workspace inactivity periods"
               />
             </>
           )}
 
           {showDeletionWarning && (
             <>
               <h4>Dormancy Auto-Deletion</h4>
-              <Stack direction="row" spacing={5}>
-                <p css={styles.dialogDescription}>
-                  This change will result in {dormantWorkspacesToBeDeleted}{" "}
-                  workspaces being immediately deleted and{" "}
-                  {dormantWorkspacesToBeDeletedInWeek} over the next 7 days. To
-                  prevent this, do you want to reset the dormancy period for all
-                  template workspaces?
-                </p>
-                <FormControlLabel
-                  css={{ marginTop: 16 }}
-                  control={
-                    <Checkbox
-                      size="small"
-                      onChange={(e) => {
-                        updateDormantWorkspaces(e.target.checked);
-                      }}
-                    />
-                  }
-                  label="Reset"
-                />
-              </Stack>
+              <p css={styles.dialogDescription}>
+                This change will result in{" "}
+                <strong>{dormantWorkspacesToBeDeleted}</strong>{" "}
+                {dormantWorkspacesToBeDeleted === 1
+                  ? "workspace"
+                  : "workspaces"}{" "}
+                being immediately deleted and{" "}
+                <strong>{dormantWorkspacesToBeDeletedInWeek}</strong>{" "}
+                {dormantWorkspacesToBeDeletedInWeek === 1
+                  ? "workspace"
+                  : "workspaces"}{" "}
+                over the next 7 days. To prevent this, do you want to reset the
+                dormancy period for all template workspaces?
+              </p>
+              <FormControlLabel
+                css={{ marginTop: 16 }}
+                control={
+                  <Checkbox
+                    size="small"
+                    onChange={(e) => {
+                      updateDormantWorkspaces(e.target.checked);
+                    }}
+                  />
+                }
+                label="Prevent Deletion - Reset all workspace dormancy periods"
+              />
             </>
           )}
         </>
