From 4d449ae7ef7dcb891704f9b591bc91f13c80b54b Mon Sep 17 00:00:00 2001 From: Ammar Bandukwala Date: Thu, 18 Aug 2022 21:50:28 +0000 Subject: [PATCH 1/4] web: use seconds in max TTL input Milliseconds are more difficult to deal with due to all of the zeros. Also, describe this feature as "auto-stop" to be consistent with our Workspace page UI and CLI. "ttl" is our backend lingo which should eventually be updated. --- .../TemplateSettingsForm.tsx | 24 ++++++++++++------- 1 file changed, 16 insertions(+), 8 deletions(-) diff --git a/site/src/pages/TemplateSettingsPage/TemplateSettingsForm.tsx b/site/src/pages/TemplateSettingsPage/TemplateSettingsForm.tsx index 0598d0d87b946..ba7566a770502 100644 --- a/site/src/pages/TemplateSettingsPage/TemplateSettingsForm.tsx +++ b/site/src/pages/TemplateSettingsPage/TemplateSettingsForm.tsx @@ -10,9 +10,9 @@ import * as Yup from "yup" export const Language = { nameLabel: "Name", descriptionLabel: "Description", - maxTtlLabel: "Max TTL", + maxTtlLabel: "Auto-stop limit", // 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 + initialTouched?: FormikTouched } export const TemplateSettingsForm: FC = ({ @@ -40,19 +45,22 @@ export const TemplateSettingsForm: FC = ({ isSubmitting, initialTouched, }) => { - const form: FormikContextType = useFormik({ + const form: FormikContextType = useFormik({ 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(form, error) + const getFieldHelpers = getFormHelpersWithError(form, error) return (
@@ -78,7 +86,7 @@ export const TemplateSettingsForm: FC = ({ /> Date: Fri, 19 Aug 2022 19:56:20 +0000 Subject: [PATCH 2/4] Make convertion in handlers --- site/src/pages/TemplateSettingsPage/TemplateSettingsForm.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/site/src/pages/TemplateSettingsPage/TemplateSettingsForm.tsx b/site/src/pages/TemplateSettingsPage/TemplateSettingsForm.tsx index 82283604d31a2..6bdf1a84a52cd 100644 --- a/site/src/pages/TemplateSettingsPage/TemplateSettingsForm.tsx +++ b/site/src/pages/TemplateSettingsPage/TemplateSettingsForm.tsx @@ -116,7 +116,9 @@ export const TemplateSettingsForm: FC = ({ // Display seconds from ms value={form.values.max_ttl_ms ? form.values.max_ttl_ms / 1000 : undefined} // Convert ms to seconds - onChange={(event) => Number(event.currentTarget.value) * 1000} + onChange={(event) => + form.setFieldValue("max_ttl_ms", Number(event.currentTarget.value) * 1000) + } /> From 78d8834058185cd540b17042cc337caa005848b3 Mon Sep 17 00:00:00 2001 From: Bruno Quaresma Date: Fri, 19 Aug 2022 19:57:45 +0000 Subject: [PATCH 3/4] Remove unecessary const --- site/src/pages/TemplateSettingsPage/TemplateSettingsForm.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/site/src/pages/TemplateSettingsPage/TemplateSettingsForm.tsx b/site/src/pages/TemplateSettingsPage/TemplateSettingsForm.tsx index 6bdf1a84a52cd..775fe1641f754 100644 --- a/site/src/pages/TemplateSettingsPage/TemplateSettingsForm.tsx +++ b/site/src/pages/TemplateSettingsPage/TemplateSettingsForm.tsx @@ -57,7 +57,6 @@ export const TemplateSettingsForm: FC = ({ const getFieldHelpers = getFormHelpersWithError(form, error) const styles = useStyles() const hasIcon = form.values.icon && form.values.icon !== "" - const maxTtlMsFieldHelpers = getFieldHelpers("max_ttl_ms") return ( @@ -106,7 +105,7 @@ export const TemplateSettingsForm: FC = ({ /> Date: Mon, 22 Aug 2022 20:25:42 +0000 Subject: [PATCH 4/4] Fix uncontrolled prop issue --- site/src/pages/TemplateSettingsPage/TemplateSettingsForm.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/src/pages/TemplateSettingsPage/TemplateSettingsForm.tsx b/site/src/pages/TemplateSettingsPage/TemplateSettingsForm.tsx index 775fe1641f754..99e9071d37c92 100644 --- a/site/src/pages/TemplateSettingsPage/TemplateSettingsForm.tsx +++ b/site/src/pages/TemplateSettingsPage/TemplateSettingsForm.tsx @@ -113,7 +113,7 @@ export const TemplateSettingsForm: FC = ({ label={Language.maxTtlLabel} variant="outlined" // Display seconds from ms - value={form.values.max_ttl_ms ? form.values.max_ttl_ms / 1000 : undefined} + value={form.values.max_ttl_ms ? form.values.max_ttl_ms / 1000 : ""} // Convert ms to seconds onChange={(event) => form.setFieldValue("max_ttl_ms", Number(event.currentTarget.value) * 1000)