FIX: Pivot Columns Dropdown Empty on First Render in "More" Menu

[tahierhussain]

What

• Fixed a bug where the Pivot toolbar item's "columns" dropdown appeared empty on first render when accessed from the "More" dropdown menu
• The dropdown would only show values correctly after closing and reopening it

Why

• When toolbar items overflow and are moved into the "More" dropdown, the Pivot component's columns dropdown was showing empty initially
• This was caused by Ant Design's menu prop capturing stale JSX snapshots of React components
• The memoized dropdownMenu object was caching React element references that didn't update when the Pivot component's internal state (pivotColsOptions) changed
• Even though the state was updating correctly, the rendered dropdown menu was showing the old cached component without the updated options

How

• Replaced the menu prop with dropdownRender in the Dropdown component
• Removed the memoized dropdownMenu object entirely
• The dropdownRender function executes at render time, ensuring fresh component instances with current state are rendered each time the dropdown opens
• This gives direct control over rendering instead of relying on Ant Design's internal menu system that was caching stale React elements

Technical Details:

• Changed from: <Dropdown menu={dropdownMenu} /> where dropdownMenu was a memoized object
• Changed to: <Dropdown dropdownRender={() => (...)} /> that renders components fresh on each open
• The render function directly accesses and renders the toolbar item components, ensuring they display with their latest internal state

Can this PR break any existing features. If yes, please list possible items. If no, please explain why. (PS: Admins do not merge the PR without this section filled)

• No, this PR will not break existing features
• The change only affects how the "More" dropdown renders its items - it uses dropdownRender instead of menu prop
• All toolbar items (Filter, Sort, Add Column, Pivot, etc.) continue to work the same way
• When toolbar items are in the main toolbar (not in the dropdown), they are completely unaffected
• The dropdown still shows the same items in the same order with the same functionality
• This is a rendering optimization that ensures components display with fresh state, which is the expected behavior
• No changes to component logic, props, or state management

Database Migrations

• None required

Env Config

• None required

Relevant Docs

• Ant Design Dropdown API - dropdownRender vs menu prop

Related Issues or PRs

• Fixes the bug where Pivot columns dropdown appears empty on first render in "More" menu

Dependencies Versions

• No dependency changes

Notes on Testing

Testing Checklist:

• Pivot toolbar item in "More" dropdown shows populated columns on first open
• Pivot toolbar item in main toolbar (not in dropdown) still works correctly
• Opening/closing the "More" dropdown multiple times works consistently
• Resizing window to move items in/out of "More" dropdown works properly
• All other toolbar items in "More" dropdown function correctly (Filter, Sort, etc.)
• No performance degradation or lag when opening the dropdown

How to Test:

1. Resize the browser window to make the toolbar overflow so Pivot appears in the "More" dropdown
2. Click the "More" button and then click on "Pivot"
3. Verify that the "Columns" dropdown shows the expected column options immediately (not empty)
4. Test with different datasets to ensure columns populate correctly
5. Verify other toolbar items in the dropdown continue to work as expected

Screenshots

Checklist

I have read and understood the Contribution Guidelines.

[greptile-apps]

Greptile Summary

This PR fixes a stale-render bug where the Pivot toolbar item's "columns" dropdown appeared empty on first open when accessed via the "More" overflow menu. The fix replaces AntD's menu prop (which cached stale JSX snapshots) with dropdownRender backed by a useCallback, and adds custom CSS classes to replace previously flagged internal AntD class dependencies — both directly addressing the three concerns from the previous review round.

Confidence Score: 5/5

Safe to merge — the fix is correct and all three prior review concerns have been addressed.

All remaining findings are P2 style/cleanup suggestions (dead CSS). No logic, correctness, or security issues remain. The useCallback memoization is wired correctly, custom CSS classes replace internal AntD class dependencies, and the dropdownRender approach reliably delivers fresh component instances on each open.

no-code-toolbar.css — lines 68–84 contain dead selectors that target AntD's internal menu DOM structure, which is no longer rendered with the new dropdownRender approach.

Vulnerabilities

No security concerns identified.

Important Files Changed

Filename	Overview
frontend/src/ide/editor/no-code-toolbar/no-code-toolbar.jsx	Replaces memoized dropdownMenu object + menu prop with a useCallback-wrapped dropdownRender function; correctly addresses all three prior review concerns (stale render, missing memoization, internal AntD class names).
frontend/src/ide/editor/no-code-toolbar/no-code-toolbar.css	Adds .no-code-toolbar-more-menu and .no-code-toolbar-more-item custom classes; however, pre-existing selectors targeting .ant-dropdown-menu and .ant-dropdown-menu-item (lines 68–84) are now dead code since dropdownRender bypasses AntD's menu DOM structure entirely.

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart TD
    A[NoCodeToolbar renders] --> B{Overflow?}
    B -- No --> C[All items visible in toolbar]
    B -- Yes --> D[Hidden items tracked in hiddenItems state]
    D --> E[renderMoreDropdown memoized via useCallback\ndeps: hiddenItems, items]
    E --> F[User clicks More button]
    F --> G[Dropdown opens\nAntD calls dropdownRender]
    G --> H[renderMoreDropdown executes fresh\nreads latest items + hiddenItems]
    H --> I[Renders div.no-code-toolbar-more-menu\nwith fresh component instances]
    I --> J[Pivot and other toolbar components\nmount fresh — state initialises correctly]
    J --> K[Columns dropdown shows populated options ✓]

Loading

Prompt To Fix All With AI

This is a comment left during a code review.
Path: frontend/src/ide/editor/no-code-toolbar/no-code-toolbar.css
Line: 68-84

Comment:
**Dead CSS selectors after migration to `dropdownRender`**

Now that the `Dropdown` uses `dropdownRender` instead of `menu`, AntD no longer injects an `.ant-dropdown-menu` / `.ant-dropdown-menu-item` DOM structure inside the overlay. The three rules below are unreachable and can be removed in a follow-up to keep the stylesheet tidy:

```
.no-code-toolbar-dropdown .ant-dropdown-menu          /* line 68 */
.no-code-toolbar-dropdown .ant-dropdown-menu-item     /* line 77 */
.no-code-toolbar-dropdown .ant-dropdown-menu-item:hover /* line 83 */
```

The replacement selectors (`.no-code-toolbar-more-menu` / `.no-code-toolbar-more-item`) correctly cover the new structure.

How can I resolve this? If you propose a fix, please make it concise.

_{Reviews (2): Last reviewed commit: "fix: use custom classes and memoize drop..." | Re-trigger Greptile}

[abhizipstack]

LGTM