Skip to content

Commit d0ea90b

Browse files
Kshitiz1403Kshitiz1403
committed
feat(NodePropertiesPanel): add dropdown inputs for function and retry strategy selection
Add support for dropdown inputs in NodePropertiesPanel when enableFunctionDropdown or enableRetryDropdown props are true. This provides a better user experience by allowing selection from predefined lists of functions and retry strategies instead of manual text input.
1 parent fde8780 commit d0ea90b

File tree

1 file changed

+117
-39
lines changed

1 file changed

+117
-39
lines changed

‎src/lib/src/components/editors/NodePropertiesPanel.js‎

Lines changed: 117 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,11 @@ import './NodePropertiesPanel.css';
1515
* @param {Function} props.onReset - Callback to reset changes
1616
* @param {string} props.className - Additional CSS classes
1717
* @param {Object} props.style - Inline styles
18+
* @param {boolean} props.autoSave - Whether to auto-save changes
19+
* @param {boolean} props.enableFunctionDropdown - Whether to show function names as dropdown instead of text input
20+
* @param {Array<string>} props.availableFunctions - List of available function names for dropdown
21+
* @param {boolean} props.enableRetryDropdown - Whether to show retry strategies as dropdown instead of text input
22+
* @param {Array<string>} props.availableRetryStrategies - List of available retry strategy names for dropdown
1823
*/
1924
export function NodePropertiesPanel({
2025
isOpen = false,
@@ -28,6 +33,10 @@ export function NodePropertiesPanel({
2833
className = '',
2934
style = {},
3035
autoSave = false,
36+
enableFunctionDropdown = false,
37+
availableFunctions = [],
38+
enableRetryDropdown = false,
39+
availableRetryStrategies = [],
3140
}) {
3241
if (!isOpen || !node) {
3342
return null;
@@ -328,27 +337,64 @@ export function NodePropertiesPanel({
328337
}}>
329338
Function Name
330339
</label>
331-
<input
332-
type="text"
333-
value={action.functionRef?.refName || ''}
334-
onChange={(e) => {
335-
const newActions = [...(formData.actions || [])];
336-
if (!newActions[index].functionRef) {
337-
newActions[index].functionRef = {};
338-
}
339-
newActions[index].functionRef.refName = e.target.value;
340-
handleFieldChange('actions', newActions);
341-
}}
342-
placeholder="Enter function name"
343-
style={{
344-
width: '100%',
345-
padding: '6px 8px',
346-
border: '1px solid #d1d5db',
347-
borderRadius: '4px',
348-
fontSize: '12px',
349-
outline: 'none'
350-
}}
351-
/>
340+
{enableFunctionDropdown && availableFunctions.length > 0 ? (
341+
<select
342+
value={action.functionRef?.refName || ''}
343+
onChange={(e) => {
344+
const newActions = [...(formData.actions || [])];
345+
if (!newActions[index].functionRef) {
346+
newActions[index].functionRef = {};
347+
}
348+
newActions[index].functionRef.refName = e.target.value;
349+
handleFieldChange('actions', newActions);
350+
}}
351+
disabled={!isNodeEditable}
352+
style={{
353+
width: '100%',
354+
padding: '6px 8px',
355+
border: '1px solid #d1d5db',
356+
borderRadius: '4px',
357+
fontSize: '12px',
358+
outline: 'none',
359+
backgroundColor: isNodeEditable ? 'white' : '#f9fafb',
360+
color: isNodeEditable ? '#374151' : '#9ca3af',
361+
cursor: isNodeEditable ? 'pointer' : 'not-allowed'
362+
}}
363+
>
364+
<option value="">Select a function</option>
365+
{availableFunctions.map((funcName) => (
366+
<option key={funcName} value={funcName}>
367+
{funcName}
368+
</option>
369+
))}
370+
</select>
371+
) : (
372+
<input
373+
type="text"
374+
value={action.functionRef?.refName || ''}
375+
onChange={(e) => {
376+
const newActions = [...(formData.actions || [])];
377+
if (!newActions[index].functionRef) {
378+
newActions[index].functionRef = {};
379+
}
380+
newActions[index].functionRef.refName = e.target.value;
381+
handleFieldChange('actions', newActions);
382+
}}
383+
disabled={!isNodeEditable}
384+
placeholder={enableFunctionDropdown ? "No functions available" : "Enter function name"}
385+
style={{
386+
width: '100%',
387+
padding: '6px 8px',
388+
border: '1px solid #d1d5db',
389+
borderRadius: '4px',
390+
fontSize: '12px',
391+
outline: 'none',
392+
backgroundColor: isNodeEditable ? 'white' : '#f9fafb',
393+
color: isNodeEditable ? '#374151' : '#9ca3af',
394+
cursor: isNodeEditable ? 'text' : 'not-allowed'
395+
}}
396+
/>
397+
)}
352398
</div>
353399

354400
{/* Arguments */}
@@ -417,24 +463,56 @@ export function NodePropertiesPanel({
417463
}}>
418464
Retry Reference
419465
</label>
420-
<input
421-
type="text"
422-
value={action.retryRef || ''}
423-
onChange={(e) => {
424-
const newActions = [...(formData.actions || [])];
425-
newActions[index].retryRef = e.target.value;
426-
handleFieldChange('actions', newActions);
427-
}}
428-
placeholder="Enter retry strategy name"
429-
style={{
430-
width: '100%',
431-
padding: '6px 8px',
432-
border: '1px solid #d1d5db',
433-
borderRadius: '4px',
434-
fontSize: '12px',
435-
outline: 'none'
436-
}}
437-
/>
466+
{enableRetryDropdown && availableRetryStrategies && availableRetryStrategies.length > 0 ? (
467+
<select
468+
value={action.retryRef || ''}
469+
onChange={(e) => {
470+
const newActions = [...(formData.actions || [])];
471+
newActions[index].retryRef = e.target.value;
472+
handleFieldChange('actions', newActions);
473+
}}
474+
disabled={!isNodeEditable}
475+
style={{
476+
width: '100%',
477+
padding: '6px 8px',
478+
border: '1px solid #d1d5db',
479+
borderRadius: '4px',
480+
fontSize: '12px',
481+
outline: 'none',
482+
backgroundColor: !isNodeEditable ? '#f9fafb' : 'white',
483+
color: !isNodeEditable ? '#6b7280' : 'inherit'
484+
}}
485+
>
486+
<option value="">Select retry strategy</option>
487+
{availableRetryStrategies.map((strategy) => (
488+
<option key={strategy} value={strategy}>
489+
{strategy}
490+
</option>
491+
))}
492+
</select>
493+
) : (
494+
<input
495+
type="text"
496+
value={action.retryRef || ''}
497+
onChange={(e) => {
498+
const newActions = [...(formData.actions || [])];
499+
newActions[index].retryRef = e.target.value;
500+
handleFieldChange('actions', newActions);
501+
}}
502+
placeholder="Enter retry strategy name"
503+
disabled={!isNodeEditable}
504+
style={{
505+
width: '100%',
506+
padding: '6px 8px',
507+
border: '1px solid #d1d5db',
508+
borderRadius: '4px',
509+
fontSize: '12px',
510+
outline: 'none',
511+
backgroundColor: !isNodeEditable ? '#f9fafb' : 'white',
512+
color: !isNodeEditable ? '#6b7280' : 'inherit'
513+
}}
514+
/>
515+
)}
438516
</div>
439517
</div>
440518
))}

0 commit comments

Comments
 (0)