chore: mark parameters as required (#17551)

jaaydenh · web-flow · commit e562e3c88223 · 2025-04-24T17:14:21.000-04:00
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" />
diff --git 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
 					}
