feat: Add required field indicator to node parameters

- Implemented visual indicator (*) for required node parameters
- Updated custom parameter title rendering to show required status
- Enhanced UI to provide clearer input requirements
This commit is contained in:
deon-sanchez
2025-03-06 15:57:12 -07:00
parent a3ea66ed66
commit 9ea44aca47
2 changed files with 6 additions and 1 deletions

View File

@ -147,13 +147,15 @@ export const NodeDialog: React.FC<NodeDialogProps> = ({
<div className="flex flex-col gap-5 overflow-y-auto px-5">
{Object.entries(dialogTemplate).map(([fieldKey, fieldValue]) => (
<div key={fieldKey}>
<div>
<div className="flex items-center gap-2">
{getCustomParameterTitle({
title:
(fieldValue as { display_name: string })?.display_name ??
"",
nodeId,
isFlexView: false,
required:
(fieldValue as { required: boolean })?.required ?? false,
})}
</div>
<ParameterRenderComponent

View File

@ -49,10 +49,12 @@ export function getCustomParameterTitle({
title,
nodeId,
isFlexView,
required,
}: {
title: string;
nodeId: string;
isFlexView: boolean;
required: boolean;
}) {
return (
<div className={cn(isFlexView && "max-w-56 truncate")}>
@ -62,6 +64,7 @@ export function getCustomParameterTitle({
>
{title}
</span>
{required && <span className="text-red-500">*</span>}
</div>
);
}