From 6cff3591a3ae291eab9fca23bd0ecbec9171a2b1 Mon Sep 17 00:00:00 2001 From: toshikish Date: Tue, 22 Oct 2024 16:53:32 +0900 Subject: [PATCH 1/5] fix(site): set min and max attributes for workspace number parameters --- .../RichParameterInput.stories.tsx | 32 +++++++++++++++++++ .../RichParameterInput/RichParameterInput.tsx | 28 ++++++++++++++++ .../WorkspaceParametersForm.tsx | 3 ++ 3 files changed, 63 insertions(+) diff --git a/site/src/components/RichParameterInput/RichParameterInput.stories.tsx b/site/src/components/RichParameterInput/RichParameterInput.stories.tsx index dbeac4dbdcb72..3ec838272e7c6 100644 --- a/site/src/components/RichParameterInput/RichParameterInput.stories.tsx +++ b/site/src/components/RichParameterInput/RichParameterInput.stories.tsx @@ -99,6 +99,38 @@ export const NumberType: Story = { }, }; +export const NumberTypeWithIncreasingMonotonicity: Story = { + args: { + value: 4, + id: "number_parameter", + parameter: createTemplateVersionParameter({ + name: "number_parameter", + type: "number", + description: "Numeric parameter", + default_value: "", + validation_min: 0, + validation_max: 10, + validation_monotonic: "increasing", + }), + }, +}; + +export const NumberTypeWithDecreasingMonotonicity: Story = { + args: { + value: 4, + id: "number_parameter", + parameter: createTemplateVersionParameter({ + name: "number_parameter", + type: "number", + description: "Numeric parameter", + default_value: "", + validation_min: 0, + validation_max: 10, + validation_monotonic: "decreasing", + }), + }, +}; + export const BooleanType: Story = { args: { value: "false", diff --git a/site/src/components/RichParameterInput/RichParameterInput.tsx b/site/src/components/RichParameterInput/RichParameterInput.tsx index 92c7b528936a9..701cea9512f8f 100644 --- a/site/src/components/RichParameterInput/RichParameterInput.tsx +++ b/site/src/components/RichParameterInput/RichParameterInput.tsx @@ -18,6 +18,7 @@ import type { AutofillSource, } from "utils/richParameters"; import { MultiTextField } from "./MultiTextField"; +import {InputBaseComponentProps} from "@mui/material"; const isBoolean = (parameter: TemplateVersionParameter) => { return parameter.type === "bool"; @@ -217,6 +218,7 @@ export const RichParameterInput: FC = ({ onChange={onChange} size={size} parameter={parameter} + parameterAutofill={parameterAutofill} /> {!parameter.ephemeral && autofillSource === "user_history" && @@ -250,6 +252,7 @@ const RichParameterField: FC = ({ disabled, onChange, parameter, + parameterAutofill, value, size, ...props @@ -375,6 +378,30 @@ const RichParameterField: FC = ({ ); } + let inputProps: InputBaseComponentProps = {}; + if (parameter.type === "number") { + switch (parameter.validation_monotonic) { + case "increasing": + inputProps = { + max: parameter.validation_max, + min: parameterAutofill?.value, + }; + break; + case "decreasing": + inputProps = { + max: parameterAutofill?.value, + min: parameter.validation_min, + }; + break; + default: + inputProps = { + max: parameter.validation_max, + min: parameter.validation_min, + }; + break; + } + } + // A text field can technically handle all cases! // As other cases become more prominent (like filtering for numbers), // we should break this out into more finely scoped input fields. @@ -389,6 +416,7 @@ const RichParameterField: FC = ({ required={parameter.required} placeholder={parameter.default_value} value={value} + inputProps={inputProps} onChange={(event) => { onChange(event.target.value); }} diff --git a/site/src/pages/WorkspaceSettingsPage/WorkspaceParametersPage/WorkspaceParametersForm.tsx b/site/src/pages/WorkspaceSettingsPage/WorkspaceParametersPage/WorkspaceParametersForm.tsx index db0667ea8eba7..658b998a7b86c 100644 --- a/site/src/pages/WorkspaceSettingsPage/WorkspaceParametersPage/WorkspaceParametersForm.tsx +++ b/site/src/pages/WorkspaceSettingsPage/WorkspaceParametersPage/WorkspaceParametersForm.tsx @@ -112,6 +112,9 @@ export const WorkspaceParametersForm: FC = ({ ); }} parameter={parameter} + parameterAutofill={autofillParams?.find( + ({ name }) => name === parameter.name, + )} /> ) : null, )} From 6253b974fb2c9321662c5693aa4a10a6cdfde0ea Mon Sep 17 00:00:00 2001 From: toshikish Date: Tue, 22 Oct 2024 18:12:13 +0900 Subject: [PATCH 2/5] Fix import --- site/src/components/RichParameterInput/RichParameterInput.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/src/components/RichParameterInput/RichParameterInput.tsx b/site/src/components/RichParameterInput/RichParameterInput.tsx index 701cea9512f8f..55e29d4ced13b 100644 --- a/site/src/components/RichParameterInput/RichParameterInput.tsx +++ b/site/src/components/RichParameterInput/RichParameterInput.tsx @@ -1,5 +1,6 @@ import type { Interpolation, Theme } from "@emotion/react"; import ErrorOutline from "@mui/icons-material/ErrorOutline"; +import { InputBaseComponentProps } from "@mui/material"; import Button from "@mui/material/Button"; import FormControlLabel from "@mui/material/FormControlLabel"; import FormHelperText from "@mui/material/FormHelperText"; @@ -18,7 +19,6 @@ import type { AutofillSource, } from "utils/richParameters"; import { MultiTextField } from "./MultiTextField"; -import {InputBaseComponentProps} from "@mui/material"; const isBoolean = (parameter: TemplateVersionParameter) => { return parameter.type === "bool"; From 6c6243131b4c89d9a628536618a5a824465e787e Mon Sep 17 00:00:00 2001 From: toshikish Date: Mon, 28 Oct 2024 17:41:47 +0900 Subject: [PATCH 3/5] Fix lint error --- site/src/components/RichParameterInput/RichParameterInput.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/src/components/RichParameterInput/RichParameterInput.tsx b/site/src/components/RichParameterInput/RichParameterInput.tsx index 55e29d4ced13b..2d8b6fd3b59ef 100644 --- a/site/src/components/RichParameterInput/RichParameterInput.tsx +++ b/site/src/components/RichParameterInput/RichParameterInput.tsx @@ -1,6 +1,6 @@ import type { Interpolation, Theme } from "@emotion/react"; import ErrorOutline from "@mui/icons-material/ErrorOutline"; -import { InputBaseComponentProps } from "@mui/material"; +import type { InputBaseComponentProps } from "@mui/material/InputBase"; import Button from "@mui/material/Button"; import FormControlLabel from "@mui/material/FormControlLabel"; import FormHelperText from "@mui/material/FormHelperText"; From 7d8899916efb38a63b016b9ef04c7aec1d5db6f2 Mon Sep 17 00:00:00 2001 From: toshikish Date: Tue, 29 Oct 2024 10:16:06 +0900 Subject: [PATCH 4/5] Fix test --- .../WorkspaceParametersPage/WorkspaceParametersPage.test.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/site/src/pages/WorkspaceSettingsPage/WorkspaceParametersPage/WorkspaceParametersPage.test.tsx b/site/src/pages/WorkspaceSettingsPage/WorkspaceParametersPage/WorkspaceParametersPage.test.tsx index 4c97a40e33139..667f529d9e96a 100644 --- a/site/src/pages/WorkspaceSettingsPage/WorkspaceParametersPage/WorkspaceParametersPage.test.tsx +++ b/site/src/pages/WorkspaceSettingsPage/WorkspaceParametersPage/WorkspaceParametersPage.test.tsx @@ -60,7 +60,7 @@ test("Submit the workspace settings page successfully", async () => { { exact: false }, ); await user.clear(parameter2); - await user.type(parameter2, "1"); + await user.type(parameter2, "3"); await user.click( within(form).getByRole("button", { name: "Submit and restart" }), ); @@ -70,7 +70,7 @@ test("Submit the workspace settings page successfully", async () => { transition: "start", rich_parameter_values: [ { name: MockTemplateVersionParameter1.name, value: "new-value" }, - { name: MockTemplateVersionParameter2.name, value: "1" }, + { name: MockTemplateVersionParameter2.name, value: "3" }, ], }); }); From cfc1bdec2a8650909be43e2a8f5b8bbf2ffaf568 Mon Sep 17 00:00:00 2001 From: toshikish Date: Tue, 29 Oct 2024 10:17:12 +0900 Subject: [PATCH 5/5] Fix import order --- site/src/components/RichParameterInput/RichParameterInput.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/src/components/RichParameterInput/RichParameterInput.tsx b/site/src/components/RichParameterInput/RichParameterInput.tsx index 2d8b6fd3b59ef..9919fca44b592 100644 --- a/site/src/components/RichParameterInput/RichParameterInput.tsx +++ b/site/src/components/RichParameterInput/RichParameterInput.tsx @@ -1,9 +1,9 @@ import type { Interpolation, Theme } from "@emotion/react"; import ErrorOutline from "@mui/icons-material/ErrorOutline"; -import type { InputBaseComponentProps } from "@mui/material/InputBase"; import Button from "@mui/material/Button"; import FormControlLabel from "@mui/material/FormControlLabel"; import FormHelperText from "@mui/material/FormHelperText"; +import type { InputBaseComponentProps } from "@mui/material/InputBase"; import Radio from "@mui/material/Radio"; import RadioGroup from "@mui/material/RadioGroup"; import TextField, { type TextFieldProps } from "@mui/material/TextField";