From e562e3c882234bd7cd78b284b92d8029b97f4956 Mon Sep 17 00:00:00 2001
From: Jaayden Halko <jaayden.halko@gmail.com>
Date: Thu, 24 Apr 2025 22:14:21 +0100
Subject: [PATCH] chore: mark parameters as required (#17551)

This adds a red asterisk next to a parameter name if it is required and
marks passes the parameter required value to input and textarea form
controls.

The multi-select combobox needs additional work (in a separate PR) so
that it can handle the required prop correctly for form submit.

<img width="544" alt="Screenshot 2025-04-24 at 00 02 10"
src="https://github.com/user-attachments/assets/5c6758d3-41a4-444d-b7e9-e1fe011703d3"
/>
---
 .../workspaces/DynamicParameter/DynamicParameter.tsx  | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/site/src/modules/workspaces/DynamicParameter/DynamicParameter.tsx b/site/src/modules/workspaces/DynamicParameter/DynamicParameter.tsx
index c09317094a..d93933228b 100644
--- a/site/src/modules/workspaces/DynamicParameter/DynamicParameter.tsx
+++ b/site/src/modules/workspaces/DynamicParameter/DynamicParameter.tsx
@@ -95,8 +95,12 @@ const ParameterLabel: FC<ParameterLabelProps> = ({ parameter, isPreset }) => {
 
 			<div className="flex flex-col w-full gap-1">
 				<Label className="flex gap-2 flex-wrap text-sm font-medium">
-					{displayName}
-
+					<span className="flex">
+						{displayName}
+						{!parameter.required && (
+							<span className="text-content-destructive">*</span>
+						)}
+					</span>
 					{parameter.mutable && (
 						<TooltipProvider delayDuration={100}>
 							<Tooltip>
@@ -169,6 +173,7 @@ const ParameterField: FC<ParameterFieldProps> = ({
 					onValueChange={onChange}
 					defaultValue={defaultValue}
 					disabled={disabled}
+					required={parameter.required}
 				>
 					<SelectTrigger>
 						<SelectValue
@@ -325,6 +330,7 @@ const ParameterField: FC<ParameterFieldProps> = ({
 					placeholder={
 						(parameter.styling as { placeholder?: string })?.placeholder
 					}
+					required={parameter.required}
 				/>
 			);
 
@@ -351,6 +357,7 @@ const ParameterField: FC<ParameterFieldProps> = ({
 					defaultValue={defaultValue}
 					onChange={(e) => onChange(e.target.value)}
 					disabled={disabled}
+					required={parameter.required}
 					placeholder={
 						(parameter.styling as { placeholder?: string })?.placeholder
 					}