mirror of
https://github.com/langflow-ai/langflow.git
synced 2026-07-28 01:33:31 +08:00
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:
@ -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
|
||||
|
||||
@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user