ui: add scenario reorder buttons for condition agent#5720
ui: add scenario reorder buttons for condition agent#5720TianHougege wants to merge 1 commit intoFlowiseAI:mainfrom
Conversation
Summary of ChangesHello @TianHougege, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed! This pull request significantly improves the usability of the 'Condition Agent' component by adding intuitive reordering capabilities for its scenarios. By providing simple Up/Down controls, users can now easily adjust the sequence of their conditional logic. The implementation is robust, focusing on stability during UI updates and ensuring the feature is applied precisely where needed without unintended side effects on other array-based inputs. Highlights
Changelog
Activity
Using Gemini Code AssistThe full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips. Invoking Gemini You can request assistance from Gemini at any point by creating a comment using either
Customization To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a Limitations & Feedback Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here. You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension. Footnotes
|
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request introduces reordering functionality for Condition Agent scenarios using simple up/down buttons. The implementation correctly uses stable keys to prevent rendering issues during reordering, which is a great approach. My review includes a couple of suggestions to improve the code's design and maintainability. Specifically, I recommend refactoring some duplicated code into a helper function and suggest a more flexible, prop-based approach to enable the reorder feature, which would make the ArrayRenderer component more reusable.
| const isConditionAgentNode = data?.name === 'conditionAgentV2' || data?.name === 'conditionAgentAgentflow' | ||
|
|
||
| // Whitelist scenario field names across variants (keep this minimal) | ||
| // Include both legacy and UI field name for compatibility | ||
| const scenarioFieldNames = new Set(['conditionAgentScenarios', 'ConditionAgentScenarios']) | ||
|
|
||
| const isScenarioField = scenarioFieldNames.has(inputParam?.name) | ||
| const enableReorder = !isDocStore && isConditionAgentNode && isScenarioField |
There was a problem hiding this comment.
Hardcoding node names (conditionAgentV2, conditionAgentAgentflow) and input parameter names (conditionAgentScenarios, ConditionAgentScenarios) makes the ArrayRenderer component less reusable and tightly coupled to specific nodes. A more flexible approach would be to control this behavior via a prop on the inputParam object, for example reorderable: true. This would decouple ArrayRenderer and make it a more generic component that can be used for any array input that needs reordering capabilities.
| const swapInArray = (arr, i, j) => { | ||
| const next = [...arr] | ||
| ;[next[i], next[j]] = [next[j], next[i]] | ||
| return next | ||
| } |
There was a problem hiding this comment.
To avoid duplicating the key generation logic found in useEffect (lines 130-141) and handleAddItem (lines 221-229), you can extract it into a single createKey helper function here. This function can then be reused in both places, improving code reuse and maintainability.
const swapInArray = (arr, i, j) => {
const next = [...arr]
;[next[i], next[j]] = [next[j], next[i]]
return next
}
const createKey = () => {
try {
return crypto.randomUUID()
} catch (e) {
return 'key-' + Date.now() + '-' + Math.random()
}
}1 participant
What
Add lightweight Up/Down controls to reorder Condition Agent scenarios.
Why
Up/Down buttons keep the behavior simple and predictable (no extra drag-and-drop deps).
Notes
inputParam.name), so other array inputs are unaffected.itemKeys) during reorder to avoid input/focus mismatch caused bykey={index}.Demo
Kapture.2026-02-08.at.13.07.51.mp4
Closes #5699