Few refactorings for ttl fields

coder · deansheather · Mar 7, 2023 · Feb 8, 2023 · Feb 15, 2023 · Feb 20, 2023
commit 6caeb003cccb7940eb2040f8773c3053b732a2a5
diff --git a/site/src/i18n/en/common.json b/site/src/i18n/en/common.json
@@ -39,5 +39,7 @@
   "updateCheck": {
     "message": "Coder {{version}} is now available. View the <4>release notes</4> and <7>upgrade instructions</7> for more information.",
     "error": "Coder update check failed."
-  }
+  },
+  "licenseFieldTextHelper": "You need an enterprise license to use it.",
+  "learnMore": "Learn more"
 }
diff --git a/site/src/i18n/en/createTemplatePage.json b/site/src/i18n/en/createTemplatePage.json
@@ -26,13 +26,17 @@
       "displayName": "Display name",
       "description": "Description",
       "icon": "Icon",
-      "autoStop": "Auto-stop default",
-      "maxTTL": "Maximum lifetime of workspaces",
+      "autoStop": "Default auto-stop",
+      "maxTTL": "Max. Lifetime",
       "allowUsersToCancel": "Allow users to cancel in-progress workspace jobs"
     },
     "helperText": {
-      "autoStop": "Time in hours",
-      "maxTTL": "Time in hours",
+      "defaultTTLHelperText_zero": "Workspaces will run until stopped manually.",
+      "defaultTTLHelperText_one": "Workspaces will default to stopping after {{count}} hour.",
+      "defaultTTLHelperText_other": "Workspaces will default to stopping after {{count}} hours.",
+      "maxTTLHelperText_zero": "Workspaces may run indefinitely.",
+      "maxTTLHelperText_one": "Workspaces must stop within 1 hour of starting.",
+      "maxTTLHelperText_other": "Workspaces must stop within {{count}} hours of starting.",
       "allowUsersToCancel": "If checked, users may be able to corrupt their workspace."
     },
     "upload": {
@@ -41,6 +45,13 @@
     },
     "tooltip": {
       "allowUsersToCancel": "Depending on your template, canceling builds may leave workspaces in an unhealthy state. This option isn't recommended for most use cases."
+    },
+    "error": {
+      "descriptionMax": "Please enter a description that is less than or equal to 128 characters.",
+      "defaultTTLMax": "Please enter a limit that is less than or equal to 168 hours (7 days).",
+      "defaultTTLMin": "Default time until auto-stop must not be less than 0.",
+      "maxTTLMax": "Please enter a limit that is less than or equal to 168 hours (7 days).",
+      "maxTTLMin": "Maximum time until auto-stop must not be less than 0."
     }
   }
 }
diff --git a/site/src/i18n/en/templateSettingsPage.json b/site/src/i18n/en/templateSettingsPage.json
@@ -4,21 +4,21 @@
   "displayNameLabel": "Display name",
   "descriptionLabel": "Description",
   "descriptionMaxError": "Please enter a description that is less than or equal to 128 characters.",
-  "defaultTtlLabel": "Auto-stop default",
-  "maxTtlLabel": "Maximum lifetime for started workspaces",
+  "defaultTtlLabel": "Default auto-stop",
+  "maxTtlLabel": "Max. Lifetime",
   "iconLabel": "Icon",
   "formAriaLabel": "Template settings form",
   "selectEmoji": "Select emoji",
   "defaultTTLMaxError": "Please enter a limit that is less than or equal to 168 hours (7 days).",
   "defaultTTLMinError": "Default time until auto-stop must not be less than 0.",
-  "defaultTTLHelperText_zero": "Workspaces created from this template will run until stopped manually.",
-  "defaultTTLHelperText_one": "Workspaces created from this template will default to stopping after {{count}} hour.",
-  "defaultTTLHelperText_other": "Workspaces created from this template will default to stopping after {{count}} hours.",
+  "defaultTTLHelperText_zero": "Workspaces will run until stopped manually.",
+  "defaultTTLHelperText_one": "Workspaces will default to stopping after {{count}} hour.",
+  "defaultTTLHelperText_other": "Workspaces will default to stopping after {{count}} hours.",
   "maxTTLMaxError": "Please enter a limit that is less than or equal to 168 hours (7 days).",
   "maxTTLMinError": "Maximum time until auto-stop must not be less than 0.",
-  "maxTTLHelperText_zero": "Workspaces created from this template may run indefinitely.",
-  "maxTTLHelperText_one": "Workspaces created from this template must stop within {{count}} hour of starting.",
-  "maxTTLHelperText_other": "Workspaces created from this template must stop within {{count}} hours of starting.",
+  "maxTTLHelperText_zero": "Workspaces may run indefinitely.",
+  "maxTTLHelperText_one": "Workspaces must stop within 1 hour of starting.",
+  "maxTTLHelperText_other": "Workspaces must stop within {{count}} hours of starting.",
   "allowUserCancelWorkspaceJobsLabel": "Allow users to cancel in-progress workspace jobs.",
   "allowUserCancelWorkspaceJobsNotice": "Depending on your template, canceling builds may leave workspaces in an unhealthy state. This option isn't recommended for most use cases.",
   "allowUsersCancelHelperText": "If checked, users may be able to corrupt their workspace.",

diff --git a/site/src/pages/CreateTemplatePage/CreateTemplateForm.tsx b/site/src/pages/CreateTemplatePage/CreateTemplateForm.tsx
@@ -17,22 +17,73 @@ import { useFormik } from "formik"
 import { SelectedTemplate } from "pages/CreateWorkspacePage/SelectedTemplate"
 import { FC } from "react"
 import { useTranslation } from "react-i18next"
-import { nameValidator, getFormHelpers, onChangeTrimmed } from "util/formUtils"
+import {
+  nameValidator,
+  getFormHelpers,
+  onChangeTrimmed,
+  templateDisplayNameValidator,
+} from "util/formUtils"
 import { CreateTemplateData } from "xServices/createTemplate/createTemplateXService"
 import * as Yup from "yup"
 import { WorkspaceBuildLogs } from "components/WorkspaceBuildLogs/WorkspaceBuildLogs"
 import { HelpTooltip, HelpTooltipText } from "components/Tooltips/HelpTooltip"
 import { LazyIconField } from "components/IconField/LazyIconField"
 import { Maybe } from "components/Conditionals/Maybe"
 import { useDashboard } from "components/Dashboard/DashboardProvider"
+import i18next from "i18next"
+import Link from "@material-ui/core/Link"
+
+const MAX_DESCRIPTION_CHAR_LIMIT = 128
+const MAX_TTL_DAYS = 7
+
+const TTLHelperText = ({
+  ttl,
+  translationName,
+}: {
+  ttl?: number
+  translationName: string
+}) => {
+  const { t } = useTranslation("createTemplatePage")
+  const count = typeof ttl !== "number" ? 0 : ttl
+  return (
+    // no helper text if ttl is negative - error will show once field is considered touched
+    <Maybe condition={count >= 0}>
+      <span>{t(translationName, { count })}</span>
+    </Maybe>
+  )
+}
 
 const validationSchema = Yup.object({
-  name: nameValidator("Name"),
-  display_name: Yup.string().optional(),
-  description: Yup.string().optional(),
+  name: nameValidator(
+    i18next.t("form.fields.name", { ns: "createTemplatePage" }),
+  ),
+  display_name: templateDisplayNameValidator(
+    i18next.t("form.fields.displayName", {
+      ns: "createTemplatePage",
+    }),
+  ),
+  description: Yup.string().max(
+    MAX_DESCRIPTION_CHAR_LIMIT,
+    i18next.t("form.error.descriptionMax", { ns: "createTemplatePage" }),
+  ),
   icon: Yup.string().optional(),
-  default_ttl_hours: Yup.number(),
-  max_ttl_hours: Yup.number(),
+  default_ttl_hours: Yup.number()
+    .integer()
+    .min(
+      0,
+      i18next.t("form.error.defaultTTLMin", { ns: "templateSettingsPage" }),
+    )
+    .max(
+      24 * MAX_TTL_DAYS /* 7 days in hours */,
+      i18next.t("form.error.defaultTTLMax", { ns: "templateSettingsPage" }),
+    ),
+  max_ttl_hours: Yup.number()
+    .integer()
+    .min(0, i18next.t("form.error.maxTTLMin", { ns: "templateSettingsPage" }))
+    .max(
+      24 * MAX_TTL_DAYS /* 7 days in hours */,
+      i18next.t("form.error.maxTTLMax", { ns: "templateSettingsPage" }),
+    ),
   allow_user_cancel_workspace_jobs: Yup.boolean(),
   parameter_values_by_name: Yup.object().optional(),
 })
@@ -110,6 +161,7 @@ export const CreateTemplateForm: FC<CreateTemplateFormProps> = ({
   })
   const getFieldHelpers = getFormHelpers<CreateTemplateData>(form, error)
   const { t } = useTranslation("createTemplatePage")
+  const { t: commonT } = useTranslation("common")
 
   return (
     <form onSubmit={form.handleSubmit}>
@@ -197,30 +249,47 @@ export const CreateTemplateForm: FC<CreateTemplateFormProps> = ({
             </p>
           </div>
 
-          <Stack direction="column" className={styles.formSectionFields}>
+          <Stack direction="row" className={styles.ttlFields}>
             <TextField
-              {...getFieldHelpers("default_ttl_hours")}
+              {...getFieldHelpers(
+                "default_ttl_hours",
+                <TTLHelperText
+                  translationName="form.helperText.defaultTTLHelperText"
+                  ttl={form.values.default_ttl_hours}
+                />,
+              )}
               disabled={isSubmitting}
               onChange={onChangeTrimmed(form)}
               fullWidth
               label={t("form.fields.autoStop")}
               variant="outlined"
               type="number"
-              helperText={t("form.helperText.autoStop")}
             />
 
-            <Maybe condition={canSetMaxTTL}>
-              <TextField
-                {...getFieldHelpers("max_ttl_hours")}
-                disabled={isSubmitting}
-                onChange={onChangeTrimmed(form)}
-                fullWidth
-                label={t("form.fields.maxTTL")}
-                variant="outlined"
-                type="number"
-                helperText={t("form.helperText.maxTTL")}
-              />
-            </Maybe>
+            <TextField
+              {...getFieldHelpers(
+                "max_ttl_hours",
+                canSetMaxTTL ? (
+                  <TTLHelperText
+                    translationName="form.helperText.maxTTLHelperText"
+                    ttl={form.values.max_ttl_hours}
+                  />
+                ) : (
+                  <>
+                    {commonT("licenseFieldTextHelper")}{" "}
+                    <Link href="https://coder.com/docs/v2/latest/enterprise">
+                      {commonT("learnMore")}
+                    </Link>
+                    .
+                  </>
+                ),
+              )}
+              disabled={isSubmitting || !canSetMaxTTL}
+              fullWidth
+              label={t("form.fields.maxTTL")}
+              variant="outlined"
+              type="number"
+            />
           </Stack>
         </div>
 
@@ -346,6 +415,10 @@ const useStyles = makeStyles((theme) => ({
     },
   },
 
+  ttlFields: {
+    width: "100%",
+  },
+
   formSectionInfo: {
     width: 312,
     flexShrink: 0,

diff --git a/site/src/pages/TemplateSettingsPage/TemplateSettingsForm.tsx b/site/src/pages/TemplateSettingsPage/TemplateSettingsForm.tsx
@@ -23,7 +23,7 @@ import { Stack } from "components/Stack/Stack"
 import Checkbox from "@material-ui/core/Checkbox"
 import { HelpTooltip, HelpTooltipText } from "components/Tooltips/HelpTooltip"
 import { makeStyles } from "@material-ui/core/styles"
-import { useDashboard } from "components/Dashboard/DashboardProvider"
+import Link from "@material-ui/core/Link"
 
 const TTLHelperText = ({
   ttl,
@@ -81,6 +81,7 @@ export interface TemplateSettingsForm {
   onCancel: () => void
   isSubmitting: boolean
   error?: unknown
+  canSetMaxTTL: boolean
   // Helpful to show field errors on Storybook
   initialTouched?: FormikTouched<UpdateTemplateMeta>
 }
@@ -90,13 +91,11 @@ export const TemplateSettingsForm: FC<TemplateSettingsForm> = ({
   onSubmit,
   onCancel,
   error,
+  canSetMaxTTL,
   isSubmitting,
   initialTouched,
 }) => {
-  const { entitlements } = useDashboard()
-  const canSetMaxTTL =
-    entitlements.features["advanced_template_scheduling"].enabled
-
+  const { t: commonT } = useTranslation("common")
   const validationSchema = getValidationSchema()
   const form: FormikContextType<UpdateTemplateMeta> =
     useFormik<UpdateTemplateMeta>({
@@ -193,39 +192,49 @@ export const TemplateSettingsForm: FC<TemplateSettingsForm> = ({
         title={t("schedule.title")}
         description={t("schedule.description")}
       >
-        <TextField
-          {...getFieldHelpers(
-            "default_ttl_ms",
-            <TTLHelperText
-              translationName="defaultTTLHelperText"
-              ttl={form.values.default_ttl_ms}
-            />,
-          )}
-          disabled={isSubmitting}
-          fullWidth
-          inputProps={{ min: 0, step: 1 }}
-          label={t("defaultTtlLabel")}
-          variant="outlined"
-          type="number"
-        />
-
-        <Maybe condition={canSetMaxTTL}>
+        <Stack direction="row" className={styles.ttlFields}>
           <TextField
             {...getFieldHelpers(
-              "max_ttl_ms",
+              "default_ttl_ms",
               <TTLHelperText
-                translationName="maxTTLHelperText"
+                translationName="defaultTTLHelperText"
                 ttl={form.values.default_ttl_ms}
               />,
             )}
             disabled={isSubmitting}
             fullWidth
             inputProps={{ min: 0, step: 1 }}
+            label={t("defaultTtlLabel")}
+            variant="outlined"
+            type="number"
+          />
+
+          <TextField
+            {...getFieldHelpers(
+              "max_ttl_ms",
+              canSetMaxTTL ? (
+                <TTLHelperText
+                  translationName="maxTTLHelperText"
+                  ttl={form.values.max_ttl_ms}
+                />
+              ) : (
+                <>
+                  {commonT("licenseFieldTextHelper")}{" "}
+                  <Link href="https://coder.com/docs/v2/latest/enterprise">
+                    {commonT("learnMore")}
+                  </Link>
+                  .
+                </>
+              ),
+            )}
+            disabled={isSubmitting || !canSetMaxTTL}
+            fullWidth
+            inputProps={{ min: 0, step: 1 }}
             label={t("maxTtlLabel")}
             variant="outlined"
             type="number"
           />
-        </Maybe>
+        </Stack>
       </FormSection>
 
       <FormSection
@@ -281,4 +290,8 @@ const useStyles = makeStyles((theme) => ({
     fontSize: theme.spacing(1.5),
     color: theme.palette.text.secondary,
   },
+
+  ttlFields: {
+    width: "100%",
+  },
 }))
diff --git a/site/src/pages/TemplateSettingsPage/TemplateSettingsPage.tsx b/site/src/pages/TemplateSettingsPage/TemplateSettingsPage.tsx
@@ -1,4 +1,5 @@
 import { useMachine } from "@xstate/react"
+import { useDashboard } from "components/Dashboard/DashboardProvider"
 import { useOrganizationId } from "hooks/useOrganizationId"
 import { FC } from "react"
 import { Helmet } from "react-helmet-async"
@@ -27,13 +28,17 @@ export const TemplateSettingsPage: FC = () => {
     saveTemplateSettingsError,
     getTemplateError,
   } = state.context
+  const { entitlements } = useDashboard()
+  const canSetMaxTTL =
+    entitlements.features["advanced_template_scheduling"].enabled
 
   return (
     <>
       <Helmet>
         <title>{pageTitle(t("title"))}</title>
       </Helmet>
       <TemplateSettingsPageView
+        canSetMaxTTL={canSetMaxTTL}
         isSubmitting={state.hasTag("submitting")}
         template={template}
         errors={{