feat: add new segmented sidebar

[mfortman11]

Testing checklist

• Turn on the ENABLE_NEW_SIDEBAR FF and make sure the old view still looks intact
• Make sure all components you expect are present
• Search
• Force empty states in search and w/ MCP
• Add mcp servers and add the component and ensure it looks as expected in the canvas

How MCP search works:
Adds a copy of the MCP component w/ a new searchable field containing the server name

Summary by CodeRabbit

• New Features

  • Introduces a segmented sidebar with icon navigation (Search, Components, Bundles, MCP) that remembers the last active section.
  • Adds an MCP sidebar group with server listing, loading/empty states, drag-and-drop items, and quick actions: Add MCP Server and Manage Servers.
  • Integrates a global search context with focus-on-search from the nav.

• UI/UX

  • Updated MCP icon; refined button/icon sizing and colors; new segmented sidebar layout and width behavior.
  • Streamlined sidebar header with optional filter and a component settings trigger.

• Tests

  • Adds coverage for the segmented navigation and settings trigger.

[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

Introduces a segmented sidebar variant with section state persisted in cookies, a new search context/provider, MCP sidebar integration, and updated FlowPage wiring. Adds segmented nav UI and tests, MCP icon update, configuration triggers, footer MCP actions, and presentational class tweaks. Extends SidebarProvider and related components’ public APIs.

Changes

Cohort / File(s)	Summary
Sidebar infrastructure & theming src/frontend/src/components/ui/sidebar.tsx, src/frontend/src/App.css, src/frontend/src/customization/feature-flags.ts	Adds segmented sidebar support, section cookie persistence, new SidebarSection type, extended SidebarProvider/SidebarContent props, and applies new CSS class/variables. Adds ENABLE_NEW_SIDEBAR flag. Adds .sidebar-segmented CSS utility.
Segmented navigation UI & trigger integration src/frontend/src/pages/FlowPage/components/flowSidebarComponent/components/sidebarSegmentedNav.tsx, src/frontend/src/pages/FlowPage/components/PageComponent/MemoizedComponents.tsx, src/frontend/src/pages/FlowPage/components/flowSidebarComponent/components/__tests__/sidebarSegmentedNav.test.tsx	Introduces icon-only vertical nav (NAV_ITEMS), active/hover/focus behavior, search focus logic, and tests. MemoizedSidebarTrigger switches to segmented nav under feature flag with per-section activation.
FlowSidebar refactor: search context + MCP src/frontend/src/pages/FlowPage/components/flowSidebarComponent/index.tsx, src/frontend/src/pages/FlowPage/index.tsx	Adds FlowSearchProvider/SearchContext hooks; refactors FlowSidebar to use context-driven search; integrates MCP server data; gates sections by active section; wraps FlowPage with providers and enables segmentedSidebar via feature flag.
Sidebar header, categories, bundles UI src/frontend/src/pages/FlowPage/components/flowSidebarComponent/components/sidebarHeader.tsx, src/frontend/src/pages/FlowPage/components/flowSidebarComponent/components/categoryGroup.tsx, src/frontend/src/pages/FlowPage/components/flowSidebarComponent/components/sidebarBundles.tsx, src/frontend/src/pages/FlowPage/components/flowSidebarComponent/types/index.ts	Simplifies header, expands SearchInput props, adds optional filter component. CategoryGroup now shows label + SearchConfigTrigger; excludes MCP from components list. Bundles adds optional SearchConfigTrigger. Types updated with showConfig/setShowConfig props.
MCP sidebar group src/frontend/src/pages/FlowPage/components/flowSidebarComponent/components/McpSidebarGroup.tsx	New MCP section: conditional rendering, loading/empty states, draggable MCP items, optional config trigger, and add-server modal wiring. Default export component added.
Config trigger component + tests src/frontend/src/pages/FlowPage/components/flowSidebarComponent/components/searchConfigTrigger.tsx, src/frontend/src/pages/FlowPage/components/flowSidebarComponent/components/__tests__/searchConfigTrigger.test.tsx	New SearchConfigTrigger button with tooltip toggling showConfig; comprehensive tests for rendering, variants, and interactions.
Sidebar footer actions src/frontend/src/pages/FlowPage/components/flowSidebarComponent/components/sidebarFooterButtons.tsx	Replaces store link with MCP actions when active section is MCP: add server (modal) and manage servers; retains “New Custom Component” otherwise. Removes hasStore prop.
Icon and presentational tweaks src/frontend/src/icons/MCP/McpIcon.jsx, src/frontend/src/components/core/canvasControlsComponent/index.tsx	Updates MCP icon SVG (24x24, currentColor, accessibility title). Adjusts canvas controls classes (text/icon sizing, removes fill/stroke inheritance).

Sequence Diagram(s)

sequenceDiagram
  autonumber
  actor U as User
  participant SN as SidebarSegmentedNav
  participant SP as SidebarProvider
  participant SC as SearchContext
  participant CK as Cookie (sidebar-section)

  U->>SN: Click nav item (id)
  SN->>SP: get {activeSection, open, toggleSidebar, setActiveSection}
  alt clicked == activeSection and open
    SN->>SP: toggleSidebar()
  else clicked != activeSection or !open
    SN->>SP: setActiveSection(id)
    SP->>CK: Write SIDEBAR_SECTION_COOKIE_NAME=id
    opt Sidebar closed
      SN->>SP: toggleSidebar() (open)
    end
    alt id == "search"
      SN-->>SC: focusSearch() (delayed)
    end
  end

Loading

sequenceDiagram
  participant FP as FlowPage
  participant SP as SidebarProvider (segmented)
  participant FSP as FlowSearchProvider
  participant FS as FlowSidebarComponent
  participant MCP as useGetMCPServers

  FP->>SP: Provide {segmentedSidebar: ENABLE_NEW_SIDEBAR}
  SP->>FSP: Wrap children with sidebar context
  FSP->>FS: Provide search context
  FS->>MCP: Fetch MCP servers (if ENABLE_NEW_SIDEBAR)
  MCP-->>FS: {servers, loading, error}
  FS->>FS: Render sections by activeSection (components/bundles/mcp)

Loading

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~60 minutes

Possibly related PRs

• feat: add servers persistence to MCP connection component, add MCP connections settings page #8388 — Similar segmented sidebar and MCP-related UI/hooks; overlaps in SidebarSection, feature flag, and sidebar components.
• refactor: Update icon dark mode comparison #9060 — Touches the MCP icon component; this PR also replaces the MCP SVG and color handling.
• fix: remove duplicate embeddings category, refactor render code #9446 — Modifies sidebar bundles rendering; this PR updates sidebarBundles.tsx header/trigger behavior.

Suggested labels

size:XXL, javascript, lgtm

Suggested reviewers

• ogabrielluiz
• deon-sanchez
• edwinjosechittilappilly
• lucaseduoli

✨ Finishing Touches

🧪 Generate unit tests

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch segmented-side-bar

---

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.
  • 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.
• 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 the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.

Support

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

CodeRabbit Commands (Invoked using PR/Issue comments)

Type @coderabbitai help to get the list of available commands.

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.

Status, Documentation and Community

• Visit our Status Page to check the current availability of CodeRabbit.
• 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.

[github-actions]

Frontend Unit Test Coverage Report

Coverage Summary

Lines	Statements	Branches	Functions
	6.47% (1680/25935)	3.51% (690/19625)	3.47% (194/5584)

Unit Test Results

Tests	Skipped	Failures	Errors	Time
682	0 💤	0 ❌	0 🔥	12.338s ⏱️

[codecov]

Codecov Report

❌ Patch coverage is 43.49315% with 165 lines in your changes missing coverage. Please review.
✅ Project coverage is 34.68%. Comparing base (933198d) to head (36b6520).
⚠️ Report is 1 commits behind head on main.

Files with missing lines	Patch %	Lines
...FlowPage/components/flowSidebarComponent/index.tsx	0.00%	105 Missing ⚠️
src/frontend/src/components/ui/sidebar.tsx	0.00%	33 Missing ⚠️
...re/canvasControlsComponent/CanvasControlButton.tsx	0.00%	15 Missing ⚠️
...ge/components/PageComponent/MemoizedComponents.tsx	73.68%	1 Missing and 4 partials ⚠️
src/frontend/src/pages/FlowPage/index.tsx	0.00%	3 Missing ⚠️
...lowSidebarComponent/components/McpSidebarGroup.tsx	96.07%	0 Missing and 2 partials ⚠️
.../flowSidebarComponent/components/sidebarHeader.tsx	75.00%	0 Missing and 1 partial ⚠️
...idebarComponent/components/sidebarSegmentedNav.tsx	95.23%	0 Missing and 1 partial ⚠️

❌ Your project status has failed because the head coverage (5.81%) is below the target coverage (10.00%). You can increase the head coverage or adjust the target coverage.

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #9355      +/-   ##
==========================================
+ Coverage   34.65%   34.68%   +0.03%     
==========================================
  Files        1203     1207       +4     
  Lines       56717    56963     +246     
  Branches     5352     5419      +67     
==========================================
+ Hits        19655    19759     +104     
- Misses      36925    37060     +135     
- Partials      137      144       +7     

Flag	Coverage Δ
frontend	5.81% <43.49%> (+0.37%)	⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

Files with missing lines	Coverage Δ
src/frontend/src/customization/feature-flags.ts	100.00% <100.00%> (ø)
.../flowSidebarComponent/components/categoryGroup.tsx	94.44% <100.00%> (+0.89%)	⬆️
...debarComponent/components/emptySearchComponent.tsx	100.00% <100.00%> (ø)
...idebarComponent/components/searchConfigTrigger.tsx	100.00% <100.00%> (ø)
...flowSidebarComponent/components/sidebarBundles.tsx	100.00% <100.00%> (ø)
...debarComponent/components/sidebarFooterButtons.tsx	100.00% <100.00%> (ø)
.../flowSidebarComponent/components/sidebarHeader.tsx	91.42% <75.00%> (-2.33%)	⬇️
...idebarComponent/components/sidebarSegmentedNav.tsx	95.23% <95.23%> (ø)
...lowSidebarComponent/components/McpSidebarGroup.tsx	96.07% <96.07%> (ø)
src/frontend/src/pages/FlowPage/index.tsx	0.00% <0.00%> (ø)
... and 4 more

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[sonarqubecloud]

Quality Gate passed

Issues
7 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud