web: use seconds in max TTL input

ammario · ammario · commit b7fcf03e787e · 2022-08-19T03:08:57.000Z
Milliseconds are more difficult to deal with due to
all of the zeros.
diff --git a/site/src/pages/TemplateSettingsPage/TemplateSettingsForm.tsx b/site/src/pages/TemplateSettingsPage/TemplateSettingsForm.tsx
@@ -12,7 +12,7 @@ export const Language = {
   descriptionLabel: "Description",
   maxTtlLabel: "Max TTL",
   // This is the same from the CLI on https://github.com/coder/coder/blob/546157b63ef9204658acf58cb653aa9936b70c49/cli/templateedit.go#L59
-  maxTtlHelperText: "Edit the template maximum time before shutdown in milliseconds",
+  maxTtlHelperText: "Edit the template maximum time before shutdown in seconds",
   formAriaLabel: "Template settings form",
 }
 
@@ -21,6 +21,11 @@ export const validationSchema = Yup.object({
   description: Yup.string(),
   max_ttl_ms: Yup.number(),
 })
+export interface UpdateTemplateFormMeta {
+  readonly name?: string
+  readonly description?: string
+  readonly max_ttl?: number
+}
 
 export interface TemplateSettingsForm {
   template: Template
@@ -29,7 +34,7 @@ export interface TemplateSettingsForm {
   isSubmitting: boolean
   error?: unknown
   // Helpful to show field errors on Storybook
-  initialTouched?: FormikTouched<UpdateTemplateMeta>
+  initialTouched?: FormikTouched<UpdateTemplateFormMeta>
 }
 
 export const TemplateSettingsForm: FC<TemplateSettingsForm> = ({
@@ -40,19 +45,22 @@ export const TemplateSettingsForm: FC<TemplateSettingsForm> = ({
   isSubmitting,
   initialTouched,
 }) => {
-  const form: FormikContextType<UpdateTemplateMeta> = useFormik<UpdateTemplateMeta>({
+  const form: FormikContextType<UpdateTemplateFormMeta> = useFormik<UpdateTemplateFormMeta>({
     initialValues: {
       name: template.name,
       description: template.description,
-      max_ttl_ms: template.max_ttl_ms,
+      max_ttl: template.max_ttl_ms / 1000,
     },
     validationSchema,
     onSubmit: (data) => {
-      onSubmit(data)
+      onSubmit({
+        ...data,
+        max_ttl_ms: data.max_ttl !== undefined ? data.max_ttl * 1000 : undefined,
+      })
     },
     initialTouched,
   })
-  const getFieldHelpers = getFormHelpersWithError<UpdateTemplateMeta>(form, error)
+  const getFieldHelpers = getFormHelpersWithError<UpdateTemplateFormMeta>(form, error)
 
   return (
     <form onSubmit={form.handleSubmit} aria-label={Language.formAriaLabel}>
@@ -78,7 +86,7 @@ export const TemplateSettingsForm: FC<TemplateSettingsForm> = ({
         />
 
         <TextField
-          {...getFieldHelpers("max_ttl_ms")}
+          {...getFieldHelpers("max_ttl")}
           helperText={Language.maxTtlHelperText}
           disabled={isSubmitting}
           fullWidth
diff --git a/site/src/pages/TemplateSettingsPage/TemplateSettingsPage.test.tsx b/site/src/pages/TemplateSettingsPage/TemplateSettingsPage.test.tsx
@@ -22,7 +22,7 @@ const renderTemplateSettingsPage = async () => {
 const fillAndSubmitForm = async ({
   name,
   description,
-  max_ttl_ms,
+  max_ttl_ms: max_ttl_ms,
 }: Omit<Required<UpdateTemplateMeta>, "min_autostart_interval_ms">) => {
   const nameField = await screen.findByLabelText(FormLanguage.nameLabel)
   await userEvent.clear(nameField)
