fix: enhance dropdown component with refresh button and clean up parameter render logic

[deon-sanchez]

This pull request introduces significant refactoring and feature updates to dropdown components and related UI elements, focusing on improving code maintainability, consistency, and user experience. Key changes include replacing DropdownMenu with Popover and Command components, enhancing dropdown styling and behavior, and removing the RefreshParameterComponent in favor of a more streamlined implementation.

Refactoring and Component Replacement:

• Replaced DropdownMenu with Popover and Command components in OutputComponent, improving accessibility and alignment with the design system (src/frontend/src/CustomNodes/GenericNode/components/OutputComponent/index.tsx). [1] [2] [3]
• Removed the RefreshParameterComponent and its usage in ParameterRenderComponent, consolidating its functionality into other components for simplicity (src/frontend/src/components/core/parameterRenderComponent/components/refreshParameterComponent/index.tsx, [1] [2]. [3]

Styling and Behavior Enhancements:

• Updated dropdown styling for better visual consistency, including adjustments to padding, font size, and hover states (src/frontend/src/components/core/dropdownComponent/index.tsx). [1] [2] [3] [4]
• Improved handling of metadata display in dropdown options, ensuring proper layout and truncation when metadata is present (src/frontend/src/components/core/dropdownComponent/index.tsx). [1] [2] [3]

New Features and Functional Improvements:

• Added a sticky footer with a refresh button to dropdowns when dialogInputs are not present, enhancing usability for long lists (src/frontend/src/components/core/dropdownComponent/index.tsx).
• Reintroduced custom option dialogs with updated styling and behavior, ensuring compatibility with the new dropdown structure (src/frontend/src/components/core/dropdownComponent/index.tsx).

These changes collectively improve the maintainability, accessibility, and user experience of dropdown components across the application.

FIX

Screen.Recording.2025-06-16.at.2.19.08.PM.mov

ISSUE

Screen.Recording.2025-06-16.at.2.27.09.PM.mov

[coderabbitai]

Important

Review skipped

Auto incremental reviews are disabled on this repository.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Walkthrough

The changes introduce a configurable "Refresh list" button in the dropdown component, reorganize its rendering logic, and adjust layout classes. The parameter render component disables a wrapper by commenting it out. Several test files are updated to improve code readability by reformatting chained method calls into multi-line statements, with no functional changes.

Changes

File(s)	Change Summary
src/frontend/src/components/core/dropdownComponent/index.tsx	Added a configurable "Refresh list" button, reorganized rendering logic, adjusted option and icon layout classes.
src/frontend/src/components/core/parameterRenderComponent/index.tsx	Commented out the RefreshParameterComponent wrapper, now directly returns the rendered component.
src/frontend/tests/core/features/stop-building.spec.ts	Reformatted a chained .getByTestId().click() call into multiple lines for readability.
src/frontend/tests/extended/integrations/chatInputOutputUser-shard-1.spec.ts	Reformatted multiple .getByTestId().click() calls into multi-line statements for improved readability.
src/frontend/tests/extended/regression/general-bugs-truncate-results.spec.ts	Reformatted a chained .getByTestId().click() call into a multi-line statement for readability.

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant DropdownComponent

    User->>DropdownComponent: Open dropdown
    alt hasRefreshButton and no dialog input fields
        DropdownComponent->>User: Display options list
        DropdownComponent->>User: Display "Refresh list" button below options
        User->>DropdownComponent: Click "Refresh list"
        DropdownComponent->>DropdownComponent: handleRefreshButtonPress()
    else hasRefreshButton and dialog input fields
        DropdownComponent->>User: Display custom option dialog with "Refresh list" button
        User->>DropdownComponent: Click "Refresh list"
        DropdownComponent->>DropdownComponent: handleRefreshButtonPress()
    end

Loading

Suggested labels

lgtm, fix for release

✨ Finishing Touches

🧪 Generate Unit Tests

• Create PR with Unit Tests
• Post Copyable Unit Tests in Comment
• Commit Unit Tests in branch lfoss-1414

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>, please review it.
  • Explain this complex logic.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
  • @coderabbitai explain this code block.
  • @coderabbitai modularize this function.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
  • @coderabbitai read src/utils.ts and explain its main purpose.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
  • @coderabbitai help me debug CodeRabbit configuration file.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

• @coderabbitai pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai full review to do a full review from scratch and review all the files again.
• @coderabbitai summary to regenerate the summary of the PR.
• @coderabbitai generate docstrings to generate docstrings for this PR.
• @coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this PR.
• @coderabbitai auto-generate unit tests to generate unit tests for this PR.
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
• @coderabbitai help to get help.

Other keywords and placeholders

• Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbitai anywhere in the PR title to generate the title automatically.

Documentation and Community

• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (3)

src/frontend/src/components/core/parameterRenderComponent/index.tsx (1)

298-310: Commented-out wrapper leaves dead code & may silently drop refresh behaviour

RefreshParameterComponent is now fully bypassed and the JSX has been commented out in-place.

1. If RefreshParameterComponent contained side-effects (e.g. handling refresh_button or analytics), those are now lost — please confirm no functional gap is introduced.
2. Keeping large commented blocks hurts readability; Git already tracks history.

Proposed clean-up:

-      // <RefreshParameterComponent
-      //   templateData={templateData}
-      //   disabled={disabled}
-      //   nodeId={nodeId}
-      //   editNode={editNode}
-      //   nodeClass={nodeClass}
-      //   handleNodeClass={handleNodeClass}
-      //   name={name}
-      // >
       <>{renderComponent()}</>
-      // </RefreshParameterComponent>

If the wrapper is permanently retired, delete it; otherwise gate it behind a prop/feature flag.

src/frontend/src/components/core/dropdownComponent/index.tsx (2)

375-394: Typo in helper render function – rename for clarity & consistency

renderRefeshButton is missing the second “r”.
This typo propagates to every invocation and hurts discoverability.

-const renderRefeshButton = () => (
+const renderRefreshButton = () => (
   …
-      {renderRefeshButton()}
+      {renderRefreshButton()}
   …
-        <CommandGroup>{renderRefeshButton()}</CommandGroup>
+        <CommandGroup>{renderRefreshButton()}</CommandGroup>

Consider extracting the component (<RefreshButton/>) instead of an inline arrow for reusability.

---

534-536: Double refresh button when dialogInputs.fields toggles

Refresh button is rendered both:

1. inside renderCustomOptionDialog() (line 414)
2. in a separate CommandGroup when !dialogInputs?.fields (line 534)

Edge case: when dialogInputs.fields fluctuates (undefined vs empty array) the button could disappear unexpectedly. Ensure the conditions reflect the intended UX.

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 1dbc8d9 and d2a7bc5.

📒 Files selected for processing (5)

• src/frontend/src/components/core/dropdownComponent/index.tsx (8 hunks)
• src/frontend/src/components/core/parameterRenderComponent/index.tsx (1 hunks)
• src/frontend/tests/core/features/stop-building.spec.ts (1 hunks)
• src/frontend/tests/extended/integrations/chatInputOutputUser-shard-1.spec.ts (4 hunks)
• src/frontend/tests/extended/regression/general-bugs-truncate-results.spec.ts (1 hunks)

🧰 Additional context used

🧬 Code Graph Analysis (1)

src/frontend/src/components/core/dropdownComponent/index.tsx (3)

src/frontend/src/components/ui/button.tsx (1)

• Button (133-133)

src/frontend/src/components/common/genericIconComponent/index.tsx (1)

• ForwardedIconComponent (9-135)

src/frontend/src/utils/utils.ts (1)

• cn (36-38)

🔇 Additional comments (9)

src/frontend/tests/extended/regression/general-bugs-truncate-results.spec.ts (1)

37-39: Approve multiline chain formatting
No functional change; splitting the chained calls enhances readability and aligns with existing test conventions.

src/frontend/tests/core/features/stop-building.spec.ts (1)

82-84: Approve multiline chain formatting
This refactor only reflows the chained calls, improving readability without altering behavior.

src/frontend/tests/extended/integrations/chatInputOutputUser-shard-1.spec.ts (5)

106-108: Approve multiline chain formatting
The split-chain style makes the test more readable and consistent with other specs.

---

133-135: Approve multiline chain formatting
Consistent reflow of the chained clicks improves clarity; no change in logic.

---

148-150: Approve multiline chain formatting
Reformatting the chained calls here enhances readability while preserving functionality.

---

152-154: Approve multiline chain formatting
The second reflow in this block follows the same style improvements with no side effects.

---

187-189: Approve multiline chain formatting
No behavioral change; splitting the chain call maintains consistency across tests.

src/frontend/src/components/core/dropdownComponent/index.tsx (2)

96-100: Type safety: ensure hasRefreshButton is part of BaseInputProps

const { helperText, hasRefreshButton } = baseInputProps; relies on hasRefreshButton being present in BaseInputProps.
Double-check that the type definition has been updated; otherwise callers will have to cast any, weakening type safety.

---

447-519: Layout regression risk: check overflow with long metadata + check-icon

ml-auto check-icon container is now nested inside the text block.
When an option has lots of metadata, flex/truncate interplay might push the icon off-screen or overlap. Please verify on narrow viewports and long option names.

No code change suggested — just confirm UX integrity after the refactor.

[Cristhianzl]

can we have tests to validate this?

[mfortman11]

useMemo is no longer needed as it is no longer dependent on the listed dependencies

[Cristhianzl]

lgtm

[Cristhianzl]

lgtm