Nov 22, 2024 · Oct 22, 2024 · Oct 22, 2024 · Oct 28, 2024 · Oct 29, 2024 · Oct 29, 2024
diff --git a/site/src/components/RichParameterInput/RichParameterInput.stories.tsx b/site/src/components/RichParameterInput/RichParameterInput.stories.tsx
 },
 };

 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
 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";
 onChange={onChange}
 size={size}
 parameter={parameter}
 parameterAutofill={parameterAutofill}
 />
 {!parameter.ephemeral &&
 autofillSource === "user_history" &&
 disabled,
 onChange,
 parameter,
 parameterAutofill,
 value,
 size,
 ...props
 );
 }

 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.
 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
 );
 }}
 parameter={parameter}
 parameterAutofill={autofillParams?.find(
 ({ name }) => name === parameter.name,
 )}
 />
 ) : null,
 )}
diff --git a/.../src/pages/WorkspaceSettingsPage/WorkspaceParametersPage/WorkspaceParametersPage.test.tsx b/.../src/pages/WorkspaceSettingsPage/WorkspaceParametersPage/WorkspaceParametersPage.test.tsx
 { 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" }),
 );
 transition: "start",
 rich_parameter_values: [
 { name: MockTemplateVersionParameter1.name, value: "new-value" },
 { name: MockTemplateVersionParameter2.name, value: "1" },
 { name: MockTemplateVersionParameter2.name, value: "3" },
 ],
 });
 });
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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",
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -3,6 +3,7 @@ import ErrorOutline from "@mui/icons-material/ErrorOutline";
		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";
Expand DownExpand Up		@@ -217,6 +218,7 @@ export const RichParameterInput: FC<RichParameterInputProps> = ({
		onChange={onChange}
		size={size}
		parameter={parameter}
		parameterAutofill={parameterAutofill}
		/>
		{!parameter.ephemeral &&
		autofillSource === "user_history" &&
Expand DownExpand Up		@@ -250,6 +252,7 @@ const RichParameterField: FC<RichParameterInputProps> = ({
		disabled,
		onChange,
		parameter,
		parameterAutofill,
		value,
		size,
		...props
Expand DownExpand Up		@@ -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.
Expand All		@@ -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);
		}}
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -112,6 +112,9 @@ export const WorkspaceParametersForm: FC<WorkspaceParameterFormProps> = ({
		);
		}}
		parameter={parameter}
		parameterAutofill={autofillParams?.find(
		({ name }) => name === parameter.name,
		)}
		/>
		) : null,
		)}
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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" }),
		);
Expand All		@@ -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" },
		],
		});
		});
Expand Down