fix(site): set min and max attributes for workspace number parameters

toshikish · toshikish · commit 6cff3591a3ae · 2024-10-28T17:14:57.000+09:00
diff --git 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
@@ -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<RichParameterInputProps> = ({
 					onChange={onChange}
 					size={size}
 					parameter={parameter}
+					parameterAutofill={parameterAutofill}
 				/>
 				{!parameter.ephemeral &&
 					autofillSource === "user_history" &&
@@ -250,6 +252,7 @@ const RichParameterField: FC<RichParameterInputProps> = ({
 	disabled,
 	onChange,
 	parameter,
+	parameterAutofill,
 	value,
 	size,
 	...props
@@ -375,6 +378,30 @@ const RichParameterField: FC<RichParameterInputProps> = ({
 		);
 	}
 
+	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<RichParameterInputProps> = ({
 			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
@@ -112,6 +112,9 @@ export const WorkspaceParametersForm: FC<WorkspaceParameterFormProps> = ({
 											);
 										}}
 										parameter={parameter}
+										parameterAutofill={autofillParams?.find(
+											({ name }) => name === parameter.name,
+										)}
 									/>
 								) : null,
 							)}
