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"
/>
This commit is contained in:
Jaayden Halko
2025-04-24 17:14:21 -04:00
committed by GitHub
parent fc921a584f
commit e562e3c882
@@ -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
}